Jetpack Composeで画像を等間隔で横に並べる
Rowの中でSpacerに同じweightを指定し、画像の間と両端の余白を均等にします。
実装のポイント
6枚の画像の前後に7個のSpacerを置き、すべてにweight(1f)を指定しています。画像を置いた残りの横幅を7等分するため、両端にも画像間と同じ余白ができます。画像が収まらないほど狭い画面ではサイズや枚数を調整してください。
準備
Android StudioのCompose対応プロジェクトで、Material 3を使用します。以下のコードではパッケージ名をcom.swiswiswift.swiswikotlinにしています。自分のプロジェクトに合わせて変更してください。テーマはMaterialThemeに揃えています。
各記事は独立したサンプルです。同じプロジェクトで試す場合は、前のサンプルのMainActivityやContentViewを置き換えてください。
サンプルの画像をapp/src/main/res/drawable/snorlax.pngに置き、res/values/strings.xmlへ次の文字列を追加します。別の画像を使用するときは、リソース名と説明も変更してください。
<resources>
<string name="snorlax">カビゴンの画像</string>
</resources>
コード
MainActivity.kt
package com.swiswiswift.swiswikotlin
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.ui.Modifier
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
MaterialTheme {
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
ContentView(innerPadding)
}
}
}
}
}
ContentView.kt
package com.swiswiswift.swiswikotlin
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.material3.MaterialTheme
@Composable
fun ContentView(innerPadding: PaddingValues = PaddingValues()) {
Row(
modifier = Modifier
.fillMaxSize()
.padding(innerPadding),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically,
) {
Spacer(modifier = Modifier.weight(1.0f))
Image(
modifier = Modifier
.size(42.dp, 42.dp),
painter = painterResource(id = R.drawable.snorlax),
contentScale = ContentScale.Fit,
contentDescription = stringResource(id = R.string.snorlax)
)
Spacer(modifier = Modifier.weight(1.0f))
Image(
modifier = Modifier
.size(42.dp, 42.dp),
painter = painterResource(id = R.drawable.snorlax),
contentScale = ContentScale.Fit,
contentDescription = stringResource(id = R.string.snorlax)
)
Spacer(modifier = Modifier.weight(1.0f))
Image(
modifier = Modifier
.size(42.dp, 42.dp),
painter = painterResource(id = R.drawable.snorlax),
contentScale = ContentScale.Fit,
contentDescription = stringResource(id = R.string.snorlax)
)
Spacer(modifier = Modifier.weight(1.0f))
Image(
modifier = Modifier
.size(42.dp, 42.dp),
painter = painterResource(id = R.drawable.snorlax),
contentScale = ContentScale.Fit,
contentDescription = stringResource(id = R.string.snorlax)
)
Spacer(modifier = Modifier.weight(1.0f))
Image(
modifier = Modifier
.size(42.dp, 42.dp),
painter = painterResource(id = R.drawable.snorlax),
contentScale = ContentScale.Fit,
contentDescription = stringResource(id = R.string.snorlax)
)
Spacer(modifier = Modifier.weight(1.0f))
Image(
modifier = Modifier
.size(42.dp, 42.dp),
painter = painterResource(id = R.drawable.snorlax),
contentScale = ContentScale.Fit,
contentDescription = stringResource(id = R.string.snorlax)
)
Spacer(modifier = Modifier.weight(1.0f))
}
}
@Preview(showBackground = true)
@Composable
fun ContentViewPreview() {
MaterialTheme {
ContentView()
}
}