Skip to main content

androidでDataBinding + ViewModel + LiveDataで双方向Bindingしてみた

Kotlinプログラミング


androidでDataBinding + ViewModel + LiveDataを使ってみた
の続編

そういえばやろうと思っていて放置してた
DataBinding + ViewModel + LiveDataで双方向Bindingしてみた


・やりたいこと
前回の記事の通り変数更新したらlayout更新したい
さらにlayoutの変更されたら変数のデータが更新されるようにしたい

・コード
このコードだと
ボタンクリックするとtextView2とチェックボックスが更新される
さらにチェックボックスをUI上でいじるとtextView2の表示が更新される
layoutからでもkotlinからでもどちらからいじってもデータが変数に反映されるわけだ

MainActivity.kt

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding: ActivityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        val viewModel = ViewModelProviders.of(this).get(MainViewModel::class.java)
        binding.lifecycleOwner = this
        binding.viewModel = viewModel

        binding.button.setOnClickListener{
            viewModel.isCheck.postValue(!binding.checkBox.isChecked)
        }
    }
}

MainViewModel.kt

class MainViewModel : ViewModel() {
    val isCheck = MutableLiveData<Boolean>()
}

activity_main.xml

<layout>

    <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"
        tools:context=".MainActivity">

        <CheckBox
            android:id="@+id/checkBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="チェックしてね"
            android:checked="@={viewModel.isCheck}"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="parent" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text='@{viewModel.isCheck ? "true" :"false"}'
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/checkBox" />

        <Button
            android:id="@+id/button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/textView2" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <data>

        <variable
            name="viewModel"
            type="com.example.twice.binding.MainViewModel" />
    </data>
</layout>

・参考
https://qiita.com/YusukeIwaki/items/3fb4e10ac87fa1c7f6ba

関連記事:

Pocket