A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

© 陈同英 中级黑马   /  2015-11-27 19:07  /  612 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

在drawable文件夹中建立如下旋转动画文件
<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"   
    android:drawable="@drawable/loading1"   
    android:pivotX="50%"   
    android:pivotY="50%" />  
其中loading1即为您想用的图片
二 在布局文件中设置progressbar
<ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         android:indeterminateDrawable="@drawable/progressbg"
         android:indeterminateOnly="true"
         android:indeterminateBehavior="repeat"
   
       />

android 自定义水平的ProgressBar
先看效果图:


代码:
新建drawable
新建一个drawable/progressbarclor
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/common_button_red"/>
</layer-list>

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


    <corners android:radius="10dp" />


    <solid android:color="#ffffff" />


</shape>
布局:
<ProgressBar
                android:background="@drawable/progresssape"
                android:id="@+id/pb"
                android:layout_width="wrap_content"
                android:layout_height="10dp"
                android:layout_marginLeft="8dp"
                android:layout_marginRight="8dp"
                android:layout_weight="1"
                android:indeterminateOnly="false"
                android:max="100"
                android:progressDrawable="@drawable/progressbarclor" />


http://winwyf.blog.51cto.com/4561999/857867
Android原生控件只有横向进度条一种,而且没法变换样式,比如原生rom的样子

很丑是吧,当伟大的产品设计要求更换前背景,甚至纵向,甚至圆弧状的,咋办,比如

ok,我们开始吧:

一)变换前背景
先来看看progressbar的属性:
<ProgressBar
            android:id="@+id/progressBar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dip"
            android:layout_toRightOf="@+id/progressBarV"
            android:indeterminate="false"
            android:padding="2dip"
            android:progress="50" />
根据style="?android:attr/progressBarStyleHorizontal",我们找到源码中的style.xml
<style name="Widget.ProgressBar.Horizontal">
        <item name="android:indeterminateOnly">false</item>
        <item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
        <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
        <item name="android:minHeight">20dip</item>
        <item name="android:maxHeight">20dip</item>
    </style>
看到
<item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
木有,继续发掘源码,找到drawable下面的progress_horizontal.xml,这就是我们今天的主角了:

<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>
看到android:id="@android:id/progress"木有,看到android:id="@android:id/secondaryProgress"木有
把这个文件复制到自己工程下的drawable,就可以随心所欲的修改shape的属性,渐变,圆角等等
那么怎么放一个图片进去呢,ok,新建progress_horizontal1.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     
    <item android:id="@android:id/progress" android:drawable="@drawable/progressbar" />
     
</layer-list>
在android:drawable中指定你处理好的图片
然后回到布局中
<ProgressBar
            android:id="@+id/progressBar1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/progressBar"
            android:layout_margin="5dip"
            android:layout_toRightOf="@+id/progressBarV"
            android:background="@drawable/progress_bg"
            android:indeterminate="false"
            android:indeterminateOnly="false"
            android:maxHeight="20dip"
            android:minHeight="20dip"
            android:padding="2dip"
            android:progress="50"
            android:progressDrawable="@drawable/progress_horizontal1" />
android:background="@drawable/progress_bg"指定背景
android:progressDrawable="@drawable/progress_horizontal1"前景使用上面的progress_horizontal1
ok,搞定

注意看,四角还是有圆倒角的,貌似是系统自己加上去的,总之我的图片里面是没有做这个倒角处理的

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马