进度部分上的 Seekbar 外阴影

Posted 2023-02-26

【中文标题】进度部分上的 Seekbar 外阴影

【英文标题】：Seekbar outer shadow on progress part

【发布时间】：2017-05-10 12:07:45

【问题描述】：

我在 android 中自定义了一个搜索栏，试图只获取填充部分的内部和外部阴影（底部）。

我想要这样的结果：

此刻，我创建了：

圆角边框 渐变效果 自定义拇指 内阴影（在进度的顶部，非常小）

我无法创建外部阴影（在进度的底部）。

这是我的代码：

<?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>
            <size android:/>
            <corners android:radius="20dp"/>
            <solid android:color="@color/background_unselected_gray"/>
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%">
            <layer-list>
                <item>
                    <shape>
                        <corners
                            android:bottomLeftRadius="20dp"
                            android:topLeftRadius="20dp"/>
                        <gradient
                            android:endColor="@color/button_red_gradient_bottom"
                            android:startColor="@color/button_red_gradient_top"/>
                    </shape>
                </item>

                <item>
                    <shape>
                        <corners
                            android:bottomLeftRadius="18dp"
                            android:topLeftRadius="18dp"/>
                        <gradient
                            android:angle="270"
                            android:centerColor="@color/horizontal_seekbar_inner_shadow_center"
                            android:centerY="0.1"
                            android:endColor="@color/transparent"
                            android:startColor="@color/horizontal_seekbar_inner_shadow_top"/>
                    </shape>
                </item>
            </layer-list>
        </scale>
    </item>
</layer-list>

【参考方案1】：

我自己找到了解决方案。

解决方案：

我刚刚将另一个项目添加到 layer-list 的 id:progress 项目中：

从深灰色渐变到透明以模拟阴影 使用bottom 属性的填充

这是添加项目的代码：

<item android:bottom="-3dp">
      <shape>
          <corners
              android:bottomLeftRadius="20dp"
              android:topLeftRadius="20dp"/>
                  <gradient
                      android:angle="270"
                      android:centerColor="@color/horizontal_seekbar_outer_shadow_center"
                      android:centerY="0.75"
                      android:endColor="@color/transparent"
                      android:startColor="@color/horizontal_seekbar_outer_shadow_top"/>
      </shape>
</item>

我对这个项目应用了一种负填充，所以它在进度条后面。

完整代码：

<?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>
            <size android:/>
            <corners android:radius="20dp"/>
            <solid android:color="@color/background_unselected_gray"/>
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%">
            <layer-list>
                <item android:bottom="-3dp"
                      android:left="1dp">
                    <shape>
                        <corners
                            android:bottomLeftRadius="20dp"
                            android:topLeftRadius="20dp"/>
                        <gradient
                            android:angle="270"
                            android:centerColor="@color/horizontal_seekbar_outer_shadow_center"
                            android:centerY="0.75"
                            android:endColor="@color/transparent"
                            android:startColor="@color/horizontal_seekbar_outer_shadow_top"/>
                    </shape>
                </item>

                <item>
                    <shape>
                        <corners
                            android:bottomLeftRadius="20dp"
                            android:topLeftRadius="20dp"/>
                        <gradient
                            android:endColor="@color/button_red_gradient_bottom"
                            android:startColor="@color/button_red_gradient_top"/>
                    </shape>
                </item>

                <item>
                    <shape>
                        <corners
                            android:bottomLeftRadius="18dp"
                            android:topLeftRadius="18dp"/>
                        <gradient
                            android:angle="270"
                            android:centerColor="@color/horizontal_seekbar_inner_shadow_center"
                            android:centerY="0.1"
                            android:endColor="@color/transparent"
                            android:startColor="@color/horizontal_seekbar_inner_shadow_top"/>
                    </shape>
                </item>
            </layer-list>
        </scale>
    </item>
</layer-list>

【讨论】：

如何在进度条的各个边添加外阴影？

尝试在“”的代码中添加“top, right and left”

谢谢。然后如何将其添加为样式中的背景。我似乎只能添加背景色调？