Android开发自定义组合控件

上图

如果做这种进度条，seekbar的话，用切图好做不？

其实不好做，程序员能自己做的还是自己做。

通过组合的方式即可。

一个bg+seekbar就可以实现此控件。

容器

public class SobSeekBar extends FrameLayout {

    private SeekBar seekBar;

    public SobSeekBar(@NonNull Context context) {
        this(context, null);
    }

    public SobSeekBar(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SobSeekBar(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //初始化
        LayoutInflater.from(context).inflate(R.layout.item_seek_bar, this);
        seekBar = findViewById(R.id.seek_bar);
    }

    public void setProgress(int progress) {
        seekBar.setProgress(progress);
    }

    public void setOnSeekBarChangeListener(SeekBar.OnSeekBarChangeListener l) {
        seekBar.setOnSeekBarChangeListener(l);
    }


}

以上代码，加载了一个布局进来，并且填到容器里，然后找到seekbar，设置progress和设置改变的监听。

max或者其他属性也可以提供，或者直接在xml中进行设置。

布局代码

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/shape_progress_bg"
    android:padding="20dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp">

    <SeekBar
        android:id="@+id/seek_bar"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_gravity="center_vertical"
        android:max="100"
        android:maxHeight="10dp"
        android:progress="0"
        android:progressDrawable="@drawable/seekbar_define_style"
        android:thumb="@drawable/seek_bar_thumb"
        android:thumbOffset="5dp" />

</FrameLayout>

背景有渐变

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <size
        android:width="240dp"
        android:height="30dp" />

    <gradient
        android:angle="-90"
        android:centerColor="#3C3C3C"
        android:endColor="#202020"
        android:startColor="#565656"
        android:type="linear"/>

    <corners android:radius="50dp" />


</shape>

颜色是我从UI上取的，分别是开始的颜色，中间的颜色和结束的颜色。

这样子，就可以得到一张渐变的背景了。

自定义seekBar样式

样式分为三个部分：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!--定义seekbar滑动条条的底色-->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="40dp"/>
            <solid android:color="#000000"/>
        </shape>
    </item>
    <!--定义seekbar滑动进度颜色-->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="40dp" />
                <gradient
                    android:angle="0"
                    android:endColor="#117CFD"
                    android:startColor="#117CFD" />
            </shape>
        </clip>
    </item>
</layer-list>

是通过id来指定对 应的颜色的。

如果切图的话，同学们要了解一个.9图。

以上，跑起来就是这个效果了。