Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
7
Help us understand the problem. What is going on with this article?
@hamup

DataBinding + LiveDataを使用したデータバインディング実装

More than 1 year has passed since last update.

目的

ボタンをクリックすると1ずつカウントアップする単純なサンプルソースを作り、
DataBindingとLiveDataの使い方を知る。

DataBindingの使い方

(1)dataBinding要素をbuild.gradleファイルに追加する。

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

(2)kotlin-kaptをbuild.gradleファイルに追加する。
※kaptの定義してないとコンパイルエラーになる。

apply plugin: 'kotlin-kapt'

(3)レイアウトファイルへdata要素を記述する。
layoutタグ -> data要素 -> Viewのroot要素と続く。
nameにはxml上で扱う変数名、typeにはバインド対象のオブジェクトを指定。

    <data>
        <variable name="viewModel" type="hamu.kai.com.databindingsample.MainViewModel"/>
    </data>

(4)ViewからMainViewModelオブジェクトのプロパティにアクセスするために、android:text=@{viewModel.text}のようにして、@{}で括る。

※公式抜粋

データ バインディングの観点では、この 2 つのクラスは同等です。TextView の android:text 属性に使われる @{user.firstName} 式は、先のクラス内で firstName フィールドに、後のクラス内で getFirstName() メソッドにアクセスすることになります。または、firstName() メソッドが存在すれば、そのメソッドに解決されます。

◾️全文

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>
        <variable name="viewModel" type="hamu.kai.com.databindingsample.MainViewModel"/>
    </data>

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:text="@{viewModel.text}"
            android:textSize="18sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:text="Button"
            android:onClick="@{viewModel::onClick}"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView" />

    </android.support.constraint.ConstraintLayout>
</layout>

(5)データのバインディングを行う
デフォルトの場合、レイアウトファイル(ここではactivity_main.xml)の名前をパスカルケースへ変換したものの末尾にBindingをつけたものがバインディングクラスになる。

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main).apply {
            setLifecycleOwner(this@MainActivity) // 重要。定義していないとLiveDataが正しく動作しない。
            viewModel = MainViewModel()
        }
    }
}

※公式抜粋

このクラスにはレイアウト プロパティ(viewModel 変数)からレイアウトのビューまでのすべてのバインディングが含まれ、バインディング式に値を適用する方法が指定されています。バインディングの作成はインフレート中に行うのが最も簡単です。

LiveDataの使い方

(1)LiveDataを利用するためのAAC(Android Architecture Component)を定義する。

implementation "android.arch.lifecycle:extensions:1.1.1"

(2)LiveDataとして扱いたいオブジェクトを定義する。

    var text = MutableLiveData<String>()

◾️全文

class MainViewModel: ViewModel() {

    var text = MutableLiveData<String>()
    private var count = 0

    fun onClick(view: View) {
        count++
        text.value = "count: $count"
    }
}

※公式抜粋

LiveDataオブジェクトを作成する LiveDataは、Listなどのコレクションを実装するオブジェクトを含む、あらゆるデータで使用できるラッパーです。 LiveDataオブジェクトは通常ViewModelオブジェクト内に格納され、次の例に示すようにgetterメソッドを介してアクセスされます。

参考リンク

7
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
hamup
組込み系エンジニア2年目。業務ではC、C++書いてます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
7
Help us understand the problem. What is going on with this article?