web-dev-qa-db-ja.com

カスタムSeekBarドローアブルAndroid

デフォルトのAndroid seekbar to：

enter image description here

9つのパッチ画像を読み、6つのPNG画像を作成しました。最初の3つは、以下に示すように、灰色のプログレスバー（progressDrawable）用です。

  1. 右の画像

    enter image description here

  2. 中央の画像

    enter image description here

  3. 左の画像

    enter image description here

結果は次のようになります。

enter image description here

青い画像は進行状況を表しており、次のとおりです。

  1. 右の画像

    enter image description here

  2. 中央の画像

    enter image description here

  3. 左の画像

    enter image description here

そして親指は次のとおりです：

enter image description here

私の質問は、最初の画像とまったく同じように9つのパッチイメージを使用してカスタムシークバーを生成するにはどうすればよいですか？これをシークバーに適用するにはどうすればよいですか？

androidseekbar
13
Dimitri

複雑にすべきではないと思います。ニーズを満たすために6つの画像を作成する必要はありません。背景、進行状況用に2つの9パッチを作成するだけです。そしてthumb.png。ここにあなたのXMLがあります：

<SeekBar
  Android:id="@+id/my_seekbar"
  Android:layout_width="wrap_content"
  Android:layout_height="wrap_content"
  Android:progressDrawable="@drawable/seekbar_progress"
  Android:thumb="@drawable/thumb">

あなたのseekbar_progress：

 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >

<item Android:id="@Android:id/background">
    <nine-patch Android:src="@drawable/progressbar_bg" Android:dither="true"/>
</item>
<item Android:id="@Android:id/progress">
    <clip xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:clipOrientation="horizontal"
        Android:gravity="left">
        <nine-patch Android:src="@drawable/progressbar_status" Android:dither="true"/>
    </clip>
 </item>
</layer-list>

作成時にthumbの上部に空白スペースを入れて、希望どおりに見えるようにしてください。お役に立てれば。

16
boburShox

Javaコード...を使用してカスタムシークバーを使用し、レイヤーリストをドロウアブルとして追加できます...このコードは、私が期待する助けになります。

1.LayerListドローアブル

<layer-list 
    xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item 
        Android:id="@Android:id/background">
        <nine-patch 
            Android:src="@drawable/your_nine_patch_image"
            Android:tileMode="repeat">
        </nine-patch>
    </item>
    <item 
        Android:id="@Android:id/progress">
        <layer-list 
            xmlns:Android="http://schemas.Android.com/apk/res/Android" >
            <item>
                <clip >
                    <bitmap 
                        xmlns:Android="http://schemas.Android.com/apk/res/Android"
                        Android:src="@drawable/clipimage_for_progress"
                        Android:tileMode="repeat"/>
                </clip>
            </item>
        </layer-list>
    </item>
</layer-list>

これはcustomSeekbarクラスになり、アプリでこのカスタムシークバーを使用できます

public class CustomSeekbar {
    public CustomSeekbar(Context context) {
        super(context);
        setCustomUI();
    }

    public CustomSeekbar(Context context, AttributeSet attrs) {
        super(context, attrs);
        setCustomUI();
    }

    public CustomSeekbar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setCustomUI();
    }

    void setCustomUI() {

        this.setProgressDrawable(getResources().getDrawable(
                R.drawable.yourBackground));
    }
}
8
Sreedev R

1）AndroidSDK-> toolsに移動し、draw9patch.batを実行します

黒いウィンドウが表示されます

2）画像をウィンドウにドラッグし、9パッチを開始します。

あなたの写真の周りにパッチを開始

3）[ファイル]メニューに移動し、[9パッチの保存]をクリックします...

最後のヒント：画像は.PNG形式である必要があり、その周囲に空き領域ではなくコンテンツのみが含まれます。たとえば、コンピューターに画像を保存しましたが、画像の青い部分の下に未使用のスペースがたくさんあることがわかりました。

今シークバーに適用します：

リンクもたどってください

カスタムスライドバーの作成

ごめんなさい。画像を挿入するのに十分な評判がありません

1
mohammad jannesary