五分了解Android?Progress?Bar進(jìn)度條加載
1、前言
最近在開發(fā)中,同事對(duì)于android.widget下的控件一知半解,又恰好那天用到了Seekbar,想了想,那就從Seekbar's father ProgressBar 來說說android.widget下的常用控件和常用用法吧。后面也會(huì)根據(jù)這些控件來進(jìn)行仿寫、擴(kuò)展,做一些高度自定義的View啦。如果寫的不好,或者有錯(cuò)誤之處,懇請?jiān)谠u(píng)論、私信、郵箱指出,萬分感謝??
2、ProgressBar
A user interface element that indicates the progress of an operation.
使用很簡單,看看一些基本的屬性
android:max:進(jìn)度條的最大值
android:progress:進(jìn)度條已完成進(jìn)度值
android:progressDrawable:設(shè)置軌道對(duì)應(yīng)的Drawable對(duì)象
android:indeterminate:如果設(shè)置成true,則進(jìn)度條不精確顯示進(jìn)度(會(huì)一直進(jìn)行動(dòng)畫)
android:indeterminateDrawable:設(shè)置不顯示進(jìn)度的進(jìn)度條的Drawable對(duì)象
android:indeterminateDuration:設(shè)置不精確顯示進(jìn)度的持續(xù)時(shí)間
android:secondaryProgress:二級(jí)進(jìn)度條(使用場景不多)
直接在布局中使用即可
<ProgressBar style="@android:style/Widget.ProgressBar.Small" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" /> <ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" /> <ProgressBar style="@android:style/Widget.ProgressBar.Large" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" /> <ProgressBar android:id="@+id/sb_no_beautiful" style="@android:style/Widget.ProgressBar.Horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:max="100" android:progress="50" android:secondaryProgress="70" /> <ProgressBar android:id="@+id/sb_no_beautiful2" style="@android:style/Widget.Holo.ProgressBar.Horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:indeterminate="true" android:max="100" android:progress="50" android:secondaryProgress="70" />
分別就對(duì)應(yīng)以下圖片咯
但是這種樣式,不得不懷疑Google之前的審美,肯定是不滿意的,怎么換樣式呢。
看看XML文件,很容易發(fā)現(xiàn),這幾個(gè)ProgressBar的差異是因?yàn)閟tyle引起的,隨手點(diǎn)開一個(gè)@android:style/Widget.ProgressBar.Horizontal 看看。
<style name="Widget.ProgressBar.Horizontal"> <item name="indeterminateOnly">false</item> <item name="progressDrawable">@drawable/progress_horizontal</item> <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal</item> <item name="minHeight">20dip</item> <item name="maxHeight">20dip</item> <item name="mirrorForRtl">true</item> </style>
很好,估摸著樣式就出在progressDrawable/indeterminateDrawable上面,看看 @drawable/progress_horizontal 里面
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> <shape> <corners android:radius="5dip" /> <gradient android:startColor="#ff9d9e9d" android:centerColor="#ff5a5d5a" android:centerY="0.75" android:endColor="#ff747674" android:angle="270"/> </shape> </item> <item android:id="@android:id/secondaryProgress"> <clip> <shape> <corners android:radius="5dip" /> <gradient android:startColor="#80ffd300" android:centerColor="#80ffb600" android:centerY="0.75" android:endColor="#a0ffcb00" android:angle="270"/> </shape> </clip> </item> <item android:id="@android:id/progress"> <clip> <shape> <corners android:radius="5dip" /> <gradient android:startColor="#ffffd300" android:centerColor="#ffffb600" android:centerY="0.75" android:endColor="#ffffcb00" android:angle="270"/> </shape> </clip> </item> </layer-list>
一個(gè)樣式文件,分別操控了background/secondaryProgress/progress,這樣我們很容易推測出
再看看 @drawable/progress_indeterminate_horizontal
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawable/progressbar_indeterminate1" android:duration="200" /> <item android:drawable="@drawable/progressbar_indeterminate2" android:duration="200" /> <item android:drawable="@drawable/progressbar_indeterminate3" android:duration="200" /> </animation-list>
顯而易見,這是indeterminate模式下的樣式啊,那我們仿寫一個(gè)不同樣式,就很簡單了,動(dòng)手。
styles.xml
<style name="ProgressBar_Beautiful" > <item name="android:indeterminateOnly">false</item> <item name="android:progressDrawable">@drawable/progress_horizontal_1</item> <item name="android:indeterminateDrawable">@drawable/progress_indeterminate_beautiful</item> <item name="android:mirrorForRtl">true</item> </style>
progress_horizontal_1.xml
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> <shape> <corners android:radius="25dp" /> <solid android:color="#FFF0F0F0"/> </shape> </item> <item android:id="@android:id/secondaryProgress"> <clip> <shape> <corners android:radius="25dp" /> <solid android:color="#FFC0EC87"/> </shape> </clip> </item> <item android:id="@android:id/progress"> <clip> <shape> <corners android:radius="25dp" /> <solid android:color="#FFA5E05B"/> </shape> </clip> </item> </layer-list>
progress_indeterminate_beautiful.xml
<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawable/bg_progress_001" android:duration="200" /> <item android:drawable="@drawable/bg_progress_002" android:duration="200" /> <item android:drawable="@drawable/bg_progress_003" android:duration="200" /> <item android:drawable="@drawable/bg_progress_004" android:duration="200" /> </animation-list>
吭呲吭呲就寫出來了,看看效果
換了個(gè)顏色,加了個(gè)圓角/ 換了個(gè)圖片,還行。
我沒有去再寫環(huán)形的ProgressBar了,因?yàn)樗褪莻€(gè)一個(gè)圖,瘋狂的在旋轉(zhuǎn)。
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/spinner_white_76" android:pivotX="50%" android:pivotY="50%" android:framesCount="12" android:frameDuration="100" />
還有一些屬性我就不贅述了。你可以根據(jù)官方的樣式,修一修、改一改,就可以滿足一些基本的需求了。
用起來就這么簡單,就是因?yàn)樘唵?,更?fù)雜的功能就不是ProgressBar能直接實(shí)現(xiàn)的了。比如帶個(gè)滑塊?
3、SeekBar
好吧,ProgressBar的一個(gè)子類,也在android.widget下,因?yàn)槭侵苯永^承,而且就加了個(gè)滑塊相關(guān)的代碼,實(shí)際上它也非常簡單,然我們來看看
<SeekBar android:id="@+id/sb_01" style="@style/ProgressBar_Beautiful" android:layout_width="match_parent" android:layout_height="20dp" android:layout_marginVertical="10dp" android:thumbOffset="1dp" android:max="100" android:progress="50" android:secondaryProgress="70" android:splitTrack="false" android:thumb="@drawable/icon_seekbar_thum" /> <SeekBar android:id="@+id/sb_02" style="@style/ProgressBar_Beautiful" android:layout_width="match_parent" android:layout_height="20dp" android:layout_marginVertical="10dp" android:max="100" android:progress="50" android:secondaryProgress="70" android:thumb="@drawable/icon_seekbar_thum" /> <SeekBar android:id="@+id/sb_03" style="@style/ProgressBar_Beautiful" android:layout_width="match_parent" android:layout_height="20dp" android:layout_marginVertical="10dp" android:max="100" android:progress="100" android:secondaryProgress="70" android:splitTrack="false" android:thumb="@drawable/icon_seekbar_thum" /> <SeekBar android:id="@+id/sb_04" style="@style/ProgressBar_Beautiful" android:layout_width="match_parent" android:layout_height="20dp" android:layout_marginVertical="10dp" android:thumbOffset="1dp" android:max="100" android:progress="100" android:secondaryProgress="70" android:splitTrack="false" android:thumb="@drawable/icon_seekbar_thum" /> <SeekBar android:id="@+id/sb_05" style="@style/ProgressBar_Beautiful" android:layout_width="match_parent" android:layout_height="20dp" android:layout_marginVertical="10dp" android:max="100" android:paddingHorizontal="0dp" android:progress="50" android:secondaryProgress="70" android:thumb="@drawable/icon_seekbar_thum" /> <SeekBar android:id="@+id/sb_06" style="@style/ProgressBar_Beautiful" android:layout_width="match_parent" android:layout_height="20dp" android:layout_marginVertical="10dp" android:max="100" android:progress="50" android:secondaryProgress="70" android:thumb="@null" />
樣式就在下面了
因?yàn)镾eekbar相較而言就多了個(gè)thumb(就是那個(gè)滑塊),所以就著重說一下滑塊,其他的就一筆帶過咯。
主要了解的是如何設(shè)置自己的thumb和thumb的各種問題
android:thumb="@drawable/icon_seekbar_thum"
設(shè)置就這么thumb簡單,一個(gè)drawable文件解決,我這里對(duì)應(yīng)的是單一圖片,不過Google的是帶有多種狀態(tài)的thumb,我們來看看官方是如何實(shí)現(xiàn)的
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:constantSize="true"> <item android:state_enabled="false" android:state_pressed="true"> <bitmap android:src="@drawable/abc_scrubber_control_off_mtrl_alpha"android:gravity="center"/> </item> <item android:state_enabled="false"> <bitmap android:src="@drawable/abc_scrubber_control_off_mtrl_alpha"android:gravity="center"/> </item> <item android:state_pressed="true"> <bitmap android:src="@drawable/abc_scrubber_control_to_pressed_mtrl_005" android:gravity="center"/> </item> <item> <bitmap android:src="@drawable/abc_scrubber_control_to_pressed_mtrl_000"android:gravity="center"/> </item> </selector>
引用一個(gè)drawable,也是一個(gè)熟知的selector組,通過對(duì)應(yīng)的item,我們就可以實(shí)現(xiàn)在不同的狀態(tài)下顯示不同的thumb了,具體的樣式我就不寫了,再說ProgressBar的樣式的時(shí)候也是有類似的操作的
不過你可能發(fā)現(xiàn)了,其實(shí)這幾個(gè)樣式看起來都差不多,是因?yàn)槎际俏沂褂肧eekbar遇到的問題以及解決方法,我們細(xì)說
(1) 自定義的thumb的背景會(huì)裁剪出一個(gè)正方形,這對(duì)于不規(guī)則圖形來講是非常難看的
很簡單一行
android:splitTrack="false"
修復(fù)0。0
(2)thumb的中心點(diǎn)對(duì)齊bar的邊界,所以thumb是允許超出進(jìn)度條一點(diǎn)的。有時(shí)候我們不需要
很簡單一行
android:thumbOffset="1dp"
修復(fù)0,0
(3) 你可能發(fā)現(xiàn)就算沒有寫margin和padding,seekbar也不會(huì)占滿父布局的,是因?yàn)樗詭adding,所以如果需要去掉
很簡單一行
android:paddingHorizontal="0dp"
修復(fù)0>0
(4)最后一個(gè),SeekBar但是不想要滑塊!為什么不用ProgressBar呢?沒別的就是頭鐵!
很簡單一行
android:thumb="@null"
修復(fù)0」0
但是要注意的是,此時(shí)Seekbar還是能點(diǎn)擊的!所以需要把點(diǎn)擊事件攔截掉
sb02.setOnTouchListener { _, _ -> true }
真的修復(fù)0[]0
好了好了,thumb的監(jiān)聽事件還沒說呢
sb01.setOnSeekBarChangeListener(object : OnSeekBarChangeListener { override fun onProgressChanged(p0: SeekBar?, p1: Int, p2: Boolean) { //進(jìn)度發(fā)生改變時(shí)會(huì)觸發(fā) } override fun onStartTrackingTouch(p0: SeekBar?) { //按住SeekBar時(shí)會(huì)觸發(fā) } override fun onStopTrackingTouch(p0: SeekBar?) { //放開SeekBar時(shí)觸發(fā) } })
沒啦,Seekbar就這么多。
還有一個(gè),放在下次講吧
對(duì)了,如果你感覺你的ProgressBar不夠流暢,可以用以下這個(gè)
bar.setProgress(progress, true)
4、結(jié)尾
更多復(fù)雜的進(jìn)度條需求,靠widget的控件,肯定是難以實(shí)現(xiàn)的,我們接下來會(huì)講述RatingBar,以及繼承ProgressBar,做更多好看的進(jìn)度條!
以上就是五分了解Android Progress Bar進(jìn)度條加載的詳細(xì)內(nèi)容,更多關(guān)于Android Progress Bar的資料請關(guān)注腳本之家其它相關(guān)文章!
- Android入門之彈出式對(duì)話框的實(shí)現(xiàn)
- Android入門之利用Spinner實(shí)現(xiàn)彈出選擇對(duì)話框
- Android對(duì)話框使用方法詳解
- Android自定義對(duì)話框的簡單實(shí)現(xiàn)
- Android開發(fā)基礎(chǔ)使用ProgressBar加載進(jìn)度條示例
- Android自定義View實(shí)現(xiàn)進(jìn)度條動(dòng)畫
- Android實(shí)現(xiàn)簡單實(shí)用的垂直進(jìn)度條
- android實(shí)現(xiàn)簡單進(jìn)度條ProgressBar效果
- Jetpack Compose實(shí)現(xiàn)對(duì)話框和進(jìn)度條實(shí)例解析
相關(guān)文章
Android 獲取屏幕高度,標(biāo)題高度,狀態(tài)欄高度(實(shí)例代碼)
getWindow().findViewById(Window.ID_ANDROID_CONTENT)這個(gè)方法獲取到的view就是程序不包括標(biāo)題欄的部分,然后就可以知道標(biāo)題欄的高度了2013-11-11關(guān)于Android實(shí)現(xiàn)簡單的微信朋友圈分享功能
這篇文章主要介紹了關(guān)于Android實(shí)現(xiàn)簡單的微信朋友圈分享功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下2017-02-02Android?ANR分析trace文件的產(chǎn)生流程詳情
這篇文章主要介紹了Android?ANR分析trace文件的產(chǎn)生流程詳情,文章圍繞主題展開相詳細(xì)的內(nèi)容介紹,需要的朋友可以參考一下2022-07-07解析Android中如何做到Service被關(guān)閉后又自動(dòng)啟動(dòng)的實(shí)現(xiàn)方法
本篇文章是對(duì)在Android中如何做到Service被關(guān)閉后又自動(dòng)啟動(dòng)的方法進(jìn)行了詳細(xì)的分析和介紹。需要的朋友參考下2013-05-05Flutter自定義實(shí)現(xiàn)彈出層的示例代碼
這篇文章主要為大家詳細(xì)介紹了Flutter如何自定義組件實(shí)現(xiàn)彈出層的效果,?文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08android獲取相冊圖片和路徑的實(shí)現(xiàn)方法
這篇文章主要介紹了android獲取相冊圖片和路徑的實(shí)現(xiàn)方法,本文介紹的是Android4.4后的方法,感興趣的小伙伴們可以參考一下2016-04-04