Android之ProgressBar(進(jìn)度條)和SeekBar(拖動(dòng)條)

本節(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>  
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市强挫,隨后出現(xiàn)的幾起案子岔霸,更是在濱河造成了極大的恐慌,老刑警劉巖俯渤,帶你破解...
    沈念sama閱讀 206,378評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件呆细,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡八匠,警方通過(guò)查閱死者的電腦和手機(jī)絮爷,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)梨树,“玉大人略水,你說(shuō)我怎么就攤上這事∪坝” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,702評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵慎璧,是天一觀的道長(zhǎng)床嫌。 經(jīng)常有香客問(wèn)我,道長(zhǎng)胸私,這世上最難降的妖魔是什么厌处? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,259評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮岁疼,結(jié)果婚禮上阔涉,老公的妹妹穿的比我還像新娘缆娃。我一直安慰自己,他們只是感情好瑰排,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布贯要。 她就那樣靜靜地躺著,像睡著了一般椭住。 火紅的嫁衣襯著肌膚如雪崇渗。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,036評(píng)論 1 285
  • 那天京郑,我揣著相機(jī)與錄音宅广,去河邊找鬼。 笑死些举,一個(gè)胖子當(dāng)著我的面吹牛跟狱,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播户魏,決...
    沈念sama閱讀 38,349評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼驶臊,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了绪抛?” 一聲冷哼從身側(cè)響起资铡,我...
    開(kāi)封第一講書(shū)人閱讀 36,979評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎幢码,沒(méi)想到半個(gè)月后笤休,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,469評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡症副,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評(píng)論 2 323
  • 正文 我和宋清朗相戀三年店雅,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片贞铣。...
    茶點(diǎn)故事閱讀 38,059評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡闹啦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出辕坝,到底是詐尸還是另有隱情窍奋,我是刑警寧澤,帶...
    沈念sama閱讀 33,703評(píng)論 4 323
  • 正文 年R本政府宣布酱畅,位于F島的核電站琳袄,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏纺酸。R本人自食惡果不足惜窖逗,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望餐蔬。 院中可真熱鬧碎紊,春花似錦佑附、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,262評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至痴鳄,卻和暖如春瘟斜,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背痪寻。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工螺句, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人橡类。 一個(gè)月前我還...
    沈念sama閱讀 45,501評(píng)論 2 354
  • 正文 我出身青樓蛇尚,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親顾画。 傳聞我的和親對(duì)象是個(gè)殘疾皇子取劫,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,510評(píng)論 25 707
  • ¥開(kāi)啟¥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開(kāi)一個(gè)線程,因...
    小菜c閱讀 6,358評(píng)論 0 17
  • 親愛(ài)的閃閃: 你好嗎研侣? 我們很久沒(méi)見(jiàn)面了吧谱邪。 今天看見(jiàn)了云,想到了你庶诡。 云體是那么高大惦银,像大山和高峰,頂部明亮末誓,云...
    尹秋樹(shù)閱讀 292評(píng)論 0 1