【ケース別】XMLのonClickでViewModel上の関数を呼び出す

○ 目次　

• 1. 引数なし関数の呼び出し方
• 1. 引数あり(View型以外)関数の呼び出し方
• 1. 引数あり(View型のみ）関数の呼び出し方
• 1. まとめ

1. 引数なし関数の呼び出し方

ViewModel

kotlin.viewModel.kt

fun onButtonClicked(){
        //省略
}

XML

xml.fragment_main.xml

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Test"         
    android:onClick="@{() -> viewModel.onButtonClicked()}"/>

　ViewModel側では普通のpublicな関数を用意するだけです。
　xml側ではandroid:onClickに"@{() -> viewModel.関数名()}"といった形で設定します。

2. 引数あり(View型以外)関数の呼び出し方

ViewModel

kotlin.viewModel.kt

fun onButtonClicked(key:String){
        //省略
}

XML

xml.fragment_main.xml

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Test"         
    android:onClick="@{() -> viewModel.onButtonClicked('key')}"/>

　ViewModelでは任意の型の引数を取る関数を用意します。（引数は複数でも可)
xmlでは引数あり関数の呼び出し方と同様にしてandroid:onClickに記述します。先ほどと違う点については、関数内に引数を取るところです。
　上の例では直接('key')と値を設定していますが、実際は<data>の<variable>にデータクラスなどを設定しておいて、それを呼び出す形になると思います。

3. 引数あり(View型のみ)関数の呼び出し方

ViewModel

kotlin.viewModel.kt

fun onRadioButtonClicked(view:View){
    when(view.id){
        //省略
    }
}

XML

xml.fragment_main.xml

<RadioButton
    android:id="@+id/radioButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="category1"         
    android:onClick="@{viewModel.onRadioButtonClicked}"/>

　viewModel側で2の説明と変わったところは関数の引数がview:Viewとなったところです。今回の例はこのケースのみ使用することができます。このようにすることで、onClickを呼び出したViewを取得することができます。
　xml側の変更点は、android:onClick内の記述が@{viewModel.onRadioButtonClicked}となったところです。viewそのものを引数に取るので明示的に書かなくていいみたいです。
　今回の方法は、クリックイベントの後にそのViewのプロパティを変更するときや、RadioButtonなど複数のViewから選択されたViewを取得する際に便利そうです。

4.まとめ

ViewModelでは任意の引数を持つ関数を書いて、引数に応じてXMLのandroid:onClickの記述方法を変えることで実現できます。

• 1. 引数なし　　　　　　-> @{()-> viewModel.onclick()}
• 1. 引数あり(view型以外) -> @{()-> viewModel.onClick('key')}
• 1. 引数あり(View型)　　->@{viewModel.onClick}