web-dev-qa-db-ja.com

カスタムシークバー（サムサイズ、色、背景）

私のAndroidプロジェクトにこのシークバーを追加したいと思います： enter image description here

これは私のシークバーです：

<SeekBar
        Android:id="@+id/seekBar_luminosite"
        Android:layout_width="@dimen/seekbar_width"
        Android:layout_height="@dimen/seekbar_height"
        Android:minHeight="15dp"
        Android:minWidth="15dp"
        Android:maxHeight="15dp"
        Android:maxWidth="15dp"
        Android:progress="@integer/luminosite_defaut"
        Android:progressDrawable="@drawable/custom_seekbar"
        Android:thumb="@drawable/custom_thumb" />

これは私のcustom_thumb.xmlです：

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="oval" >

    <gradient
        Android:angle="270"
        Android:endColor="@color/colorDekraOrange"
        Android:startColor="@color/colorDekraOrange" />

    <size
        Android:height="35dp"
        Android:width="35dp" />

</shape>

これは私のcustom_seekbar.xmlです：

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >

    <item
        Android:id="@Android:id/background"
        Android:drawable="@drawable/seekbar"/>
    <item Android:id="@Android:id/progress">
        <clip Android:drawable="@color/colorDekraYellow" />
    </item>

</layer-list>

これは私のseekbar.png（背景）です：

enter image description here

そして、これが結果です： enter image description here

バーには影も丸い境界線もありません...

どうすればいいかわからない。

androidseekbar
46
user6299584

  • まず、親指の透明度の問題にAndroid:splitTrack="false"を使用します。

  • Seekbar.pngの場合、9パッチを使用する必要があります。丸みを帯びた境界線と画像の影に適しています。

46
Jéwôm'

すべてXML（.png画像なし）で行われます。賢いビットはborder_shadow.xmlです。

最近のvectorsについて...

スクリーンショット：

seekbar
これはあなたのSeekBar（res/layout/???.xml）です：

シークバー

<SeekBar
    Android:id="@+id/seekBar_luminosite"
    Android:layout_width="300dp"
    Android:layout_height="wrap_content"        
    Android:progress="@integer/luminosite_defaut"
    Android:progressDrawable="@drawable/seekbar_style"
    Android:thumb="@drawable/custom_thumb"/>

stylishにしてみましょう（後で簡単にカスタマイズできます）：

スタイル

res/drawable/seekbar_style.xml：

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

    <item 
        Android:id="@Android:id/progress" > 
        <clip 
            Android:drawable="@drawable/seekbar_progress" />
    </item>
</layer-list>

親指

res/drawable/custom_thumb.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
        <shape Android:shape="oval">
            <solid Android:color="@color/colorDekraOrange"/>
            <size
                Android:width="35dp"
                Android:height="35dp"/>
        </shape>
    </item>   
</layer-list>

進捗

res/drawable/seekbar_progress.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list 
    xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item 
        Android:id="@+id/progressshape" >
        <clip>
            <shape 
                Android:shape="rectangle" >
                <size Android:height="5dp"/>
                <corners 
                    Android:radius="5dp" />
                <solid Android:color="@color/colorDekraYellow"/>        
            </shape>
        </clip>
    </item>
</layer-list>

影

res/drawable/border_shadow.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">       
    <item>      
        <shape> 
            <corners 
                Android:radius="5dp" />
            <gradient
                Android:angle="270"
                Android:startColor="#33000000"
                Android:centerColor="#11000000"
                Android:endColor="#11000000"
                Android:centerY="0.2"
                Android:type="linear"
            />          
        </shape> 
    </item>
</layer-list>
83
Jon Goodwin

バーに影と丸い境界線はありません

画像を使用しているので、最も簡単な解決策はフローでボートをrowぐことです。

手動で高さを指定することはできません

  • 最も簡単な方法は、SeekBarにAndroid:layout_height="wrap_content"を使用することです
  • より明確な丸い境界線を取得するには、別の色で使用したのと同じ画像を簡単に使用できます。

Photoshopは苦手ですが、テスト用に背景を編集することができました

seekbar_brown seekbar_brown_to_show_progress.png

<SeekBar
    Android:splitTrack="false"   // for unwanted white space in thumb
    Android:id="@+id/seekBar_luminosite"
    Android:layout_width="250dp"   // use your own size
    Android:layout_height="wrap_content"
    Android:minHeight="10dp"
    Android:minWidth="15dp"
    Android:maxHeight="15dp"
    Android:maxWidth="15dp"
    Android:progress="50"
    Android:progressDrawable="@drawable/custom_seekbar_progress"
    Android:thumb="@drawable/custom_thumb" />

custom_seekbar_progress.xml

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item
        Android:id="@Android:id/background"
        Android:drawable="@drawable/seekbar" />
    <item Android:id="@Android:id/progress">
        <clip Android:drawable="@drawable/seekbar_brown_to_show_progress" />
    </item>
</layer-list>

custom_thumb.xmlはあなたのものと同じです

最後に、Android:splitTrack="false"は親指の不要な空白を削除します

出力を見てみましょう：

enter image description here

11
Charuක

最初は礼儀として@ Charukaに行きます。

行う

Android:progressDrawable="@drawable/seekbar"の代わりにAndroid:background="@drawable/seekbar"を使用できます。

progressDrawable進行モードに使用されます。

試してみてください

Android：minHeight

ビューの最小の高さを定義します。ビューがこの最小高さを達成できることは保証されません（たとえば、親レイアウトが使用可能な高さを制限する場合）。

Android：minWidth

ビューの最小幅を定義します。ビューがこの最小幅を達成できるかどうかは保証されません（たとえば、親レイアウトが使用可能な幅を狭くして制約する場合）

    Android:minHeight="25p"
    Android:maxHeight="25dp"

FYI：

Android：minHeightとAndroid：maxHeightを使用するのは良い解決策ではありません。Custom Seekbar（From Class Level）を修正する必要があります.

7
IntelliJ Amiya

AndroidカスタムSeekBar-カスタムトラックまたはプログレス、形状、サイズ、背景、サム、その他のシークバーのカスタマイズについては、 http://www.zoftino.com/Android-seekbar-and-custom-seekbar-examples を参照してください

カスタムトラックドローアブル

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:id="@Android:id/background"
        Android:gravity="center_vertical|fill_horizontal">
        <shape Android:shape="rectangle"
            Android:tint="#ffd600">
            <corners Android:radius="8dp"/>
            <size Android:height="30dp" />
            <solid Android:color="#ffd600" />
        </shape>
    </item>
    <item Android:id="@Android:id/progress"
        Android:gravity="center_vertical|fill_horizontal">
        <scale Android:scaleWidth="100%">
            <selector>
                <item Android:state_enabled="false"
                    Android:drawable="@Android:color/transparent" />
                <item>
                    <shape Android:shape="rectangle"
                        Android:tint="#f50057">
                        <corners Android:radius="8dp"/>
                        <size Android:height="30dp" />
                        <solid Android:color="#f50057" />
                    </shape>
                </item>
            </selector>
        </scale>
    </item>
</layer-list>

カスタムサムドロウアブル

?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle"
    Android:thickness="4dp"
    Android:useLevel="false"
    Android:tint="#ad1457">
    <solid
        Android:color="#ad1457" />
    <size
        Android:width="32dp"
        Android:height="32dp" />
</shape>

出力

enter image description here

7
Arnav Rao

色合いを使用します;）

<SeekBar
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:minHeight="15dp"
        Android:minWidth="15dp"
        Android:maxHeight="15dp"
        Android:maxWidth="15dp"
        Android:progress="20"
        Android:thumbTint="@color/colorPrimaryDark"
        Android:progressTint="@color/colorPrimary"/>

thumbTintおよびprogressTintで必要な色を使用します。はるかに高速です！ :)

Android:progressDrawable="@drawable/seekbar"と組み合わせて使用​​できるofcの編集

2
Raphau

Android：minHeight Android：maxHeightはそのために重要です。

<SeekBar
    Android:id="@+id/pb"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:maxHeight="2dp"
    Android:minHeight="2dp"
    Android:progressDrawable="@drawable/seekbar_bg"
    Android:thumb="@drawable/seekbar_thumb"
    Android:max="100"
    Android:progress="50"/>

seekbar_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:id="@Android:id/background">
        <shape>
            <corners Android:radius="3dp" />
            <solid Android:color="#ECF0F1" />
        </shape>
    </item>
    <item Android:id="@Android:id/secondaryProgress">
        <clip>
            <shape>
                <corners Android:radius="3dp" />
                <solid Android:color="#C6CACE" />
            </shape>
        </clip>
    </item>
    <item Android:id="@Android:id/progress">
        <clip>
            <shape>
                <corners Android:radius="3dp" />
                <solid Android:color="#16BC5C" />
            </shape>
        </clip>
    </item>
</layer-list>

seekbar_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="oval">
    <solid Android:color="#16BC5C" />
    <stroke
        Android:width="1dp"
        Android:color="#16BC5C" />
    <size
        Android:height="20dp"
        Android:width="20dp" />
</shape>
1
lingyfh

シークバーの代わりにプログレスバーを試すことができます

<ProgressBar
    Android:id="@+id/progressBar"
    style="?android:attr/progressBarStyleHorizontal"
    Android:layout_width="fill_parent"
    Android:layout_height="50dp"
    Android:layout_marginBottom="35dp"
    />
0
emme