最近研究了下自定义View，就自己写了个Demo练练手。网上有很多讲自定义View实现的文章，我这里就不说了，直接上Demo。
先看下效果
八卦图.png
实现思路
1、左右两边分别画一个背景为黑色和白色的半圆。
2、上下画两个小圆
3、最后画鱼眼
实现步骤
1、设置自定义属性
//这里我们设置了两个属性，一个是背景色，另一个是八卦的半径
<declare-styleable name="BaGuaView">
<attr name="bgColor" format="color"></attr>
<attr name="radius" format="integer"></attr>
</declare-styleable>
2、定义画笔和其他属性
/**
* 黑色画笔
*/
private Paint mBlackPaint;
/**
* 白色画笔
*/
private Paint mWhitePaint;
/**
* 背景颜色
*/
private int mBgColor;
/**
* 八卦半径
*/
private int mRadius;
3、初始化画笔
public BaGuaView(Context context) {
this(context, null);
}
public BaGuaView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public BaGuaView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.BaGuaView, defStyleAttr, 0);
try {
mBgColor = array.getColor(R.styleable.BaGuaView_bgColor, Color.GRAY);//默认为棕色
mRadius = array.getInteger(R.styleable.BaGuaView_radius, 100);//默认半径为100
} finally {
array.recycle();
}
mWhitePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mBlackPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mWhitePaint.setColor(Color.WHITE);
mBlackPaint.setColor(Color.BLACK);
}
4、画两个半圆
//将Canvas坐标移动到画布中心
canvas.translate(getWidth() / 2, getHeight() / 2);
//设置背景色
canvas.drawColor(mBgColor);
//设置绘制区域，这里是以画布中心为坐标原点
RectF rectF = new RectF(-mRadius, -mRadius, mRadius, mRadius);
//画左边黑色半圆
canvas.drawArc(rectF, 90, 180, true, mBlackPaint);
//画右边白色半圆
canvas.drawArc(rectF, -90, 180, true, mWhitePaint);
效果如下
八卦1.png
5、绘制两个鱼头
//圆心分别上下移动半径的一半，半径为原来的一半
canvas.drawCircle(0, -mRadius / 2, mRadius / 2, mBlackPaint);
canvas.drawCircle(0, mRadius / 2, mRadius / 2, mWhitePaint);
效果如下
八卦2.png
6、绘制鱼眼
//画两个更小的圆，还以鱼头的圆心为圆心，半径为原半径的1/6,这个值可以自己设定
canvas.drawCircle(0, -mRadius / 2, mRadius / 6, mWhitePaint);
canvas.drawCircle(0, mRadius / 2, mRadius / 6, mBlackPaint);
效果如下
八卦3.png
7、让八卦转动起来
//设置旋转角度
private float degrees = 0;
//设置完背景色之后让Canvas旋转
degrees = degrees + 3;
canvas.rotate(degrees);
//在八卦绘制完成之后每隔15ms刷新绘制,实现旋转效果
postInvalidateDelayed(15);
这样我们就通过自定义View实现了八卦图的功能。是不是很酷炫呀。
完整代码
public class BaGuaView extends View {
/**
* 黑色画笔
*/
private Paint mBlackPaint;
/**
* 白色画笔
*/
private Paint mWhitePaint;
/**
* 背景颜色
*/
private int mBgColor;
/**
* 八卦半径
*/
private int mRadius;
public BaGuaView(Context context) {
this(context, null);
}
public BaGuaView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public BaGuaView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.BaGuaView, defStyleAttr, 0);
try {
mBgColor = array.getColor(R.styleable.BaGuaView_bgColor, Color.GRAY);//默认为棕色
mRadius = array.getInteger(R.styleable.BaGuaView_radius, 100);//默认半径为100
} finally {
array.recycle();
}
mWhitePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mBlackPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mWhitePaint.setColor(Color.WHITE);
mBlackPaint.setColor(Color.BLACK);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = 0;
int height = 0;
//设定宽度
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
if (widthMode == MeasureSpec.EXACTLY) {
width = getPaddingLeft() + getPaddingRight() + widthSize;
} else if (widthMode == MeasureSpec.AT_MOST) {
width = getPaddingLeft() + getPaddingRight() + mRadius * 2;
}
//设定高度
int heightMode = MeasureSpec.getMode(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(widthMeasureSpec);
if (heightMode == MeasureSpec.EXACTLY) {
height = getPaddingBottom() + getPaddingTop() + heightSize;
} else if (widthMode == MeasureSpec.AT_MOST) {
height = getPaddingBottom() + getPaddingTop() + mRadius * 2;
}
setMeasuredDimension(width, height);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
}
//设置旋转角度
private float degrees = -5;
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//将Canvas坐标移动到画布中心
canvas.translate(getWidth() / 2, getHeight() / 2);
//设置背景色
canvas.drawColor(mBgColor);
//设置完背景色之后让Canvas旋转
degrees = degrees + 5;
canvas.rotate(degrees);
//设置绘制区域，这里是以画布中心为坐标原点
RectF rectF = new RectF(-mRadius, -mRadius, mRadius, mRadius);
//画左边黑色半圆
canvas.drawArc(rectF, 90, 180, true, mBlackPaint);
//画右边白色半圆
canvas.drawArc(rectF, -90, 180, true, mWhitePaint);
//绘制两个小圆
canvas.drawCircle(0, -mRadius / 2, mRadius / 2, mBlackPaint);
canvas.drawCircle(0, mRadius / 2, mRadius / 2, mWhitePaint);
//
//绘制两个鱼眼，画两个更小的圆，还以刚鱼头的圆心为圆心，半径为原半径的1/6,这个值可以自己设定
canvas.drawCircle(0, -mRadius / 2, mRadius / 6, mWhitePaint);
canvas.drawCircle(0, mRadius / 2, mRadius / 6, mBlackPaint);
//每隔15ms刷新
postInvalidateDelayed(15);
}
}
