Seekbar拇指,左右两侧的填充/边距透明

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Seekbar拇指,左右两侧的填充/边距透明相关的知识,希望对你有一定的参考价值。

总结问题:

您好,我想在设计中创建像这样的Seekbar:

enter image description here

因此,拇指在左右两侧都有填充/边距,两侧的圆角都是圆形的。

到目前为止我尝试过的:

我已经尝试过创建这样的缩略图:

enter image description here

不幸的是,我无法使用这张图片,因为我需要以编程方式在绿色点周围更改此黑色光晕。

这就是为什么我完全用XML构建了搜索栏(没有png图像的原因:

Seekbar:

        <SeekBar
            android:id="@+id/player_seekbar"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            style="@style/SeekBarPlayer"
            local:MvxBind="Max Duration; Progress SliderPosition, Mode=OneWay; SecondaryProgress Downloaded; Visibility(LivePlaybackToVisibility(CurrentTrack))"
            android:layout_marginTop="16dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/cardView" />

SeekbarBackground:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape>
      <corners android:radius="5dp" />
      <solid android:color="#3d4b58" />
    </shape>
  </item>
</layer-list>

SeekbarSecondaryProgress:

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

SeekbarProgress:

<?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="#83e76b"/>
      </shape>
    </clip>
  </item>
</layer-list>

它为我提供了这样的搜索栏:

enter image description here

摘要

从现在开始如何实现以下搜索栏设计?

enter image description here

答案

使用以下代码绘制缩略图:seekbar_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#8883e76b"/>
            <stroke android:color="@color/black" android:width="3dp"/>
            <size android:height="30dp" android:width="30dp"/>
        </shape>
    </item>
</selector>

将下面的代码用于搜索栏,只需更改所需的颜色:

<item android:id="@android:id/background">
    <shape android:shape="rectangle">
        <corners android:radius="20dp" />
        <solid android:color="@color/fofo_grey" />

    </shape>
</item>

<item android:id="@android:id/progress">

    <clip>
        <shape android:shape="rectangle">
            <corners android:radius="20dp" />
            <solid android:color="@color/signup_green" />
            <stroke
                android:width="6dp"
                android:color="@color/fofo_grey" />
        </shape>
    </clip>
</item>

以上是关于Seekbar拇指,左右两侧的填充/边距透明的主要内容,如果未能解决你的问题,请参考以下文章

在按钮中的文本两侧添加填充

在 Android 中更改 TextView 的不透明度

在透明拇指图像后面隐藏 UISlider 轨道

如何让seekbar的拇指跟随Videoview的当前时间?

进度部分上的 Seekbar 外阴影

如何在SeekBar上旋转TextView?