ViewBindingで手軽にView操作

ViewBindingの使い方やメリットについて説明します

リンク
- https://developer.android.com/topic/libraries/view-binding
- https://github.com/android/architecture-components-samples/tree/master/ViewBindingSample
- https://developer.android.com/studio/preview?hl=ja
- https://satoshun.github.io/2020/01/fragment-view-memory-leak/

Transcript

1. ViewBindingで 手軽にView操作 2020/02/12 potatotips #68
2. 自己紹介 - にっちー (@nichi_yd) - Android Engineer @ FiNC Technologies, Inc - 元 青年海外協力隊（アフリカ）
3. もくじ - ViewBindingとは - これまでのView操作 - ViewBindingのメリット - 仕組み - 実装方法 - 簡略化するために - 参考URL
4. ViewBindingとは - ビューを操作するコードを簡単に記述できる機能 - Null Safety, Type Safety - Android Studio 3.6 Canary 11 以降で使える
5. これまでのView操作
6. の前に、(iOSエンジニアの方もいるので ) まず前提 - Androidでは（今の所は、基本的に）xmlファイルでレイアウトを定義 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:id="@+id/text_main_activity" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </FrameLayout>
7. の前に、(iOSエンジニアの方もいるので ) まず前提 - Androidでは（今の所は、基本的に）xmlファイルでレイアウトを定義 - ActivityやFragmentといったUI提供のコンポーネントでレイアウトファイルのViewを 操作
8. これまでのView操作 findViewById class MainActivity : AppCompatActivity(R.layout.main_activity) { private lateinit var textView1: TextView private lateinit var textView2: TextView private lateinit var textView3: TextView override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) textView1 = findViewById(R.id.text_view1) textView2 = findViewById(R.id.text_view2) textView3 = findViewById(R.id.text_view3) textView1.text = "hoge" textView2.text = "fuga" textView3.text = "foo" } }
9. これまでのView操作 findViewById class MainActivity : AppCompatActivity(R.layout.main_activity) { private lateinit var textView1: TextView private lateinit var textView2: TextView private lateinit var textView3: TextView override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) textView1 = findViewById(R.id.text_view1) textView2 = findViewById(R.id.text_view2) textView3 = findViewById(R.id.text_view3) textView1.text = "hoge" textView2.text = "fuga" textView3.text = "foo" } } 冗長
10. これまでのView操作 findViewById class MainActivity : AppCompatActivity(R.layout.main_activity) { private lateinit var textView1: TextView private lateinit var textView2: TextView private lateinit var textView3: TextView override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // This will cause IllegalStateException: textView1 must not be null textView1 = findViewById(R.id.text_of_different_layout) textView1.text = "hoge" } } 他のレイアウトファイ ルも指定できる
11. これまでのView操作 findViewById class MainActivity : AppCompatActivity(R.layout.main_activity) { private lateinit var textView1: TextView private lateinit var textView2: TextView private lateinit var textView3: TextView override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // This will throw IllegalStateException: textView1 must not be null textView1 = findViewById(R.id.text_of_different_layout) textView1.text = "hoge" } } 他のレイアウトファイ ルも指定できる null安全でない
12. これまでのView操作 Kotlin Android Extension import kotlinx.android.synthetic.main.main_activity.* class MainActivity : AppCompatActivity(R.layout.main_activity) { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) text_view1.text = "hoge" text_view2.text = "fuga" text_view3.text = "foo" } }
13. これまでのView操作 Kotlin Android Extension import kotlinx.android.synthetic.main.main_activity.* class MainActivity : AppCompatActivity(R.layout.main_activity) { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) text_view1.text = "hoge" text_view2.text = "fuga" text_view3.text = "foo" } } スネークケース
14. これまでのView操作 Kotlin Android Extension import kotlinx.android.synthetic.main.main_activity.* import kotlinx.android.synthetic.main.main_fragment.* class MainActivity : AppCompatActivity(R.layout.main_activity) { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) text_view1.text = "hoge" text_view2.text = "fuga" text_view3.text = "foo" // This will throw llegalStateException: textView1 must not be null text_of_different_layout.text = "huga" } } 他のレイアウトファイ ルも指定できる
15. これまでのView操作 Kotlin Android Extension import kotlinx.android.synthetic.main.main_activity.* import kotlinx.android.synthetic.main.main_fragment.* class MainActivity : AppCompatActivity(R.layout.main_activity) { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) text_view1.text = "hoge" text_view2.text = "fuga" text_view3.text = "foo" // This will throw llegalStateException: textView1 must not be null text_of_different_layout.text = "huga" } } null安全でない 他のレイアウトファイ ルも指定できる
16. これまでのView操作 Data Binding <?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"> <data> <variable name="user" type="com.example.nichiyoshi.viewbindingsample.User" /> </data> <LinearLayout android:orientation="vertical" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:text="@{user.name}" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TextView android:id="@+id/text1" import androidx.databinding.DataBindingUtil import com.example.nichiyoshi.viewbindingsample.databinding.MainActivityBinding class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val binding = DataBindingUtil.setContentView<MainActivityBinding>(this, R.layout.main_activity) binding.user = User("TARO") binding.text1.text = "hoge" } }
17. これまでのView操作 Data Binding <?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"> <data> <variable name="user" type="com.example.nichiyoshi.viewbindingsample.User" /> </data> <LinearLayout android:orientation="vertical" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:text="@{user.name}" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TextView android:id="@+id/text1" import androidx.databinding.DataBindingUtil import com.example.nichiyoshi.viewbindingsample.databinding.MainActivityBinding class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val binding = DataBindingUtil.setContentView<MainActivityBinding>(this, R.layout.main_activity) binding.user = User("TARO") binding.text1.text = "hoge" } } ちょっと大変 コンパイルに 時間かかる
18. ViewBindingのメリット - 簡単 - Null安全 - Type安全
19. 仕組み - レイアウトファイルを作成すると、自動で ViewDataBindingを継承したクラスが作成さ れる - main_activity.xml => MainActivityBinding - 生成されたコードは、ビルド後に以下で確認 できる - ~/app/build/generated/data_binding_base_ class_source_out/
20. 仕組み // Generated by data binding compiler. Do not edit! package com.example.nichiyoshi.viewbindingsample.databinding; import ... public abstract class MainActivityBinding extends ViewDataBinding { @NonNull public final FrameLayout container; @NonNull public final TextView textView1; protected MainActivityBinding(Object _bindingComponent, View _root, int _localFieldCount, FrameLayout container, TextView textView1) { super(_bindingComponent, _root, _localFieldCount); this.container = container; this.textView1 = textView1; } @NonNull public static MainActivityBinding inflate(@NonNull LayoutInflater inflater, @Nullable ViewGroup root, boolean attachToRoot) { return inflate(inflater, root, attachToRoot, DataBindingUtil.getDefaultComponent()); } - レイアウトファイルを作成すると、自動で ViewDataBindingを継承したクラスが作成さ れる - ビルドしなくても参照できる - main_activity.xml => MainActivityBinding - 生成されたコードは、ビルド後に以下で確認 できる - ~/app/build/generated/data_binding_base_ class_source_out/
21. 実装方法 準備 - Android Studio 3.6 Canary 11 以降をインストール - gradle pluginのバージョンを合わせる - Android Studio 3.6 Canary 11 の場合(プロジェクトレベルの build.gradle) - classpath 'com.android.tools.build:gradle:3.6.0-rc02' - モジュールのbuild.gradleに以下を追加 - android { - viewBinding.enabled = true - } - sync
22. 実装方法 Activityの場合 import com.example.nichiyoshi.viewbindingsample.databinding.MainActi vityBinding class MainActivity : AppCompatActivity() { private lateinit var binding: MainActivityBinding override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = MainActivityBinding.inflate(layoutInflater) setContentView(binding.root) } override fun onStart() { super.onStart() binding.textView1.text = "hoge" } }
23. 実装方法 Activityの場合 import com.example.nichiyoshi.viewbindingsample.databinding.MainActi vityBinding class MainActivity : AppCompatActivity() { private lateinit var binding: MainActivityBinding override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = MainActivityBinding.inflate(layoutInflater) setContentView(binding.root) } override fun onStart() { super.onStart() binding.textView1.text = "hoge" } } もし参照エラーになったら Invalidate caches and restart で解決するかも
24. 実装方法 Activityの場合 import com.example.nichiyoshi.viewbindingsample.databinding.MainActi vityBinding class MainActivity : AppCompatActivity() { private lateinit var binding: MainActivityBinding override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = MainActivityBinding.inflate(layoutInflater) setContentView(binding.root) } override fun onStart() { super.onStart() binding.textView1.text = "hoge" } } - レイアウトファイルはこれまで通り - 簡単 - Null安全 - bindingインスタンスからViewを取得し ている限り、常に同一のレイアウトファ イルであることを保証 - Type安全
25. 実装方法 Fragmentの場合 1 class MainFragment : Fragment() { private var mainFragmentBinding: MainFragmentBinding? = null private val binding get() = mainFragmentBinding!! override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View? { mainFragmentBinding = MainFragmentBinding.inflate(inflater) return binding.root } override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) binding.text1.text = "hoge" } override fun onDestroyView() { super.onDestroyView() mainFragmentBinding = null } }
26. 実装方法 Fragmentの場合 1 class MainFragment : Fragment() { private var mainFragmentBinding: MainFragmentBinding? = null private val binding get() = mainFragmentBinding!! override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View? { mainFragmentBinding = MainFragmentBinding.inflate(inflater) return binding.root } override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) binding.text1.text = "hoge" } override fun onDestroyView() { super.onDestroyView() mainFragmentBinding = null } } Viewのライフサイクルよりも Fragmentのライフサイクルの方が長い => Viewのライフサイクルが終わる時 (onDestroyView)に mainFragmentBinding の参照をリリースして、 ViewTreeのメモリリークを防ぐ
27. 実装方法 Fragmentの場合 1 class MainFragment : Fragment() { // private var mainFragmentBinding: MainFragmentBinding? = null // private val binding get() = mainFragmentBinding!! override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View? { val binding = MainFragmentBinding.inflate(inflater) binding.text1.text = "hoge" return binding.root } // override fun onViewCreated(view: View, savedInstanceState: Bundle?) { // super.onViewCreated(view, savedInstanceState) // binding.text1.text = "hoge" // } // override fun onDestroyView() { // super.onDestroyView() // mainFragmentBinding = null // } } 不要なら、bindingインスタンスをフィールドで持たない方が安全！！
28. 実装方法 Fragmentの場合 2 (コンストラクタでレイアウト指定) class MainFragment : Fragment(R.layout.main_fragment) { private var mainFragmentBinding: MainFragmentBinding? = null private val binding get() = mainFragmentBinding!! override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) mainFragmentBinding = MainFragmentBinding.bind(view) } override fun onStart() { super.onStart() binding.text1.text = "hoge" } override fun onDestroyView() { super.onDestroyView() mainFragmentBinding = null } } inflateメソッドではなくbindメソッドを使う
29. 簡略化するために satoshunさんのブログにて言及されています - FragmentでViewの参照を持つとメモリリークする話と実装 - AACサンプルで使っている AutoClearedValueを使う - DataBinding-Ktxを使う
30. リンク - View Binding(Android Developers) - architecture-components-samples/ViewBindingSample - AndroidStudioプレビューリリース - FragmentでViewの参照を持つとメモリリークする話と実装
31. Thanks