Android自定义滑杆控件SeekBar多功能版本

在应用开发中有没有遇到过通过滑杆控件选择一些区间条件实现参数变化？今天我们就来自定义View实现一个多功能又实用的版本SeekBar。

Paste_Image.png
](https://img.haomeiwen.com/i3982371/7f76b66f235bde86.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

1.在布局中直接使用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:padding="20dp"
    tools:context="com.tangyx.seekbar.MainActivity"
    android:orientation="vertical">
    <RelativeLayout
        android:layout_marginTop="50dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <com.seekbar.sliding.text.TextSeekBar
            android:id="@+id/only_back"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            app:tickCount="2"/>
    ...
    </RelativeLayout>
    <LinearLayout
        android:id="@+id/time_layout"
        android:layout_marginTop="30dp"
        android:layout_marginLeft="5dp"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <com.seekbar.sliding.SlidingSeekBar
            android:id="@+id/time_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tickCount="5"
            app:tickHeight="3dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            app:connectingLineColor="@android:color/black"
            app:barColor="@color/color_e0e8ee"
            app:barWeight="1.5dp"/>
    </LinearLayout>
</LinearLayout>

2.自定义的SeekBar一共有两种

第一种在滑球上面显示当前选择模式，就是设置文字显示在滑球上(com.seekbar.sliding.text.TextSeekBar)。
第二种两边都可以滑动操作，比如选择一个时间区域(com.seekbar.sliding.SlidingSeekBar)。
<b>支持的属性：

<declare-styleable name="SeekBar">
        <!--可滑动选择区间段-->
        <attr name="tickCount" format="integer" />
        <!--每个间隔的标示的高度-->
        <attr name="tickHeight" format="dimension" />
        <attr name="barWeight" format="dimension" />
        <!--被滑动线条颜色-->
        <attr name="barColor" format="reference|color" />
        <attr name="connectingLineWeight" format="dimension" />
        <!--线条的颜色-->
        <attr name="connectingLineColor" format="reference|color" />
        <!--自定义滑球的圆形大小-->
        <attr name="thumbRadius" format="dimension" />
        <!--自定义滑球的图片 没有触摸的样式-->
        <attr name="thumbImageNormal" format="reference" />
        <!--自定义滑球的图片 手触摸按下的样式-->
        <attr name="thumbImagePressed" format="reference" />
        <!--如果不设置图片，可以配合thumbRadius用程序实现的滑球-->
        <attr name="thumbColorNormal" format="reference|color"/>
        <attr name="thumbColorPressed" format="reference|color"/>
</declare-styleable>```

####3.监听滑杆事件，滑杆滑动变化通过OnRangeBarChangeListener接口来实现对应的逻辑

![Paste_Image.png](https://img.haomeiwen.com/i3982371/cc462a93735fa7f7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

####4.设置滑球上的文字通过setCircleText()方法，只有TextSeekBar支持该方法。

![seekbar.gif](https://img.haomeiwen.com/i3982371/6457b1c4f91470fc.gif?imageMogr2/auto-orient/strip)


当然类似这方面的自定义View都是通过监听手势实现对应的逻辑，你可以继承BaseSeekBar来定义自己的样式。
更多的了解请通过源码实践。

<a href="https://github.com/tangyxgit/SlidingSeekBar">我是源码</a>
<b>如果你喜欢就一起来提供更多人性化的思路，我也将会努力实现更多超强体验的自定义控件。</b>