《Android 群英传》读书笔记：自定义 View -- 比例图

转载请注明出处： http://blog.csdn.net/like_program/article/details/53241308

先看一下我们最终要实现的自定义 View。

最终效果图：

分析

首先，我们来分析下这个自定义 View 的组成：中间是一个圆形，圆形中显示的有文字，外圈是弧线。这样的话，就很简单了，我们只要分别绘制出圆，文字，弧线就行了。

新建项目

打开 Android Studio，新建 CircleProgressTest 项目。

新建 CircleProgressView.java，继承自 View，并实现 CircleProgressView.java 的三个构造方法，代码如下：

package com.example.circleprogresstest;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;

/**
 * 自定义 View 比例图
 */
public class CircleProgressView extends View {
   

    public CircleProgressView(Context context) {
        super(context);
    }

    public CircleProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

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

1. 绘制圆

我们先把圆绘制出来。圆的半径是屏幕宽度的 1/4，原点坐标的 x，y 值大小都是屏幕宽度的 1/2。

修改 CircleProgressView.java，代码如下：

package com.example.circleprogresstest;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;

/**
 * 自定义 View 比例图
 */
public class CircleProgressView extends View {
   

    private Context mContext;

    /**
     * 圆的画笔
     */
    private Paint mCirclePaint;

    /**
     * 圆心的 x，y 坐标
     */
    private float mCircleXY;

    /**
     * 圆的半径
     */
    private float mRadius;

    /**
     * 屏幕宽度
     */
    private int mScreenWidth;

    public CircleProgressView(Context context) {
        super(context);
    }

    public CircleProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
    }

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        mScreenWidth = getScreenWidth((Activity) mContext);

        // 圆心的 x，y 坐标
        mCircleXY = mScreenWidth / 2f;
        // 圆的半径
        mRadius = mScreenWidth / 4f;

        initPaint();
    }

    /**
     * 初始化画笔
     */
    private void initPaint() {
        // 圆的画笔
        mCirclePaint = new Paint();
        // 颜色
        mCirclePaint.setColor(getResources().getColor(
                android.R.color.holo_blue_bright));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 绘制圆
        canvas.drawCircle(
                mCircleXY,
                mCircleXY,
                mRadius,
                mCirclePaint);
    }

    /**
     * 获取屏幕宽度
     *
     * @param activity
     * @return
     */
    private int getScreenWidth(Activity activity) {
        DisplayMetrics metrics = new DisplayMetrics();
        activity.getWindowManager().getDefaultDisplay().getMetrics(metrics);
        return metrics.widthPixels;
    }
}

由于圆的半径，圆心坐标都和屏幕宽度有关，所以我们定义了 getScreenWidth() 方法来获取屏幕宽度。

获取了屏幕宽度之后，我们就可以给圆的半径，圆心坐标赋值了。

接着我们初始化了画笔，给画笔设置了颜色，设置的天蓝色，这样，等会绘制出来的圆就是天蓝色。

圆的属性，画笔，都已经准备就绪了，接下来，我们就在 onDraw() 方法中画圆。

画圆使用的是 canvas.drawCircle() 方法，这里解释下 drawCircle() 的几个参数：

/**
 * 绘制圆
 * 
 * @param cx 圆心的 x 坐标
 * @param cy 圆心的 y 坐标
 * @param radius 圆的半径
 * @param paint  画笔
 */
public void drawCircle (float cx, float cy, float radius, Paint paint)

这几个参数很好理解，就不多说了。

好了，圆已经画好了，我们把自定义的 View 放在布局文件中看看效果。在 CircleProgressView 上点击右键，选择 Copy Reference：

复制 CircleProgressView 的全限定类名，拷贝到布局文件中，activity_main.xml 代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"