Tạo View Tùy Chỉnh Trong Android Để Vẽ Hình Học Động

Trong trường hợp cần biểu diễn hình dạng đặc biệt không có sẵn trong thư viện Android, việc phát triển View tùy chỉnh trở thành giải pháp tối ưu. Bài viết minh họa cách xây dựng thành phần giao diện có khả năng chuyển đổi giữa các hình học cơ bản khi tương tác.

Dưới đây là lớp DynamicShapeView kế thừa từ lớp View, sử dụng Canvas để vẽ các hình dạng động:

package com.example.shapesdemo;

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

public class DynamicShapeView extends View {
    private int hinhThucHienTai = 0;
    private final Paint brush = new Paint(Paint.ANTI_ALIAS_FLAG);

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

    private void khoiTao() {
        brush.setColor(0xFF34C759);
        brush.setStrokeWidth(8f);
        brush.setStyle(Paint.Style.STROKE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        
        switch (hinhThucHienTai) {
            case 0: // Vẽ hình tròn
                canvas.drawCircle(250, 250, 120, brush);
                break;
            case 1: // Vẽ hình chữ nhật
                canvas.drawRect(100, 150, 400, 350, brush);
                break;
            case 2: // Vẽ tam giác đều
                Path duongDan = new Path();
                duongDan.moveTo(150, 100);
                duongDan.lineTo(400, 250);
                duongDan.lineTo(150, 400);
                duongDan.close();
                canvas.drawPath(duongDan, brush);
                break;
        }
    }

    public void chuyenDoiHinhDang() {
        hinhThucHienTai = (hinhThucHienTai + 1) % 3;
        invalidate();
    }
}

Thành phần tùy chỉnh được khai báo trong layout activity_main.xml như thành phần thông thường:

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

    <com.example.shapesdemo.DynamicShapeView
        android:id="@+id/shape_viewer"
        android:layout_width="400dp"
        android:layout_height="400dp"
        android:layout_gravity="center"/>

</FrameLayout>

Trong MainActivity, xử lý sự kiện chạm để kích hoạt chuyển đổi hình dạng:

package com.example.shapesdemo;

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

public class MainActivity extends AppCompatActivity {
    private DynamicShapeView manHinhHienThi;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        manHinhHienThi = findViewById(R.id/shape_viewer);
        manHinhHienThi.setOnClickListener(v -> manHinhHienThi.chuyenDoiHinhDang());
    }
}

Quy trình triển khai bao gồm: Khởi tạo đối tượng vẽ với các thuộc tính đồ họa, xử lý logic chuyển đổi hình dạng thông qua biến trạng thái, và tích hợp sự kiện người dùng thông qua setOnClickListener. Phương thức invalidate() đảm bảo Canvas được vẽ lại sau mỗi thay đổi trạng thái.

Thẻ: Android custom-view canvas-api touch-events

Đăng vào ngày 17 tháng 6 lúc 23:46