Android自定义view之ProgressBar的实现

在学习自定义view之前我们必须先来了解一下attrs.xml这个文件，这个文件实际上定义了所有的控件的属性，就是我们在布局文件中设置的各类属性，因此在自定义控件属性的时候，创建一个attrs.xml文件来定义控件属性是十分重要的，下面我们开始进行项目的第一部分

一、attrs.xml文件的编写

首先在values文件下新建attrs.xml文件

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

<!--属性的申明-->

<attr name="progress_unreach_color" format="color"/>  //没有到达的时候进度条的颜色
<attr name="progress_unreach_height" format="dimension"/>
<attr name="progress_reach_color" format="color"/>
<attr name="progress_reach_height" format="dimension"/>
<attr name="progress_text_color" format="color"/>   //<span style="font-family: Helvetica, Tahoma, Arial, sans-serif; font-size: 14px;">format的意思是说：这个textColor可以以两种方式设置，要么是关联一个值，要么<span style="white-space:pre">													</span>//是直接设置一个颜色的RGB值，这个不难理解，因为我们可以平时也这样做过。</span>
<attr name="progress_text_size" format="dimension"/>
<attr name="progress_text_offset" format="dimension"/>  //文本与两边的距离

<!--属性的使用,不需要formet-->

<declare-styleable name="HorizontalProgressBar">

<attr name="progress_unreach_color" />
<attr name="progress_unreach_height" />
<attr name="progress_reach_color" />
<attr name="progress_reach_height"/>
<attr name="progress_text_color" />
<attr name="progress_text_size" />
<attr name="progress_text_offset" />  //文本与两边的距离

</declare-styleable>

</resources>

接下来是自定义view class的编写以及view的绘制

package com.ricahrd.customprogressbar.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.widget.ProgressBar;

import com.ricahrd.customprogressbar.R;

/**
* Created by jiangwei on 16/5/23.
*/
public class HorizontalProgressBar extends ProgressBar {

private static final int DEFAULT_TEXT_SIZE = 10; //sp
private static final int DEFAULT_TEXT_COLOR = 0xFFFC00D1;
private static final int DEFAULT_COLOR_UNREACH = 0XFFD3D6DA;
private static final int DEFAULT_HEIGHT_UNREACH = 2; //dp
private static final int DEFAULT_COLOR_REACH = 0xFFFC00D1;
private static final int DEFAULT_HEIGHT_REACH = 2; //dp
private static final int DEFAULT_TEXT_OFFSET = 10; //dp

//自定义所需成员变量
private int mTextSize = sp2px(DEFAULT_TEXT_SIZE);
private int mTextColor = DEFAULT_TEXT_COLOR;
private int mUnReachColor = DEFAULT_COLOR_UNREACH;
private int mUnReachHeight = dp2px(DEFAULT_HEIGHT_UNREACH);
private int mReachColor = DEFAULT_COLOR_REACH;
private int mReachHeight = dp2px(DEFAULT_HEIGHT_REACH);
private int mTextOffSet = dp2px(DEFAULT_TEXT_OFFSET);

private Paint mPaint = new Paint();
private int mRealWidth;

public HorizontalProgressBar(Context context) {
this(context, null);
}

public HorizontalProgressBar(Context context, AttributeSet attrs) {
super(context, attrs, 0);
}

public HorizontalProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);

obtainStyleAttrs(attrs);
}

/**
* 获取自定义属性
*
* @param attrs
*/

private void obtainStyleAttrs(AttributeSet attrs) {
TypedArray ta = getContext().obtainStyledAttributes(attrs,
R.styleable.HorizontalProgressBar);

mTextSize = (int) ta.getDimension(R.styleable.HorizontalProgressBar_progress_text_size
, mTextSize);
mTextColor = ta.getColor(R.styleable.HorizontalProgressBar_progress_text_color,
mTextColor);
mTextOffSet = (int) ta.getDimension(R.styleable.HorizontalProgressBar_progress_text_offset,
mTextOffSet);
mUnReachColor = ta.getColor(R.styleable.HorizontalProgressBar_progress_unreach_color,
mUnReachColor);
mUnReachHeight = (int) ta.getDimension(R.styleable.HorizontalProgressBar_progress_unreach_height,
mUnReachHeight);
mReachColor = ta.getColor(R.styleable.HorizontalProgressBar_progress_reach_color,
mReachColor);
mReachHeight = (int) ta.getDimension(R.styleable.HorizontalProgressBar_progress_reach_height,
mReachHeight);

ta.recycle();
mPaint.setTextSize(mTextSize);

}

@Override
protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//宽度默认用户一定会给一个确定的值
//        int widthMod = MeasureSpec.getMode(widthMeasureSpec);
int widthVal = MeasureSpec.getSize(widthMeasureSpec);
int height = measureHeight(heightMeasureSpec);
setMeasuredDimension(widthVal, height);

mRealWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();

}

//测量高度
private int measureHeight(int heightMeasureSpec) {

int result = 0;
int mode = MeasureSpec.getMode(heightMeasureSpec);
int size = MeasureSpec.getSize(heightMeasureSpec);

//用户给具体值
if (mode == MeasureSpec.EXACTLY) {
result = size;
} else {
int textheight = (int) (mPaint.descent() - mPaint.ascent());
result = getPaddingBottom() + getPaddingTop() + Math.max(Math.max(mReachHeight, mUnReachHeight),
Math.abs(textheight));
if (mode == MeasureSpec.AT_MOST) {
result = Math.min(result, size);
}

}

return result;
}

@Override
protected synchronized void onDraw(Canvas canvas) {

canvas.save();

canvas.translate(getPaddingLeft(), getHeight() / 2);
boolean noneedUnReach = false;

String text = getProgress() + "%";
//达到的长度百分比
float radio = getProgress() * 1.0f / getMax();
float progressX = radio * mRealWidth;

int textwidth = (int) mPaint.measureText(text);
if (progressX + textwidth > mRealWidth) {
progressX = mRealWidth - textwidth;
noneedUnReach = true;
}

float endx = progressX - mTextOffSet / 2;
if (endx > 0) {
mPaint.setColor(mReachColor);
mPaint.setStrokeWidth(mReachHeight);
canvas.drawLine(0, 0, endx, 0, mPaint);

}

//drawtext
mPaint.setColor(mTextColor);
mPaint.setTextSize(mTextSize);
int y = (int) -(mPaint.descent() + mPaint.ascent()) / 2;
canvas.drawText(text, progressX, y, mPaint);

//draw unreachbar
if (!noneedUnReach) {
float start = progressX + mTextOffSet / 2 + textwidth;
mPaint.setColor(mUnReachColor);
mPaint.setStrokeWidth(mUnReachHeight);
canvas.drawLine(start, 0, mRealWidth, 0, mPaint);

}
canvas.restore();
}

//dp转换成int的方法
public int dp2px(int dpVal) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpVal,
getResources().getDisplayMetrics());

}

//sp转换成int的方法
public int sp2px(int spVal) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spVal,
getResources().getDisplayMetrics());

}

}

布局文件activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:hyman="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"

>

<com.ricahrd.customprogressbar.view.HorizontalProgressBar

android:id="@+id/progress_01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:padding="5dp"
hyman:progress_reach_color="#ffff0000"
hyman:progress_text_color="#ffff0000"
hyman:progress_unreach_color="#44ff0000"
android:progress="40" />

</LinearLayout>

</ScrollView>

实现效果：



这就是一个简单的自定义水平进度条工程，欢迎大家与我交流~~~