五分了解Android?Progress?Bar進度條加載
1、前言
最近在開發(fā)中,同事對于android.widget下的控件一知半解,又恰好那天用到了Seekbar,想了想,那就從Seekbar's father ProgressBar 來說說android.widget下的常用控件和常用用法吧。后面也會根據(jù)這些控件來進行仿寫、擴展,做一些高度自定義的View啦。如果寫的不好,或者有錯誤之處,懇請在評論、私信、郵箱指出,萬分感謝??
2、ProgressBar
A user interface element that indicates the progress of an operation.
使用很簡單,看看一些基本的屬性
android:max:進度條的最大值
android:progress:進度條已完成進度值
android:progressDrawable:設置軌道對應的Drawable對象
android:indeterminate:如果設置成true,則進度條不精確顯示進度(會一直進行動畫)
android:indeterminateDrawable:設置不顯示進度的進度條的Drawable對象
android:indeterminateDuration:設置不精確顯示進度的持續(xù)時間
android:secondaryProgress:二級進度條(使用場景不多)
直接在布局中使用即可
<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" />
分別就對應以下圖片咯
但是這種樣式,不得不懷疑Google之前的審美,肯定是不滿意的,怎么換樣式呢。
看看XML文件,很容易發(fā)現(xiàn),這幾個ProgressBar的差異是因為style引起的,隨手點開一個@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>
一個樣式文件,分別操控了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模式下的樣式啊,那我們仿寫一個不同樣式,就很簡單了,動手。
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>
吭呲吭呲就寫出來了,看看效果
換了個顏色,加了個圓角/ 換了個圖片,還行。
我沒有去再寫環(huán)形的ProgressBar了,因為它就是個一個圖,瘋狂的在旋轉。
<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ù)官方的樣式,修一修、改一改,就可以滿足一些基本的需求了。
用起來就這么簡單,就是因為太簡單,更復雜的功能就不是ProgressBar能直接實現(xiàn)的了。比如帶個滑塊?
3、SeekBar
好吧,ProgressBar的一個子類,也在android.widget下,因為是直接繼承,而且就加了個滑塊相關的代碼,實際上它也非常簡單,然我們來看看
<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" />
樣式就在下面了
因為Seekbar相較而言就多了個thumb(就是那個滑塊),所以就著重說一下滑塊,其他的就一筆帶過咯。
主要了解的是如何設置自己的thumb和thumb的各種問題
android:thumb="@drawable/icon_seekbar_thum"
設置就這么thumb簡單,一個drawable文件解決,我這里對應的是單一圖片,不過Google的是帶有多種狀態(tài)的thumb,我們來看看官方是如何實現(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>
引用一個drawable,也是一個熟知的selector組,通過對應的item,我們就可以實現(xiàn)在不同的狀態(tài)下顯示不同的thumb了,具體的樣式我就不寫了,再說ProgressBar的樣式的時候也是有類似的操作的
不過你可能發(fā)現(xiàn)了,其實這幾個樣式看起來都差不多,是因為都是我使用Seekbar遇到的問題以及解決方法,我們細說
(1) 自定義的thumb的背景會裁剪出一個正方形,這對于不規(guī)則圖形來講是非常難看的
很簡單一行
android:splitTrack="false"
修復0。0
(2)thumb的中心點對齊bar的邊界,所以thumb是允許超出進度條一點的。有時候我們不需要
很簡單一行
android:thumbOffset="1dp"
修復0,0
(3) 你可能發(fā)現(xiàn)就算沒有寫margin和padding,seekbar也不會占滿父布局的,是因為它自帶padding,所以如果需要去掉
很簡單一行
android:paddingHorizontal="0dp"
修復0>0
(4)最后一個,SeekBar但是不想要滑塊!為什么不用ProgressBar呢?沒別的就是頭鐵!
很簡單一行
android:thumb="@null"
修復0」0
但是要注意的是,此時Seekbar還是能點擊的!所以需要把點擊事件攔截掉
sb02.setOnTouchListener { _, _ -> true }
真的修復0[]0
好了好了,thumb的監(jiān)聽事件還沒說呢
sb01.setOnSeekBarChangeListener(object : OnSeekBarChangeListener { override fun onProgressChanged(p0: SeekBar?, p1: Int, p2: Boolean) { //進度發(fā)生改變時會觸發(fā) } override fun onStartTrackingTouch(p0: SeekBar?) { //按住SeekBar時會觸發(fā) } override fun onStopTrackingTouch(p0: SeekBar?) { //放開SeekBar時觸發(fā) } })
沒啦,Seekbar就這么多。
還有一個,放在下次講吧
對了,如果你感覺你的ProgressBar不夠流暢,可以用以下這個
bar.setProgress(progress, true)
4、結尾
更多復雜的進度條需求,靠widget的控件,肯定是難以實現(xiàn)的,我們接下來會講述RatingBar,以及繼承ProgressBar,做更多好看的進度條!
以上就是五分了解Android Progress Bar進度條加載的詳細內容,更多關于Android Progress Bar的資料請關注腳本之家其它相關文章!
相關文章
Android 獲取屏幕高度,標題高度,狀態(tài)欄高度(實例代碼)
getWindow().findViewById(Window.ID_ANDROID_CONTENT)這個方法獲取到的view就是程序不包括標題欄的部分,然后就可以知道標題欄的高度了2013-11-11解析Android中如何做到Service被關閉后又自動啟動的實現(xiàn)方法
本篇文章是對在Android中如何做到Service被關閉后又自動啟動的方法進行了詳細的分析和介紹。需要的朋友參考下2013-05-05