cstriker1407的笔记本

好记性不如铅笔头

android, 编程

Android应用开发笔记：ProgressBar的使用

已发表 通过 cstriker1407 在 2013年10月24日 0 评论

阅读下个 →

最近用到了PorgressBar的一些方法和设置，在这里备忘下。

github:【 https://github.com/cstriker1407/android/tree/master/HelloPorgressBar 】

CONTENTS

1）最简单的ProgressBar

从左边到右边的XML的定义依次为： 

    <ProgressBar
        android:id="@+id/bar_large"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" />

    <ProgressBar
        android:id="@+id/bar_normal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <ProgressBar
        android:id="@+id/bar_small"
        style="?android:attr/progressBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true" />

 2）最简单的横向进度条

XML定义为： 

<ProgressBar
        android:id="@+id/bar_horizontal"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/bar_large"
/>

 Java的调用方式： 

bar_horizontal.setMax(100);
bar_horizontal.setProgress(50);
bar_horizontal.setSecondaryProgress(75);

 3）标题栏上实现进度条

该进度条没有xml定义，Java的实现方式为： 

@Override
protected void onCreate(Bundle savedInstanceState) {
	//标题栏上设置一个进度条
	super.onCreate(savedInstanceState);	
	requestWindowFeature(Window.FEATURE_PROGRESS);	
	setContentView(R.layout.activity_main);
	//
}

@Override
public void onClick(View v) 
{
	setProgressBarVisibility(true);
	setProgress(5000);
}

 4）横向图片加载进度条

如下图的剑，进度为0时是黑白的，进度为100时是全彩色的。

XML定义如下： 

<ProgressBar
        android:id="@+id/bar_color"
        style="?android:attr/progressBarStyleHorizontal" 水平样式进度条
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/bar_horizontal"
        android:layout_marginTop="32dp"
        android:background="@drawable/sword_black" 背景色为黑白色图片
        android:progressDrawable="@drawable/picture" />  进度色为自定义的xml文件
picture.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"> 
        <clip android:drawable="@drawable/sword_color"> 使用clip表示图片不重复
        </clip> 
    </item> 
</layer-list>

 通过设置自定义的进度色XML，就可以实现这种样式的进度条。

5）自定义旋转进度条

左边的进度条是通过自定义颜色来实现的。 

<ProgressBar
        android:id="@+id/progressBar1"
        android:indeterminateDrawable="@drawable/dialog_style_xml_color"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/bar_color" />

 dialog_style_xml_color的定义如下： 

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360" >

    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="8"
        android:useLevel="false" >
        <gradient
            android:centerColor="#FFDC35"
            android:centerY="0.50"
            android:endColor="#CE0000"
            android:startColor="#FFFFFF"
            android:type="sweep"
            android:useLevel="false" />
    </shape>

</rotate>

 右边的进度条是通过自定义图片来实现的。 

<ProgressBar
        android:id="@+id/progressBar2"
        android:indeterminateDrawable="@drawable/circle_progress_rotate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/progressBar1"
        android:layout_toRightOf="@+id/btn_left" />

 circle_progress_rotate的定义如下： 

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate 
    xmlns:android="http://schemas.android.com/apk/res/android"
	android:drawable="@drawable/circle_progress"
	android:pivotX="50%"
	android:pivotY="50%" 
	/>

6）竖向进度条

 

竖向进度条是通过填充Progress的方向来实现的。 

<ProgressBar
        android:id="@+id/progressBar5"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/btn_left"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/progressBar4"
        android:max="100"
        android:progress="50"
        android:progressDrawable="@drawable/vertical"
        android:secondaryProgress="78" />

 vertical的定义如下： 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:id="@android:id/progress"> 
        <clip 
            android:clipOrientation="vertical" 
            android:gravity = "bottom"> 
            <shape> 
                <corners android:radius="5dip" /> 
                <gradient 
                        android:startColor="#ffffd300" 
                        android:centerColor="#ffffb600" 
                        android:centerX="0.75" 
                        android:endColor="#ffffcb00" 
                        android:angle="90" 
                /> 
            </shape> 
        </clip> 
    </item> 
</layer-list>

7）横向图片复制进度条

、 

    <ProgressBar
        android:id="@+id/progressBar6"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/progressBar5"
        android:layout_alignParentRight="true"
        android:layout_toRightOf="@+id/progressBar5"
        android:max="100"
        android:progress="50"
        android:progressDrawable="@drawable/picture_progressbar" />

 picture_progressbar的XML实现如下，和剑的对比，可以大致领略到clip的作用。 

<?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/background">
    </item>
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/progress">
    </item>

</layer-list>

 8）渐变色横向进度条

<ProgressBar
        android:id="@+id/progressBar4"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:max="100"
        android:progress="50"
        android:secondaryProgress="78"
        android:progressDrawable="@drawable/color_progressbar"
        android:layout_below="@+id/progressBar3" />

 color_progressbar的定义如下： 

<?xml version="1.0" encoding="utf-8"?>
<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="#FF3030"   
                android:endColor="#AEEEEE"   
                android:angle="270" />   
        </shape>   
    </clip>   
</item> 
</layer-list>

 备注：

1）clip的作用需要详细查询。

2）旋转型进度条的style需要详细学习。

上述demo的部分代码来自

【 http://www.cnblogs.com/bvin/archive/2012/08/08/2628856.html 】

【 http://winwyf.blog.51cto.com/4561999/857867 】

cstriker1407

阅读下个 →

发表评论

3 × 4 =

此站点使用 Akismet 来减少垃圾评论。了解我们如何处理您的评论数据。

2025 年 4 月
一 二 三 四 五 六 日
 123456
78910111213
14151617181920
21222324252627
282930  

Contents