Android移動開發——圖像繪制技術（自定義組件）

圖像繪制技術（自定義組件）

 

——木梓婕

1、題目要求：

繪制一些簡單圖形。

2、主要設計步驟：

(1)：編寫View子類：MyView.java（也就是新建一個Java Class）。代碼如下： 

package com.example.graphicdrawingtechnique;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

public class MyView extends View
{
    public MyView(Context context, AttributeSet attributeSet)
    {
        super(context,attributeSet);
    }

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

        //繪制空心矩形
        canvas.drawColor(Color.LTGRAY);//設置組件背景顏色
        Paint paint = new Paint();//定義畫筆
        paint.setColor(Color.BLACK);//設置畫筆顏色
        paint.setStrokeWidth(5);//設置畫筆寬度
        paint.setStyle(Paint.Style.STROKE);//設置空心
        canvas.drawRect(100,70,500,300,paint);

        //繪制實心三角形
        paint.setColor(Color.MAGENTA);
        paint.setStrokeWidth(30);
        paint.setStyle(Paint.Style.FILL);
        Path path=new Path();
        path.moveTo(100,500);
        path.lineTo(500,700);
        path.lineTo(100,700);
        path.close();
        canvas.drawPath(path,paint);

        //繪制扇形
        paint.setColor(Color.BLUE);
        paint.setAlpha(80);
        paint.setStyle(Paint.Style.FILL);
        RectF rectF=new RectF(500,400,800,850);
        canvas.drawArc(rectF,200,120,true,paint);

        //繪制實心大圓
        paint.setColor(Color.YELLOW);
        paint.setStyle(Paint.Style.FILL);
        paint.setAlpha(90);
        canvas.drawCircle(750,260,120,paint);//圓心為（800,260），半徑為120

        //繪制實心小圓
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(750,260,20,paint);

        //文本
        paint.setColor(Color.BLACK);
        paint.setTextSize(45);
        canvas.drawText("本頁顯示矩形，三角形,扇形和圓形四種圖形",30,900,paint);

    }
}

(2)：在表現層布局文件activity_main.xml中，添加所設計的組件MyView類（也就是把MyView添加到布局界面XML文件中）。代碼如下： 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#45A2CC"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="graphic drawing technique"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.example.graphicdrawingtechnique.MyView
        android:id="@+id/myView"
        android:layout_width="260dp"
        android:layout_height="450dp"
        android:background="#8DC5E0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

注意：導入自定義組件時要帶包名。

(3)：在主程序MainActivity,java中建立MyView對象與布局文件的關聯。代碼如下： 

package com.example.graphicdrawingtechnique;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    MyView myView = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //setContentView(myView);
    }
}

3、結果：