🖼️

Jetpack Composeで画像を表示する

JboyHashimoto

2023/08/20に公開

Kotlin

Jetpack Compose

tech

Overview

Jetpack Composeを使用して画像を表示

summary

Image コンポーザブルを使用して、画面にグラフィックを表示します。ディスクから画像（PNG、JPEG、WEBP など）やベクターリソースを読み込むには、painterResource API を画像参照とともに使用します。アセットのタイプを認識する必要はありません。Image 修飾子または paint 修飾子で painterResource を使用するだけです。

DrawScope:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description)
)

画像の配置の仕方

モケラボさんの動画を見ると分かりやすく解説されております。こちらを参考にしてください。

500px * 500pxぐらいの画像が丁度良さそうです。イラスト屋さんの画像を今回使わせていただきました。

作業手順
モケラボさんの動画通りに進めていくと画像の表示の設定ができます。

全体のコード
ローカルに配した画像を表示するコード
painterResourceを使用して、画像を読み込みcontentDescriptionを使用して、画像が表示されなかったときにテキストを表示して、アクセシビリティに対応できるようにしています。

package com.example.basiccodelab

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.example.basiccodelab.ui.theme.BasicCodelabTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BasicCodelabTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting(name = "Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Column {
        Image(painter = painterResource(id = R.drawable.person), contentDescription = "イラスト屋")
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    BasicCodelabTheme {
        Greeting(name = "Android")
    }
}

thoughts

学習の参考になった動画
画像の表示をする設定方法の解説がされていたので、文字だけのドキュメントより分かりやすかったです。

Jboy王国メディアPublication

これは、Jboy王国公式のZennアカウントです。

Overview

summary

画像の配置の仕方

thoughts

Discussion