Android自定義SeekBar實現滑動驗證且不可點擊

更新時間：2021年03月31日 11:11:48 作者：小豬阿正

這篇文章主要為大家詳細介紹了Android自定義SeekBar實現滑動驗證且不可點擊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近公司因為短信接口被盜刷的比較嚴重，需要做一個類似于淘寶的滑動驗證，用于特定環(huán)境，以增加一層保障。拿到需求首先想到的是自定義ViewGroup來實現，里面放一個seekbar和TextView即可。但是有更簡單的方法，直接在布局中放入seekbar和TextView，不就ok了？用最簡單快捷的方法實現需求，才是硬道理。

值得一提的是，seekbar默認情況下是支持點擊事件的，也就是說，用戶可以直接點擊進度條以實現滑動驗證這是不允許的，因此，自定義seekbar，屏蔽點擊事件。下面我們先從seekbar + textxiew實現滑動驗證效果開始，最后實現seekbar點擊事件的屏蔽。

滑動驗證實現：

先上一張效果圖：

不太美觀，UI還沒設計，只是個demo。

1、布局

<RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="@color/white"
   android:padding="10dp">

 <com.dmlc.app.android.widget.NoClickSeekbar
   android:id="@+id/sb_bar"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:max="100"
   android:progress="0"
   android:progressDrawable="@drawable/style_seekbar_verify"
   android:thumb="@drawable/style_seekbar_thumb"
   android:thumbOffset="0dp" />

<TextView
   android:id="@+id/sb_tv"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_centerInParent="true"
   android:gravity="center"
   android:text="請按住滑塊，拖動到最右邊"
   android:textColor="#888888"
   android:textSize="14dp" />
</RelativeLayout>

其中，android:progressDrawable用于定義滑動條背景，android:thumb定義滑塊樣式。

滑動條背景：

<?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 android:shape="rectangle">
  <!--大小-->
  <size android:height="30dp" />
  <!--圓角-->
  <corners android:radius="5dp" />
  <!--背景-->
  <solid android:color="#E7EAE9" />
  <!--邊框-->
  <stroke
  android:width="1dp"
  android:color="#C3C5C4" />
 </shape>
 </item>
 <!--seekBar的進度條-->
 <item android:id="@android:id/progress">
 <clip>
  <shape>
  <corners android:radius="5dp" />
  <solid android:color="#7AC23C" />
  <stroke
   android:width="1dp"
   android:color="#C3C5C4" />
  </shape>
 </clip>
 </item>

</layer-list>

滑塊樣式：

<?xml version="1.0" encoding="utf-8"?>
<selector
 xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/seekbar_thumb_normal" />
 <item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/seekbar_thumb_pressed" />
 <item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/seekbar_thumb_pressed" />
 <item android:drawable="@drawable/seekbar_thumb_normal" />
</selector>

2、自定義seekbar

重寫setOnSeekBarChangeListener，監(jiān)聽seekbar。
簡單介紹下幾個回調方法的作用：

onProgressChanged ：當progress進度改變時調用；
onStartTrackingTouch ：開始滑動時調用；
onStopTrackingTouch ：滑動結束時調用；

public class NoClickSeekbar extends SeekBar{
 private int oldsign = 0;
 private int mTemp = 10;//點擊最大值，超過這個值則不響應
 private int mStep = 0;
 OnNoClickSeekBarChangeListener mOnSeekBarChangeListener;

 public NoClickSeekbar(Context context) {
 this(context,null);
 }

 public NoClickSeekbar(Context context, AttributeSet attrs) {
 this(context, attrs,0);
 }

 public NoClickSeekbar(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 init();
 }

 private void init() {
 setOnSeekBarChangeListener(new OnSeekBarChangeListener(){
  @Override
  public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
  // TODO 自動生成的方法存根
  if(Math.abs(progress - oldsign) > mTemp){
   seekBar.setProgress(oldsign);
   if (mOnSeekBarChangeListener != null) {
   mOnSeekBarChangeListener.onProgressChanged(seekBar,oldsign,fromUser);
   }
   return;
  }
  seekBar.setProgress(progress);
  oldsign = progress;
  if (mOnSeekBarChangeListener != null) {
   mOnSeekBarChangeListener.onProgressChanged(seekBar,oldsign,fromUser);
  }

  }

  @Override
  public void onStartTrackingTouch(SeekBar seekBar) {
  // TODO 自動生成的方法存根
  seekBar.setProgress(oldsign);
  if (mOnSeekBarChangeListener != null) {
   mOnSeekBarChangeListener.onStartTrackingTouch(seekBar);
  }
  }

  @Override
  public void onStopTrackingTouch(SeekBar seekBar) {
  // TODO 自動生成的方法存根
  if (mOnSeekBarChangeListener != null) {
   mOnSeekBarChangeListener.onStopTrackingTouch(seekBar);
  }
  }

 });
 }

 public interface OnNoClickSeekBarChangeListener {

 void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser);

 void onStartTrackingTouch(SeekBar seekBar);

 void onStopTrackingTouch(SeekBar seekBar);
 }

 public void setNoClickSeekBarChangeListener(OnNoClickSeekBarChangeListener l) {
 mOnSeekBarChangeListener = l;
 }
 }

在自定義seekbar的時候，設置供用戶的回調監(jiān)聽，

public interface OnNoClickSeekBarChangeListener {

 void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser);

 void onStartTrackingTouch(SeekBar seekBar);

 void onStopTrackingTouch(SeekBar seekBar);
 }

并在seekbar中重寫監(jiān)聽時，重寫對應的事件回調時，將上面對應的接口方法對應的執(zhí)行。用戶在使用自定義seekbar時，執(zhí)行監(jiān)聽，加入我們需要實現的需求。

mSeekBar.setNoClickSeekBarChangeListener(new NoClickSeekbar.OnNoClickSeekBarChangeListener() {
  @Override
  public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
  if (progress == seekBar.getMax()){
   mSeekbarTV.setVisibility(View.VISIBLE);
   mSeekbarTV.setText("驗證通過");
  } else {
   mSeekbarTV.setVisibility(View.INVISIBLE);
   if (progress < 10){
   mSeekbarTV.setVisibility(View.VISIBLE);
   mSeekbarTV.setText("請按住滑塊，拖動到最右邊");
   }
  }
  }

  @Override
  public void onStartTrackingTouch(SeekBar seekBar) {

  }

  @Override
  public void onStopTrackingTouch(SeekBar seekBar) {

  }
 });

SeekBar點擊事件的屏蔽

1、解決辦法一：

在我們滑動seekbar的時候，是可以監(jiān)聽到progress的。因此，我們用一個變量記錄上一次的progress，當點擊事件發(fā)生時，計算點擊的進度與之前的進度是否超過一定范圍，從而判斷是否需要響應。比較簡單，直接上代碼：

setOnSeekBarChangeListener(new OnSeekBarChangeListener(){
  @Override
  public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
  // TODO 自動生成的方法存根
  if(Math.abs(progress - oldsign) > mTemp){
   seekBar.setProgress(oldsign);
   if (mOnSeekBarChangeListener != null) {
   mOnSeekBarChangeListener.onProgressChanged(seekBar,oldsign,fromUser);
   }
   return;
  }
  seekBar.setProgress(progress);
  oldsign = progress;
  if (mOnSeekBarChangeListener != null) {
   mOnSeekBarChangeListener.onProgressChanged(seekBar,oldsign,fromUser);
  }

  }

  @Override
  public void onStartTrackingTouch(SeekBar seekBar) {
  // TODO 自動生成的方法存根
  seekBar.setProgress(oldsign);
  if (mOnSeekBarChangeListener != null) {
   mOnSeekBarChangeListener.onStartTrackingTouch(seekBar);
  }
  }

  @Override
  public void onStopTrackingTouch(SeekBar seekBar) {
  // TODO 自動生成的方法存根
  if (mOnSeekBarChangeListener != null) {
   mOnSeekBarChangeListener.onStopTrackingTouch(seekBar);
  }
  }

 });

2、解決辦法二：

通過view的事件監(jiān)聽，重寫view的onTouchEvent事件，在MotionEvent.ACTION_DOWN的時候，同樣判斷前后兩次事件之間的距離，判斷是否要處理該點擊事件。

@Override
 public boolean onTouchEvent(MotionEvent event) {
 int x = (int) event.getX();
 switch (event.getAction()){
  case MotionEvent.ACTION_DOWN:
  if (Math.abs(x - mStep) > 100) {
   return false;
  }
  break;
  case MotionEvent.ACTION_MOVE:

  break;
  case MotionEvent.ACTION_UP:
  mStep = x;
  break;
 }
 return super.onTouchEvent(event);
 }

對于上面自定義SeekBar來說，在屏蔽點擊事件上，還是有瑕疵的。是能設定一定的范圍，小于了該范圍，比如用戶小范圍的點擊，是會響應的。把問題都在這兒，后面解決了再補充！

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

如何給Flutter界面切換實現點特效
這篇文章主要給大家介紹了關于如何給Flutter界面切換實現點特效的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Flutter具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-09-09
Android自定義PasswordInputView密碼輸入
這篇文章主要為大家詳細介紹了Android自定義PasswordInputView密碼輸入功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-08-08
Android WebView實現文件下載功能
這篇文章主要為大家詳細介紹了Android WebView實現文件下載功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-05-05
詳解Flutter如何繪制曲線,折線圖及波浪動效
這篇文章主要為大家介紹線條類圖形的繪制（正弦曲線、折線圖），并且結合 Animation 實現了常見的波浪動效，感興趣的小伙伴可以了解一下
2022-03-03
Android利用Intent啟動和關閉Activity
這篇文章主要為大家詳細介紹了Android利用Intent啟動和關閉Activity的相關操作，感興趣的小伙伴們可以參考一下
2016-06-06
實例講解建立Android項目
在本篇內容中我們給大家整理了關于建立Android項目的步驟和相關知識點，有興趣的讀者們學習下。
2019-03-03
Flutter實現滾動選擇數字
這篇文章主要為大家詳細介紹了Flutter實現滾動選擇數字，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
Android本地存儲方法淺析介紹
這篇文章主要介紹了Android本地存儲案例，方法簡單可以實現存儲并達到節(jié)省內存的效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
2022-10-10
關于Touch Panel AA區(qū)要做外擴的原因解析
今天小編就為大家分享一篇關于Touch Panel AA區(qū)要做外擴的原因解析，小編覺得內容挺不錯的，現在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2018-12-12
Android報錯Didn‘t?find?class?“android.view.x“問題解決原理剖析
這篇文章主要為大家介紹了Android報錯Didn‘t?find?class?“android.view.x“問題解決及原理剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-03-03