Android自定义滑动验证条的示例代码

本文介绍了Android自定义滑动验证条的示例代码，分享给大家，具体如下：

*注：不知道为什么，h5的标签在这里没用了，所以我也只能用Markdown的语法来写了

项目地址：https://github.com/994866755/handsomeYe.seekbar.github.io

需求：

在我们的某些应用中需要滑动验证。比如说这个样子的：

刚开始我也很懵逼要怎么去弄，结果我去看了一些人的代码，有人是用自定义viewgroup去做，就是viewgroup包含滑动块和滑动条。但我觉得太麻烦，直到我知道android有个控件seekbar可以实现这个效果。

一、使用SeekBar实现滑动条

  <SeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:max="100"
    android:maxHeight="45dp"
    android:minHeight="45dp"
    android:progress="0"
    android:clickable="false"
    android:progressDrawable="@drawable/bg_forgotpassword_seekbar"
    android:thumb="@drawable/bg_seekbar_thumb"
    android:id="@+id/sb_progress"
    android:thumbOffset="-1dp"
    android:padding="1dp"
    / 

这里网上有很多介绍，我也顺便解释一下：

（1）android:max是总共的容量，这里设100就行。

（2）android:progressDrawable是只设置进度框的背景，就是整个条的背景，比如图中的没滑动的时候是灰色，滑动的地方是绿色。

（3）android:thumb这个属性是设置滑块的样式，比如图中的没滑时是 ，滑到最右变成勾。默认的样式是一个圆。

（4）android:thumbOffset这个是滑块的起始位置，怎么说呢，你可以当图中第一条的滑块是android:thumbOffset = “0dp”，如果你设置成正数，这个滑块的位置会向左移动，设成负数会向右移动。我这里设成-1是以为是0的时候会挡住左边的边框，这样不好看，我设成-1为了让滑块向右移动一点。

二、设置SeekBar样式

写好布局后来写下样式，也就是上面的progressDrawable和thumb属性。

（1）progressDrawable（滑动条）

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" 
  <!--seekBar背景-- 
  <item android:id="@android:id/background" 
    <!--形状-- 
    <shape android:shape="rectangle" 
      <!--大小-- 
      <size android:height="29dp" / 
      <!--圆角-- 
      <corners android:radius="2dp" / 
      <!--背景-- 
      <solid android:color="#E7EAE9" / 
      <!--边框-- 
      <stroke
        android:width="1dp"
        android:color="#C3C5C4" / 
    </shape 
  </item 
  <!--seekBar的进度条-- 
  <item android:id="@android:id/progress" 
      <shape 
        <corners android:radius="2dp" / 
        <solid android:color="#7AC23C" / 
        <stroke
          android:width="1dp"
          android:color="#C3C5C4" / 
      </shape 
    </clip 
  </item 
</layer-list 

（2）thumb（滑块）

<selector xmlns:android="http://schemas.android.com/apk/res/android" 
  <!-- 按下状态-- 
  <item android:drawable="@mipmap/seekbar_thumb" android:state_pressed="true" / 
  <!-- 有焦点状态 -- 
  <item android:drawable="@mipmap/seekbar_thumb" android:state_focused="true" / 
  <!-- 普通状态 -- 
  <item android:drawable="@mipmap/seekbar_thumb" / 
</selector 

这里就不多介绍了。

三、加入监听

在activity中加入监听，比如你可以让滑块不滑到最右时自动弹回原位等等。

sbProgress.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
      @Override
      public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
      @Override
      public void onStartTrackingTouch(SeekBar seekBar) {
      @Override
      public void onStopTrackingTouch(SeekBar seekBar) {
        if (seekBar.getProgress() != seekBar.getMax()) {
          seekBar.setProgress(0);
        }else {
          sbProgress.setEnabled(false);
          setData();
    });

最后实现的效果是这样：

你可以自己加文字在中间，这个我就不在demo里弄了。

四、剩下的处理

你以为这样就完啦？那你太天真了，你会发现如果你按上面的步骤做，最后会有一个很蛋疼的效果：

你不滑动滑块，只点击滑动条中间，滑块会马上到中间。

也就是说我们想做的效果是只滑动而不能点击，仅仅做成这样是没办法实现这个需求。

那怎么办？我在网上找了很多文章，大多都是不能滑也不能点，而我要的是能滑不能点。难道SeekBar没戏啦？我想了想，最后我用事件分发来解决。

既然是事件分发，我这里也不想写事件分发的内容，以后我们写一篇专门关于事件分发的文章，这里如果有小伙伴不了解事件分发的话，自己先去google一下。

既然是事件分发，那我们就需要自定义seekbar啦，其实很简单。我先贴代码，然后再讲解。

（1）代码君：

public class VerificationSeekBar extends SeekBar{
  //这两个值为用算法使用的2空间复杂度
  private int index = 150;
  private boolean k = true;
  public VerificationSeekBar(Context context) {
    super(context);
  public VerificationSeekBar(Context context, AttributeSet attrs) {
    super(context, attrs);
  public VerificationSeekBar(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
  @Override
  public boolean dispatchTouchEvent(MotionEvent event) {
    int x = (int) event.getX();
    if (event.getAction() == MotionEvent.ACTION_DOWN){
      k = true;
      if (x - index   20) {
        k = false;
        return true;
    if (event.getAction() == MotionEvent.ACTION_MOVE){
      if (!k){
        return true;