Android自定义View----时钟/仪表盘的简单实现

1.自定义属性在资源文件夹下values目录中创建一个attrs.xml文件,文件结构如下所示，declare-styleable是自定义view的名字，atrr标签就是我们要自定义的一些属性，name就是自定义属性的名字，那么format是做什么的呢？

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="DialView">
<attr name="border_color" format="color"/>
<attr name="border_width" format="dimension"/>
</declare-styleable>
</resources>

Tips：format是属性对应的值的类型，有十个值enm 枚举类型，例 android:orientation=”vertical” 此值有horizontal，和 verticaldimension 尺寸值color 颜色值，例 android:textColor = “#00FF00”boolean 布尔值，true or falseflag 位或运算float 浮点型fraction 百分数，reference 参考某一资源ID,例 android:background = “@drawable/ic_launcher”string 字符串类型integer 整型值 2.自定义View，DialView.java：

package com.example.administrator.dialview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

/**
* Created by Administrator on 2016/9/24.
*/
public class DialView extends View {
private float mBorderWidth;
private int mBorderColor;
private Paint mPaint;
private RectF mBounds;
private float width;
private float height;
float radius;
float smallLength;
float largeLength;

public DialView(Context context) {
super(context);
init();
}

public DialView(Context context, AttributeSet attrs) {
super(context, attrs);
//获取自定义的属性
TypedArray typedArray=context.getTheme().obtainStyledAttributes(attrs,R.styleable.DialView,0,0);
try {
mBorderWidth=typedArray.getDimension(R.styleable.DialView_border_width,2);
mBorderColor=typedArray.getColor(R.styleable.DialView_border_color,0xff0000ff);
}finally {
typedArray.recycle(); //一定要回收内存，防止内存泄漏
}
init();
}

public DialView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}

public void init(){   //初始化画笔
mPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(mBorderWidth);
mPaint.setColor(mBorderColor);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mBounds=new RectF(getLeft(),getTop(),getRight(),getBottom());
width=mBounds.right-mBounds.left;
height=mBounds.bottom-mBounds.top;
if(width<height){
radius=width/4;
}else {
radius=height/4;
}
smallLength=10;
largeLength=20;
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(0xffcccccc); //画布的背景色
mPaint.setColor(0xffee0000);
//在画布上绘制圆角矩形.  参数说明：rect：RectF对象。rx：x方向上的圆角半径。ry：y方向上的圆角半径。paint：绘制时所使用的画笔。
canvas.drawRoundRect(mBounds,mBounds.centerX()-(float)0.9*width/2, mBounds.centerY() - (float)0.9*height/2, mPaint);
mPaint.setColor(mBorderColor);
canvas.drawCircle(mBounds.centerX(),mBounds.centerY(),radius,mPaint);
float start_x,start_y;
float end_x,end_y;
for(int i=0;i<60;++i){
start_x= radius *(float)Math.cos(Math.PI/180 * i * 6);
start_y= radius *(float)Math.sin(Math.PI/180 * i * 6);
if(i%5==0){
end_x = start_x+largeLength*(float)Math.cos(Math.PI / 180 * i * 6);
end_y = start_y+largeLength*(float)Math.sin(Math.PI/180 * i * 6);
}else{
end_x = start_x+smallLength*(float)Math.cos(Math.PI/180 * i * 6);
end_y = start_y+smallLength*(float)Math.sin(Math.PI/180 * i * 6);
}
start_x+=mBounds.centerX();
end_x+=mBounds.centerX();
start_y+=mBounds.centerY();
end_y+=mBounds.centerY();
canvas.drawLine(start_x, start_y, end_x, end_y, mPaint);
}
canvas.drawCircle(mBounds.centerX(),mBounds.centerY(),30,mPaint);
canvas.rotate(60,mBounds.centerX(),mBounds.centerY());
canvas.drawLine(mBounds.centerX(),mBounds.centerY(),mBounds.centerX(),mBounds.centerY()-radius,mPaint);

}
}

3.xml：

<?xml version="1.0" encoding="utf-8"?><LinearLayout 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"xmlns:app="http://schemas.android.com/apk/res-auto"android:orientation="vertical"tools:context="com.example.administrator.dialview.MainActivity"><FrameLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"><com.example.administrator.dialview.DialViewandroid:layout_width="match_parent"android:layout_height="match_parent"app:border_color="#ff1ff41f"app:border_width="2dp"/></FrameLayout><FrameLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"><com.example.administrator.dialview.DialViewandroid:layout_width="match_parent"android:layout_height="match_parent"app:border_color="#ff2523f4"app:border_width="2dp"/></FrameLayout></LinearLayout>

Tips：要使用自定义的属性，如：app:border_color="#ff2523f4" 。 就要加上 xmlns:app="http://schemas.android.com/apk/res-auto"

4.运行效果图: