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

1.はじめに

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

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

参考

  1. Android Developers: Resource Manager でアプリの UI リソースを管理する
  2. Android Developers: ビューバインディング

2.前提条件

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

3.プロジェクトを作る

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

Empty Activity を選択してプロジェクト作成

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

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

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

Resource Manager

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

Resource Manager

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

Import Drawables を選択

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

ファイル名を入力してNextを押す

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

Resource Manager に画像が追加されている

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

drawable 配下に追加されている

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

5.ViewBinding を導入する

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

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)
    }
}

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

以下の記述で、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.アプリを実行する

エミュレータのキャプチャ

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

8.最後に

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

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

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。