自定义控件基本步骤

1、自定义View的属性
2、在View的构造方法中获得我们自定义的属性
3、重写onMesure
4、重写onDraw

自定义View的属性

• 在res/values/ 下建立一个attrs.xml

<resources>
    <!-- format是值该属性的取值类型:string,color,demension,integer,enum,reference,float,boolean,fraction,flag -->
    <declare-styleable name="CircleView">
        <attr name="border_width" format="dimension"/>
        <attr name="border_color" format="color"/>
    </declare-styleable>

</resources>

• 在layout中使用
  添加xml命名空间
  xmlns:app="http://schemas.android.com/apk/res/com.speed.customview"

<RelativeLayout     
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res/com.speed.customview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

<com.speed.customview.view.CircleView
    android:layout_width="160dp"
    android:layout_height="160dp"
    android:layout_centerInParent="true"
    android:background="#ababab"
    app:border_color="#3c3c3c"
    app:border_width="5dp" />

</RelativeLayout>

获取自定义属性

    //获取自定义的样式属性
    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleView, defStyleAttr, 0);
    mBorderWidth = a.getDimensionPixelSize(R.styleable.CircleView_border_width, DEFAULT_BORDER_WIDTH);
    mBorderColor = a.getColor(R.styleable.CircleView_border_color, DEFAULT_BORDER_COLOR);
    //释放属性数组
    a.recycle();

重写onMesure(), onDraw()

onMesure 在定义ViewGroup时才需要重写

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    int radiu = (canvas.getWidth() - mBorderWidth)/2;
    /**
     * 中心的横坐标，中心的纵坐标, 半径
     */
    canvas.drawCircle(canvas.getWidth()/2, canvas.getWidth()/2, radiu, mPaint);
}

对外提供修改属性的线程安全方法

public synchronized void setBorderWidth(int borderWidth) {
    mBorderWidth = borderWidth;
    mPaint.setStrokeWidth(mBorderWidth);
    
    //调用重绘函数
    invalidate();
    //非UI线程是不能直接更新UI的,postInvalidate()替代我们原来的invalidate()即可用在子线程更新
}

public synchronized void setBorderColor(int borderColor) {
    mBorderColor = borderColor;
    mPaint.setColor(mBorderColor);
    invalidate();
}

效果图

CircleView.png

颜色交替的圆环eg

Paste_Image.png

• 自定义属性

<declare-styleable name="CustomProgressBar">
    <attr name="first_color" format="color"/>
    <attr name="second_color" format="color"/>
    <attr name="circle_width" format="dimension"/>
    <attr name="speed" format="integer"/>
</declare-styleable>

• Java代码

public class CustomProgressBar extends View implements Runnable {

private static final int DEFAULT_BORDER_COLOR = Color.BLACK;

private int mFirstColor;
private int mSecondColor;
private int mCircleWidth;
private int mSpeed;

private int mProgress;
private Paint mPaint;

private boolean isFirst = true;

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

public CustomProgressBar(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public CustomProgressBar(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
            R.styleable.CustomProgressBar, defStyle, 0);

    mFirstColor = a.getColor(R.styleable.CustomProgressBar_first_color,
            DEFAULT_BORDER_COLOR);
    mSecondColor = a.getColor(R.styleable.CustomProgressBar_second_color,
            DEFAULT_BORDER_COLOR);
    mCircleWidth = a.getDimensionPixelSize(
            R.styleable.CustomProgressBar_circle_width, 10);
    mSpeed = a.getInteger(R.styleable.CustomProgressBar_speed, 10);
    a.recycle();

    init();
    new Thread(this).start();
}

private void init() {
    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setStyle(Paint.Style.STROKE);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    int center = getWidth() / 2; // 获取圆心x坐标
    int radius = center - mCircleWidth / 2; // 半径
    mPaint.setStrokeWidth(mCircleWidth);
    RectF oval = new RectF(center - radius, center - radius, center
            + radius, center + radius);
    if (isFirst) {
        mPaint.setColor(mFirstColor);
        canvas.drawCircle(center, center, radius, mPaint);
        mPaint.setColor(mSecondColor);
        canvas.drawArc(oval, -90, mProgress, false, mPaint);
    } else {
        mPaint.setColor(mSecondColor);
        canvas.drawCircle(center, center, radius, mPaint);
        mPaint.setColor(mFirstColor);
        canvas.drawArc(oval, -90, mProgress, false, mPaint);
    }
}

@Override
public void run() {
    while (true) {
        mProgress++;
        if (mProgress == 360) {
            mProgress = 0;
            if (!isFirst)
                isFirst = true;
            else
                isFirst = false;
        }
        postInvalidate();
        try {
            Thread.sleep(mSpeed);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }
}

}

• 使用

<com.speed.customview.view.CustomProgressBar 
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:first_color="#000000"
    app:second_color="#bbbbbb"
    app:circle_width="20dp"
    app:speed="10"
    />

http://blog.csdn.net/column/details/androidcustomview.html