はじめに

この記事は、Kotlinもアプリ開発も学びたての筆者が、実際に手を動かしながらアプリ開発を学んでいくものになります。
本記事は第2弾の位置づけで、前回の記事では Android Studio のダウンロードから初期構築までをやりました。

今回はこのアプリを題材にアプリ開発に慣れていこうと思ったのですが…
ちょっと知識が足りないことに気付いたので、まずは画像の基礎を学びたいと思います。

対象読者

Androidエンジニアを目指している方（自分は目指してます！）
素人の奮闘記を読みたい方

アプリに画像を表示する

まず、ストレージに保存されている画像をアプリに表示するにはどうしたら良いのでしょうか。

Android Studio に画像を配置する

とりあえず、画像をIDEに読み込ませることが必要です。

Android Studio の Project の下にある Resource Manager をクリックします。

＋ > Import Drawables としてから、対象の画像を選択します。
今回は、この画像をアプリに表示してみたいと思います。

QUALIFIER TYPE は Density を選択します。
この設定については勉強不足で、解釈が合っているか疑問ですが、
デバイスによって画面のサイズや密度が異なり、それによって解像度が違います。
そのため、異なるデバイスでも一貫した見え方になるように設定する項目のようです。

VALUE は No Density を選びます。
こちらは1インチあたり何ピクセルの密度に最適化するのかということを設定する項目のようです。
例えばMidium Densityであれば、160dpiで一貫して見える画像として扱ってくれるのではないでしょうか。
ちなみに、No Density とすることで、後に作成されるdrawable-nodpiディレクトリに画像を配置することで、デバイスに合わせて自動でサイズ変更を行わないという設定になるようです。

Android Studio のディレクトリ構成

1つ前のセクションでも少し触れましたが、Android Studio に画像をインポートすると、以下のようなディレクトリが構築されています。

myfirstapp
　∟ app
 　　∟ src
   　　　∟ main
      　　　∟ res
         　　　∟ drawable
            　 ∟ drawable-nodpi
               ∟ ・
               ∟ ・

このようにディレクトリごとに画像を分類することで、画面サイズごとに異なるUIを表示することができるようです。

画像を表示してみる

それでは、アプリ内に画像を表示してみたいと思います。
文字の場合は Text を使いましたが、画像の場合は Image を使って表示していきます。

MainActivity.kt

import androidx.compose.foundation.Image
import androidx.compose.ui.res.painterResource

～中略～

@Composable
fun GreetingImage(message: String, using: String, modifier: Modifier = Modifier) {
    val image = painterResource(id = R.drawable._06767)
    Image(
        painter = image
        contentDescription = null
    )
}

painterResource関数を使ってdrawable-nodpiディレクトリに保存してある画像を読み込みます。

なぜ`R.drawable`か

ここで一つ疑問が浮かびました。
画像の保存先はdrawable-nodpiやdrawable-mdpiなど、様々なはずです。
なぜR.drawableとするだけで、最適な画像を選んでくれるのでしょうか。

それは、Androidに一定の優先順位があるためなんだそうです。
例えば、以下のように同名の画像ファイルがあったとします。

myfirstapp
　∟ app
 　　∟ src
   　　　∟ main
      　　　∟ res
         　　　∟ drawable
            　 ∟ drawable-nodpi
            　　　∟ _06767.png
               ∟ drawable-mdpi
                　∟ _06767.png
               ∟ ・

もしデバイスの画面密度が mdpi の場合、R.drawable._06767 と書くと、drawable-mdpi に保存されている _06767.png を優先してくれます。

そしてもし、drawable-mdpi に同名のファイルが無かったとしたら、そこで初めて drawable-nodpi が選択されるんだそうです。

リソースの優先度について

Imageコンポーザブルのドキュメントはこちら

contentDescription

Imageコンポーザブルには、contentDescription という引数があります。
画像が何らかの意味を持っている場合は、画像の説明を設定することで、TalkBack という機能で読み上げが行われます。
これは、視覚障害を持つ方がアプリのUIを理解するのに必要な機能です。

ただし今回は、画像自体に特別な意味を持たせる訳ではありませんので、null を設定して、TalkBack から無視されるようになります。

プレビュー

@Preview アノテーションを使って、プレビューしてみたいと思います。

MainActivity.kt

@Preview(showBackground = true)
@Composable
fun GreetingImagePreview() {
    HellomyappTheme {
        GreetingImage(
            message = "android app development",
            using = "using Kotlin"
        )
    }
}

TextとImageを一緒に表示する

前回の記事で作った GreetingText 関数と一緒に表示してみます。

MainActivity.kt

@Composable
fun GreetingImage(message: String, using: String, modifier: Modifier = Modifier) {
    val image = painterResource(id = R.drawable._06767)
    Image(
        painter = image,
        contentDescription = null
    )
    GreetingText(
        message = message,
        using = using
    )
}

こうすると、それぞれのコンポーザブルの位置を指定していないので、重なって表示されてしまいます。

そこで、Column コンポーザブルを利用して、縦に並べてみます。

MainActivity.kt

@Composable
fun GreetingImage(message: String, using: String, modifier: Modifier = Modifier) {
    val image = painterResource(id = R.drawable._06767)
    Column(
        modifier,
        verticalArrangement = Arrangement.Center
    ) {
        Image(
            painter = image,
            contentDescription = null
        )
        GreetingText(
            message = message,
            using = using
        )
    }
}

次回予定

今回はアプリに画像を表示するところを学びました。
次回こそこのアプリを題材に学んでいこうと思います。