Android 之LayerDrawable层叠样式layer-list及自定义颜色ProgressBar

                 前面一篇文章中简单实现了ProgressBar, http://blog.csdn.net/kiritor/article/details/8726267

          但是对于我们来说系统的ProgressBar有时候同样会显得很单调,因此笔者准备实现一些特别的

          进度条 。不过在那之前我们先学习LayerDrawable层叠样式layer-list的使用方法.

                 layer-list是用于将多个图片或资源按照顺序叠层起来

                 看一看其具体的语法吧:

                 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">
		<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="#80C07AB8"
					android:centerColor="#80C07AB8" android:centerY="0.75"
					android:endColor="#a0C07AB8" android:angle="270" />
			</shape>
		</clip>
	</item>

	<item android:id="@android:id/progress">
		<clip>
			<shape>
				<corners android:radius="5dip" />
				<gradient android:startColor="#ff00DB00"
					android:centerColor="#ffBBFFBB" android:centerY="0.75"
					android:endColor="#ff00DB00" android:angle="270" />
			</shape>
		</clip>
	</item>

</layer-list>
                 之后定义一个样式,方便日后的使用:
 <style name="progressBarHorizontal_color" parent="android:Widget.ProgressBar.Horizontal">
		<item name="android:indeterminateOnly">false</item>
		<item name="android:progressDrawable">@drawable/progress_color_horizontal</item>
		<item name="android:minHeight">5dip</item>
		<item name="android:maxHeight">5dip</item>
	</style>
                 使用样式:

   style="@style/progressBarHorizontal_color"
                那么在代码中又是如何使用它的呢?如下:

Resources resources = getResources();   
Drawable[] layers = new Drawable[2];   
layers[0] = r.getDrawable(R.drawable.white);   
layers[1] = r.getDrawable(R.drawable.logo_overlay);   
LayerDrawable layerDrawable = new LayerDrawable(layers)  
((ImageView) findViewById(R.id.imageview)).setImageDrawable(layerDraw)
               无实战不学习,看一个具体的例子吧,直接上图!

                   第一张:

                Android 之LayerDrawable层叠样式layer-list及自定义颜色ProgressBar_第1张图片

                    第二张:

                

                 实现方式如下:

                      首先是层叠文件:

<?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="#80C07AB8"
					android:centerColor="#80C07AB8" android:centerY="0.75"
					android:endColor="#a0C07AB8" android:angle="270" />
			</shape>
		</clip>
	</item>

	<item android:id="@android:id/progress">
		<clip>
			<shape>
				<corners android:radius="5dip" />
				<gradient android:startColor="#ff00DB00"
					android:centerColor="#ffBBFFBB" android:centerY="0.75"
					android:endColor="#ff00DB00" android:angle="270" />
			</shape>
		</clip>
	</item>

</layer-list>
                其次是样式文件:

<style name="progressBarHorizontal_color" parent="android:Widget.ProgressBar.Horizontal">
		<item name="android:indeterminateOnly">false</item>
		<item name="android:progressDrawable">@drawable/progress_color_horizontal</item>
		<item name="android:minHeight">5dip</item>
		<item name="android:maxHeight">5dip</item>
	</style>
               布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="自定义颜色的ProgressBar演示"
        android:layout_marginTop="50dip"/>
    <ProgressBar
        android:id="@+id/progress_horizontal_color"
        style="@style/progressBarHorizontal_color"
        android:layout_width="200dip"
        android:layout_height="10dip"
        android:indeterminate="true"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="20dip"
        android:max="200"
        android:progress="51" />

</LinearLayout>
                 主Activity文件:

package com.kiritor.ui_progressbar_color;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.widget.ProgressBar;

public class ProgressBar_Color extends Activity implements Runnable {

	private ProgressBar mColor = null;
	private Thread thread;
	private int mCount = 0;
	private Handler mHandler = new Handler() {
		@Override
		public void handleMessage(Message msg) {

			finish();

			super.handleMessage(msg);
		}
	};
	private boolean stateChange;

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.mypage_color);

		showProgress();
		thread = new Thread(this);
		thread.start();
	}

	@Override
	public void run() {

		while (true) {
			int current = mColor.getProgress();// 得到当前进度值
			int currentMax = mColor.getMax();// 得到进度条的最大进度值
			// int secCurrent = bar.getSecondaryProgress();// 得到底层当前进度值
			// 以下代码实现进度值越来越大,越来越小的一个动态效果
			if (stateChange == false) {
				if (current >= currentMax) {
					stateChange = true;
				} else {
					// 设置进度值
					mColor.setProgress(current + 1);
					// 设置底层进度值
					mColor.setSecondaryProgress(current + 1);
				}
			} else {
				if (current <= 0) {
					stateChange = false;
				} else {
					mColor.setProgress(current - 1);
					mColor.setSecondaryProgress(current - 1);
				}
			}
			try {
				Thread.sleep(50);
			} catch (InterruptedException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	}

	private void showProgress() {
		mCount = 0;
		mColor = (ProgressBar) findViewById(R.id.progress_horizontal_color);
		mColor.setProgress(0);
		mColor.setIndeterminate(false);
		/*
		 * 需要注意的是setIndeterminate的参数为true 或false:
		 * true表示不确定模式:滚动条的当前值自动在最小到最大值之间来回移动
		 * ,形成这样一个动画效果,这个只是告诉别人“我正在工作”,但不能提示工作进度到哪个阶段。
                    主要是在进行一些无法确定操作时间的任务时作为提示
		 *false表示确定模式根据你实际的进度设置进度值*/
		
	}
}
               完整的源码:

                       http://download.csdn.net/detail/kiritor/5188933

                         

你可能感兴趣的:(android,UI,自定义,ProgressBar,layer-list)