web-dev-qa-db-ja.com

Android：カスタムドローアブルを備えたSeekBar

カスタムドロウアブルを備えたSeekBarがあります。進行要素は左側から正確にレンダリングされませんが、右側に移動します。どうすればこれを回避できますか？

enter image description here

<SeekBar
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_below="@Android:id/summary"
    Android:background="@null"

    Android:progressDrawable="@drawable/seekbar"
    Android:thumb="@drawable/seekbar_thumb"/>

seekbar.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/seekbar_background"/>
    <item Android:id="@Android:id/progress">
        <clip Android:drawable="@drawable/seekbar_progress" />
    </item>

</layer-list>

seekbar_background.xml

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

    <stroke Android:width="2dp" Android:color="@color/colorNeutral" />

</shape>

seekbar_progress.xml

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

    <stroke
        Android:width="4dp"
        Android:color="@color/colorAccentDark" />
</shape>

編集：

コメントで述べたように、両方の幅がある場合、同じ問題は消えます。しかし、ドロアブルを介して2つの異なる幅で作成する必要がありますか？たぶん、線だけでなく、さまざまな形がありますか？

androidandroid-layoutandroid-seekbarandroid-custom-drawable
24
Michal

なぜこれがストロークを描くときに問題になるのか説明できません。それはストロークの幅と関係があると思いますが、検証するソースがまだ見つかりませんでした。

オーバーレイの修正

当面の問題を取り除くには、左側にinsetを設定するだけです。 1dpまたは2dpの値が機能し、シークバーが適切に描画されます。

注：このアプローチを使用すると、いずれの場合も親指がオーバーレイして非表示になるため、背景が短すぎて低い進行値で表示されないというリスクはありません。

<?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/seekbar_background"
        Android:left="2dp"><!-- or 1dp -->
    </item>
    <item Android:id="@Android:id/progress">
        <clip Android:drawable="@drawable/seekbar_progress"/>
    </item>
</layer-list>
15
David Medenjak

観察

シェイプドロウアブルを使用して線を作成すると、ストローク幅の半分に等しい（このドロウアブルが使用されているビューから）左右のパディングが残されます。

回避策

Progress_backgroundをインセットドロウアブルでラップし、それをプログレスバックグラウンドとして設定する必要があります。インセットは次のようになります

inset_seekbar_background.xml

<inset xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:drawable="@drawable/seekbar_progress"
    Android:insetLeft="2dp"
    Android:insetRight="2dp" />

最終的なseekbar.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/inset_seekbar_background"/>
    <item Android:id="@Android:id/progress">
        <clip Android:drawable="@drawable/seekbar_progress" />
    </item>

</layer-list>

代替

1.デフォルトのマテリアルデザインで行われているように、ラインに9パスイメージを使用できます。

<?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/abc_scrubber_primary_mtrl_alpha" />
    <item Android:id="@Android:id/secondaryProgress">
        <scale Android:scaleWidth="100%">
            <selector>
                <item Android:state_enabled="false">
                    <color Android:color="@Android:color/transparent" />
                </item>
                <item Android:drawable="@drawable/abc_scrubber_primary_mtrl_alpha" />
            </selector>
        </scale>
    </item>
    <item Android:id="@Android:id/progress">
        <scale Android:scaleWidth="100%">
            <selector>
                <item Android:state_enabled="true">
                    <color Android:color="@Android:color/transparent" />
                </item>
                <item Android:drawable="@drawable/abc_scrubber_primary_mtrl_alpha" />
            </selector>
        </scale>
    </item>
</layer-list><!-- From: file:/usr/local/google/buildbot/src/googleplex-Android/mnc-supportlib-release/frameworks/support/v7/appcompat/res/drawable/abc_seekbar_track_material.xml -->

enter image description hereenter image description hereenter image description hereenter image description here

2。Android style as-

<style name="AppTheme.SeekBar">
        <item name="colorPrimary">@color/colorAccent</item>
        <item name="colorPrimaryDark">@color/colorPrimary</item>
        <item name="colorAccent">@color/colorPrimaryDark</item>
</style>

ここでは、Seekbarsのオプションをすべて使用しました。

            <SeekBar 
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:theme="@style/AppTheme.SeekBar" />

            <SeekBar
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content" />

            <SeekBar
                Android:layerType="software"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:progressDrawable="@drawable/seekbar" />

そして、ここに出力があります- enter image description here

7
Sanjeet A

幅4dp（pxに変換）の.9.pngドロアブルを使用してみてください。

上下で1 dpを透明に保ちます。

そして、背景に選択した中央の2 dpに色を追加します。

これにより、背景と進行状況は同じ幅になりますが、背景は進行状況バーよりも薄く見えます。

3
Arnab Jain

進行中の問題が表示されるので、両方とも同じ幅にする必要があると思います

しかし、進行中は幅= 4 Android:width="4dp"

シークバーの幅= 2 Android:width="2dp"

2または4になるように一致させて、異なる値を使用しないでください

3
Mina Fawzy

Android:layout_marginLeft="-3dp"または-2dpを使用してこのようにしてみてください

<SeekBar
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_below="@Android:id/summary"
    Android:background="@null"
    Android:layout_marginLeft="-2dp"
    Android:progressDrawable="@drawable/seekbar"
    Android:thumb="@drawable/seekbar_thumb"/>`
2
SudheeR Bolla

色の選択に制限があり、事前に定義されている場合。さまざまなテーマを使用して、SeekbarsでXMLファイルを追加しようとすることができます。

このようなもの：

themed_seekbar_one.xml

<?xml version="1.0" encoding="utf-8"?>
<SeekBar
    ...
    Android:theme="@style/first_theme">
</SeekBar>

themed_seekbar_two.xml

<?xml version="1.0" encoding="utf-8"?>
<SeekBar
    ...
    Android:theme="@style/second_theme">
</SeekBar>

その後、次のようにプログラムでビューをインフレートできます。

SeekBar seekbar = (SeekBar)getLayoutInflater().inflate(R.layout.themed_seekbar_xxx, null);
2
user5156016