【Android】Kotlin + XML で View のコンポーネント作成

本日はタイトルの通り、Kotlin + XML で View のコンポーネントを作成する方法を紹介したいと思います。iOS だと Swift + xib で作るカスタムビューみたいな感じのやつです👷‍♀️

それではやっていく

まずは、view_account_type_select という名前でレイアウトファイルを下記のように作成しました。カスタムビューを作成する場合は、ルートにレイアウトを配置するみたいです。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/fideeBlue">

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_weight="1"
        android:gravity="center"
        android:text="TextView" />
</LinearLayout>

次にレイアウトに対応するクラスを作成します。クラスの init() で View.inflate() を呼び出し、先ほど作成したレイアウトファイルを紐付けます。

package yamatootaka.fidee.presentation.view.onboard.signup.view

import android.content.Context
import android.util.AttributeSet
import android.view.View
import android.widget.LinearLayout
import yamatootaka.fidee.R

class AccountTypeSelectableView(context : Context, attributeSet : AttributeSet): LinearLayout(context, attributeSet) {
    init {
        View.inflate(context, R.layout.view_account_type_select, this)
    }
}

ここまでできたら、あとは煮るなり焼くなり自由にコンポーネントを使い回せます。例えば、レイアウトファイルに今回作ったコンポーネントを配置する場合は下記のようになります。

        <yamatootaka.fidee.presentation.view.onboard.signup.view.AccountTypeSelectableView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginEnd="32dp"
            android:layout_weight="1" />