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

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>

修改

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

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>

Answer 2

<强>观察

使用shape drawable创建一条线时，它会留下左右边距（从使用此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>

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

这是输出 -

Answer 3

因为它似乎正在进行中，我认为它们都应该是相同的宽度

但您正在进行宽度= 4 android:width="4dp"

和搜索栏宽度= 2 android:width="2dp"

将它们匹配为2或4不要使用不同的值

Answer 4

尝试使用宽度为4dp的.9.png drawable（转换为px）。

保持1 dp的顶部和底部透明。

并为背景的中心2 dp添加颜色。

这样，背景和进度的宽度都相同，但背景看起来比进度条更薄。

Answer 5

尝试这样使用 <li class="tablink rafters_btn_open"><a>RAFTER POPUP TAB</a></li> <li class="tablink postseason_btn_open"><a>POSTSEASON POPUP TAB</a></li> <li class="tablink alpha_btn_open"><a>ALPHA POPUP TAB</a></li> <li class="tablink hof_btn_open"><a>HOF POPUP TAB</a></li> $('.tablink').one('click',function(){ $.get('http://mysite.page2.com', function (data) { $(data).find('#rafters').appendTo('#rafters_btn'); $(data).find('#hof').appendTo('#hof_btn'); $(data).find('#alphacup').appendTo('#alpha_btn'); $(data).find('#postseason').appendTo('#postseason_btn'); }); }); <div id="rafters_btn"></div> <div id="hof_btn"></div> <div id="alpha_btn"></div> <div id="postseason_btn"></div> 或android:layout_marginLeft="-3dp"

-2dp

Answer 6

如果您的颜色选择有限制并且是预定义的。您可以尝试使用不同的主题添加带有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);

Android：SeekBar与自定义drawable

6 个答案:

修复叠加层