android - カスタム SeekBar Drawable Android

Question

デフォルトの Android シークバーを次のようにパーソナライズしたいと考えています。

9枚ほどのパッチ画像を読み込み、6枚のpng画像を作成しました。以下に示すように、最初の 3 つは灰色の進行状況バー (progressDrawable) 用です。

1. 右の画像

   

2. 中央の画像

   

3. 左画像

   

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

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

1. 右の画像

   

2. 中央の画像

   

3. 左画像

   

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

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

Answer 1

複雑であってはならないと思います。ニーズを満たすために 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必要に応じて作成するときは、上部に空白スペースが必要であることを忘れないでください。お役に立てれば。

Answer 2

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));
    }
}

Answer 3

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

黒い窓が見えます

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

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

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

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

今あなたのシークバーに適用してください：

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

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

申し訳ありません; 画像を挿入するのに十分な評判がありません