10
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

KotlinでDataBinding+ViewModel

Posted at

初投稿になります。Androidの便利な機能であるDataBindingとViewModelの基本的な扱いに関してまとめていきたいと思います。
学習途中でまとめているので順次更新していきたいと思っています。

DataBinding

下準備

まずはDataBindingを使用するためにgradleファイルへの書き込みをおこないます。

build.gradle
android {
    dataBinding {
        enabled = true
    }
}

レイアウトxmlの準備

Layoutのxmlの準備をしていきます。

main_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable name="data" type="com.example.test.main.MainViewModel" />
    </data>
    <android.support.constraint.ConstraintLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/textView"
                android:text="@{data.text}"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"/>
    </android.support.constraint.ConstraintLayout>
</layout>

こちらには少し注意点があります。
親のレイアウトはlayoutであること。
・こちら一度書き込んだあとbuildしないとdatabindingをする際に自動的に作成されるファイルがないとエラーが出るのでbuildをしてから実行します。

ではこちらのファイルの説明をしていきます。

まずはの部分です。
こちらはnameの部分が変数名、typeの部分が参照するクラス名と考えるのがわかりやすいかなと思います。
今回はname="data"として使用しています。参照しているViewModelは後述していきます。

TextViewを見てみると

android:text="@{data.text}"

という箇所があります。ここがtextとdata.textをBinding(紐付け)している箇所になります。
ここではtextにMainViewModel内の変数textを表示するようにBindingを行なっています。

###ViewModel

ViewModelは先ほど定義したMainViewModelを使用します。

中身はこんな感じです。

MainViewModel.kt
class MainViewModel : ViewModel() {
    val text: MutableLiveData<String> = MutableLiveData()
    init {
        text.value = "aaa"
    }
}

textにはLiveDataを使用しています。
LiveDataに関してはこちらを参照
text.valueに初期値を設定することで、その値がLayout内にも反映がされます。

Fragment

最後にFragmentです。

Mainfragment.kt
class MainFragment : Fragment() {
    private var binding: MainFragmentBinding? = null
    private var mainViewModel: MainViewModel? = null

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = MainFragmentBinding.inflate(inflater, container, false)
        binding!!.lifecycleOwner = this

        return binding!!.root
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        mainViewModel = ViewModelProviders.of(this).get(MainViewModel::class.java)
        binding!!.data = mainViewModel
    }
}

これでDataBindingの使用ができます。

onCreateView内を見てみます。
binding = MainFragmentBinding.inflate(inflater, container, false)
ここはBindingのインスタンスの取得をしています。
返すViewにはbinding!!.rootを指定してください。

そしてonActivityCreated内です。
mainViewModel = ViewModelProviders.of(this).get(MainViewModel::class.java)
ここでViewModelのインスタンスを取得しています。
binding!!.data = mainViewModel
ここのdataはmain_fragment.xmlでname="data"として設定した名前になります。


間違いありましたらご指摘お願いします。
追々肉付けしていけたらと思います。

10
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?