Android應用初級開發——Canavas元件圖形應用

首先自定義繼承於View的檢視類MyView，在其中定義Paint（畫筆），重寫onDraw() 方法，在方法中根據任務要求呼叫Canavas的相關方法。

下面介紹一個Demo

需求：

• Function:
• 做一個圓形的紅色按鈕
• 中間有一個白色的數字
• 數字起始為20
• 每點選一次減少1

1、新建一個RedButton.java

package com.geekband.canavasdemo;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.View;

/**
 * Function:
 * 做一個圓形的紅色按鈕
 * 中間有一個白色的數字
 * 數字起始為20
 * 每點選一次減少1
 * Created by Acer on 2016/5/29 0029.
 */
public class RedButton extends View implements View.OnClickListener {

    private Paint mPaint;
    private Rect mRect;
    private int mNumber = 0;
    private int mBackgroundColor;

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

    public RedButton(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

    private void init(Context context, AttributeSet attrs) {
        mPaint = new Paint();
        mRect = new Rect();
        this.setOnClickListener(this);

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TestRedButton);
        mBackgroundColor = typedArray.getColor(R.styleable.TestRedButton_backgroundColor, Color.RED);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //做一個圓形的紅色按鈕
        //設定畫布為紅色

        /**
         * 畫一個紅色的圓
         */
        mPaint.setColor(Color.RED);
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, getWidth() / 2, mPaint);

        //中間有一個白色的數字
        mPaint.setColor(Color.WHITE);
        mPaint.setTextSize(200);

        /**
         * mRect是這個數字四周的邊距
         */
        String text = String.valueOf(mNumber);
        mPaint.getTextBounds(text, 0, text.length(), mRect);

        int textWidth = mRect.width();
        int textHeight = mRect.height();

        canvas.drawText(text, getWidth() / 2 - textWidth / 2, getHeight() / 2 + textHeight / 2, mPaint);
    }


    @Override
    public void onClick(View v) {
        //每點選一次減少1
        if (mNumber > 0) {
            mNumber--;
        } else {
            mNumber = 20;
        }
        invalidate();
    }
}

2、回到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"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.geekband.canavasdemo.MainActivity">

    <com.geekband.canavasdemo.RedButton
        android:layout_width="200dp"
        android:layout_height="200dp"/>
</RelativeLayout>

3、建立attrs.xml檔案

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="TestRedButton">
        <attr name="backgroundColor" format="color"/>
    </declare-styleable>
</resources>

4、MainActivity.java無需做任何改變
5、執行就能看到結果