【Android】そろそろ始めるカスタムビュー

こんにちは！
Androidエンジニアとして地図アプリを作っているものです！
Androidエンジニアとして1年くらい経つのですが、カスタムビューを一度も実装してこなかったんですよね・・・
先輩社員から一応知っておくだけでも選択肢広がるよ、と言われて今回調べてみることにしました！

カスタムビューとは

カスタムビューとは、Androidの基本的なビューを拡張または改変して、
特定のデザイン要件やユーザーインタラクションを満たすために作成するコンポーネントのことです。
これによりAndroidが標準で用意しているViewではできないような高度な視覚効果を実現することができます。
公式ドキュメントはこちらになります！

カスタムビュー コンポーネント  |  Android デベロッパー  |  Android Developers

これをカスタムビューで作ります

こちらのような、
「初期色は緑、タッチすると赤くなる円」をカスタムビューで実装してみます。

実装は以下の通りになります。

実装紹介

Viewを継承するCustomViewクラスを作成する

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

class CustomCircleView(context : Context, attrs : AttributeSet) : View(context , attrs){
    // 円の半径
    private val radius = 100
    private val paint = Paint().apply {
        // 初期色は緑
        color = Color.GREEN
    }

    /**
     * ビューのサイズを決定する。
     */
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        val diameter = radius * 2
        setMeasuredDimension(diameter , diameter)
    }

    /**
     * 円を描画する
     */
    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        canvas!!.drawCircle(width / 2f , height / 2f , radius.toFloat() , paint)
    }

    /**
     * タッチイベントの設定をする
     */
    override fun onTouchEvent(event: MotionEvent?): Boolean {
        when(event!!.action){
            // タッチしたら赤
            MotionEvent.ACTION_DOWN -> {
                paint.color = Color.RED
            }
            // 離したら緑
            MotionEvent.ACTION_UP,MotionEvent.ACTION_CANCEL ->{
                paint.color = Color.GREEN
            }
        }
        // 再描画する
        invalidate()
        return true
    }
}

layoutで指定する

    <com.example.enjoy_android.CustomView.CustomCircleView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

順に解説いたします。

onMeasureでビューのサイズを決める

onMeasureでビューのサイズを決めます。
こちらのコードでは円の直径分の縦横を持った正方形をサイズとしており、これで定めた枠の中に、onDrawメソッドで描いていくことになります。
具体的には以下の青枠を定義していることになります。

onDrawで自由に描画する

onMeasureで定義したキャンバスに絵を描くイメージです。
コードでは半径を元に円を描画しています。

onTouchEventでタッチイベントを制御する

もちろんFragmentでも同じようにタッチイベントは制御できますが、
ビュー側でも定義が可能になります。
これをすることによって、同じイベントリスナーのビューを簡単に再利用することができるようになります。

終わりに

いかがでしたでしょうか？
カスタムビューを利用した最も簡単な例を紹介してみました。
個人的には、カスタムビューを利用することで、複雑なビューを実装することができるだけでなく、再利用性も高まるので、コードリファクタする際にも取り入れてみようと思いました。