自定义条形进度条StripProgressBar

像游戏一样的进度条很常用到，我们简单制作如下:

 

(1)自定义控件:

package com.yiduoyun.tiku.view;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.yiduoyun.tiku.R;
import com.yiduoyun.tiku.util.CLog;


/**
 * 条形进度条
 * @author chenwenbiao
 * @date 2014-4-14 上午10:40:34
 * @version V1.0
 */
public class StripProgressBar extends FrameLayout{
	
	private String TAG = getClass().getName();

	private LinearLayout p1;
	private LinearLayout p2;
	private TextView textView;
	
	
	private float progressBarWidth = 0;//进度条的宽，使用这个宽来计算进度的
	private String progressBarTips = null;//进度条上显示的字
	
	private Context context = null;
	
	public StripProgressBar(Context context) {
		this(context , null , 0);
	}

	public StripProgressBar(Context context, AttributeSet attrs) {
		this(context , attrs , 0);
	}
	
	public StripProgressBar(Context context, AttributeSet attrs, int defStyle) {
		super(context , attrs, defStyle);
		this.context = context;

//		inflate(context, R.layout.strip_progress_barl, null);
		LayoutInflater.from(context).inflate(R.layout.strip_progress_bar,this,true);
		
//		TypedArray mTypedArray = context.obtainStyledAttributes(attrs,
//				R.styleable.StripProgressBar);
//		
		//获取自定义属性和默认值
//		progressBarWidth = mTypedArray.getDimension(R.styleable.StripProgressBar_progressBarWidth, 200);
//		CLog.d(TAG , "====== StripProgressBar     progressBarWidth======>" + progressBarWidth);
//		progressBarHeight = mTypedArray.getDimension(R.styleable.StripProgressBar_progressBarHeight, 40);
//		progressBarTips = mTypedArray.getString(R.styleable.StripProgressBar_progressTips);
//		mTypedArray.recycle();
		
		
//		rootLayout = (RelativeLayout)findViewById(R.id.progress_bar1_root_layout);
		
		p1 = (LinearLayout)findViewById(R.id.strip_progress_bar1_layout);
	    p2 = (LinearLayout)findViewById(R.id.strip_progress_bar2_layout);
	    textView = (TextView)findViewById(R.id.strip_progress_text_tv);
	    textView.setText(progressBarTips);
	    
	    
	}
	
	@Override
	public void onLayout(boolean changed, int left, int top, int right, int bottom){
	
		super.onLayout(changed, left, top, right, bottom);
		progressBarWidth = p1.getWidth();
		CLog.d(TAG , "====== onLayout     progressBarWidth======>" + progressBarWidth);
	}

	
	@Override
	public void onWindowFocusChanged(boolean hasWindowFocus) {
		super.onWindowFocusChanged(hasWindowFocus);
		progressBarWidth = p1.getWidth();
		CLog.d(TAG , "====== onWindowFocusChanged     progressBarWidth======>" + progressBarWidth);
	}
	
	
	/**
	 * 进度，从一到100数字来表示
	 * @param progress
	 */
	public void setProgress(int progress){
		p2.setVisibility(View.VISIBLE);
		int w = (int) (progressBarWidth*progress/100.0);
		CLog.d(TAG , "======W=========>" + w);
		
		/**
		 * 宽度太小，显示的圆弧就不成圆弧，所以这里搞一个最小值给它
		 */
		CLog.d(TAG , "progress radius ==========> " + context.getResources().getDimension(R.dimen.progress_radius));
		int min = (int) (context.getResources().getDimension(R.dimen.progress_radius) * 2);
		CLog.d(TAG , "min ==========> " + min);
		if( w < min / 2  ){//太小就不显示
			w = 0;
		}
		else if(w < min) {//小于一半，不到一个最小长度，就设置成最小长度
			w = min;
		}
		
	    android.widget.RelativeLayout.LayoutParams params = (android.widget.RelativeLayout.LayoutParams)p2.getLayoutParams(); 
	    params.width = w;
	    p2.setLayoutParams(params);
	}
	
	/**
	 * 设置进度条显示的数字
	 * @param text
	 */
	public void setText(String text){
		textView.setText(text);
	}
}

 

 

(2)布局文件strip_progress_bar.xml:

<?xml version="1.0" encoding="utf-8"?>

<!-- 条形进度条 -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/progress_bar1_root_layout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:background="#00000000" >

    <LinearLayout
        android:id="@+id/strip_progress_bar1_layout"
        android:layout_width="fill_parent"
        android:layout_height="20dp"
        android:background="@drawable/shape_progress_bar_1"
        android:orientation="horizontal" />

    <LinearLayout
        android:id="@+id/strip_progress_bar2_layout"
        android:layout_width="fill_parent"
        android:layout_height="20dp"
        android:background="@drawable/shape_progress_bar_2"
        android:orientation="horizontal"
        android:visibility="invisible" />

    <TextView
        android:id="@+id/strip_progress_text_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Level:3"
        android:textColor="#fff"
        android:textSize="12sp"
        android:textStyle="bold" />

</RelativeLayout>

 

 

 

3 进度条背景shape_progress_bar_1.xml

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

            <corners android:radius="@dimen/progress_radius" />

            <!-- 填充 -->

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

            <!-- 描边 -->

            <stroke
                android:width="2dp"
                android:color="#ff06674B" />
</shape>

 

 

 

4 进度条背景shape_progress_bar_2.xml

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

            <corners android:radius="@dimen/progress_radius" />

            <!-- 填充 -->

<!--             <solid android:color="#ffff9072" /> -->

      		<!-- 渐变 -->
            <gradient
                android:startColor="#ffffcbbd"
                android:centerColor="#ffff653b"
                android:endColor="#ffffcbbd"
                android:angle="270" />

            <!-- 描边 -->

            <stroke
                android:width="3dp"
                android:color="#008E8678" />
    
</shape>

  

5.dimens.xml

<resources>
    
    <dimen name="progress_radius">10dp</dimen>
    
</resources>

 

 

6使用很简单:

<com.yiduoyun.tiku.view.StripProgressBar
                            android:id="@+id/pb_exp"
                            android:layout_width="100dp"
                            android:layout_height="18dp" />

 

StripProgressBar pb_exp = (StripProgressBar) findViewById(R.id.pb_exp);
pb_exp.setText("Level: " + level);												//设置经验条中的等级信息
		pb_exp.setProgress(PetExpAndLevelCount.getPercentFromExp(experience, level));	//设置当前进度

 

效果图如下: