1. 前言

一點一點學習自定義View，按照《Android開發藝術探索》中的說法，自定義View大致可以分為4類：
1. 繼承View重寫onDraw方法；
2. 繼承ViewGroup派生特殊Layout；
3. 繼承特定View；
4. 繼承特定ViewGroup

看下第一種，製作一個簡單的儀表盤進度條。

2. 實現思路

1. 繼承View；
2. 自定義屬性值：arcColor，bgColor，arc_textColor，arc_textSize，分別是前景色，背景色，進度文字顏色，進度文字字型大小；
3. 確定弧形繪製位置和文字繪製位置
4. 實現onDraw()方法

3. 效果

4. 知識點

4.1 MeasureSpec

MeasureSpec代表一個32位int值，高2位代表SpecMode，低30位代表SpecSize。SpecMode指的是測量模式，SpecSize指的是對應測量模式下的大小。

SpecMode有下面如下3中模式：

        /**
         * Measure specification mode: The parent has not imposed any constraint
         * on the child. It can be whatever size it wants.
         */
 

        public static final int UNSPECIFIED = 0 << MODE_SHIFT;

        /**
         * Measure specification mode: The parent has determined an exact size
         * for the child. The child is going to be given those bounds regardless
         * of how big it wants to be.
         */
        public
 
 static final int EXACTLY     = 1 << MODE_SHIFT;

        /**
         * Measure specification mode: The child can be as large as it wants up
         * to the specified size.
         */
        public static final int AT_MOST     = 2 << MODE_SHIFT;

SpecSize大小單位px。

生成MeasureSpec方式如下：

public static int makeMeasureSpec(@IntRange(from = 0, to = (1 << MeasureSpec.MODE_SHIFT) - 1) int size,
                                          @MeasureSpecMode int mode) {
            if (sUseBrokenMakeMeasureSpec) {
                return size + mode;
            } else {
                return (size & ~MODE_MASK) | (mode & MODE_MASK);
            }
        }

獲取size和mode的方式

        /**
         * Extracts the mode from the supplied measure specification.
         *
         * @param measureSpec the measure specification to extract the mode from
         * @return {@link android.view.View.MeasureSpec#UNSPECIFIED},
         *         {@link android.view.View.MeasureSpec#AT_MOST} or
         *         {@link android.view.View.MeasureSpec#EXACTLY}
         */
        @MeasureSpecMode
        public static int getMode(int measureSpec) {
            //noinspection ResourceType
            return (measureSpec & MODE_MASK);
        }

        /**
         * Extracts the size from the supplied measure specification.
         *
         * @param measureSpec the measure specification to extract the size from
         * @return the size in pixels defined in the supplied measure specification
         */
        public static int getSize(int measureSpec) {
            return (measureSpec & ~MODE_MASK);
        }

4.2 View的工作流程

繼承View的自定義View基本只需要關注onDraw()和onMeasure()。由於沒有子View所以不需要關注onLayout()。

4.3 圖形繪製

具體請檢視Canvas類和Paint類，這兩個類內容比較多，可以自己研究一下，有很多有用的東西。

4.3.1 Canvas繪製方法

4.3.2 Paint屬性值

Paint列舉值

設定屬性方法

5. 關鍵程式碼

5.1 attrs.xml

    <declare-styleable name="ArcView">
        <attr name="arcColor" format="color"/>
        <attr name="bgColor" format="color"/>
        <attr name="arc_textColor" format="color"/>
        <attr name="arc_textSize" format="dimension"/>
    </declare-styleable>

5.2 ArcView

public class ArcView extends View {

    private final int MAX_SWEEP_ANGLE = 240;
    private final int START_SWEEP_ANGLE = 150;
    private final int DEFAULT_MAX_PROGRESS = 100;

    private final int DEFAULT_ARC_COLOR = Color.RED;
    private final int DEFAULT_BG_COLOR = Color.DKGRAY;
    private final int DEFAULT_TEXT_COLOR = Color.BLACK;
    private final int DEFAULT_TEXT_SIZE = 40;

    private int mArcColor = DEFAULT_ARC_COLOR;
    private int mBgColor = DEFAULT_BG_COLOR;
    private int mTextColor = DEFAULT_TEXT_COLOR;
    private int mTextSize = DEFAULT_TEXT_SIZE;

    private int progress = 0;
    private int mMaxProgress = DEFAULT_MAX_PROGRESS;

    private Paint mCirclePaint;
    private Paint mBgPaint;
    private Paint mTextPaint;

    private final Rect mTextBound = new Rect();

    public ArcView(Context context) {
        this(context, null);
    }

    public ArcView(Context context,
            @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ArcView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        final TypedArray attributes = getContext().obtainStyledAttributes(attrs,
                R.styleable.ArcView);

        mArcColor = attributes
                .getColor(
                        R.styleable.ArcView_arcColor,
                        DEFAULT_ARC_COLOR);

        mBgColor = attributes
                .getColor(
                        R.styleable.ArcView_bgColor,
                        DEFAULT_BG_COLOR);

        mTextColor = attributes
                .getColor(
                        R.styleable.ArcView_arc_textColor,
                        DEFAULT_TEXT_COLOR);

        mTextSize = (int) attributes
                .getDimension(
                        R.styleable.ArcView_arc_textSize,
                        DEFAULT_TEXT_SIZE);
        attributes.recycle();
        init();
    }

    private void init() {
        mCirclePaint = new Paint();
        mCirclePaint.setColor(mArcColor);
        mCirclePaint.setStrokeWidth(8.0F);
        mCirclePaint.setDither(true);
        mCirclePaint.setAntiAlias(true);
        mCirclePaint.setStyle(Paint.Style.STROKE);


        mBgPaint = new Paint();
        mBgPaint.setColor(mBgColor);
        mBgPaint.setStrokeWidth(20.0F);
        mBgPaint.setAntiAlias(true);
        mBgPaint.setStyle(Paint.Style.STROKE);
        mBgPaint.setStrokeCap(Paint.Cap.ROUND);

        mTextPaint = new Paint();
        mTextPaint.setStrokeWidth(4);

        //字型SP單位轉換成PX
        int size =  (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
                mTextSize, getResources().getDisplayMetrics());
        mTextPaint.setTextSize(size);
        mTextPaint.setAntiAlias(true);
        mTextPaint.setColor(mTextColor);
        mTextPaint.setTextAlign(Paint.Align.LEFT);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();

        int circleWidth = getWidth() - paddingLeft - paddingRight;
        int circleHeight = getHeight() - paddingTop - paddingBottom;

        int radius = Math.min(circleWidth, circleHeight) / 2;

        int left = getLeft() + paddingLeft;
        int right = left + radius * 2;
        int top = getTop() + getPaddingTop();
        int bottom = top + 2 * radius;
        canvas.drawArc(left, top, right, bottom, START_SWEEP_ANGLE, MAX_SWEEP_ANGLE, false,
                mBgPaint);

        int sweepArc = MAX_SWEEP_ANGLE * progress / mMaxProgress;
        canvas.drawArc(left, top, right, bottom, START_SWEEP_ANGLE, sweepArc, false, mCirclePaint);

        String text = String.valueOf(progress) + "%";
        mTextPaint.getTextBounds(text, 0, text.length(),
                mTextBound);
        canvas.drawText(text, (left + right) / 2 - mTextBound.width() / 2,
                (top + bottom) / 2 + mTextBound.height() / 2, mTextPaint);
    }

    /**
     * 設定進度大小
     */
    public void setProgress(int progress) {
        if (progress < 0 || progress > mMaxProgress) {
            return;
        }
        this.progress = progress;
        invalidate();
    }

    /**
     * 設定最大進度值
     */
    public void setMaxProgress(int maxProgress) {
        this.mMaxProgress = maxProgress;
    }
}

6. 原始碼

原始碼已上傳Github，後續自定義View的學習Demo也會陸續上傳

最後

關注「碼道長」，瞭解最前沿的技術知識，擡高自己的天花板。