自定义ProgressBar颜色 精致才能超越

来源:互联网 发布:mac svn上传文件 编辑:程序博客网 时间:2024/04/28 10:28
由于APP异步进行耗时操作
免不得用到ProgressBar,但是系统样式比较单一
出于新颖美观,大都自定义ProgressBar

别人都是继承View, 自己绘制

这里我给出系统的样式,但是可以自定义颜色和角度和弧度

说到系统的,我们首先根据源码,看看系统是怎么定义的

style

    <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>

android:indeterminateOnly :表示进度值是否确定,true表示不确定,false表示确定
android:progressDrawable: 表示进度显示layerDrawable
android:indeterminateDrawable:设置绘制不显示进度的进度条的Drawable对象

这里去看下系统是怎么定义progressDrawable的

<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>

看到这里大家应该都明白了

所以要想展示自己希望的颜色,我们应该在res下创建drawable文件夹,新建文件drawable/progressbar_color.xml

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" >    <!-- 背景  gradient是渐变,corners定义的是圆角 -->    <item android:id="@android:id/background">        <shape>            <corners android:radius="10dp" />            <solid android:color="#ffffff" />        </shape>    </item>    <!-- 第二条进度条颜色 -->    <item android:id="@android:id/secondaryProgress">        <clip>            <shape>                <corners android:radius="10dip" />                <gradient                    android:angle="90.0"                    android:centerColor="#ac6079"                    android:centerY="0.45"                    android:endColor="#6c213a"                    android:startColor="#e71a5e" />            </shape>        </clip>    </item>    <!-- 进度条 -->    <item android:id="@android:id/progress">        <clip>            <shape>                <corners android:radius="10dip" />                <solid android:color="#FF8080" />            </shape>        </clip>    </item></layer-list>

这里的引用方式有很多中,我这里给出两种给大家瞅瞅

第一种

然后在布局中引用就可以了。
activity_main.xml

<ProgressBar         android:id="@+id/my_progress"        android:layout_width="match_parent"        android:layout_height="12dp"        android:max="100"        android:progress="40"        android:secondaryProgress="70"        style="?android:attr/progressBarStyleHorizontal"        android:progressDrawable="@drawable/progressbar_color"/>

第二种

首先自定义style

<style name="ProgressBar_Mini" parent="@android:style/Widget.ProgressBar.Horizontal">        <item name="android:maxHeight">50dip</item>        <item name="android:minHeight">8dip</item>        <item name="android:indeterminateOnly">false</item>        <item name="android:indeterminateDrawable">@android:drawable/progressbar_color</item>        <item name="android:progressDrawable">@drawable/progressbar_mini</item>    </style>

在布局中引用

 <ProgressBar        android:id="@+id/progress"        style="@style/ProgressBar_Mini"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:progress="50" />


0 0
原创粉丝点击