JetpackComposeで丸の画像を作る

Overview

https://developer.android.com/jetpack/compose/layouts/basics?hl=ja
Composeのレイアウトについて学んでいたのですが、画像を綺麗な丸にすることができなかった。。。。
試行錯誤して綺麗に整えました。

やること

1. 画像の配置（今回はジョージワシントンの画像を配置してみました）
2. 画像を読み込む

こんな感じで画像の配置と画像を読み込むファイルを作成します。

summary

最初はこんな感じになっています。公式を参考にやってみました。

Image(
    painter = painterResource(id = R.drawable.cat),
    contentDescription = "Artist Avatar",
    modifier = Modifier
        .size(80.dp, 80.dp)
        .clip(CircleShape)  // この行を追加
)

綺麗ではないですね

ImageコンポーネントにModifier.size(80.dp, 80.dp)を適用すると、そのサイズは80dp x 80dpの正方形になりますが、元の画像が正方形でない場合、このImageコンポーネントのアスペクト比が変わってしまう可能性があります。そのため、このModifierは、元の画像が正方形であることを前提としています。

ContentScaleの調整: 画像のスケーリング方法を調整することで、画像がImageコンポーネントに適切にフィットするようにできます。これは、ImageコンポーネントのcontentScaleパラメータを使用して調整できます。例: contentScale = ContentScale.Crop

以下に、contentScaleを使用して画像を正方形にクロップする方法を示します:

Image(
    painter = painterResource(id = R.drawable.george),
    contentDescription = "Artist Avatar",
    contentScale = ContentScale.Crop,  // 画像をクロップする
    modifier = Modifier.clip(CircleShape).size(80.dp, 80.dp)
)

やっと綺麗になりました。

🤖全体のコード

配置した画像を読み込むコード。painter = painterResource(id = R.drawable.georgeのところで、georgeというjpeg画像を読み込んでいます。

package com.example.mylaoyout
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.res.painterResource
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale

@Composable
fun ArtistCard(artist: Artist) {
    Row(
        modifier = Modifier.padding(8.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.Start
    ) {
        /* contentScaleを指定すると、画像のサイズを変更できる。clipを指定すると、画像の形を変更できる。
        sizeを指定すると、画像の大きさを変更できる。80dpと80dpを指定しているので、綺麗な丸になる。
        */
        Image(
            painter = painterResource(id = R.drawable.george),
            contentDescription = "Artist Avatar",
            contentScale = ContentScale.Crop,
            modifier = Modifier.clip(CircleShape).size(80.dp, 80.dp)
        )
        Column(
            modifier = Modifier.padding(start = 8.dp)
        ) {
            // テキストのフォントを大きめにする
            Text(text = artist.name, style = MaterialTheme.typography.headlineLarge)
            // テキストのフォントを小さめにする
            Text(text = artist.description, style = MaterialTheme.typography.bodySmall)
        }
    }
}

アプリを実行するコードで、@Composableを読み込んでビルドする。

package com.example.mylaoyout

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import com.example.mylaoyout.ui.theme.MyLaoyoutTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyLaoyoutTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    // アバター画像がある@Composable関数
                    ArtistCard(Artist("Cat", "A cat"))
                }
            }
        }
    }
}

thoughts

公式を見てみましたけど、あまり参考になりませんでした。綺麗な丸の画像を作るだけで、結構詰まりましたので機能１つ１つへの深い理解が必要なのだなと悩まされました。