[Android] プロジェクト作成からViewBinding を使って画像表示するまでをまとめる

1.はじめに

本ポストでは以下の内容に馴染むことを目的としています。

画像をプロジェクトに組み込む(単一ファイルをdrawable に入れる)
ViewBinding を導入する
ViewBinding を使って動的にViewを操作する

参考

2.前提条件

Mac: macOS Big Sur 11.5.1
Android Studio: Arctic Fox | 2020.3.1 Patch 3
Gradle: 7.0.2

3.プロジェクトを作る

まずは Empty Activity からプロジェクトを作成します。

4.画像をプロジェクトに組み込む

最低限の手順ということで、何も考えずに一つの画像を組み込みます。

画像の組み込みは Resource Manager にて行います。
以下のようにAndroid Studio の左端から Resource Manager を選択します。

左端にない場合には、以下のようにツールバーから
View -> Tool Windows -> Resource Manager で辿れます。

Resource Manager を開いたら + ボタンを押し、Import Drawables を選択します。

インポートする画像を選択し、Open を押します。
すると以下のような画面が表示されるので、ファイル名を入力して右下の Next を押します。
今回は適当に sample_image と指定しています。

確認画面が表示されるので Import ボタンを押します。
すると画像が追加されました！

Project で確認すると、drawable 配下に追加されているのが分かります。

これで Android Studio 内で画像リソースを扱えるようになりました。

5.ViewBinding を導入する

build.gradle (Module) を開きます。

android ブロック の中に、以下のように buildFeatures を記述します。

plugins {
    ...
}

android {
    ...
    buildFeatures {
        viewBinding true
    }
}

dependencies {
    ...
}

その後、Android Studio の右上にある「象さんアイコン」を押して、
プロジェクトをシンクします。

これで ViewBinding が利用可能になりました！🙌

6.ViewBinding を使って動的にViewを操作する

いよいよ ViewBinding を使っていきます。
本ポストでは上記でインポートした画像を ViewBindiing で動的にセットしていきます。

6-1.空の `ImageView` を画面に配置

その前に下準備として、空の ImageView を画面に配置します！
activity_main.xml を開いて、以下のようにレイアウトを記述します。

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

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />
</androidx.constraintlayout.widget.ConstraintLayout>

デザイン的には以下のようになります。

「imageView」というIDを指定した画像を画面中央に配置しています。
ViewBinding から操作する際はこのIDを元に画像を操作することになります。

表示されているアバター画像は tools 属性指定のため、開発時にのみ表示される画像です。
参照: Android Developers: ツール属性のリファレンス

これで準備が完了しました！
あとはコードで動的に画像のリソースをセットします。

6-2.ViewBinding を使う

MainActivity.kt を開き、MainActivityClass を以下のように記述します。

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

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

        binding = ActivityMainBinding.inflate(layoutInflater)

        binding.imageView.setImageResource(R.drawable.sample_image)

        val view = binding.root
        setContentView(view)
    }
}

Activity の onCreate() メソッドに処理を記述します。

この記述についてもう少し詳細に見ていきます。

以下の記述で、ActivityMainBinding のインスタンスを生成しています。

binding = ActivityMainBinding.inflate(layoutInflater)

スタティックな inflate() メソッドで生成されるんですね。
ちなみに ActivityMainBinding クラス自体は自動で生成されています。

そして以下の記述で、ActivityMainBinding を介して
「imageView」というIDを持つ ImageView に、画像をセットしています。

binding.imageView.setImageResource(R.drawable.sample_image)

inflate() メソッドがどういうメソッドなのか最初はイメージが湧きづらいかもしれませんが、
バインディングクラスのインスタンスを生成するメソッドということで、
一つ覚えておくべきポイントかなと思います。

生成したバインディングクラスを介してビューを操作していくという形ですね！

ちなみに以下のコードでバインディングクラスの root を参照していますが、
これはビュー内の要素ではなくビューのルートを取得できるプロパティになっています。

val view = binding.root

今回の例でいうと、activity_main.xml に記述した
androidx.constraintlayout.widget.ConstraintLayout を取得しています。

最後にアプリを実行しておきます。

7.アプリを実行する

狙い通りコードでセットした画像が表示されました！🙌

Androidアプリ開発の教科書
第2版 Kotlin対応
Kindle版
￥2,822

Amazon で購入

8.最後に

本文中にも書きましたが、
inflate() メソッドでバイディングクラスのインスタンスを生成し
そのクラスを介してビューを操作する、
と覚えておけば ViewBinding の利用方法をイメージしやすいのかなと思います。

以上です。
お疲れ様でした！