【Kotlin/Android】カスタムViewの実装方法！onDrawや属性の使い方

MyCustomView.kt
class MyCustomView : View {

    /** ①コードからのビュー作成用 */
    constructor(context: Context) : super(context) {
        init(null, 0)
    }

    /**
     * ②XMLからのビュー作成用(属性)
     * XML <com.example.MyCustomView ... /> と指定できるようにする
     */
    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
        init(attrs, 0)
    }

    /**
     * ③XMLからのビュー作成用(属性 + スタイル)
     * XMLで <com.example.MyCustomView style="@style/MyStyle" ... /> と指定できるようにする
     */
    constructor(context: Context, attrs: AttributeSet, defStyle: Int) : super(
        context,
        attrs,
        defStyle
    ) {
        init(attrs, defStyle)
    }

    /** 基本の初期化メソッド */
    private fun init(attrs: AttributeSet?, defStyle: Int) { }

    /** ビューが画面に描画される際に呼び出されるメソッド */
    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
    }
}

sample_my_custom_view.xml
<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.XXXXXX.MyCustomView
        android:background="@color/black"
        android:layout_width="300dp"
        android:layout_height="300dp" />

</FrameLayout>

MyCustomView.kt
private val paint = Paint()

override fun onDraw(canvas: Canvas) {
    paint.color = Color.DKGRAY
    paint.textSize = 100f
    canvas.drawText("Hello World" , 10f, 100f, paint)
    super.onDraw(canvas)
}

MyCustomView.kt
/** ビューがタッチされた際に呼び出されるメソッド */
override fun onTouchEvent(event: MotionEvent?): Boolean {
    if (event?.action == MotionEvent.ACTION_DOWN) {
        Toast.makeText(context, "タッチしたよ", Toast.LENGTH_LONG).show()
        return true
    }
    return super.onTouchEvent(event)
}

MyCustomView.kt
/** ビューのサイズを定義するメソッド */
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    // 例：固定で200 * 100サイズにする
    val width = 200
    val height = 100
    // サイズを設定
    setMeasuredDimension(width, height)
}

MyCustomView.kt
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    val widthMode = MeasureSpec.getMode(widthMeasureSpec)
    val widthSize = MeasureSpec.getSize(widthMeasureSpec)
    val heightMode = MeasureSpec.getMode(heightMeasureSpec)
    val heightSize = MeasureSpec.getSize(heightMeasureSpec)
}

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    val desiredWidth = 200
    val desiredHeight = 100

    val widthMode = MeasureSpec.getMode(widthMeasureSpec)
    val widthSize = MeasureSpec.getSize(widthMeasureSpec)
    val heightMode = MeasureSpec.getMode(heightMeasureSpec)
    val heightSize = MeasureSpec.getSize(heightMeasureSpec)

    // 幅の測定
    val width: Int = when (widthMode) {
        // 親からのサイズに従う
        MeasureSpec.EXACTLY -> widthSize 
        // 最大サイズに制限
        MeasureSpec.AT_MOST -> minOf(desiredWidth, widthSize)
        // 制限なし
        MeasureSpec.UNSPECIFIED -> desiredWidth 
        else -> desiredWidth
    }

    // 高さの測定
    val height: Int = when (heightMode) {
        // 親からのサイズに従う
        MeasureSpec.EXACTLY -> heightSize
        // 最大サイズに制限
        MeasureSpec.AT_MOST -> minOf(desiredHeight, heightSize) 
        // 制限なし
        MeasureSpec.UNSPECIFIED -> desiredHeight 
        else -> desiredHeight
    }

    // 測定されたサイズを設定
    setMeasuredDimension(width, height)
}

MyCustomView.kt
private val paint = Paint()
private var text = "Hello World"

override fun onDraw(canvas: Canvas) {
    paint.color = Color.DKGRAY
    paint.textSize = 100f
    canvas.drawText(text , 10f, 100f, paint)
    super.onDraw(canvas)
}

public fun changeText(text: String) {
    this.text = text
    invalidate() // 再描画が始まる
}

res ＞ values ＞ attrs_my_custom_view.xml
<resources>
    <declare-styleable name="MyCustomView">
        <attr name="exampleString" format="string" />
        <attr name="exampleDimension" format="dimension" />
        <attr name="exampleColor" format="color" />
        <attr name="exampleDrawable" format="color|reference" />
    </declare-styleable>
</resources>

res ＞ values ＞ attrs_my_custom_view.xml
<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
+   xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  
      <com.example.XXXXXX.MyCustomView
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:exampleDimension="24sp"
        app:exampleDrawable="@android:drawable/ic_menu_add"
        app:exampleString="Hello, MyCustomView" />

// 属性を読み込む
val a: TypedArray = context.obtainStyledAttributes(
    attrs, R.styleable.MyCustomView, defStyle, 0
)

// XMLから指定した値
val text = a.getString(
    R.styleable.MyCustomView_exampleString
)

// XMLから指定した値
val color = a.getColor(
    R.styleable.MyCustomView_exampleColor,
    Color.RED
)

// XMLから指定した値
val dimension = a.getDimension(
    R.styleable.MyCustomView_exampleDimension,
    0f
)
// hasValue：値があるかどうか
if (a.hasValue(R.styleable.MyCustomView_exampleDrawable)) {
    val exampleDrawable = a.getDrawable(
        R.styleable.MyCustomView_exampleDrawable
    )
    exampleDrawable?.callback = this
}
// 最後に必ずリサイクルする
a.recycle()