一篇学会自定义View

这里仅仅只对直接继承View来说明。下面是一个模仿QQ运动的一个View来讲解；

图示：



自定义View无外呼几个具体的步骤；

A.构造函数中初始化，一般为定义画笔，如果我们还为该view自定义了属性的话就要解析xml文件中的属性了，但是我觉得可以在代码中实现就没必要那么麻烦了。

B.onMeasure中测量View大小啊，关键调用setMeasuredDimension(adjust_width, adjust_height);宽和高就是我们要定义的大小了。我们一般按最小的一个为准，然后按固定比例缩放就可以了。

C.在OnSizeChanged()中根据我们获得的实际控件的宽和高，然后依照我们已经知晓的各种比例，这里包括各种字体的比例，图片比例，矩形，圆形，弧形，字体位置在这里都已可以计算出来的。就是简单的加减乘除了，复杂点搞个sin,cos或者搞个2介3介贝塞尔曲线等等了。

D.重点就在OnDraw()中了，其实如果在C步骤中我们定义好了而且计算精确的话，下面无非就是些调用函数的问题了。是一些死的东西。比如

画文字的话，要注意字体大小（根据字体高度适配），字体颜色（随便你了，只要不是色盲），字体的位置（根据我提供的工具就可以计算baseLineY）

画图片，就容易了，调用就行了，传个RectF,限制图片有多大，具体位置如何。

画弧形，还是要计算RectF,这个矩形是外接于弧形的，确定下弧形的圆形，弧的半径，就可以轻松得到这个RectF了。然后确定下弧的宽度。

画线,也容易定义起始点就ok了，画笔的描边宽度，填充方式，画笔颜色。画笔的线冒（就是画完线后可以看到两端有圆润，有 方的，或者什么都没有）

复杂点的线状，就是定义Path，然后moveto来定义path的起点，然后lineto一个个点连起来。在path中还可以添加弧的，想要闭合了就close，想要为path设置虚线效果，

生锈铁丝效果等用setPathEffect().

要动画的话，可以使用属性动画ValueAnimator，监听值的变化来改变onDraw中我们要变化的值，然后调用nvalidate()不断刷新即可。

想要响应点击事件就onTouchEvent中识别下手势。比如单击，双击，长按，拖拉等等。这就涉及到手势这块了。这里我们就简单的响应单击事件，单击“查看”那个区域响应单击事件。这里我们定义了一个小方块clcikRectF如果单击是发生在这里边，就使用定义一个接口给回调出去了。

E.定义好了View之后，可以在Xml文件中使用，或者在java中new都行。

以上步骤在该View中都有涉及；

1.定义一个健康参数的实体类；Sports

package com.example.sport;

import java.util.Arrays;

import java.util.List;

import android.R.integer;

public class Sports {

public int[] recentDaysSteps = new int[7];

public int friendsAverageSteps;

public int selfRank;

public List<String> arrayString;

public String championName;

public Sports(int[] recentDaysSteps, int friendsAverageSteps, int selfRank,

List<String> arrayString, String championName) {

super();

this.recentDaysSteps = recentDaysSteps;

this.friendsAverageSteps = friendsAverageSteps;

this.selfRank = selfRank;

this.arrayString = arrayString;

this.championName = championName;

}

public Sports() {

super();

}

public float getRatio() {

return (float) (1.0*recentDaysSteps[6] / friendsAverageSteps);

}

public float getAngle() {

float swipe = getRatio() * 300;

swipe = swipe>=300?300:swipe;

return swipe ;

}

public int getAverageRecentSteps(){

float average =0;

int length = recentDaysSteps.length;

for(int i=0;i<length;i++){

average += recentDaysSteps[i];

}

return (int) (average/length);

}

public int getMaxFromRecentDaysSteps(){

int length = recentDaysSteps.length;

int max = recentDaysSteps[0];

for(int i=1;i<length;i++){

if(recentDaysSteps[i]>max){

max = recentDaysSteps[i];

}

}

return max;

}

}

2.这里写一个有关画字体时，计算位置的工具类：DrawTextUtil

package com.example.sport;

import android.graphics.Paint;

import android.graphics.Paint.FontMetrics;

import android.graphics.Rect;

public class DrawTextUtil {

/**

* mPaint.setTextAlign(Align.CENTER); canvas.drawText("aafdADF", x, y,

* mPaint); Align.CENTER, 绘制的时候保证整体文字的中间在(x,y)处 Align.LEFT，

* 绘制的时候保证整体文字最左边位于(x,y)处 Align.Right， 绘制的时候保证整体文字最右边位于(x,y)处

*

*

* FontMetrics fontMetrics = mPaint.getFontMetrics(); fontMetrics.ascent;

* 可绘制的最顶部 相当于影片一样，显示的安全区域 fontMetrics.descent; 可绘制的最底部 fontMetrics.top;

* 物理最顶部,相当于电视剧的屏幕一样 fontMetrics.bottom; 物理最底部

*

* 我们的文字是显示在ascent与descent之间的 这4个值都是相当于baseline而言的。所以fontMetrics.ascent=

* ascent线-baseline线 得到的结果是负的

*

* 从而可以推出; ascent线Y坐标 = baseline线的y坐标 + fontMetric.ascent； descent线Y坐标 =

* baseline线的y坐标 + fontMetric.descent； top线Y坐标 = baseline线的y坐标 +

* fontMetric.top； bottom线Y坐标 = baseline线的y坐标 + fontMetric.bottom；

*

*

* 所绘文字宽度、int width = paint.measureText(String text); 高度

* Paint.FontMetricsInt fm = paint.getFontMetricsInt(); int top = baseLineY

* + fm.top; int bottom = baseLineY + fm.bottom; int height = fm.bottom -

* fm.top; 和最小矩形获取

*/

/**

*

* @param textPaint

* @return

* fontMetrics.top,fontMetrics.ascent,fontMetrics.descent,fontMetrics

* .bottom

*/

private static float[] getMuxLineOffset(Paint textPaint) {

FontMetrics fontMetrics = textPaint.getFontMetrics();

return new float[] { fontMetrics.top, fontMetrics.ascent,

fontMetrics.descent, fontMetrics.bottom };

}

public static float getTextWidth(Paint textPaint, String text) {

return textPaint.measureText(text);

}

// 物理尺寸的高度，实际中就是我们用来确定基线的

public static float getTextMaxHeight(Paint textPaint) {

Paint.FontMetrics fm = textPaint.getFontMetrics();

return fm.bottom - fm.top;

}

// 显示区域刚好包裹文字的高度

public static int getTextMinHeight(Paint textPaint, String text) {

Rect minRect = new Rect();

textPaint.getTextBounds(text, 0, text.length(), minRect);

return minRect.bottom - minRect.top;

}

/**

* 返回基线位置，已知top点Y坐标

*

* @param textPaint

* @return

*/

public static float getBaseLineYFromTopY(Paint textPaint, float textTopY) {

float baseLineY = textTopY - getMuxLineOffset(textPaint)[0];

return baseLineY;

}

/**

* 返回基线位置，已知center点Y坐标

* @param textPaint

* @param textCenterY

* @return

*/

public static float getBaseLineYFromCenterY(Paint textPaint,

float textCenterY) {

float baseLineY = textCenterY + getTextMaxHeight(textPaint) / 2

- getMuxLineOffset(textPaint)[3];

return baseLineY;

}

}

3.开始绘制QQ运动View:

package com.example.sport;

import android.animation.ValueAnimator;

import android.animation.ValueAnimator.AnimatorUpdateListener;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.DashPathEffect;

import android.graphics.Paint;

import android.graphics.Paint.Align;

import android.graphics.Paint.Cap;

import android.graphics.Paint.Style;

import android.graphics.Path;

import android.graphics.Path.Direction;

import android.graphics.RectF;

import android.text.TextPaint;

import android.util.AttributeSet;

import android.view.MotionEvent;

import android.view.View;

//模仿QQ运动控件

public class SportView extends View {

public interface OnLookChanmpionInfo {

public void lookChanmpionInfo(String chanmpionName);

}

//下边都是些根据具体的UI用尺子量出的比例。

private static final float LARGE_CIRCLE_LEFT_W = (float) (3 / 14.8);

private static final float LARGE_CIRCLE_RADIUS_W = (float) (((14.8 - 3 * 2) / 2) / 14.8);

private static final float LARGE_CIRCLE_TOP_H = (float) (1.2 / 18.3);

private static final float LARGE_CIRCLE_WIDTH_H = (float) (0.5 / 18.3);

private static final float RADIO_BOTTOM_H_ = (float) (2.8 / 18.3);

private static final float RADIO_H_W = (float) (18.3 / 14.8);

private static final float RECT_ROUND_RADIUS_H = (float) (0.3 / 18.3);

private float bottomHeight;

private Path bottomPath;

private RectF clickRect;

private int defaultAverageLineColor = Color.parseColor("#DDDDDD");

private int defaultBackgroundColor = Color.WHITE;

private int defaultBottomBackgroundColor = Color.parseColor("#2EC3FF");

private int defaultLargeCircleBackgroundColor = Color.parseColor("#CCEDF9");

private int defaultLargeCircleColor = Color.parseColor("#26B8F3");

private int defaultMaxLargeTextColor = Color.parseColor("#26B8F3");

private int defaultMinTextColor = Color.parseColor("#AEAFB2");

private int defaultSportValuesColor_WhenLowAverage = Color

.parseColor("#DDDDDD");

private int defaultSportValuesColor_WhenOverAverage = Color

.parseColor("#26B8F3");

private float dividerWidth;

private float firstValueX;

private boolean hasDown;

private Bitmap iconBitmap;

private int iconWidth;

private float largeCircleRadius;

private RectF largeCircleRect;

private float largeCircleWidth;

private float lookTextX;

private float maxValueY;

private Paint mPaint;

private Bitmap nextBitmap;

private float nextIcon_left;

private int nextIconSize;

private OnLookChanmpionInfo onLookChanmpionInfo;

private float perValueWidth;

private RectF rect;

private float rect_round_radius;

private Sports sports;

private float tempSwipeAngle;

private TextPaint textPaint;

private float valueBottomY;

private float viewHeight;

private float viewWidth;

private float textSize_one;

private float textSize_two;

private float textSize_three;

private float textSize_four;

//构造方法

public SportView(Context context, AttributeSet attrs) {

super(context, attrs);

mPaint = new Paint();

mPaint.setAntiAlias(true);

textPaint = new TextPaint();

textPaint.setAntiAlias(true);

iconBitmap = BitmapFactory.decodeResource(getResources(),

R.drawable.ic_launcher);

nextBitmap = BitmapFactory.decodeResource(getResources(),

R.drawable.next);

}

//根据measureSpec计算大小

private int adjustViewSize(int measureSpec) {

int defaultSize = Integer.MAX_VALUE;

int mode = MeasureSpec.getMode(measureSpec);

int size = MeasureSpec.getSize(measureSpec);

if (MeasureSpec.AT_MOST == mode || MeasureSpec.EXACTLY == mode) {

defaultSize = size;

}

return defaultSize;

}

private void drawBottom(Canvas canvas) {

// 画冠军icon

float icon_left = (float) (viewWidth * 1.1 / 14.8);

float icon_top = (float) (viewHeight - 1.8 / 2.5 * bottomHeight);

canvas.drawBitmap(iconBitmap, null, new RectF(icon_left, icon_top,

icon_left + iconWidth, icon_top + iconWidth), null);

textPaint.setTextAlign(Align.LEFT);

textPaint.setColor(Color.WHITE);

float x = (float) (viewWidth * 2.6 / 14.8);

float y = DrawTextUtil.getBaseLineYFromCenterY(textPaint, viewHeight

- bottomHeight / 2);

textPaint.setTextSize(textSize_two);

canvas.drawText(sports.championName + "获得今日冠军", x, y, textPaint);

textPaint.setTextSize(textSize_two);

canvas.drawText("查看", lookTextX, y, textPaint);

// 画查看的箭头

canvas.drawBitmap(nextBitmap, null, new RectF(nextIcon_left, viewHeight

- bottomHeight / 2 - nextIconSize / 2, nextIcon_left

+ nextIconSize, viewHeight - bottomHeight / 2 + nextIconSize

/ 2), null);

}

private void drawLargeCircleForSports(Canvas canvas) {

mPaint.setPathEffect(null);

// 大圆弧背景

mPaint.setColor(defaultLargeCircleBackgroundColor);

mPaint.setStyle(Style.STROKE);

mPaint.setStrokeCap(Cap.ROUND);

mPaint.setStrokeWidth(largeCircleWidth);

canvas.drawArc(largeCircleRect, 120f, 300, false, mPaint);

// 大圆弧前景

mPaint.setColor(defaultLargeCircleColor);

canvas.drawArc(largeCircleRect, 120f, tempSwipeAngle, false, mPaint);

// 大圆弧内文字

textPaint.setTextSize(textSize_two);

textPaint.setTextAlign(Align.CENTER);

textPaint.setColor(defaultMinTextColor);

float centerX = viewWidth / 2;

float textTopY1 = (float) (viewHeight * (3.8 / 18.3));

float y1 = DrawTextUtil.getBaseLineYFromTopY(textPaint, textTopY1);

canvas.drawText("截至23:59已走", centerX, y1, textPaint);

textPaint.setColor(defaultMaxLargeTextColor);

textPaint.setTextSize(textSize_four);

float textTopY2 = (float) (viewHeight * (4.8 / 18.3));

float y2 = DrawTextUtil.getBaseLineYFromTopY(textPaint, textTopY2);

canvas.drawText(sports.recentDaysSteps[6] + "", centerX, y2, textPaint);

textPaint.setColor(defaultMinTextColor);

textPaint.setTextSize(textSize_two);

float textTopY3 = (float) (viewHeight * (7.1 / 18.3));

float y3 = DrawTextUtil.getBaseLineYFromTopY(textPaint, textTopY3);

canvas.drawText("好友平均 " + sports.friendsAverageSteps + " 步", centerX,

y3, textPaint);

float textCenterY4 = (float) (viewHeight * (9.8 / 18.3));

textPaint.setTextSize(textSize_two);

textPaint.setColor(defaultMinTextColor);

canvas.drawText("第", (float) (centerX - 1.2 / 14.8 * viewWidth),

DrawTextUtil.getBaseLineYFromCenterY(textPaint, textCenterY4),

textPaint);

textPaint.setTextSize(textSize_three);

textPaint.setColor(defaultMaxLargeTextColor);

canvas.drawText(sports.selfRank + "", centerX,

DrawTextUtil.getBaseLineYFromCenterY(textPaint, textCenterY4),

textPaint);

textPaint.setTextSize(textSize_two);

textPaint.setColor(defaultMinTextColor);

canvas.drawText("名", (float) (centerX + 1.2 / 14.8 * viewWidth),

DrawTextUtil.getBaseLineYFromCenterY(textPaint, textCenterY4),

textPaint);

}

private void drawOuterAndInnerRect(Canvas canvas) {

mPaint.setColor(defaultBackgroundColor);

mPaint.setStyle(Style.FILL);

canvas.drawRoundRect(rect, rect_round_radius, rect_round_radius, mPaint);

mPaint.setColor(defaultBottomBackgroundColor);

mPaint.setStyle(Style.FILL);

canvas.drawPath(bottomPath, mPaint);

}

private void drawRecentDaysRecords(Canvas canvas) {

textPaint.setTextAlign(Align.LEFT);

textPaint.setColor(defaultMinTextColor);

textPaint.setTextSize(textSize_one);

float textLeft = (float) (viewWidth * 0.8 / 14.8);

canvas.drawText("最近7天", textLeft, DrawTextUtil.getBaseLineYFromTopY(

textPaint, (float) (viewHeight * 11.3 / 18.3)), textPaint);

textPaint.setTextAlign(Align.RIGHT);

canvas.drawText("平均" + sports.getAverageRecentSteps() + "步/天",

viewWidth - textLeft, DrawTextUtil.getBaseLineYFromTopY(

textPaint, (float) (viewHeight * 11.3 / 18.3)),

textPaint);

// //记录虚线Y坐标

float valueDashLineY = (float) (viewHeight * 12.8 / 18.3);

float dashWidth = (viewWidth - 2 * textLeft) / 50;

float[] intervals = { dashWidth, dashWidth };

// 画虚线

mPaint.setStrokeWidth(3);

mPaint.setColor(defaultAverageLineColor);

mPaint.setPathEffect(new DashPathEffect(intervals, 0));

Path dashPath = new Path();

dashPath.moveTo(textLeft + dashWidth / 2, valueDashLineY);

dashPath.lineTo(viewWidth - textLeft, valueDashLineY);

canvas.drawPath(dashPath, mPaint);

// 画7天柱形

int maxSteps = sports.getMaxFromRecentDaysSteps();

float pxPerStep = (valueBottomY - maxValueY) / maxSteps;

mPaint.setStrokeWidth(perValueWidth);

for (int i = 0; i < sports.recentDaysSteps.length; i++) {

float stopY = valueBottomY - pxPerStep * sports.recentDaysSteps[i];

if (stopY < valueDashLineY + 1.5) {

mPaint.setColor(defaultSportValuesColor_WhenOverAverage);

} else {

mPaint.setColor(defaultSportValuesColor_WhenLowAverage);

}

canvas.drawLine(firstValueX + dividerWidth * i, valueBottomY,

firstValueX + dividerWidth * i, stopY, mPaint);

}

// 画7天下的文字

textPaint.setTextAlign(Align.CENTER);

textPaint.setTextSize(textSize_one);

float textTopY = (float) (viewHeight * 14 / 18.3);

for (int i = 0; i < sports.recentDaysSteps.length; i++) {

canvas.drawText(sports.arrayString.get(i), firstValueX

+ dividerWidth * i,

DrawTextUtil.getBaseLineYFromTopY(textPaint, textTopY),

textPaint);

}

}

@Override

protected void onDraw(Canvas canvas) {

if (sports == null) {

return;

}

drawOuterAndInnerRect(canvas);

drawLargeCircleForSports(canvas);

drawRecentDaysRecords(canvas);

drawBottom(canvas);

}

// 测量View宽和高，并根据宽高比调整

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

int adjust_width = adjustViewSize(widthMeasureSpec);

int adjust_height = adjustViewSize(heightMeasureSpec);

// 以用户填写的宽和高的最小值作为基准，缩放得到实际宽和高

if (adjust_height >= adjust_width) {

adjust_height = (int) (adjust_width * RADIO_H_W);

} else {

adjust_width = (int) (adjust_height / RADIO_H_W);

}

setMeasuredDimension(adjust_width, adjust_height);

}

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

viewWidth = w;

viewHeight = h;

// 圆角矩形半径

rect_round_radius = (RECT_ROUND_RADIUS_H * viewHeight);

// 最外面的圆角矩形

rect = new RectF(0, 0, viewWidth, viewHeight);

// 最下面的圆角矩形的高度

bottomHeight = RADIO_BOTTOM_H_ * viewHeight;

// 最下面的圆角矩形

bottomPath = new Path();

bottomPath.moveTo(0, viewHeight - bottomHeight);

RectF bottomRect = new RectF(0, viewHeight - bottomHeight, viewWidth,

viewHeight);

float[] radii = new float[] { 0, 0, 0, 0, rect_round_radius,

rect_round_radius, rect_round_radius, rect_round_radius };

bottomPath.addRoundRect(bottomRect, radii, Direction.CW);

// 大圆环的宽度

largeCircleWidth = viewHeight * LARGE_CIRCLE_WIDTH_H;

// 大圆弧半径

largeCircleRadius = viewWidth * LARGE_CIRCLE_RADIUS_W;

// 大圆弧矩形

largeCircleRect = new RectF(LARGE_CIRCLE_LEFT_W * viewWidth,

LARGE_CIRCLE_TOP_H * viewHeight, LARGE_CIRCLE_LEFT_W

* viewWidth + 2 * largeCircleRadius, LARGE_CIRCLE_TOP_H

* viewHeight + 2 * largeCircleRadius);

firstValueX = (float) (viewWidth * 1.8 / 14.8);

valueBottomY = (float) (viewHeight * 13.6 / 18.3);

maxValueY = (float) (viewHeight * 12 / 18.3);

perValueWidth = (float) (viewWidth * 0.4 / 14.8);

dividerWidth = (float) (viewWidth * 1.8 / 14.8);

iconWidth = (int) (bottomHeight * 1.1 / 2.5);

nextIconSize = iconWidth / 2;

nextIcon_left = (float) (viewWidth * 13.6 / 14.8);

lookTextX = (float) (viewWidth * 12.3 / 14.8);

float top = viewHeight - bottomHeight / 2 - nextIconSize / 2;

clickRect = new RectF(lookTextX - nextIconSize, viewHeight

- bottomHeight, viewWidth, viewHeight);

//适配字体

textSize_one = (float) (viewHeight * 0.3 / 18.3);

textSize_two = (float) (viewHeight * 0.4 / 18.3);

textSize_three = (float) (viewHeight * 0.5 / 18.3);

textSize_four = (float) (viewHeight * 1.1 / 18.3);

}

@Override

public boolean onTouchEvent(MotionEvent event) {

int action = event.getAction();

float x2 = event.getX();

float y2 = event.getY();

if (clickRect.contains(x2, y2)) {

if (action == MotionEvent.ACTION_DOWN) {

hasDown = true;

return true;

} else if (action == MotionEvent.ACTION_UP && hasDown == true) {

// 单击

hasDown = false;

if (onLookChanmpionInfo != null) {

onLookChanmpionInfo.lookChanmpionInfo(sports.championName);

}

}

}

return super.onTouchEvent(event);

}

public void setIconBitmap(Bitmap iconBitmap) {

this.iconBitmap = iconBitmap;

}

public void setOnLookChanmpionInfo(OnLookChanmpionInfo onLookChanmpionInfo) {

this.onLookChanmpionInfo = onLookChanmpionInfo;

}

public void setSports(Sports sports) {

this.sports = sports;

ValueAnimator animator = ValueAnimator.ofFloat(0f, sports.getAngle());

animator.setDuration(2000);

animator.addUpdateListener(new AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

tempSwipeAngle = (float) animation.getAnimatedValue();

invalidate();

}

});

animator.start();

}

}

4.使用

package com.example.sport;

import java.util.ArrayList;

import java.util.List;

import android.app.Activity;

import android.graphics.BitmapFactory;

import android.os.Bundle;

import android.widget.Toast;

import com.example.sport.SportView.OnLookChanmpionInfo;

public class MainActivity extends Activity implements OnLookChanmpionInfo {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

SportView sportView = (SportView) findViewById(R.id.sportView);

Sports sports = createSports();

sportView.setSports(sports);

sportView.setIconBitmap(BitmapFactory.decodeResource(getResources(),R.drawable.icon_i));

sportView.setOnLookChanmpionInfo(this);

}

private Sports createSports() {

Sports sports = new Sports();

sports.recentDaysSteps[0] = 230;

sports.recentDaysSteps[1] = 600;

sports.recentDaysSteps[2] = 1002;

sports.recentDaysSteps[3] = 840;

sports.recentDaysSteps[4] = 2014;

sports.recentDaysSteps[5] = 365;

sports.recentDaysSteps[6] = 740;

sports.friendsAverageSteps = 1500;

sports.selfRank = 22;

List<String> list = new ArrayList<>();

for (int i = 23; i < 30; i++) {

list.add(i + "日");

}

sports.arrayString = list;

sports.championName = "安妮";

return sports;

}

@Override

public void lookChanmpionInfo(String chanmpionName) {

Toast.makeText(this,chanmpionName, 0).show();

}

}