Android 自定义SeekBar样式

时间:2024-03-22 14:58:04
<FrameLayout
            android:layout_width="match_parent"
            android:layout_height="200dp">

            <com.xmu.lxq.aiad.widget.CameraView
                android:id="@+id/camera_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

            <SurfaceView
                android:id="@+id/surfaceView"
                android:layout_width="match_parent"
                android:layout_height="220dp" />    

            <!--播放按钮-->
            <ImageButton
                android:id="@+id/video_start"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_gravity="center"
                android:background="@drawable/edit_play">
            </ImageButton>


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="10dp"
                android:layout_gravity="bottom"
                android:orientation="horizontal">           

                <!--进度条-->
                <SeekBar
                    android:id="@+id/seekBar"
                    android:layout_width="match_parent"
                    android:layout_height="4dp"
                    android:layout_gravity="bottom"
                    android:paddingStart="0dp"
                    android:paddingEnd="0dp"
                    android:progressDrawable="@drawable/seekbar_style"
                    android:maxHeight="4dp"
                    android:minHeight="4dp" />

            </LinearLayout>

        </FrameLayout>

一、SeekBar 横向充满整个视频区域

我们知道SeekBar默认左右两边留有一点空白,所以加上下面这两句,SeekBar就会横向填充整个区域

android:paddingStart="0dp"
android:paddingEnd="0dp"

二、背景色和进度条渐变色自定义

seekbar_style.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">
        <shape>
            <solid android:color="#00000000" />
        </shape>
    </item>

    <!--进度条颜色设置为蓝粉渐变 其中颜色在color.xml文件中自定义-->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:angle="180"
                    android:endColor="@color/colorPrimaryDark"
                    android:startColor="@color/colorAccent" />
            </shape>
        </clip>
    </item>
</layer-list>

三、限制SeekBar的高度

主要体现在以下四行代码

这样就不会出现一般的SeekBar的Android 自定义SeekBar样式大圆点,变成一个平滑的并且可以拖动的进度条

android:layout_height="4dp"
android:layout_gravity="bottom"
android:maxHeight="4dp"
android:minHeight="4dp"

最终效果图

Android 自定义SeekBar样式