2021/04/29

[Kotlin de Android] ViewBinding ビューバインディングを使ってみよう

久しぶりにAndroid Studioを立ち上げて色々調べていたら、
Android Kotlin Extensions プラグインが非推奨になり2021年9月以降に削除されるよう予定である、
とのこと…
主に findViewById の代わりに使ったいたわけですが、それも使えなくなるということのようです。

じゃあ、どうするんだ？と思ったら、前から実装はされていた View Binding を使いなさい、ということらしいです。

詳しくは以下のGoogle Developersのブロクを参照ください。
Google Developers Japan: Kotlin Android Extensions の未来

というわけで、自分の備忘録も兼ねて使い方をまとめてみたいと思います。
いつも通りプロジェクト一式はgithub にありますので、そちらも合わせて参考にしてみてください。

開発環境

Android Studio 4.1.3
JDK 1.8
Kotlin 1.4.13
macOS 10.16(Windows でも基本的には同じように開発できると思います。)

プロジェクトを作ろう

プロジェクトはこちらの記事を参考に作成してください。
（上記の記事では Kotlin Android Extensions の設置をしていますがそこは実施しないでください。この記事も書き直さないとですね…）

Activityのテンプレートは「Empty Activity」を選択してください。

プロジェクト名は「ViewBindindApp」にしましたが、お好きなものでOKです。

View Bindingを使えるように設定しよう

View Binding を使えるようにするには Gradleファイルを編集する必要があります。

build.gradle(:app)を開き、android {} の中に以下のように設定を追記します。

android {
    buildFeatures {
        viewBinding = true
    }
}

android {

buildFeatures {

viewBinding = true

}

上記を追加したら、右上に黄色い帯が表示されるのでその中「Sync now」を必ずクリックしておいてください。
これをしないと設定が反映されません。

画面を作ろう

View Bindingを使う設定ができたので、まずは画面を作っていきましょう。
TextView と Button を使って少しだけアプリっぽくしてみます。

activity_main.xml を開いてレイアウトエディタにしておきます。
（なっていなかった場合は右上の「Design」をクリックしてください。）

もともとあるTextViewは削除しておきます。（制約がついてて面倒なので）

PaletteからTextViewとButtonを1つずつ配置します。

Buttonの設定をしていこう

Buttonから設定していきます。
まずIDをつけます。今回は「changeBotton」とします。

次にTextを設定します。「Change」としておきます。
（本来はstrings.xmlを使うべきですが、今回は省略します）

最後にButtonの位置を調整していきます。
親Viewに対して中央に配置したいので、以下の画像を参考に「Align」から「Horizontally in Parent」と「Vertically in Parent」を選びます。

これで以下のようになっていれば大丈夫です。

TextViewの設定をしていこう

次にTextViewも設定していきます。

まずIDをつけます。今回は「dateTextView」とします。

次にTextを設定します。「2021/04/22」としましたが、なんでもいいですし、あとでコードから入力するので消してしまっても大丈夫です。
なにか書いておかないとデザイン時にわかりにくいので設定しています。

textSizeを「18sp」に、textWeightを「bold」にして、少し大きめの文字にします。

最後に位置の設定します。
左右は親Viewの中心に、上下はButtonとの中心にしたいので、「Align」から「Horizontally in Parent」と「Vertically」を設定します。

これで以下のようになるかと思います。

View Bindingを使ってTextViewに文字列を表示しよう

さて、諸々準備はできたので、実際にView Bindingを使ってみましょう！

View Bindingを有効にしておくと、XMLレイアウトファイルごとにバインディングクラスというものが作られます。
今回のレイアウトファイルはプロジェクトを作ったときに作られるactivity_main.xmlです。
この場合、バインディングクラスはキャメルケースのレイアウトファイル名＋Bindingとなるので、「ActivityMainBinding」という名前のクラスが生成されます。

MainActivity.ktを開いて、適当な位置で「Activitymb」などと打ってみると以下のように入力候補が出てくるのが確認できると思います。

では、このバインディングクラスをActivityから使えるようにしていきます。

MainActivity.ktを開いて、クラスの最初の変数を定義します。
あとからインスタンスを生成するので、変数の定義にはlateinit varを使います。型はバインディングクラスになりますが、前述の通りはActivityMainBindingという名前になるのでそのように記述します。

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

   ：中略

}

class MainActivity : AppCompatActivity() {

private lateinit var binding: ActivityMainBinding

：中略

}

次にonCreate()の中で初期化をし、使用できるようにしていきます。

バインディングクラスのinflate()メソッドを呼び出すことでインスタンスを生成することができます。
下記のソースの4行目ですね。生成したインスタンスを先に定義した変数bindingに代入しておきます。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    binding = ActivityMainBinding.inflate(layoutInflater)
}

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

binding = ActivityMainBinding.inflate(layoutInflater)

}

次にこのバインディングクラスを使って画面を生成するために、setContentView()の引数をbinding.rootに変更します。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)
}

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

binding = ActivityMainBinding.inflate(layoutInflater)

setContentView(binding.root)

}

これでバインディングクラスのインスタンスを使って、TextViewなどにアクセスできるようになったので早速使ってみましょう！

まずはTextViewの内容を更新してみましょう。
今回は日時を表示してみたいと思います。

と言ってもとっても簡単でbinding.textViewと言ったように使うことができます。

onCreate()メソッドの最後に以下のように記述します。

binding.dateTextView.text = Date().toString()

1	binding.dateTextView.text = Date().toString()

ひとまず日時はフォーマットせずそのまま表示してみます。

これで実行すると、以下のように日時が表示されました！

View Bindingを使ってButtonをクリックしてみよう

次はButtonのクリック処理を書いてみましょう。
クリック処理はsetOnClickListenerを使ってあげればいいので、以下ように書きます。
ここでは一旦Toastを表示してみます。

binding.changeBotton.setOnClickListener {
    Toast.makeText(this, "Clicked!", Toast.LENGTH_LONG).show()
}

binding.changeBotton.setOnClickListener {

Toast.makeText(this, "Clicked!", Toast.LENGTH_LONG).show()

}

これで実行してみて、ButtonをクリックしてToastが表示されればOKです！

ButtonをクリックしてTextViewを更新しよう

さて、最後にもう少しだけアプリっぽく行こうかと。
View Bindingの使い方がわかればいい人はこの先は読まなくても大丈夫です（笑）

Buttonをクリックするたびに、TextViewを更新するようにしてみます。

日時ですがSimpleDateFomatterを使ってもう少しだけ見やすくしてみます。

TextViewの更新処理はメソッドにまとめることにします。
というわけで、新しく updateTextViewというメソッドを作ります。

private fun updateTextView() {
}

1 2	private fun updateTextView() { }

この中に処理を書いていきます。
今回はSimpleDateFormatの使い方などは省略します。いろんなサイトで解説されているので調べてみてくださいー（汗）

private fun updateTextView() {
    val date = Date()
    val sdf = SimpleDateFormat("yyyy-MM-dd HH:mm:ss.SSS")
    binding.dateTextView.text = sdf.format(date)
}

private fun updateTextView() {

val date = Date()

val sdf = SimpleDateFormat("yyyy-MM-dd HH:mm:ss.SSS")

binding.dateTextView.text = sdf.format(date)

}

これで、フォーマットされた日時がTextViewに表示されるようになります。

まず、OnCreate()のTextViewの更新をしていたコードをこのメソッドを使うように書き換えます。

// binding.dateTextView.text = Date().toString()
updateTextView()

1 2	// binding.dateTextView.text = Date().toString() updateTextView()

次にbinding.changeBotton.setOnClickListenerの処理も書き換えます。

binding.changeBotton.setOnClickListener {
//    Toast.makeText(this, "Clicked!", Toast.LENGTH_LONG).show()
    updateTextView()
}

binding.changeBotton.setOnClickListener {

// Toast.makeText(this, "Clicked!", Toast.LENGTH_LONG).show()

updateTextView()

}

これで良いので実行してみましょう。
TextViewの内容が以下のように変わっていて、Buttonを押すたびに表示が更新されていればOKです！

今回はView Bindingについて説明してみました。
最初の初期化だけがちょっと面倒ですが、それさえやってしまえばKotlin Android Extensionsのときのように面倒なことがないのでいいですね。
bindingって書くのが面倒な気もするけど、それがあればレイアウトファイルの部品だとわかりやすいからいいのかもしれないですね。
Kotlin Android ExtensionsだといきなりtextViewとか出てきてどこで定義しているだ？ってなりやすい気もしますし、そういう意味では可読性も上がるように感じます。

今まで公開している記事は全部 Kotlin Android Extensions を使っているからどうしよう…。
コードだけ更新しますかね…。

前回の記事を公開したのが２０２０年１２月で、 Kotlin Android Extensions の廃止が告知されたのが２０２０年１１月。
もう少し調べてからにすればよかった（笑）