本篇主要记录自定义view，自定义的view的使用非常常见，这里从一个简单的百分比占比控件入手。
先看下效果图
百分比圆环.gif
很简单有没有，这里只强写了两种类型，随机进行占比。当然可以基于它做一些更复杂和优化的控件。
实现过程
一、自定义属性
自定义属性主要是在xml文件中引入控件时要用到的，当然简单的控件也可以不需要这一步，但是肯定是有好处的啊！
在values目录下新建attrs.xml文件，自定义属性如下：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="RingStatisticsView">
<attr name="ringWidth" format="reference|dimension"/>
<attr name="ringNumTextSize" format="reference|dimension"/>
</declare-styleable>
</resources>
这里定义了圆环的宽度，文字的大小。具体的格式可以轻松查阅到。
二、建立一个组件类
颜色，名称，和百分比数值。
public class RingBean {
private String color;
private String name;
private Float value;
public String getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Float getValue() {
return value;
}
public void setValue(Float value) {
this.value = value;
}
}
三、自定义view
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.view.View;
import com.itertk.qrapplication.R;
import java.util.ArrayList;
import java.util.List;
public class RingStatisticsView extends View {
private final String TAG = this.getClass().getSimpleName();
private List<RingBean> ringBeanList = new ArrayList<RingBean>();
private static int DEFAULT_RINGWIDTH = 8;
private static final int DEFAULT_TEXTSIZE = 5;
private float mRingWidth = 0;
private float numTextSize = 0;
private Canvas mCanvas;
private Paint mRingPaint;
private RectF mRectF;
private float mRadius;
private TextPaint mTextPaint;
private Path mTextPath;
public RingStatisticsView(Context context) {
super(context);
initSize(context);
init();
}
public RingStatisticsView(Context context, AttributeSet attrs) {
super(context, attrs);
initAttr(context, attrs);
initSize(context);
init();
}
public RingStatisticsView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initAttr(context, attrs);
initSize(context);
init();
}
/**
* 获得属性值
* @param context
* @param attrs
*/
private void initAttr(Context context, AttributeSet attrs) {
if (attrs == null) {
return;
}
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RingStatisticsView);
int n = array.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = array.getIndex(i);
if (attr == R.styleable.RingStatisticsView_ringWidth) {
mRingWidth = array.getDimension(attr, dp2px(context, DEFAULT_RINGWIDTH));
} else if (attr == R.styleable.RingStatisticsView_ringNumTextSize) {
numTextSize = array.getDimension(attr, dp2px(context, DEFAULT_TEXTSIZE));
}
}
array.recycle();
}
/**
* 初始化画笔
*/
private void init() {
mRectF = new RectF();
mRingPaint = new Paint();
//抗锯齿
mRingPaint.setAntiAlias(true);
//防抖动
mRingPaint.setDither(true);
//仅描边(圆环)
mRingPaint.setStyle(Paint.Style.STROKE);
//圆环宽度
mRingPaint.setStrokeWidth(mRingWidth);
//文字画笔
mTextPaint = new TextPaint();
mTextPaint.setAntiAlias(true);
mTextPaint.setTextSize(numTextSize);
mTextPaint.setColor(Color.parseColor("#000000"));
//文字绘画路径
mTextPath = new Path();
}
/**
* 初始化Size
* @param context
*/
private void initSize(Context context) {
if (mRingWidth == 0) {
mRingWidth = dp2px(context, dp2px(context, DEFAULT_RINGWIDTH));
}
if (numTextSize == 0) {
numTextSize = dp2px(context, DEFAULT_TEXTSIZE);
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int size = Math.max(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(widthMeasureSpec));
setMeasuredDimension(size, size);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
//宽和高分别去掉padding值，取min的一半即圆的半径(这里demo没有用到，可自行做一些其他计算使用)
mRadius = Math.min(w - getPaddingLeft() - getPaddingRight(), h - getPaddingTop() - getPaddingBottom()) / 2f;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mCanvas = canvas;
drawRingView();
}
/**
* 更新占比数据
* @param ringBeanList
*/
public void updateRing(List<RingBean> ringBeanList) {
if (ringBeanList != null) {
this.ringBeanList = ringBeanList;
postInvalidate();
}
}
/**
* 画Ring
*/
private void drawRingView() {
float sweepAngle = 0f;
float startAngle = 0f;
//矩形坐标
mRectF.set(getPaddingLeft() + mRingWidth / 2 , getPaddingTop() + mRingWidth / 2 , getWidth() - getPaddingRight() - mRingWidth / 2, getHeight() - getPaddingBottom() - mRingWidth / 2 );
for (int i = 0; i < ringBeanList.size(); i++) {
mRingPaint.setColor(Color.parseColor(ringBeanList.get(i).getColor()));
startAngle += sweepAngle;
sweepAngle = 360 * ringBeanList.get(i).getValue();
//画圆环
mCanvas.drawArc(mRectF, startAngle, sweepAngle - 1, false, mRingPaint);
//画圆弧文字
mTextPath.addArc(mRectF, startAngle, sweepAngle - 1);
//hOffset : 与路径起始点的水平偏移距离 vOffset : 与路径中心的垂直偏移量
mCanvas.drawTextOnPath(ringBeanList.get(i).getName(), mTextPath, mRingWidth, mRingWidth*2, mTextPaint);
mTextPath.reset();
}
}
/**
* sp2px
* @param context
* @param spValue
* @return
*/
private int sp2px(Context context, float spValue) {
final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
return (int) (spValue * fontScale + 0.5f);
}
/**
* dp2px
* @param context
* @param dpValue
* @return
*/
private int dp2px(Context context, float dpValue) {
final float densityScale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * densityScale + 0.5f);
}
}
代码注释应该比较全，这里还是简单说明一下。
获取属性值
/**
* 获得属性值
* @param context
* @param attrs
*/
private void initAttr(Context context, AttributeSet attrs) {
if (attrs == null) {
return;
}
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RingStatisticsView);
int n = array.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = array.getIndex(i);
if (attr == R.styleable.RingStatisticsView_ringWidth) {
mRingWidth = array.getDimension(attr, dp2px(context, DEFAULT_RINGWIDTH));
} else if (attr == R.styleable.RingStatisticsView_ringNumTextSize) {
numTextSize = array.getDimension(attr, dp2px(context, DEFAULT_TEXTSIZE));
}
}
array.recycle();
}
这是我们在第一步attrs.xml文件中建立的圆环宽度和字体大小属性，若没有设置值则用默认值进行转换。
View在布局xml中引用代码如下：
<com.test.RingStatisticsView
android:id="@+id/ring_statistics_view"
android:layout_width="300dp"
android:layout_height="300dp"
app:ringNumTextSize="15dp"
app:ringWidth="13.5dp"
/>
初始化画笔
/**
* 初始化画笔
*/
private void init() {
mRectF = new RectF();
mRingPaint = new Paint();
//抗锯齿
mRingPaint.setAntiAlias(true);
//防抖动
mRingPaint.setDither(true);
//仅描边(圆环)
mRingPaint.setStyle(Paint.Style.STROKE);
//圆环宽度
mRingPaint.setStrokeWidth(mRingWidth);
//文字画笔
mTextPaint = new TextPaint();
mTextPaint.setAntiAlias(true);
mTextPaint.setTextSize(numTextSize);
mTextPaint.setColor(Color.parseColor("#000000"));
//文字绘画路径
mTextPath = new Path();
}
重写onMeasure，onDraw方法
这里就是主要的核心的内容了。
/**
* 画Ring
*/
private void drawRingView() {
float sweepAngle = 0f;
float startAngle = 0f;
//矩形坐标
mRectF.set(getPaddingLeft() + mRingWidth / 2 , getPaddingTop() + mRingWidth / 2 , getWidth() - getPaddingRight() - mRingWidth / 2, getHeight() - getPaddingBottom() - mRingWidth / 2 );
for (int i = 0; i < ringBeanList.size(); i++) {
mRingPaint.setColor(Color.parseColor(ringBeanList.get(i).getColor()));
startAngle += sweepAngle;
sweepAngle = 360 * ringBeanList.get(i).getValue();
//画圆环
mCanvas.drawArc(mRectF, startAngle, sweepAngle - 1, false, mRingPaint);
//画圆弧文字
mTextPath.addArc(mRectF, startAngle, sweepAngle - 1);
//hOffset : 与路径起始点的水平偏移距离 vOffset : 与路径中心的垂直偏移量
mCanvas.drawTextOnPath(ringBeanList.get(i).getName(), mTextPath, mRingWidth, mRingWidth*2, mTextPaint);
mTextPath.reset();
}
}
这里取起始角度为0度（0度竟然是在右边！），第一步通过计算组件类所占百分计算出圆弧角度，第二步通过圆弧路径画弧形文字，增加需要的偏移量，这里是内偏画字。
对外暴露方法
自然要提供使用者动态更新的方法了，通过更新ringBeanList来实现多元素的百分比圆环。
/**
* 更新占比数据
* @param ringBeanList
*/
public void updateRing(List<RingBean> ringBeanList) {
if (ringBeanList != null) {
this.ringBeanList = ringBeanList;
postInvalidate();
}
}
总结和衍生
以上就是自定义控件的主要步骤了，当然十分简单。
重点是你可以使用它实现自己需要的各种效果。
这里做一些衍生，基于上面的自定义百分比控件实现动态事项时钟，效果如下：
时钟.png
主要思路
1.半小时刻度格。
2.刻度格展示代办事项状态。
3.外圈弧形和文字。
4.动态时针的绘画。
参考学习仿小米时钟,真的很不错哦，膜拜，学习一下！
网友评论