Android控件SeekBar仿淘寶滑動驗證效果

更新時間：2020年06月23日 17:19:00 作者：Hensen_

這篇文章主要為大家詳細介紹了Android控件SeekBar仿淘寶滑動驗證效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

SeekBar是一個拖動條控件，最簡單的案例就是我們的調(diào)節(jié)音量，還有音頻視頻的播放，傳統(tǒng)的SeekBar樣式，如圖

傳統(tǒng)的實現(xiàn)太簡單，不足以讓我們到能裝逼的地步。本來是打算實現(xiàn)滴滴出行滑動完成訂單的效果，可惜找不到效果圖，今天也就用淘寶的滑動驗證來作為實例

1.1 實現(xiàn)分析

SeekBar：使用progressDrawable屬性自定義SeekBar
拖動塊：使用thumb屬性更改，其實就是一張圖片
文字：使用RelativeLayout嵌套在一起

1.2 實現(xiàn)布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:padding="16dp">

 <SeekBar
  android:id="@+id/sb"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:max="100"
  android:progress="0"
  android:progressDrawable="@drawable/seekbar_bg"
  android:thumb="@drawable/thumb"
  android:thumbOffset="0dp" />

 <TextView
  android:id="@+id/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>

其效果是

SeekBar屬性介紹

android:max：設置進度條最大的進度值
android:progress：設置當前的進度值
android:progressDrawable：設置進度條的Drawable樣式
android:thumb：設置進度條滑塊
android:thumbOffset：設置進度條滑塊的偏移量

1.3 SeekBar樣式

這里是Android:progressDrawable里面的seekbar_bg.xml

<?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="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">
  <clip>
   <shape>
    <corners android:radius="2dp" />
    <solid android:color="#7AC23C" />
    <stroke
     android:width="1dp"
     android:color="#C3C5C4" />
   </shape>
  </clip>
 </item>
</layer-list>

1.4 代碼實現(xiàn)邏輯

代碼也非常簡單，seekBar提供了一個監(jiān)聽事件OnSeekBarChangeListener，在對應的回調(diào)中實現(xiàn)文字的出現(xiàn)和消失、文本內(nèi)容的修改

public class MainActivity extends AppCompatActivity implements SeekBar.OnSeekBarChangeListener {

 private TextView tv;
 private SeekBar seekBar;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  tv = (TextView) findViewById(R.id.tv);
  seekBar = (SeekBar) findViewById(R.id.sb);
  seekBar.setOnSeekBarChangeListener(this);
 }

 /**
  * seekBar進度變化時回調(diào)
  *
  * @param seekBar 
  * @param progress 
  * @param fromUser 
  */
 @Override
 public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
  if (seekBar.getProgress() == seekBar.getMax()) {
   tv.setVisibility(View.VISIBLE);
   tv.setTextColor(Color.WHITE);
   tv.setText("完成驗證");
  } else {
   tv.setVisibility(View.INVISIBLE);
  }
 }

 /**
  * seekBar開始觸摸時回調(diào)
  *
  * @param seekBar
  */
 @Override
 public void onStartTrackingTouch(SeekBar seekBar) {

 }

 /**
  * seekBar停止觸摸時回調(diào)
  *
  * @param seekBar
  */
 @Override
 public void onStopTrackingTouch(SeekBar seekBar) {
  if (seekBar.getProgress() != seekBar.getMax()) {
   seekBar.setProgress(0);
   tv.setVisibility(View.VISIBLE);
   tv.setTextColor(Color.GRAY);
   tv.setText("請按住滑塊，拖動到最右邊");
  }
 }
}

好了，今天的SeekBar的使用就到這里，如果對其他基礎(chǔ)控件感興趣的，可以關(guān)注我的博客，基礎(chǔ)控件系列，歡迎提供大家idea。

源碼下載：http://xiazai.jb51.net/201611/yuanma/Androidseekbar(jb51.net).rar

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

您可能感興趣的文章: