Android自定义滑杆控件SeekBar多功能版本
nzmo1770
8年前
<p>在应用开发中有没有遇到过通过滑杆控件选择一些区间条件实现参数变化?今天我们就来自定义View实现一个多功能又实用的版本SeekBar。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/bc86e217d74c421f022aff006d00f53e.png"></p> <p>Paste_Image.png](http://upload-images.jianshu.io/upload_images/3982371-6bc53a9b5d0878fc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</p> <p>1.在布局中直接使用</p> <pre> <code class="language-java"><?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></code></pre> <p>2.自定义的SeekBar一共有两种</p> <p>第一种在滑球上面显示当前选择模式,就是设置文字显示在滑球上(com.seekbar.sliding.text.TextSeekBar)。</p> <p>第二种两边都可以滑动操作,比如选择一个时间区域(com.seekbar.sliding.SlidingSeekBar)。</p> <p><strong>支持的属性:</strong></p> <pre> <code class="language-java"><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></code></pre> <p>3.监听滑杆事件,滑杆滑动变化通过实现OnRangeBarChangeListener接口来实现对应的逻辑。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/5e12071767b5175c00a5ebc0e7f70f9e.png"></p> <p style="text-align:center">Paste_Image.png</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/3f45609876a748aa38e2a27b63491341.gif"></p> <p style="text-align:center">seekbar.gif</p> <p>当然类似这方面的自定义View都是通过监听手势实现对应的逻辑,你可以继承BaseSeekBar来定义自己的样式。</p> <p> </p> <p> </p>