[Android & Kotlin] 円や矩形を描画するCanvas

TextViewやImageViewなどはConstraintLayoutなどのレイアウトを使ってViewを表示させますが、もっと自由に直線や図形を描画するためには Canvas を使います。
　
canvas a01 - [Android & Kotlin] 円や矩形を描画するCanvas

Android Studio 4.1.3
API 30

Canvas

　
GoogleはAndroidフレームワークとしてグラフィックスにおいては２つの方法を提供しています。

Drawables
- 画像などをViewを使って表示。静的で表示させるだけの用途であり、アニメーションでも決まりきった動きのものに適している
  パフォーマンスを必要とするようなゲームにはあまり向かない
- 代表的な例は、画像をresourceのdrawableにおいてImageViewを使って表示するような例。
Canvas
- onDrawメソッドを使ってCanvas上で描画。ゲームなどの動きがありグラフィックスのredrawが頻繁に起きる場合や、カスタマイズされたアニメーションに向いている

Ref: Canvas and Drawables
　
ゲームのようなものでなければDrawablesを使えばそこそこできますが、どうしてもカスタム化して動きを入れたいというような場合ではCavasを使います。
　

目次
1. Canvasの基本的な形
2. サンプルコード

Canvasの基本的な形

　
Canvasでprimitiveな矩形を描画する基本的な例です。
Activity から View を継承したクラスを作りsetContentViewに入れてonDraw() で描画します。setContentView(MyView)
レイアウトファイルは使いません。
　
MainActivity.kt

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val myView = MyView(this)
        setContentView(myView)
    }


    // Viewを継承したクラス
    internal inner class MyView(context: Context) : View(context) {
        private var paint: Paint = Paint()

        // 描画するラインの太さ
        private val lineStrokeWidth = 20f

        init {
        }

        override fun onDraw(canvas: Canvas){

            // ペイントする色の設定
            paint.color = Color.argb(255, 255, 0, 255)

            // ペイントストロークの太さを設定
            paint.strokeWidth = lineStrokeWidth

            // Styleのストロークを設定する
            paint.style = Paint.Style.STROKE

            // drawRectを使って矩形を描画する、引数に座標を設定
            // (x1,y1,x2,y2,paint) 左上の座標(x1,y1), 右下の座標(x2,y2)
            canvas.drawRect(300f, 300f, 600f, 600f, paint)
        }
    }
}

import android.content.Context

import android.graphics.Canvas

import android.graphics.Color

import android.graphics.Paint

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

import android.view.View

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

val myView = MyView(this)

setContentView(myView)

}

// Viewを継承したクラス

internal inner class MyView(context: Context) : View(context) {

private var paint: Paint = Paint()

// 描画するラインの太さ

private val lineStrokeWidth = 20f

init {

}

override fun onDraw(canvas: Canvas){

// ペイントする色の設定

paint.color = Color.argb(255, 255, 0, 255)

// ペイントストロークの太さを設定

paint.strokeWidth = lineStrokeWidth

// Styleのストロークを設定する

paint.style = Paint.Style.STROKE

// drawRectを使って矩形を描画する、引数に座標を設定

// (x1,y1,x2,y2,paint) 左上の座標(x1,y1), 右下の座標(x2,y2)

canvas.drawRect(300f, 300f, 600f, 600f, paint)

}

　
canvas a02b - [Android & Kotlin] 円や矩形を描画するCanvas
　
矩形が描画されました。
　
矩形の描画では
Paint クラスの
color で線の色を指定
strokeWidth にて線の太さ
　
Canvas クラスの
drawRect を使って４つの頂点を引数に入れます。

サンプルコード

　
矩形以外にも円、楕円のような基本的なprimitiveな図形を描画するメソッドもあります。またラインを組み合わせて三角形を作ることもできます。
　
MainActivity.kt

//package your.package.name

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.Path
import android.util.DisplayMetrics
import android.util.Log
import android.view.View

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val myView = MyView(this)
        setContentView(myView)
    }

    internal inner class MyView(context: Context) : View(context) {
        private val paint = Paint()
        private val path = Path()

        private val strokeW1 = 20f
        private val strokeW2 = 40f
        private val dp: Float

        init {
            // スクリーンサイズからdipのようなものを作る
            val metrics = DisplayMetrics()
            windowManager.defaultDisplay.getMetrics(metrics)

            dp = resources.displayMetrics.density
            Log.d("debug", "fdp=$dp")
        }

        override fun onDraw(canvas: Canvas) {
            // Canvas Background Color
            canvas.drawColor(Color.argb(255, 0, 0, 125))

            // Canvas center point
            val xc = (width / 2).toFloat()
            val yc = (height / 2).toFloat()

            // Circle
            paint.color = Color.argb(255, 125, 125, 255)
            paint.strokeWidth = strokeW1.toFloat()
            paint.isAntiAlias = true
            paint.style = Paint.Style.STROKE
            // (x1,y1,r,paint) 中心x1座標, 中心y1座標, r半径
            canvas.drawCircle(xc - 15 * dp, yc - 55 * dp, xc / 2, paint)

            // Rectangle
            paint.color = Color.argb(255, 255, 0, 255)
            paint.style = Paint.Style.STROKE
            // (x1,y1,x2,y2,paint) 左上の座標(x1,y1), 右下の座標(x2,y2)
            canvas.drawRect(xc - 30 * dp, yc - 50 * dp,
                xc + 120 * dp, yc + 100 * dp, paint)

            // Lines
            paint.strokeWidth = strokeW1
            paint.color = Color.argb(255, 0, 255, 0)
            // (x1,y1,x2,y2,paint) 始点の座標(x1,y1), 終点の座標(x2,y2)
            canvas.drawLine(xc + 20 * dp, yc - 30 * dp, xc - 70 * dp, yc + 70 * dp, paint)

            // Triangle
            val tx1 = 230 * dp
            val ty1 = 370 * dp
            val tx2 = 100 * dp
            val ty2 = 500 * dp
            val tx3 = 350 * dp
            val ty3 = 500 * dp

            paint.strokeWidth = 10f
            paint.color = Color.WHITE
            path.moveTo(tx1, ty1)
            path.lineTo(tx2, ty2)
            path.lineTo(tx3, ty3)
            path.lineTo(tx1, ty1)
            canvas.drawPath(path, paint)

            // Circle
            paint.color = Color.YELLOW
            paint.strokeWidth = strokeW2
            paint.isAntiAlias = true
            paint.style = Paint.Style.STROKE
            // (x,y,r,paint) x座標, y座標, r半径
            canvas.drawCircle(220 * dp, 130 * dp, 40 * dp, paint)

        }

    }
}

//package your.package.name

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

import android.content.Context

import android.graphics.Canvas

import android.graphics.Color

import android.graphics.Paint

import android.graphics.Path

import android.util.DisplayMetrics

import android.util.Log

import android.view.View

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

val myView = MyView(this)

setContentView(myView)

}

internal inner class MyView(context: Context) : View(context) {

private val paint = Paint()

private val path = Path()

private val strokeW1 = 20f

private val strokeW2 = 40f

private val dp: Float

init {

// スクリーンサイズからdipのようなものを作る

val metrics = DisplayMetrics()

windowManager.defaultDisplay.getMetrics(metrics)

dp = resources.displayMetrics.density

Log.d("debug", "fdp=$dp")

}

override fun onDraw(canvas: Canvas) {

// Canvas Background Color

canvas.drawColor(Color.argb(255, 0, 0, 125))

// Canvas center point

val xc = (width / 2).toFloat()

val yc = (height / 2).toFloat()

// Circle

paint.color = Color.argb(255, 125, 125, 255)

paint.strokeWidth = strokeW1.toFloat()

paint.isAntiAlias = true

paint.style = Paint.Style.STROKE

// (x1,y1,r,paint) 中心x1座標, 中心y1座標, r半径

canvas.drawCircle(xc - 15 * dp, yc - 55 * dp, xc / 2, paint)

// Rectangle

paint.color = Color.argb(255, 255, 0, 255)

paint.style = Paint.Style.STROKE

// (x1,y1,x2,y2,paint) 左上の座標(x1,y1), 右下の座標(x2,y2)

canvas.drawRect(xc - 30 * dp, yc - 50 * dp,

xc + 120 * dp, yc + 100 * dp, paint)

// Lines

paint.strokeWidth = strokeW1

paint.color = Color.argb(255, 0, 255, 0)

// (x1,y1,x2,y2,paint) 始点の座標(x1,y1), 終点の座標(x2,y2)

canvas.drawLine(xc + 20 * dp, yc - 30 * dp, xc - 70 * dp, yc + 70 * dp, paint)

// Triangle

val tx1 = 230 * dp

val ty1 = 370 * dp

val tx2 = 100 * dp

val ty2 = 500 * dp

val tx3 = 350 * dp

val ty3 = 500 * dp

paint.strokeWidth = 10f

paint.color = Color.WHITE

path.moveTo(tx1, ty1)

path.lineTo(tx2, ty2)

path.lineTo(tx3, ty3)

path.lineTo(tx1, ty1)

canvas.drawPath(path, paint)

// Circle

paint.color = Color.YELLOW

paint.strokeWidth = strokeW2

paint.isAntiAlias = true

paint.style = Paint.Style.STROKE

// (x,y,r,paint) x座標, y座標, r半径

canvas.drawCircle(220 * dp, 130 * dp, 40 * dp, paint)

}

　
ここで指定している(x,y)はピクセルになりますので端末依存です。スクリーン縦横のサイズを取得して計算する必要があります。
　
canvas a01 - [Android & Kotlin] 円や矩形を描画するCanvas
　
JavaでのCanvas：

[Android] Custom Canvas をレイアウトに挿入する

Canvas と Paint を使って描画した図形とButtonなどを同じレイアウトに入れたい。そんな時はRelativeLayout等のレイアウトとCanvasを重ねると可能です　

　
　
References:
Canvas | Android Developers
Canvas and Drawables | Android Developers