本篇主要記錄自定義view篮愉，自定義的view的使用非常常見(jiàn)腐芍，這里從一個(gè)簡(jiǎn)單的百分比占比控件入手。
先看下效果圖
百分比圓環(huán).gif
很簡(jiǎn)單有沒(méi)有试躏，這里只強(qiáng)寫了兩種類型猪勇，隨機(jī)進(jìn)行占比。當(dāng)然可以基于它做一些更復(fù)雜和優(yōu)化的控件颠蕴。
實(shí)現(xiàn)過(guò)程
一泣刹、自定義屬性
自定義屬性主要是在xml文件中引入控件時(shí)要用到的，當(dāng)然簡(jiǎn)單的控件也可以不需要這一步犀被，但是肯定是有好處的耙文！
在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>
這里定義了圓環(huán)的寬度掀泳，文字的大小。具體的格式可以輕松查閱到。
二员舵、建立一個(gè)組件類
顏色脑沿，名稱，和百分比數(shù)值马僻。
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();
}
/**
* 初始化畫(huà)筆
*/
private void init() {
mRectF = new RectF();
mRingPaint = new Paint();
//抗鋸齒
mRingPaint.setAntiAlias(true);
//防抖動(dòng)
mRingPaint.setDither(true);
//僅描邊(圓環(huán))
mRingPaint.setStyle(Paint.Style.STROKE);
//圓環(huán)寬度
mRingPaint.setStrokeWidth(mRingWidth);
//文字畫(huà)筆
mTextPaint = new TextPaint();
mTextPaint.setAntiAlias(true);
mTextPaint.setTextSize(numTextSize);
mTextPaint.setColor(Color.parseColor("#000000"));
//文字繪畫(huà)路徑
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沒(méi)有用到巫玻，可自行做一些其他計(jì)算使用)
mRadius = Math.min(w - getPaddingLeft() - getPaddingRight(), h - getPaddingTop() - getPaddingBottom()) / 2f;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mCanvas = canvas;
drawRingView();
}
/**
* 更新占比數(shù)據(jù)
* @param ringBeanList
*/
public void updateRing(List<RingBean> ringBeanList) {
if (ringBeanList != null) {
this.ringBeanList = ringBeanList;
postInvalidate();
}
}
/**
* 畫(huà)Ring
*/
private void drawRingView() {
float sweepAngle = 0f;
float startAngle = 0f;
//矩形坐標(biāo)
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();
//畫(huà)圓環(huán)
mCanvas.drawArc(mRectF, startAngle, sweepAngle - 1, false, mRingPaint);
//畫(huà)圓弧文字
mTextPath.addArc(mRectF, startAngle, sweepAngle - 1);
//hOffset : 與路徑起始點(diǎn)的水平偏移距離 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);
}
}
代碼注釋應(yīng)該比較全，這里還是簡(jiǎn)單說(shuō)明一下祠汇。
獲取屬性值
/**
* 獲得屬性值
* @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();
}
這是我們?cè)诘谝徊絘ttrs.xml文件中建立的圓環(huán)寬度和字體大小屬性仍秤，若沒(méi)有設(shè)置值則用默認(rèn)值進(jìn)行轉(zhuǎn)換。
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"
/>
初始化畫(huà)筆
/**
* 初始化畫(huà)筆
*/
private void init() {
mRectF = new RectF();
mRingPaint = new Paint();
//抗鋸齒
mRingPaint.setAntiAlias(true);
//防抖動(dòng)
mRingPaint.setDither(true);
//僅描邊(圓環(huán))
mRingPaint.setStyle(Paint.Style.STROKE);
//圓環(huán)寬度
mRingPaint.setStrokeWidth(mRingWidth);
//文字畫(huà)筆
mTextPaint = new TextPaint();
mTextPaint.setAntiAlias(true);
mTextPaint.setTextSize(numTextSize);
mTextPaint.setColor(Color.parseColor("#000000"));
//文字繪畫(huà)路徑
mTextPath = new Path();
}
重寫onMeasure可很，onDraw方法
這里就是主要的核心的內(nèi)容了诗力。
/**
* 畫(huà)Ring
*/
private void drawRingView() {
float sweepAngle = 0f;
float startAngle = 0f;
//矩形坐標(biāo)
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();
//畫(huà)圓環(huán)
mCanvas.drawArc(mRectF, startAngle, sweepAngle - 1, false, mRingPaint);
//畫(huà)圓弧文字
mTextPath.addArc(mRectF, startAngle, sweepAngle - 1);
//hOffset : 與路徑起始點(diǎn)的水平偏移距離 vOffset : 與路徑中心的垂直偏移量
mCanvas.drawTextOnPath(ringBeanList.get(i).getName(), mTextPath, mRingWidth, mRingWidth*2, mTextPaint);
mTextPath.reset();
}
}
這里取起始角度為0度（0度竟然是在右邊！）我抠，第一步通過(guò)計(jì)算組件類所占百分計(jì)算出圓弧角度苇本，第二步通過(guò)圓弧路徑畫(huà)弧形文字，增加需要的偏移量菜拓，這里是內(nèi)偏畫(huà)字瓣窄。
對(duì)外暴露方法
自然要提供使用者動(dòng)態(tài)更新的方法了，通過(guò)更新ringBeanList來(lái)實(shí)現(xiàn)多元素的百分比圓環(huán)纳鼎。
/**
* 更新占比數(shù)據(jù)
* @param ringBeanList
*/
public void updateRing(List<RingBean> ringBeanList) {
if (ringBeanList != null) {
this.ringBeanList = ringBeanList;
postInvalidate();
}
}
總結(jié)和衍生
以上就是自定義控件的主要步驟了俺夕，當(dāng)然十分簡(jiǎn)單。
重點(diǎn)是你可以使用它實(shí)現(xiàn)自己需要的各種效果贱鄙。
這里做一些衍生劝贸，基于上面的自定義百分比控件實(shí)現(xiàn)動(dòng)態(tài)事項(xiàng)時(shí)鐘，效果如下：
時(shí)鐘.png
主要思路
1.半小時(shí)刻度格逗宁。
2.刻度格展示代辦事項(xiàng)狀態(tài)映九。
3.外圈弧形和文字。
4.動(dòng)態(tài)時(shí)針的繪畫(huà)瞎颗。
參考學(xué)習(xí)仿小米時(shí)鐘,真的很不錯(cuò)哦件甥，膜拜，學(xué)習(xí)一下言缤！
