本節(jié)引言:
本節(jié)給大家?guī)?lái)的是Android基本UI控件中的ProgressBar(進(jìn)度條)和SeekBar(拖動(dòng)條)逛裤,ProgressBar的應(yīng)用場(chǎng)景很多,比如 用戶登錄時(shí)邦蜜,后臺(tái)在發(fā)請(qǐng)求,以及等待服務(wù)器返回信息猜拾,這個(gè)時(shí)候會(huì)用到進(jìn)度條绍昂;或者當(dāng)在進(jìn)行一些比較 耗時(shí)的操作,需要等待一段較長(zhǎng)的時(shí)間拼岳,這個(gè)時(shí)候如果沒(méi)有提示枝誊,用戶可能會(huì)以為程序Carsh或者手機(jī)死機(jī) 了,這樣會(huì)大大降低用戶體驗(yàn)惜纸,所以在需要進(jìn)行耗時(shí)操作的地方叶撒,添加上進(jìn)度條,讓用戶知道當(dāng)前的程序 在執(zhí)行中耐版,也可以直觀的告訴用戶當(dāng)前任務(wù)的執(zhí)行進(jìn)度等!
而SeekBar祠够,相信大家對(duì)他并不陌生,最常見(jiàn)的 地方就是音樂(lè)播放器或者視頻播放器了粪牲,音量控制或者播放進(jìn)度控制古瓤,都用到了這個(gè)SeekBar
1.ProgressBar
從官方文檔,我們看到了這樣一個(gè)類關(guān)系圖:
ProgressBar繼承與View類腺阳,直接子類有AbsSeekBar和ContentLoadingProgressBar落君, 其中AbsSeekBar的子類有SeekBar和RatingBar,可見(jiàn)這二者也是基于ProgressBar實(shí)現(xiàn)的
常用屬性詳解:
- 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)度
- android:indeterminateDrawable:設(shè)置不顯示進(jìn)度的進(jìn)度條的Drawable對(duì)象
- android:indeterminateDuration:設(shè)置不精確顯示進(jìn)度的持續(xù)時(shí)間
- android:secondaryProgress:二級(jí)進(jìn)度條绎速,類似于視頻播放的一條是當(dāng)前播放進(jìn)度,一條是緩沖進(jìn)度痛侍,前者通過(guò)progress屬性進(jìn)行設(shè)置朝氓!
對(duì)應(yīng)的再Java中我們可調(diào)用下述方法:
- getMax():返回這個(gè)進(jìn)度條的范圍的上限
- getProgress():返回進(jìn)度
- getSecondaryProgress():返回次要進(jìn)度
- incrementProgressBy(int diff):指定增加的進(jìn)度
- isIndeterminate():指示進(jìn)度條是否在不確定模式下
- setIndeterminate(boolean indeterminate):設(shè)置不確定模式下
style樣式
長(zhǎng)形進(jìn)度條
style="?android:attr/progressBarStyleHorizontal"
標(biāo)題型圓形ProgressBar
style="?android:attr/progressBarStyleSmallTitle"
小號(hào)圓形ProgressBar
style="?android:attr/progressBarStyleSmall
超大號(hào)圓形ProgressBa
style="?android:attr/progressBarStyleLarge"
接下來(lái)來(lái)看看系統(tǒng)提供的默認(rèn)的進(jìn)度條的例子吧魔市!
系統(tǒng)默認(rèn)進(jìn)度條使用實(shí)例:
運(yùn)行效果圖:
實(shí)現(xiàn)布局代碼:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<!-- 系統(tǒng)提供的圓形進(jìn)度條,依次是大中小 -->
<ProgressBar
style="@android:style/Widget.ProgressBar.Small"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ProgressBar
style="@android:style/Widget.ProgressBar.Large"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!--系統(tǒng)提供的水平進(jìn)度條-->
<ProgressBar
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="18" />
<ProgressBar
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:indeterminate="true" />
</LinearLayout>
2.SeekBar
嘿嘿,這玩意是ProgressBar的子類耶赵哲,也就是ProgressBar的屬性都可以用咯待德! 而且他還有一個(gè)自己的屬性就是:android:thumb,就是允許我們自定義滑塊~ 好的枫夺,開(kāi)始本節(jié)內(nèi)容将宪!
2.1.SeekBar基本用法
好吧,基本用法其實(shí)很簡(jiǎn)單橡庞,常用的屬性無(wú)非就下面這幾個(gè)常用的屬性较坛,Java代碼里只要setXxx即可:
android:max="100" //滑動(dòng)條的最大值
android:progress="60" //滑動(dòng)條的當(dāng)前值
android:secondaryProgress="70" //二級(jí)滑動(dòng)條的進(jìn)度
android:thumb = "@mipmap/sb_icon" //滑塊的drawable
接著要說(shuō)下SeekBar的事件了,SeekBar.OnSeekBarChangeListener 我們只需重寫三個(gè)對(duì)應(yīng)的方法:
onProgressChanged:進(jìn)度發(fā)生改變時(shí)會(huì)觸發(fā)
onStartTrackingTouch:按住SeekBar時(shí)會(huì)觸發(fā)
onStopTrackingTouch:放開(kāi)SeekBar時(shí)觸發(fā)
簡(jiǎn)單的代碼示例:
效果圖:
實(shí)現(xiàn)代碼:
public class MainActivity extends AppCompatActivity {
private SeekBar sb_normal;
private TextView txt_cur;
private Context mContext;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mContext = MainActivity.this;
bindViews();
}
private void bindViews() {
sb_normal = (SeekBar) findViewById(R.id.sb_normal);
txt_cur = (TextView) findViewById(R.id.txt_cur);
sb_normal.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
txt_cur.setText("當(dāng)前進(jìn)度值:" + progress + " / 100 ");
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
Toast.makeText(mContext, "觸碰SeekBar", Toast.LENGTH_SHORT).show();
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
Toast.makeText(mContext, "放開(kāi)SeekBar", Toast.LENGTH_SHORT).show();
}
});
}
}
2.2 圖片資源自定義SeekBar
1)導(dǎo)入滑動(dòng)塊圖片(scrubber.png scrubber_focus.png),進(jìn)度條就直接xml繪制
scrubber_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/scrubber_focus"/>
<item android:drawable="@drawable/scrubber"/>
</selector>
2) seekbar_layer.xml(進(jìn)度條繪制)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--
由于本人比較懶扒最,就直接用xml代替圖片丑勤,如果伙伴們有興趣可以自己做一個(gè)progress進(jìn)度條圖片
注意:疊放順序依次為background,secondaryProgress吧趣,progress
cilp標(biāo)簽的作用就是跟隨進(jìn)度逐步顯示圖片法竞,把圖片分成N份逐個(gè)進(jìn)度顯示,避免在拖動(dòng)過(guò)程中進(jìn)度不走的情況
-->
<!--背景進(jìn)度條-->
<item android:id="@android:id/background">
<shape android:shape="line">
<stroke android:width="1dp" android:color="#8B8378"/>
<corners android:radius="1dp"></corners>
</shape>
</item>
<!--第二進(jìn)度條-->
<item android:id="@android:id/secondaryProgress">
<clip>
<shape android:shape="line">
<stroke android:width="1dp" android:color="#9932CC"/>
<corners android:radius="1dp"></corners>
</shape>
</clip>
</item>
<!--第一進(jìn)度條-->
<item android:id="@android:id/progress">
<clip>
<shape android:shape="line">
<stroke android:width="1dp" android:color="#CD5C5C"/>
<corners android:radius="1dp"></corners>
</shape>
</clip>
</item>
</layer-list>