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

この記事からわかること
- Android Studio/KotlinでカスタムViewを実装する方法
- onDrawメソッドとは?
- カスタム属性の定義
index
[open]
\ アプリをリリースしました /
環境
- Android Studio:Koala
- Kotlin:1.8.20
公式リファレンス:Create custom view components
カスタムビューを実装する
Androidアプリでは標準のビューでは対応できない特別なユーザーインターフェース要素や動作を実現するためにカスタムビューを実装することができるようになっています。
カスタムビューで定義することで独自のデザインやユーザーインタラクション(タッチやドラッグなど)の処理を細かくコントロールすることができるようになるのが大きなメリットになります。
カスタムビュー管理クラスを定義する
プロジェクト内でカスタムビューを活用するためには「New」>「 UiComponent」>「Custom View」からカスタムビュークラス名を自動生成することが可能です。

この手順でカスタムビューを追加するといろいろなデモコードが追加されてややこしくなってしまうので一旦必要最低限のコードまで省略したのが以下になります。カスタムビュークラスはView
を継承し、コードやXMLからビュー生成ができるようにするためのconstructor
を定義します。
ついでに自動生成するとカスタムビューのプレビュー用のレイアウトファイルsample_my_custom_view
も自動生成してくれます。<com.example.MyCustomView ... />
でビューを参照できていることを確認できます。
onDrawメソッド
onDraw
はビューが画面に描画される際に呼び出されるメソッドです。引数のCanvas
オブジェクトを使用してビュー上に図形やテキスト、画像などを描画することが可能です。例えばテキストを追加で描画したい場合はandroid.graphics.Paint
で描画する際のスタイルやフォーマットを指定し、drawText
で描画します。
- テキストの描画:Canvas.drawText
- 図形の描画:Canvas.drawRect, Canvas.drawCircle, Canvas.drawPath
- 画像の描画:Canvas.drawBitmap
onTouchEventメソッド
onTouchEvent
はビューがタッチされた際に呼び出されるメソッドです。引数のMotionEvent
オブジェクトからイベントの種類を識別できます。
onMeasureメソッド
onMeasure
はビューのサイズを定義するためのメソッドです。setMeasuredDimension
を使用してビューのサイズを設定します。
widthMeasureSpec/heightMeasureSpec
引数から受け取れるwidthMeasureSpec
/heightMeasureSpec
ではモード情報とサイズ情報が取得することができます。モードとサイズの取得にはgetMode
/getSize
を使用します。
取得できるモードは以下の3種類です。
- MeasureSpec.AT_MOST・・・親ビューから最大サイズを指定された場合(子ビューのサイズは最大サイズ以下なら自由)
- MeasureSpec.EXACTLY・・・親ビューから正確なサイズを指定された場合(子ビューのサイズは親から指定されたサイズ)
- MeasureSpec. UNSPECIFIED・・・親ビューからサイズの制約を指定されない場合(子ビューのサイズは任意)
実装例
invalidateメソッド
ビューを明示的に再描画させる(onDrawを再度呼び出す)にはinvalidate
メソッドを使用します。invalidate
自体は現在のビューを無効にするメソッドで、UIスレッドで呼び出す必要があります。
例えばテキストを入れ替える機能を実装する場合は以下のようにchangeText
の最後でinvalidate
を呼び出します。記述し忘れるとビューが更新されません。
カスタム属性を定義する
カスタムビューではXML側から属性を指定することでビューの外観や動作をコントロールできるようにカスタム属性を定義することが可能です。カスタム属性を定義するにはリソースに<declare-styleable>
を追加します。
attr
タグを追加してname
に属性名をformat
にデータ型を指定します。
カスタム属性をXML側で利用できるようにするために名前空間(name space)を明示的に指定する必要があるので注意してください。名前空間xmlns:app="http://schemas.android.com/apk/res-auto"
を追加してください。xmlns:XXX
のXXX
は別になんでも良いです。
コードからカスタム属性の値を取得する
XMLで指定したカスタム属性の値をコードから参照してみたいと思います。参照するためにはobtainStyledAttributes
メソッドでまず属性リストを取得します。そこからデータ型に応じたメソッドで取得したい属性名を指定することで各値を取得することができます。
最後に必ずrecycle
メソッドを呼び出してリサイクルします。
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。