Android控件SeekBar仿淘寶滑動(dòng)驗(yàn)證效果
SeekBar是一個(gè)拖動(dòng)條控件,最簡(jiǎn)單的案例就是我們的調(diào)節(jié)音量,還有音頻視頻的播放,傳統(tǒng)的SeekBar樣式,如圖
傳統(tǒng)的實(shí)現(xiàn)太簡(jiǎn)單,不足以讓我們到能裝逼的地步。本來(lái)是打算實(shí)現(xiàn)滴滴出行滑動(dòng)完成訂單的效果,可惜找不到效果圖,今天也就用淘寶的滑動(dòng)驗(yàn)證來(lái)作為實(shí)例
1.1 實(shí)現(xiàn)分析
SeekBar:使用progressDrawable屬性自定義SeekBar
拖動(dòng)塊:使用thumb屬性更改,其實(shí)就是一張圖片
文字:使用RelativeLayout嵌套在一起
1.2 實(shí)現(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="請(qǐng)按住滑塊,拖動(dòng)到最右邊" android:textColor="#888888" android:textSize="14dp" /> </RelativeLayout>
其效果是
SeekBar屬性介紹
android:max:設(shè)置進(jìn)度條最大的進(jìn)度值
android:progress:設(shè)置當(dāng)前的進(jìn)度值
android:progressDrawable:設(shè)置進(jìn)度條的Drawable樣式
android:thumb:設(shè)置進(jìn)度條滑塊
android:thumbOffset:設(shè)置進(jìn)度條滑塊的偏移量
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的進(jìn)度條--> <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 代碼實(shí)現(xiàn)邏輯
代碼也非常簡(jiǎn)單,seekBar提供了一個(gè)監(jiān)聽(tīng)事件OnSeekBarChangeListener,在對(duì)應(yīng)的回調(diào)中實(shí)現(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進(jìn)度變化時(shí)回調(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("完成驗(yàn)證"); } else { tv.setVisibility(View.INVISIBLE); } } /** * seekBar開(kāi)始觸摸時(shí)回調(diào) * * @param seekBar */ @Override public void onStartTrackingTouch(SeekBar seekBar) { } /** * seekBar停止觸摸時(shí)回調(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("請(qǐng)按住滑塊,拖動(dòng)到最右邊"); } } }
好了,今天的SeekBar的使用就到這里,如果對(duì)其他基礎(chǔ)控件感興趣的,可以關(guān)注我的博客,基礎(chǔ)控件系列,歡迎提供大家idea。
源碼下載:http://xiazai.jb51.net/201611/yuanma/Androidseekbar(jb51.net).rar
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android自定義控件實(shí)現(xiàn)可左右滑動(dòng)的導(dǎo)航條
- Android控件之SlidingDrawer(滑動(dòng)式抽屜)詳解與實(shí)例分享
- Android開(kāi)源堆疊滑動(dòng)控件仿探探效果
- Android自定義控件ScrollView實(shí)現(xiàn)上下滑動(dòng)功能
- Android實(shí)現(xiàn)可滑動(dòng)的自定義日歷控件
- Android自定義View實(shí)現(xiàn)隨手勢(shì)滑動(dòng)控件
- Android仿微信列表滑動(dòng)刪除之可滑動(dòng)控件(一)
- Android自定義滑動(dòng)解鎖控件使用詳解
- Android自定義控件實(shí)現(xiàn)滑動(dòng)開(kāi)關(guān)效果
- Android自定義雙向滑動(dòng)控件
相關(guān)文章
Android 解決使用SearchView時(shí)軟鍵盤不支持actionSearch的問(wèn)題
本文主要介紹使用SearchView時(shí)軟鍵盤不支持actionSearch,這里提供了解決方案,希望能幫助開(kāi)發(fā)Android應(yīng)用的同學(xué)2016-07-07基于DownloadManager的簡(jiǎn)單下載器編寫小結(jié)
Android自帶的DownloadManager是一個(gè)很好的下載文件的工具。該類在API level 9之后出現(xiàn),它已經(jīng)幫我們處理了下載失敗、重新下載等功能,整個(gè)下載過(guò)程全部交給系統(tǒng)負(fù)責(zé),不需要我們過(guò)多的處理,非常的nice。關(guān)鍵的是用起來(lái)也很簡(jiǎn)單,稍微封裝一下就可以幾句話搞定下載2017-12-12Android中home鍵和back鍵區(qū)別實(shí)例分析
這篇文章主要介紹了Android中home鍵和back鍵區(qū)別,以實(shí)例形式較為詳細(xì)的分析并總結(jié)了home鍵和back鍵區(qū)別及使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09Android利用ViewDragHelper輕松實(shí)現(xiàn)拼圖游戲的示例
本篇文章主要介紹了Android利用ViewDragHelper輕松實(shí)現(xiàn)拼圖游戲的示例,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-11-11android基于SwipeRefreshLayout實(shí)現(xiàn)類QQ的側(cè)滑刪除
本篇文章主要介紹了android基于SwipeRefreshLayout實(shí)現(xiàn)類QQ的側(cè)滑刪除,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-10-10Android中Activity和Fragment傳遞數(shù)據(jù)的兩種方式
本篇文章主要介紹了Android中Activity和Fragment傳遞數(shù)據(jù)的兩種方式,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-09-09詳解Android應(yīng)用開(kāi)發(fā)--MP3音樂(lè)播放器代碼實(shí)現(xiàn)(一)
這篇文章主要介紹了詳解Android應(yīng)用開(kāi)發(fā)--MP3音樂(lè)播放器代碼實(shí)現(xiàn)(一),非常具有實(shí)用價(jià)值,需要的朋友可以參考下 。2017-01-01基于Android中獲取資源的id和url方法總結(jié)
下面小編就為大家分享一篇基于Android中獲取資源的id和url方法總結(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02Android ListView實(shí)現(xiàn)仿iPhone實(shí)現(xiàn)左滑刪除按鈕的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇Android ListView實(shí)現(xiàn)仿iPhone實(shí)現(xiàn)左滑刪除按鈕的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08Android實(shí)現(xiàn)zip文件壓縮及解壓縮的方法
這篇文章主要介紹了Android實(shí)現(xiàn)zip文件壓縮及解壓縮的方法,涉及Android針對(duì)文件的遍歷及zip壓縮與解壓縮的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07