View Bindingのセットアップ&使い方(Kotlin)

12812 ワード
Android Jetpack ViewBinding Kotlin Android テキストリンク

はじめに

View Bindingのセットアップ方法と使い方を紹介します。

「View Binding」とは？

ビューを操作するコードをかんたんに記述できる機能です。

XMLレイアウトファイルごとにバインディングクラスが自動生成され、対象レイアウト内でIDを持つすべてのビューの参照を持ちます。

findViewByIdとの違い

View Bindingは findViewById の上位互換といえます。

Null安全

View Bindingはビューを参照するコードを自動生成するため、無効なビューIDを指定することによるNullPointerExceptionが発生しません。

型安全

バインディングクラス内のフィールドは、レイアウトファイルと同じ型を持つため、ClassCastExceptionが発生しません。

環境

  • OS：macOS Big Sur 11.5.2
  • Android Studio：Arctic Fox | 2020.3.1 Patch 1
  • Kotlin：1.5.21
  • Gradle：7.0.2
  • Gradle plugin：7.0.1

セットアップ

View Bindingの有効化

appフォルダ配下の「build.gradle」でView Bindingを有効化します。

/app/build.gradle
android {
+   viewBinding {
+       enabled true
+   }
}

これでView Bindingのセットアップは完了です。

使い方

フラグメントでView Bindingする

以下のレイアウトファイルのフラグメントがあるとします。

monster_detail_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ui.monsterdetail.MonsterDetailFragment">

    <ImageView
        android:id="@+id/icon_imageview"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:layout_marginTop="56dp"
        android:contentDescription="@string/icon_description"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        app:layout_constraintVertical_chainStyle="packed"
        tools:src="@tools:sample/avatars" />

</androidx.constraintlayout.widget.ConstraintLayout>

MonsterDetailFragmentBinding クラスが自動生成されるので、プロパティに追加します。
_binding はバインディングクラスの初期化と解放のみに使い、他では binding を使います。

MonsterDetailFragment.kt
class MonsterDetailFragment : Fragment() {
+   private var _binding: MonsterDetailFragmentBinding? = null
+   private val binding get() = _binding!!
}

バインディングクラスの初期化と解放を追加します。

MonsterDetailFragment.kt
class MonsterDetailFragment : Fragment() {
    private var _binding: MonsterDetailFragmentBinding? = null
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
-       return inflater.inflate(R.layout.monster_detail_fragment, container, false)
+       _binding = MonsterDetailFragmentBinding.inflate(inflater, container, false)
+       return binding.root
    }
}

    override fun onDestroyView() {
        super.onDestroyView()

+       _binding = null
    }
}

これでビューがバインディングされました。
binding.{ビュー名} でアクセスできます。

MonsterDetailFragment.kt
class MonsterDetailFragment : Fragment() {
    private var _binding: MonsterDetailFragmentBinding? = null
    private val binding get() = _binding!!

    private val monster: MonsterItem = ○○

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

-       val iconImageView: ImageView = view.findViewById(R.id.icon_imageview)
-       iconImageView.load(monster.iconUrlString)
+       binding.iconImageview.load(monster.iconUrlString)
    }
}

Data Bindingとの違い

Data Bindingの詳細は以下の記事をご参照ください。

Data Bindingは便利ですが、View Bindingはよりシンプルであり、それによるメリットとデメリットがあります。

メリット

コンパイルが高速

View Bindingはアノテーションによるコードの自動生成を行わないため、コンパイルが速いです。

セットアップがかんたん

Data Bindingと異なり、XMLレイアウトファイルを編集せず、自動的に対象モジュールの全レイアウトに適用されます。
そのため、セットアップがかんたんです。

デメリット

レイアウトファイルでバインディングできない

Data Bindingはレイアウトファイルでバインディングできますが、View Bindingではできません。

双方向バインディングできない

Data Bindingと異なり、View Bindingでは双方向バインディングできません。

おわりに

これでNull安全かつ型安全にビューを操作できます！
できる限り findViewById を減らしていきましょう

ちなみに本記事の内容は、すべてData Bindingでも実現できます。
Data Bindingでコンパイル時間が気になったことがなく、私はData Bindingのみ使っています。
View Bindingのみ使っている、もしくは併用している人がいたら理由をコメントなどで教えていただけると嬉しいです。

参考リンク