前人未踏の領域へ アプリ開発編

Android, iOSアプリ開発に関する調査メモ置き場。ほとんどAndroid。古い記事にはアプリ以外も含まれます。

Jetpack Compose:アイコン付きテキストを作る

試行錯誤の記録。慣れるまでが一苦労。Android Studioのレイアウトエディターとか完全に無用の長物になってしまったな。

アイコン付きテキスト

左にアイコンがあってテキストが続くようなよくあるケース

@Composable
fun TextWithIcon() {
    Row(verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.wrapContentHeight()) {
        Icon(
            vectorResource(id = R.drawable.ic_info_black_20px),
            modifier = Modifier
                .height(18.dp)
                .width(18.dp)
                .align(Alignment.CenterVertically)
        )
        Spacer(modifier = Modifier.width(16.dp))
        Text(
            text = stringResource(id = R.string.sample_text),
            fontSize = 12.sp,
            modifier = Modifier.align(Alignment.CenterVertically)
        )
    }
}

ポイント

  • 横に並べたいのでRowを使う
  • アイコンとテキストの高さを揃えたいので親のRowで verticalAlignment() を指定
  • SVG画像は vectorResource(id=) で取得
  • アイコンとテキスト間の余白は Spacer で確保