Android：带有自定义可绘制对象的 SeekBar

Question

我有带有自定义可绘制对象的 SeekBar。 Progress 元素并没有完全从左侧呈现，而是移到了右侧。我怎样才能避免这种情况？

 <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"/>

搜索栏.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>

编辑：

如评论中所述，如果两个宽度相同，问题就会消失。但是我需要通过 drawable 使它具有两种不同的宽度，这可能吗？也许有不同的形状而不仅仅是线条？

原文由 Michal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我无法解释为什么在绘制笔划时会出现这个问题，我认为这与笔划宽度有关，但我还没有找到来源来验证。

修复叠加层

要解决手头的问题，您只需在左侧设置 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>

原文由 David Medenjak 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

观察

当您使用 shape drawable 创建一条线时，它会使左右填充（从使用此 drawable 的视图来看）等于其笔划宽度的一半。

解决方法

您需要用可绘制的插图包裹您的 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 -->

2.您可以将主题设置为您的视图，使用不同颜色的 android 风格作为-

 <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" />

这是输出-

原文由 Sanjeet A 发布，翻译遵循 CC BY-SA 3.0 许可协议