MENU
  1. ホーム
  2. Kotlin
  3. KotlinでAndroidカスタムViewを作成する完全ガイド

KotlinでAndroidカスタムViewを作成する完全ガイド

Kotlin

Androidアプリ開発において、アプリの魅力的なデザインやユーザー体験を実現するためには、時に標準的なUIコンポーネントだけでは物足りない場合があります。そんなときに役立つのが「カスタムView」です。カスタムViewを使うことで、アプリに独自性を加え、より直感的かつインタラクティブなUIを構築できます。

本記事では、Kotlinを使用してAndroidのカスタムViewを作成する方法を初心者にもわかりやすく解説します。カスタムViewの基本概念から、実践的な応用例、そして実際のプロジェクトで役立つパフォーマンスの最適化まで、段階的に学んでいきます。カスタムViewの作成スキルを習得することで、アプリ開発の幅を大きく広げることができるでしょう。

目次
  1. カスタムViewとは
    1. 標準ViewとカスタムViewの違い
    2. カスタムViewの利点
    3. カスタムViewの用途
  2. KotlinでカスタムViewを作成する基本ステップ
    1. 1. カスタムViewクラスの作成
    2. 2. レイアウトXMLでの使用準備
    3. 3. onDrawメソッドのオーバーライド
    4. 4. カスタム属性の追加
    5. 5. パフォーマンスに配慮した初期化
    6. 6. 実装後のテスト
  3. onDrawメソッドでの描画の基本
    1. onDrawメソッドの役割
    2. Canvasオブジェクトを使った基本的な描画
    3. 描画の最適化
    4. invalidateメソッドによる再描画
    5. onDrawメソッドの注意点
  4. カスタム属性の追加方法
    1. 1. attrs.xmlにカスタム属性を定義
    2. 2. カスタムViewで属性を取得
    3. 3. カスタム属性をXMLで指定
    4. 4. 属性の反映
    5. 5. 属性のデフォルトスタイルの設定（オプション）
    6. まとめ
  5. レイアウトエディタでのプレビュー設定
    1. 1. プレビュー用のコンストラクタを準備
    2. 2. プレビュー用のデフォルトデータを設定
    3. 3. プレビュー専用のレイアウトXMLを作成
    4. 4. プレビュー用の@Previewアノテーションを使用（Jetpack Compose利用時）
    5. 5. プレビューのテーマ設定
    6. 6. ライブラリ化したカスタムViewのプレビュー
    7. まとめ
  6. カスタムViewのイベント処理
    1. 1. タッチイベントの基本
    2. 2. performClickメソッド
    3. 3. マルチタッチの対応
    4. 4. GestureDetectorを使用した高度なジェスチャー処理
    5. 5. カスタムイベントのリスナーを作成
    6. 6. ドラッグやスワイプの実装例
    7. まとめ
  7. パフォーマンス最適化のポイント
    1. 1. 再利用可能なオブジェクトの使用
    2. 2. 描画のスコープを最小化
    3. 3. ハードウェアアクセラレーションの利用
    4. 4. 複雑な計算の事前処理
    5. 5. ビットマップの活用
    6. 6. 無駄なレイヤーの削減
    7. 7. フレームワーク提供の最適化APIを活用
    8. 8. プロファイリングでパフォーマンスを測定
    9. まとめ
  8. 実践例：プログレスバーのカスタマイズ
    1. 1. プログレスバーの基本設計
    2. 2. カスタム属性の追加
    3. 3. プログレスバーをXMLで利用
    4. 4. プログレスの動的更新
    5. 5. プログレスの終了アクション
    6. 6. プレビュー設定
    7. まとめ
  9. まとめ

カスタムViewとは


カスタムViewとは、Androidの既存のViewクラス（例: TextView、Buttonなど）を拡張し、新しいデザインや機能を持つ独自のUIコンポーネントを作成することを指します。これにより、標準コンポーネントでは実現できないデザインや、アプリ固有の操作を実現できます。

標準ViewとカスタムViewの違い


標準Viewは、Androidが提供する汎用的なUIコンポーネントで、アプリ開発者が簡単に利用できるよう設計されています。一方で、カスタムViewは、独自のニーズに応じて設計・実装するUIコンポーネントです。カスタムViewを使用することで、標準コンポーネントにはない以下の利点が得られます。

カスタムViewの利点

  1. 独自のデザイン
    カスタムViewを使用することで、アプリに独自のデザインを反映させ、他にはないUIを実現できます。
  2. 複雑な機能の統合
    カスタムViewは、既存のコンポーネントを組み合わせるよりもシンプルに複雑な機能を実装できます。
  3. 再利用性
    独自のViewを作成すれば、異なるプロジェクトや画面間で容易に再利用でき、開発効率が向上します。

カスタムViewの用途

  • 独自のアニメーションを伴うUIコンポーネント（例: カスタムローディングスピナー）
  • ユーザーの入力を可視化するインタラクティブなWidget（例: カスタムスライダーやグラフ）
  • 特定のテーマやブランドに合わせた装飾が必要なUI要素

カスタムViewは、アプリのUIを進化させ、ユーザーに強い印象を与えるための強力なツールです。次章では、実際にKotlinを用いたカスタムViewの作成手順を解説します。

KotlinでカスタムViewを作成する基本ステップ

Kotlinを使用してカスタムViewを作成する際の基本的な手順を以下に示します。これらのステップを順に実行することで、独自のUIコンポーネントを効率よく開発できます。

1. カスタムViewクラスの作成


KotlinでカスタムViewを作成するには、既存のViewクラスまたはその派生クラス（例: TextViewやImageView）を継承したクラスを定義します。

class CustomView(context: Context, attrs: AttributeSet) : View(context, attrs) {
    // カスタムViewのロジックをここに記述
}

コンストラクタでは、ContextとAttributeSetを受け取り、親クラスに渡します。これにより、XMLで定義された属性を利用できます。

2. レイアウトXMLでの使用準備


カスタムViewをXMLで利用するために、res/layoutディレクトリに定義したXMLファイル内でクラス名を記述します。

<com.example.customview.CustomView
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

この際、完全修飾クラス名を指定する必要があります。

3. onDrawメソッドのオーバーライド


カスタムViewの描画処理はonDrawメソッド内で記述します。このメソッドをオーバーライドし、Canvasオブジェクトを使用して描画します。

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    val paint = Paint().apply {
        color = Color.BLUE
        style = Paint.Style.FILL
    }
    canvas.drawCircle(width / 2f, height / 2f, 50f, paint)
}

上記の例では、Viewの中央に青い円を描画しています。

4. カスタム属性の追加


必要に応じて、attrs.xmlにカスタム属性を追加します。これにより、XMLで柔軟にViewの外観や動作を設定できます。

<declare-styleable name="CustomView">
    <attr name="customColor" format="color" />
</declare-styleable>

これらの属性は、context.obtainStyledAttributesを使用してカスタムView内で取得します。

5. パフォーマンスに配慮した初期化


描画処理やイベント処理に影響する初期化コードは、コンストラクタ内または適切なライフサイクルメソッドで実装します。

6. 実装後のテスト


完成したカスタムViewは、アプリの画面で正しく機能するかを実際にテストし、動作やパフォーマンスを確認します。

次章では、onDrawメソッドをさらに掘り下げ、カスタム描画の詳細な手法を解説します。

onDrawメソッドでの描画の基本

AndroidのカスタムViewを作成する際、onDrawメソッドは描画処理を担当する重要なメソッドです。このメソッド内で、Canvasオブジェクトを使用して図形やテキストを描画します。本章では、onDrawメソッドの仕組みと基本的な使い方を解説します。

onDrawメソッドの役割


onDrawメソッドは、Viewの描画処理をカスタマイズするためにオーバーライドされます。このメソッドは、Viewが再描画される際に自動的に呼び出され、Canvasオブジェクトを使用してカスタム描画を行います。

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    // カスタム描画処理を記述
}

super.onDraw(canvas)を呼び出すことで、親クラスの既存の描画処理を維持することができます。独自の描画が必要な場合、これを省略しても構いません。

Canvasオブジェクトを使った基本的な描画

Canvasオブジェクトを利用して、以下のような描画処理を行えます。

1. 図形の描画


Canvasを使えば、円や四角形などの基本図形を簡単に描画できます。以下は、塗りつぶした円を描画する例です。

val paint = Paint().apply {
    color = Color.RED
    style = Paint.Style.FILL
}

canvas.drawCircle(width / 2f, height / 2f, 100f, paint)

2. テキストの描画


drawTextメソッドを使用してテキストを描画します。

val textPaint = Paint().apply {
    color = Color.BLACK
    textSize = 40f
}

canvas.drawText("Hello, Custom View!", 50f, 100f, textPaint)

3. 線の描画


drawLineメソッドを使用して線を描画します。

val linePaint = Paint().apply {
    color = Color.BLUE
    strokeWidth = 5f
}

canvas.drawLine(0f, 0f, width.toFloat(), height.toFloat(), linePaint)

描画の最適化


onDrawメソッドは頻繁に呼び出されるため、パフォーマンスを考慮する必要があります。

  1. Paintオブジェクトの再利用
    PaintオブジェクトはonDrawのたびに作成せず、クラスのプロパティとして定義して再利用しましょう。
  2. 複雑な描画の回避
    描画が複雑になる場合、Bitmapを利用して事前に準備した描画結果を使用すると、パフォーマンスが向上します。

invalidateメソッドによる再描画


Viewを再描画する場合は、invalidateメソッドを呼び出します。これにより、onDrawメソッドが再び実行されます。

fun updateView() {
    invalidate()  // Viewの再描画を要求
}

onDrawメソッドの注意点

  1. onDrawメソッド内で長時間の処理を行わないようにします。パフォーマンスが低下し、UIのスムーズな動作が妨げられます。
  2. 描画サイズや位置を考慮し、レスポンシブなデザインを実現します。

次章では、カスタムViewに独自の属性を追加し、XMLから柔軟にカスタマイズする方法を解説します。

カスタム属性の追加方法

カスタムViewの利便性を高めるためには、独自の属性を定義し、XMLファイルでそれを設定できるようにすることが重要です。本章では、カスタム属性を作成し、それをカスタムViewで使用する方法を解説します。

1. attrs.xmlにカスタム属性を定義


カスタム属性を定義するには、res/values/attrs.xmlファイルを作成し、その中に属性を記述します。以下は、背景色とテキストサイズを指定するカスタム属性の例です。

<resources>
    <declare-styleable name="CustomView">
        <attr name="customBackgroundColor" format="color" />
        <attr name="customTextSize" format="dimension" />
    </declare-styleable>
</resources>

<declare-styleable>タグ内に、カスタムViewで利用する属性を列挙します。それぞれのnameが属性名、formatが属性のデータ型を指定します。

2. カスタムViewで属性を取得


定義したカスタム属性は、context.obtainStyledAttributesを使用して取得します。以下は、カスタム属性を読み取る方法です。

class CustomView(context: Context, attrs: AttributeSet) : View(context, attrs) {

    private var backgroundColor: Int = Color.WHITE
    private var textSize: Float = 16f

    init {
        context.theme.obtainStyledAttributes(attrs, R.styleable.CustomView, 0, 0).apply {
            try {
                backgroundColor = getColor(R.styleable.CustomView_customBackgroundColor, Color.WHITE)
                textSize = getDimension(R.styleable.CustomView_customTextSize, 16f)
            } finally {
                recycle() // メモリリークを防ぐために必ず呼び出す
            }
        }
    }
}

このコードでは、customBackgroundColorとcustomTextSizeを取得し、それぞれデフォルト値を設定しています。

3. カスタム属性をXMLで指定


カスタム属性を定義したら、レイアウトXMLファイルで使用できます。

<com.example.customview.CustomView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:customBackgroundColor="#FF0000"
    app:customTextSize="24sp" />

app:プレフィックスを使用してカスタム属性を指定します。この際、xmlns:app="http://schemas.android.com/apk/res-auto"をXMLのルートタグに追加する必要があります。

4. 属性の反映


取得した属性値をカスタムViewに反映させます。以下は背景色とテキストサイズを反映する例です。

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)

    // 背景色を描画
    val paint = Paint().apply {
        color = backgroundColor
    }
    canvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), paint)

    // テキストを描画
    val textPaint = Paint().apply {
        color = Color.BLACK
        textSize = this@CustomView.textSize
    }
    canvas.drawText("Hello, Custom View!", 50f, 100f, textPaint)
}

これにより、XMLで指定した属性値がViewの描画に反映されます。

5. 属性のデフォルトスタイルの設定（オプション）


カスタムViewでデフォルトのスタイルを適用する場合は、以下のようにコンストラクタを修正します。

class CustomView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
    init {
        // デフォルトスタイルの処理を記述
    }
}

defStyleAttrを使用して、デフォルトスタイルを適用できます。

まとめ


カスタム属性を追加することで、カスタムViewの柔軟性を大幅に向上させることができます。これにより、UI設計が容易になり、再利用性も高まります。次章では、Android StudioのレイアウトエディタでカスタムViewをプレビューする方法を解説します。

レイアウトエディタでのプレビュー設定

カスタムViewを開発する際、Android Studioのレイアウトエディタでプレビューを確認できると、効率的にUI設計を進めることができます。本章では、カスタムViewをレイアウトエディタでプレビューするための設定方法を解説します。

1. プレビュー用のコンストラクタを準備


Android Studioのレイアウトエディタでプレビューを正しく表示するには、カスタムViewのコンストラクタでAttributeSetを受け取る必要があります。以下のようにViewクラスを拡張したコンストラクタを定義します。

class CustomView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
    init {
        // プレビュー用の初期化コード
    }
}

これにより、XMLでの定義が正しく処理され、プレビューが表示されます。

2. プレビュー用のデフォルトデータを設定


レイアウトエディタでは、XMLに具体的な属性が指定されていない場合、プレビューで何も表示されなくなることがあります。そのため、デフォルトのデータを設定するコードを追加します。

private var previewText: String = "Preview Text"
private var previewColor: Int = Color.GRAY

init {
    if (isInEditMode) { // レイアウトエディタで動作している場合
        previewText = "Hello, Kotlin View"
        previewColor = Color.BLUE
    }
}

isInEditModeを使用すると、アプリ実行時とレイアウトエディタ実行時で動作を分けることができます。

3. プレビュー専用のレイアウトXMLを作成


カスタムViewをテストするための専用レイアウトファイルを作成し、プレビューを確認します。以下は、例となるレイアウトXMLです。

<RelativeLayout 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.customview.CustomView
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:customBackgroundColor="#FFDD00"
        app:customTextSize="18sp" />
</RelativeLayout>

4. プレビュー用の@Previewアノテーションを使用（Jetpack Compose利用時）


Jetpack Composeプロジェクトの場合は、@Previewアノテーションを使用してプレビューを簡単に確認できます。

@Preview
@Composable
fun PreviewCustomView() {
    CustomView(context = LocalContext.current)
}

Composeを利用していない場合は、上記手順に従って通常のプレビューを設定します。

5. プレビューのテーマ設定


プレビューの外観を確認するために、tools:theme属性を設定してテーマを指定することも可能です。

<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:theme="@style/Theme.MyApp">

これにより、カスタムViewのプレビューがアプリと同じテーマで表示されます。

6. ライブラリ化したカスタムViewのプレビュー


もしカスタムViewをライブラリとして利用している場合、デモ用のモジュールを作成してレイアウトエディタでプレビューを確認することが推奨されます。これにより、開発者はライブラリを別のプロジェクトに組み込む際の挙動を事前にテストできます。

まとめ


レイアウトエディタでのプレビューを設定することで、カスタムViewの外観や挙動を素早く確認できるようになります。この手法を活用することで、UI開発の効率を大幅に向上させることができます。次章では、カスタムViewでのイベント処理について解説します。

カスタムViewのイベント処理

カスタムViewにおいて、タッチイベントやクリックイベントを処理することで、インタラクティブなユーザー体験を提供できます。本章では、カスタムViewでイベントを処理する方法を解説します。

1. タッチイベントの基本


タッチイベントを処理するには、onTouchEventメソッドをオーバーライドします。このメソッドは、ユーザーのタッチ操作に応じて自動的に呼び出されます。

override fun onTouchEvent(event: MotionEvent): Boolean {
    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
            // タッチが始まった時の処理
            performClick() // アクセシビリティ対応のため
            return true
        }
        MotionEvent.ACTION_MOVE -> {
            // タッチ位置が移動した時の処理
            return true
        }
        MotionEvent.ACTION_UP -> {
            // タッチが終わった時の処理
            return true
        }
    }
    return super.onTouchEvent(event)
}

event.actionでタッチの種類（ACTION_DOWN、ACTION_MOVE、ACTION_UPなど）を判定します。

2. performClickメソッド


performClickは、カスタムViewにクリックアクションを持たせる際に必ず呼び出す必要があります。これにより、アクセシビリティ機能がサポートされます。

override fun performClick(): Boolean {
    super.performClick()
    // クリック時の処理
    return true
}

3. マルチタッチの対応


複数の指でタッチした際の処理を行うには、MotionEventのポインタIDを利用します。

override fun onTouchEvent(event: MotionEvent): Boolean {
    val pointerCount = event.pointerCount
    for (i in 0 until pointerCount) {
        val x = event.getX(i)
        val y = event.getY(i)
        // 各指の座標に対する処理
    }
    return true
}

getX(int)やgetY(int)で各指の座標を取得できます。

4. GestureDetectorを使用した高度なジェスチャー処理


ジェスチャー（フリック、ダブルタップ、長押しなど）の処理を簡単にするには、GestureDetectorを使用します。

private val gestureDetector = GestureDetector(context, object : GestureDetector.SimpleOnGestureListener() {
    override fun onSingleTapConfirmed(e: MotionEvent): Boolean {
        // シングルタップ時の処理
        return true
    }

    override fun onLongPress(e: MotionEvent) {
        // 長押し時の処理
    }

    override fun onFling(e1: MotionEvent, e2: MotionEvent, velocityX: Float, velocityY: Float): Boolean {
        // フリック時の処理
        return true
    }
})

override fun onTouchEvent(event: MotionEvent): Boolean {
    return gestureDetector.onTouchEvent(event) || super.onTouchEvent(event)
}

GestureDetectorを利用することで、独自のジェスチャーを実装する手間を大幅に軽減できます。

5. カスタムイベントのリスナーを作成


カスタムViewに特定のイベントを通知するリスナーを実装することも可能です。

interface OnCustomActionListener {
    fun onCustomAction()
}

private var listener: OnCustomActionListener? = null

fun setOnCustomActionListener(listener: OnCustomActionListener) {
    this.listener = listener
}

fun triggerCustomAction() {
    listener?.onCustomAction()
}

これにより、Viewの外部からカスタムイベントを受け取ることができます。

6. ドラッグやスワイプの実装例


以下は、カスタムView内でドラッグ操作を実装する簡単な例です。

private var lastX = 0f
private var lastY = 0f

override fun onTouchEvent(event: MotionEvent): Boolean {
    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
            lastX = event.x
            lastY = event.y
            return true
        }
        MotionEvent.ACTION_MOVE -> {
            val dx = event.x - lastX
            val dy = event.y - lastY
            // Viewの移動や再描画処理
            invalidate()
            lastX = event.x
            lastY = event.y
            return true
        }
    }
    return super.onTouchEvent(event)
}

ACTION_DOWNでタッチ開始位置を記録し、ACTION_MOVEで移動量を計算します。

まとめ


カスタムViewでイベント処理を追加することで、インタラクティブな操作を実現できます。タッチイベントやジェスチャーを活用し、ユーザーにとって直感的で便利なUIを提供しましょう。次章では、カスタムViewのパフォーマンス最適化について解説します。

パフォーマンス最適化のポイント

カスタムViewを開発する際、描画やイベント処理に関するパフォーマンスの最適化は重要です。適切な最適化を行うことで、アプリのスムーズな動作を維持し、バッテリー消費を抑えることができます。本章では、カスタムViewのパフォーマンスを向上させるための具体的なテクニックを紹介します。

1. 再利用可能なオブジェクトの使用


onDrawメソッド内で新しいオブジェクト（例: PaintやPath）を頻繁に生成すると、GC（ガベージコレクション）の負荷が増加します。オブジェクトはクラスのプロパティとして保持し、再利用するようにしましょう。

改善例:

private val paint = Paint().apply {
    color = Color.RED
    style = Paint.Style.FILL
}

override fun onDraw(canvas: Canvas) {
    canvas.drawCircle(width / 2f, height / 2f, 50f, paint)
}

2. 描画のスコープを最小化


onDrawメソッドで描画処理を効率化するために、再描画の範囲を必要最小限に抑えます。invalidate()メソッドを使用する際に、再描画エリアを指定します。

例:

fun updateView(rect: Rect) {
    invalidate(rect)  // 再描画範囲を限定
}

これにより、無駄な描画処理を避けることができます。

3. ハードウェアアクセラレーションの利用


Androidではデフォルトでハードウェアアクセラレーションが有効になっています。複雑な描画を行う場合でも、ハードウェアアクセラレーションを活用することでパフォーマンスを向上させることができます。

特定のカスタムViewでハードウェアアクセラレーションを有効化または無効化するには、setLayerTypeメソッドを使用します。

setLayerType(LAYER_TYPE_HARDWARE, null)

ただし、ソフトウェア描画が必要な場合（例: 特定のAPIでサポートされていない操作）には、LAYER_TYPE_SOFTWAREを設定します。

4. 複雑な計算の事前処理


onDraw内で複雑な計算を行うとパフォーマンスが低下します。これらの計算は可能な限り事前に処理し、結果を保持しておくようにします。

改善例:

private var precomputedPath: Path? = null

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
    super.onSizeChanged(w, h, oldw, oldh)
    precomputedPath = Path().apply {
        moveTo(0f, 0f)
        lineTo(w.toFloat(), h.toFloat())
        lineTo(w.toFloat(), 0f)
        close()
    }
}

override fun onDraw(canvas: Canvas) {
    precomputedPath?.let {
        canvas.drawPath(it, paint)
    }
}

5. ビットマップの活用


頻繁に描画する複雑なグラフィックは、Bitmapにキャッシュしておくと効果的です。これにより、毎回の描画コストを削減できます。

例:

private var cachedBitmap: Bitmap? = null

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
    super.onSizeChanged(w, h, oldw, oldh)
    cachedBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888).apply {
        val canvas = Canvas(this)
        // キャッシュ用の描画処理
        canvas.drawCircle(w / 2f, h / 2f, 100f, paint)
    }
}

override fun onDraw(canvas: Canvas) {
    cachedBitmap?.let {
        canvas.drawBitmap(it, 0f, 0f, null)
    }
}

6. 無駄なレイヤーの削減


複数のカスタムViewを重ねると、描画コストが増加します。可能な限り、レイヤーを統合して描画負荷を軽減しましょう。

7. フレームワーク提供の最適化APIを活用


Androidフレームワークには、描画処理を効率化するためのAPIが用意されています。

  • View#willNotDraw(true): 描画を行わないViewで、無駄なonDraw呼び出しを回避します。
  • View#setDrawingCacheEnabled(true): 頻繁に描画しない場合、キャッシュを利用して描画コストを削減します。

8. プロファイリングでパフォーマンスを測定


Android Studioのプロファイラーを使用して、描画時間やGCの発生頻度を測定し、ボトルネックを特定します。

手順:

  1. Android Studioでアプリをデバッグモードで実行します。
  2. プロファイラータブを開き、「Rendering」を選択します。
  3. onDrawやinvalidateの頻度と時間を確認します。

まとめ


カスタムViewのパフォーマンスを最適化することで、ユーザーに快適な操作感を提供できます。再利用可能なオブジェクトの使用や描画スコープの最小化などの基本的な最適化手法を実践し、プロファイリングツールを活用して効果を検証しましょう。次章では、実践例としてカスタマイズされたプログレスバーの作成を解説します。

実践例：プログレスバーのカスタマイズ

カスタムViewの応用例として、プログレスバーをカスタマイズする方法を解説します。この例では、円形プログレスバーを作成し、Kotlinで進捗を動的に更新する仕組みを実装します。

1. プログレスバーの基本設計


円形プログレスバーは、onDrawメソッド内でCanvasを使って円弧を描画することで実現します。

クラス定義:

class CircularProgressBar @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    private var progress = 0f
    private var maxProgress = 100f
    private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        style = Paint.Style.STROKE
        strokeWidth = 20f
        color = Color.BLUE
    }

    private val backgroundPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        style = Paint.Style.STROKE
        strokeWidth = 20f
        color = Color.LTGRAY
    }

    fun setProgress(value: Float) {
        progress = value
        invalidate() // 再描画
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        val centerX = width / 2f
        val centerY = height / 2f
        val radius = Math.min(centerX, centerY) - 20

        // 背景円を描画
        canvas.drawCircle(centerX, centerY, radius, backgroundPaint)

        // プログレスを描画
        val sweepAngle = (progress / maxProgress) * 360f
        canvas.drawArc(
            centerX - radius, centerY - radius,
            centerX + radius, centerY + radius,
            -90f, sweepAngle, false, paint
        )
    }
}

このコードでは、drawArcメソッドを使用して進捗に応じた円弧を描画しています。

2. カスタム属性の追加


プログレスバーの色やストローク幅をXMLで設定できるよう、カスタム属性を追加します。

attrs.xml:

<declare-styleable name="CircularProgressBar">
    <attr name="progressColor" format="color" />
    <attr name="progressBackgroundColor" format="color" />
    <attr name="progressMax" format="float" />
    <attr name="progressStrokeWidth" format="dimension" />
</declare-styleable>

カスタムViewでの利用:

init {
    context.theme.obtainStyledAttributes(attrs, R.styleable.CircularProgressBar, 0, 0).apply {
        try {
            paint.color = getColor(R.styleable.CircularProgressBar_progressColor, Color.BLUE)
            backgroundPaint.color = getColor(R.styleable.CircularProgressBar_progressBackgroundColor, Color.LTGRAY)
            maxProgress = getFloat(R.styleable.CircularProgressBar_progressMax, 100f)
            paint.strokeWidth = getDimension(R.styleable.CircularProgressBar_progressStrokeWidth, 20f)
            backgroundPaint.strokeWidth = paint.strokeWidth
        } finally {
            recycle()
        }
    }
}

3. プログレスバーをXMLで利用


カスタムプログレスバーをレイアウトファイルに追加します。

<com.example.customview.CircularProgressBar
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:progressColor="#FF0000"
    app:progressBackgroundColor="#CCCCCC"
    app:progressMax="100"
    app:progressStrokeWidth="15dp" />

4. プログレスの動的更新


プログレス値を変更する際、setProgressメソッドを呼び出します。以下は、プログレス値をアニメーションで更新する例です。

アニメーション例:

fun animateProgress(targetProgress: Float, duration: Long) {
    val animator = ValueAnimator.ofFloat(progress, targetProgress).apply {
        this.duration = duration
        addUpdateListener { animation ->
            setProgress(animation.animatedValue as Float)
        }
        start()
    }
}

このコードを使用することで、スムーズにプログレスを更新できます。

5. プログレスの終了アクション


プログレスが最大値に達した際に特定のアクションを実行したい場合は、リスナーを作成します。

リスナーインターフェース:

interface OnProgressCompleteListener {
    fun onProgressComplete()
}

private var listener: OnProgressCompleteListener? = null

fun setOnProgressCompleteListener(listener: OnProgressCompleteListener) {
    this.listener = listener
}

override fun setProgress(value: Float) {
    super.setProgress(value)
    if (progress >= maxProgress) {
        listener?.onProgressComplete()
    }
}

6. プレビュー設定


レイアウトエディタでプレビューが見えるようにisInEditModeを活用し、プログレスバーにデフォルト値を設定します。

init {
    if (isInEditMode) {
        progress = 50f
    }
}

まとめ


この章では、円形プログレスバーをカスタムViewとして実装し、進捗の動的更新やカスタム属性の利用方法を学びました。このような応用例を参考に、自分のアプリに独自のカスタムViewを実装してみてください。次章では、本記事の内容をまとめます。

まとめ

本記事では、Kotlinを使用してAndroidのカスタムViewを作成する方法を解説しました。カスタムViewの基本概念から、onDrawメソッドによる描画、カスタム属性の追加、イベント処理、パフォーマンス最適化、さらに実践例としてのプログレスバーの作成までを詳しく説明しました。

カスタムViewを活用することで、アプリのUIに独自性を加え、ユーザーに直感的で魅力的な体験を提供できます。ぜひ、この記事を参考にして、自分のアプリプロジェクトでカスタムViewを取り入れてみてください。適切な設計と実装を通じて、より洗練されたアプリを開発できるでしょう。

Kotlin
Android Kotlin カスタムView

コメント

コメントする

目次
  1. カスタムViewとは
    1. 標準ViewとカスタムViewの違い
    2. カスタムViewの利点
    3. カスタムViewの用途
  2. KotlinでカスタムViewを作成する基本ステップ
    1. 1. カスタムViewクラスの作成
    2. 2. レイアウトXMLでの使用準備
    3. 3. onDrawメソッドのオーバーライド
    4. 4. カスタム属性の追加
    5. 5. パフォーマンスに配慮した初期化
    6. 6. 実装後のテスト
  3. onDrawメソッドでの描画の基本
    1. onDrawメソッドの役割
    2. Canvasオブジェクトを使った基本的な描画
    3. 描画の最適化
    4. invalidateメソッドによる再描画
    5. onDrawメソッドの注意点
  4. カスタム属性の追加方法
    1. 1. attrs.xmlにカスタム属性を定義
    2. 2. カスタムViewで属性を取得
    3. 3. カスタム属性をXMLで指定
    4. 4. 属性の反映
    5. 5. 属性のデフォルトスタイルの設定（オプション）
    6. まとめ
  5. レイアウトエディタでのプレビュー設定
    1. 1. プレビュー用のコンストラクタを準備
    2. 2. プレビュー用のデフォルトデータを設定
    3. 3. プレビュー専用のレイアウトXMLを作成
    4. 4. プレビュー用の@Previewアノテーションを使用（Jetpack Compose利用時）
    5. 5. プレビューのテーマ設定
    6. 6. ライブラリ化したカスタムViewのプレビュー
    7. まとめ
  6. カスタムViewのイベント処理
    1. 1. タッチイベントの基本
    2. 2. performClickメソッド
    3. 3. マルチタッチの対応
    4. 4. GestureDetectorを使用した高度なジェスチャー処理
    5. 5. カスタムイベントのリスナーを作成
    6. 6. ドラッグやスワイプの実装例
    7. まとめ
  7. パフォーマンス最適化のポイント
    1. 1. 再利用可能なオブジェクトの使用
    2. 2. 描画のスコープを最小化
    3. 3. ハードウェアアクセラレーションの利用
    4. 4. 複雑な計算の事前処理
    5. 5. ビットマップの活用
    6. 6. 無駄なレイヤーの削減
    7. 7. フレームワーク提供の最適化APIを活用
    8. 8. プロファイリングでパフォーマンスを測定
    9. まとめ
  8. 実践例：プログレスバーのカスタマイズ
    1. 1. プログレスバーの基本設計
    2. 2. カスタム属性の追加
    3. 3. プログレスバーをXMLで利用
    4. 4. プログレスの動的更新
    5. 5. プログレスの終了アクション
    6. 6. プレビュー設定
    7. まとめ
  9. まとめ