Android 自定義水平進度條的圓角進度

有時項目中需要實現(xiàn)水平圓角進度泉瞻,如下兩種脉漏,其實很簡單


下面開始看代碼,先從主界面布局開始看起:

<?xml version="1.0" encoding="utf-8"?>
<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:gravity="center"
    android:orientation="vertical">

    <ProgressBar
        android:id="@+id/progressbar1"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_margin="10dp"
        android:max="100"
        android:progress="50"
        android:progressDrawable="@drawable/layer_list_progress_drawable_1" />

    <ProgressBar
        android:id="@+id/progressbar2"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_margin="10dp"
        android:max="100"
        android:progress="20"
        android:progressDrawable="@drawable/layer_list_progress_drawable" />

</LinearLayout>

兩個進度條布局袖牙,然后是不同的progressDrawable布局:
layer_list_progress_drawable_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"
        android:drawable="@drawable/shape_progressbar_bg" />

    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/shape_progressbar_progress" />
    </item>
</layer-list>

layer_list_progress_drawable.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"
        android:drawable="@drawable/shape_progressbar_bg" />

    <item android:id="@android:id/progress">
        <scale
            android:drawable="@drawable/shape_progressbar_progress"
            android:scaleWidth="100%" />
    </item>
</layer-list>

從上面兩布局文件可以看出侧巨,布局文件基本也是相同的,唯一的區(qū)別就是一個用的是clip另一個用的是scale贼陶。
如果在layer-list里面進行設置的話刃泡,也是要注意item的添加順序。

下面是背景碉怔,和進度文件:
shape_progressbar_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners android:radius="10dp" />
    <solid android:color="#dadada" />

</shape>

shape_progressbar_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners android:radius="10dp" />
    <solid android:color="#0484fa" />

</shape>

自定義Android進度條ProgressBar顏色的漸變

自定義Android進度條ProgressBar顏色的漸變其實也很簡單烘贴,就拿第一個水平進度來說吧,只需要修改一個layer_list_progress_drawable_1.xmllayer_list_progress_drawable.xml就可以了
layer_list_progress_drawable_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"
        android:drawable="@drawable/shape_progressbar_bg" />

    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/shape_progressbar_progress" >
            <shape>
                <corners android:radius="10dp" />
                <!--<gradient-->
                <!--android:startColor="#00FF00"-->
                <!--android:centerColor="#FFFF00"-->
                <!--android:endColor="#FF0000"/>-->
                <!--在gradient這里設置不同的顏色就會產(chǎn)生漸變的效果-->
                <gradient
                    android: startColor ="#0484fa"
                    android: endColor ="#ff00ff" />

            </shape>
        </clip>
    </item>
</layer-list>

layer_list_progress_drawable.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"
        android:drawable="@drawable/shape_progressbar_bg" />

    <item android:id="@android:id/progress">

        <scale
            android:drawable="@drawable/shape_progressbar_progress"
            android:scaleWidth="100%">
            <shape>
                <corners android:radius="10dp" />
                <!--<gradient-->
                <!--android:startColor="#00FF00"-->
                <!--android:centerColor="#FFFF00"-->
                <!--android:endColor="#FF0000"/>-->
                <!--在gradient這里設置不同的顏色就會產(chǎn)生漸變的效果-->

                <gradient
                    android: startColor ="#0484fa"
                    android: endColor ="#ff00ff" />

            </shape>
        </scale>
    </item>
</layer-list>

效果如下圖:


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末撮胧,一起剝皮案震驚了整個濱河市桨踪,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌芹啥,老刑警劉巖锻离,帶你破解...
    沈念sama閱讀 221,576評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件铺峭,死亡現(xiàn)場離奇詭異,居然都是意外死亡汽纠,警方通過查閱死者的電腦和手機卫键,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,515評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來虱朵,“玉大人莉炉,你說我怎么就攤上這事〔耆” “怎么了絮宁?”我有些...
    開封第一講書人閱讀 168,017評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長服协。 經(jīng)常有香客問我绍昂,道長,這世上最難降的妖魔是什么偿荷? 我笑而不...
    開封第一講書人閱讀 59,626評論 1 296
  • 正文 為了忘掉前任窘游,我火速辦了婚禮,結(jié)果婚禮上遭顶,老公的妹妹穿的比我還像新娘张峰。我一直安慰自己泪蔫,他們只是感情好棒旗,可當我...
    茶點故事閱讀 68,625評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著撩荣,像睡著了一般铣揉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上餐曹,一...
    開封第一講書人閱讀 52,255評論 1 308
  • 那天逛拱,我揣著相機與錄音,去河邊找鬼台猴。 笑死朽合,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的饱狂。 我是一名探鬼主播曹步,決...
    沈念sama閱讀 40,825評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼休讳!你這毒婦竟也來了讲婚?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,729評論 0 276
  • 序言:老撾萬榮一對情侶失蹤俊柔,失蹤者是張志新(化名)和其女友劉穎筹麸,沒想到半個月后活合,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,271評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡物赶,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,363評論 3 340
  • 正文 我和宋清朗相戀三年白指,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片酵紫。...
    茶點故事閱讀 40,498評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡侵续,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出憨闰,到底是詐尸還是另有隱情状蜗,我是刑警寧澤,帶...
    沈念sama閱讀 36,183評論 5 350
  • 正文 年R本政府宣布鹉动,位于F島的核電站轧坎,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏泽示。R本人自食惡果不足惜缸血,卻給世界環(huán)境...
    茶點故事閱讀 41,867評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望械筛。 院中可真熱鬧捎泻,春花似錦、人聲如沸埋哟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,338評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽赤赊。三九已至闯狱,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間抛计,已是汗流浹背哄孤。 一陣腳步聲響...
    開封第一講書人閱讀 33,458評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留吹截,地道東北人瘦陈。 一個月前我還...
    沈念sama閱讀 48,906評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像波俄,于是被迫代替她去往敵國和親晨逝。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,507評論 2 359

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