Androidはパネル機能を実現する（二）

この例では、Androidの画板機能を実現するための具体的なコードを共有しています。イマジビュー、bitmapを使った画板機能の実現について説明します。参考にしてください。具体的な内容は以下の通りです。
前言
前のAndroidがパネル機能を実現する（一）記事では、カスタマイズしたviewで画板機能を実現すると紹介しましたが、この記事ではイメージビューを使用して、bitmapで画板機能を実現します。非常に簡単です。初期化canvas、paintは、イメージビューと同じ大きさのbitmapを作成し、指をスクリーンにクリックした時に初期位置を記録し、指を移動させた時に現在位置を伝え、canvasのdraw Lineを呼び出す方法で絵を描く効果があります。描いた写真を保存したいなら、bitmapを保存すればいいです。
効果図
ボードを開発した以上、適当に描いてください。

レイアウトファイル

<?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"
    tools:context=".MainActivity">
 
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="@color/teal_200">
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="    "
            android:layout_marginStart="10dp"
            android:layout_centerVertical="true"
            android:textColor="@android:color/white"
            android:textSize="16sp"/>
 
 
        <TextView
            android:id="@+id/text_clear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="  "
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="10dp"
            android:layout_centerVertical="true"
            android:textColor="@android:color/white"
            android:textSize="16sp"/>
 
        <TextView
            android:id="@+id/text_eraser"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="  "
            android:layout_toStartOf="@id/text_clear"
            android:layout_marginEnd="10dp"
            android:layout_centerVertical="true"
            android:textColor="@android:color/white"
            android:textSize="16sp"/>
 
        <TextView
            android:id="@+id/text_blue"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="  "
            android:layout_toStartOf="@id/text_eraser"
            android:layout_marginEnd="10dp"
            android:layout_centerVertical="true"
            android:textColor="@android:color/white"
            android:textSize="16sp"/>
 
        <TextView
            android:id="@+id/text_red"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="  "
            android:layout_toStartOf="@id/text_blue"
            android:layout_marginEnd="10dp"
            android:layout_centerVertical="true"
            android:textColor="@android:color/white"
            android:textSize="16sp"/>
 
    </RelativeLayout>
    <ImageView
        android:id="@+id/image"
        android:layout_marginTop="55dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
    </ImageView>
</RelativeLayout>

DrawLine View

import android.annotation.SuppressLint
 
import android.graphics.* 
 
import android.view.MotionEvent
 
import android.widget.ImageView
 
class DrawLineView (view: ImageView){
 
private var defaultPaint: Paint
private var canvas: Canvas
private var bitmap: Bitmap
private var imageView:ImageView
private var startX = 0f
private var startY = 0f
 
init {
    imageView = view
 
    bitmap = Bitmap.createBitmap(imageView.width, imageView.height, Bitmap.Config.ARGB_8888)
    canvas = Canvas(bitmap)
    canvas.drawColor(Color.WHITE)
 
    defaultPaint = Paint(Paint.ANTI_ALIAS_FLAG or Paint.DITHER_FLAG)
    defaultPaint.style = Paint.Style.STROKE
    defaultPaint.strokeWidth = 5f
    defaultPaint.color = Color.RED
 
    canvas.drawBitmap(bitmap, Matrix(), defaultPaint)
    imageView.setImageBitmap(bitmap)
 
    eventHandler()
}
 
@SuppressLint("ClickableViewAccessibility")
private fun eventHandler() {
    imageView.setOnTouchListener { _, event ->
        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                startX = event.x
                startY = event.y
            }
 
            MotionEvent.ACTION_MOVE -> {
                val endX = event.x
                val endY = event.y
                canvas.drawLine(startX, startY, endX, endY, defaultPaint)
                startX = event.x
                startY = event.y
                imageView.setImageBitmap(bitmap)
            }
 
            MotionEvent.ACTION_UP -> {
 
            }
        }
        true
    }
}
 
fun clear(){
    bitmap.eraseColor(Color.WHITE)
    imageView.setImageBitmap(bitmap)
}
 
fun blue(){
    defaultPaint.color = Color.BLUE
}
 
fun red(){
    defaultPaint.color = Color.RED
}
 
fun eraser(){
    defaultPaint.color = Color.WHITE
}
}

これは私が自分でカプセル化したDrawLine View類で、init方法ではbitmapとcanvasを初期化して、伝わってきたbitmapの幅の高さはイマジビワの幅の高さです。次にcanvasを初期化します。paint。続いてイマジビューのタッチイベントを傍受します。
画面を指でクリックするとxy軸の位置が記録され、指が動く時はcanvasのdrawLineメソッドを呼び出すだけで線を引くことができます。DRawLineメソッドに初期位置を伝え、現在の位置と一つのpaintパラメータで、ブラシの太さ、色などをコントロールできます。ここに友達がいますが、私が呼んだのはcanvasのdrawLine方法です。これはbitmapと何の関係がありますか？実は私たちが描いたのはピクセルポイントのビットマップです。bitmapでこれらのピクセルポイントを保存します。drawLineメソッドのタスクは、これらのピクセルポイントをbitmapに記録することです。最後にbitmapをイマジビューに伝えて表示します。
MainActivity

package com.example.drawline
 
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*
 
class MainActivity : AppCompatActivity() {
 
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
 
    image.post {
        val lineView = DrawLineView(image)
 
        text_clear.setOnClickListener { lineView.clear() }
 
        text_blue.setOnClickListener { lineView.blue() }
 
        text_red.setOnClickListener { lineView.red() }
 
        text_eraser.setOnClickListener { lineView.eraser() }
    }
}
}

ビットマップを作成する時に私達が伝えたイメージビューの幅の高さは、image Viewの幅の高さが測定されていないうちにbitmapの中に伝わります。この時に伝えられたのは負の数かもしれませんので、bitmapを作成することができません。ここでまずイメージビューが完全に描かれてから、幅の高さを伝えます。他の人が使っている背景図をネットで見て、bitmapに送ったのはこの背景図の大きさです。これも解決方法の一つです。みんなは自分の要求によって合理的な方法を選べばいいです。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。