Android 实现seekBar仿抖音拖动后改变thumb kotlin实现

news/2024/7/8 2:56:48

Android 实现seekBar仿抖音拖动后改变thumb kotlin实现

又是一个没被甲方采用的方案哈哈哈

抖音的进度条默认状态下是半透明的灰色，thumb是一个同样的灰色的圆
点击、拖动后，progress变为白色，高度变高，thumb变为圆角矩形，没有完全还原，感兴趣的朋友可以再完善一下

0.layout上放一个seekbar

style设为水平
max为进度条最大值
因为thumb会高于进度条一些，需要设为wrap_content，设置maxHeight和minHeight可以防止thumb显示不全
没有paddingEnd和paddingStart会导致进度条显示不全
progress为当前进度
progressDrawable为自定义的进度条样式，为xml文件
thumb为自定义的样式，同为xml文件

<SeekBar
        android:id="@+id/sb_tiktok"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="720dp"
        android:max="100"
        android:maxHeight="4dp"
        android:minHeight="4dp"
        android:paddingEnd="2dp"
        android:paddingStart="2dp"
        android:progress="20"
        android:progressDrawable="@drawable/bkg_pro_tiktok"
        android:thumb="@drawable/tiktok_seek_thumb"
        android:thumbOffset="0dp"
        >
    </SeekBar>

1.自定义进度条样式bkg_pro_tiktok.xml

在drawable文件中创建
未播放进度，颜色grey为#212121
已播放的进度条，颜色white为#FFFFFFFF
四通道ARGB

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/background">
        <shape>
            <solid android:color="@color/grey"></solid>
        </shape>
    </item>
    <item android:id="@+id/progress">
        <clip>
            <shape>
                <solid android:color="@color/white"></solid>
            </shape>
        </clip>
    </item>
</layer-list>

2.自定义thumb样式tiktok_seek_thumb.xml

同样在drawable文件中创建，drawable用的都是我自己用figma画的svg图像，注意如果用png会很糊
最后一个item是默认状态下

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true"
        android:state_window_focused="true"
        android:drawable="@drawable/thumb_tiktok_press1" />

    <item android:state_focused="true"
        android:state_window_focused="true"
        android:drawable="@drawable/thumb_tiktok_press1" />

    <item android:state_selected="true"
        android:state_window_focused="true"
        android:drawable="@drawable/thumb_tiktok_press1" />

    <item android:drawable="@drawable/thumb_tiktok" />

</selector>

thumb
thumb
thumb_press

3.activity代码中的设置

因为前面提到的maxHeight和minHeight的问题
为了拖动后放大进度条和完整的显示thumb，并在拖动结束后变回原来的高度，需要在代码中重写onProgressChanged函数，以下为Kotlin代码：
这两行代码放在onCreate中

	sb_tiktok = findViewById<SeekBar>(R.id.sb_tiktok)
    sb_tiktok.setOnSeekBarChangeListener(this)

重写函数放onCreat外面的后面

override fun onProgressChanged(p0: SeekBar?, p1: Int, p2: Boolean) {

    }

    @RequiresApi(Build.VERSION_CODES.Q)
    override fun onStartTrackingTouch(p0: SeekBar?) {
        if (p0 != null) {
            p0.maxHeight = 30
            p0.minHeight = 30

        }
    }

    @RequiresApi(Build.VERSION_CODES.Q)
    override fun onStopTrackingTouch(p0: SeekBar?) {
        if (p0 != null) {
            p0.maxHeight = 8
            p0.minHeight = 8
        }
    }