Android自定义控件系列案例【四】

案例效果：

模拟器上运行有些锯齿，真机上和预期一样好

案例分析：

看效果，第一直觉肯定是Android原生态控件中没有这样的控件实现这种效果，自然想到应该需要自定义控件了，没错，这就是通过自定义控件来绘制的一个圆环进度条。仔细分析发现这个效果的进度条应该由几个部分组成，首先是无进度时的浅色圆环，然后是一个随进度变化的深色圆弧，而中间部分是一个深蓝色的实心圆，最后就是显示进度百分比的文字。这几部分大部分都是图形，所以使用图形绘制技术应该可以绘制出分部分效果，然后加上进度控制部分应该心里就有底了。

技术实现：

按照上面的分析我们一部分一部分的来实现。先大概列一个步骤：

（1）自定义View，重写构造方法，重写onDraw()方法。

 重写onDraw()方法的目的是为了找到绘制图形的时机与场所。

（2）绘制浅色圆环。

需求准备Paint画笔，并设置画笔宽度，颜色，样式等，然后绘制圆环。

（3）绘制深色进度圆弧。

重置Paint画笔，并设置画笔颜色，绘制进度圆弧。

（4）添加SeekBar，并通过进度变化控制进度圆弧。

测试进度圆弧是否会随进度的变化正常工作。

（5）绘制深蓝色实心圆。

重置Paint画笔，并设置画笔颜色，绘制实心圆。

（6）绘制百分比文本。

计算进度百分比，绘制文本。

（7）自定义属性，使进度条样式可配置（扩展部分）。

• 自定义View，重写构造方法，重写onDraw()方法

package com.kedi.myprogressbar;

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.View;

public class MyProgressBar extends View {

	public MyProgressBar(Context context) {
		this(context, null);
	}
	public MyProgressBar(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}
	public MyProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
	     super(context, attrs, defStyleAttr);
		
	}

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

	}

}

 有了自定义MyProgressBar,此时就可以在XML布局中先占位了，下面是XML布局文件。

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

    <com.kedi.myprogressbar.MyProgressBar
        android:id="@+id/pg"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:padding="5dp"
        android:layout_centerInParent="true" >
    </com.kedi.myprogressbar.MyProgressBar>

    <SeekBar
        android:id="@+id/sb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/pg"
        android:max="100"
        android:layout_margin="20dp" />

</RelativeLayout>

• 绘制浅色圆环

Paint 画笔：

|- new Paint() 创建画笔

|- setColor() 设置画笔颜色

|- setStyle()设置画笔样式（Paint.Style.STROKE 虚框样式，Paint.Style.FILL 实心样式）

|- setStrokeWidth()设置画笔线宽

|- setAntiAlias()消除锯齿或毛边

|- setTextSize()设置画文本时的文本大小 

|- setTypeface()设置画文本时的文本字体

Canvas画布：

|- drawCircle(cx, cy, radius, paint)绘制圆环或圆。cx,cy:圆心坐标，radius:圆半径，paint:画笔。

|- drawText(text, x, y, paint)绘制文本。text:文本，x,y:文本坐标，paint:画笔。

|