CardでYouTubeのコメントみたいなのを作ってみた

はじめに

Cardの勉強をしていたら、YouTubeのコメント欄っぽいView作れそうだと思ったのでサクッと作ってみた。
ちなみに、CardはUIの要素を視覚的に分離して整理するためのコンテナとして使用されるっぽい。
Android Developersの記事を参考にしています。

コードと種類

普通のCard

シンプルなデザインです。

Card(
    modifier = Modifier.fillMaxWidth(),
    colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.colorScheme.surfaceVariant
    )
) {
    Row(
        modifier = Modifier
            .padding(top = 10.dp, start = 10.dp, end = 10.dp)
    ) {
        // alignByBaseline()でテキストのベースラインを揃えている
        Text(
            modifier = Modifier.alignByBaseline(),
            text = stringResource(id = R.string.card_view_comment_title)
        )
        Spacer(modifier = Modifier.width(6.dp))
        Text(
            modifier = Modifier.alignByBaseline(),
            text = "192",
            fontSize = 14.sp
        )
    }

    Row(
        modifier = Modifier
            .padding(top = 4.dp, start = 10.dp, end = 10.dp, bottom = 6.dp)
    ) {
        Icon(
            imageVector = Icons.Filled.Face,
            contentDescription = "Users",
            modifier = Modifier
                .size(30.dp)
        )
        Spacer(modifier = Modifier.width(6.dp))
        Text(
            modifier = Modifier.alignByBaseline(),
            text = stringResource(id = R.string.card_view_comment1),
            fontSize = 14.sp
        )
    }
}

立体感のあるCard

立体感のあるCardが作れます。
elevationの値を指定していますが、指定しなくても若干立体感のあるCardにできます。

ElevatedCard(
    elevation = CardDefaults.cardElevation(
        defaultElevation = 6.dp
    ),
    modifier = Modifier
        .fillMaxWidth()
) {
    Row(
        modifier = Modifier
            .padding(top = 10.dp, start = 10.dp, end = 10.dp)
    ) {
        Text(
            modifier = Modifier.alignByBaseline(),
            text = stringResource(id = R.string.card_view_comment_title)
        )
        Spacer(modifier = Modifier.width(6.dp))
        Text(
            modifier = Modifier.alignByBaseline(),
            text = "19",
            fontSize = 14.sp
        )
    }

    Row(
        modifier = Modifier
            .padding(top = 4.dp, start = 10.dp, end = 10.dp, bottom = 6.dp)
    ) {
        Icon(
            imageVector = Icons.Filled.Face,
            contentDescription = "Users",
            modifier = Modifier
                .size(30.dp)
        )
        Spacer(modifier = Modifier.width(6.dp))
        Text(
            modifier = Modifier.alignByBaseline(),
            text = stringResource(id = R.string.card_view_comment2),
            fontSize = 14.sp
        )
    }
}

枠線のあるCard

枠線のあるCardが作れます。
borderの値を指定していますが、指定しなくても枠線のあるCardにできます。

OutlinedCard(
    colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.colorScheme.surface,
    ),
    border = BorderStroke(1.dp, Color.Black),
    modifier = Modifier
        .fillMaxWidth()
) {
    Row(
        modifier = Modifier
            .padding(top = 10.dp, start = 10.dp, end = 10.dp)
    ) {
        Text(
            modifier = Modifier.alignByBaseline(),
            text = stringResource(id = R.string.card_view_comment_title)
        )
        Spacer(modifier = Modifier.width(6.dp))
        Text(
            modifier = Modifier.alignByBaseline(),
            text = "57",
            fontSize = 14.sp
        )
    }

    Row(
        modifier = Modifier
            .padding(top = 4.dp, start = 10.dp, end = 10.dp, bottom = 6.dp)
    ) {
        Icon(
            imageVector = Icons.Filled.Face,
            contentDescription = "Users",
            modifier = Modifier
                .size(30.dp)
        )
        Spacer(modifier = Modifier.width(6.dp))
        Text(
            modifier = Modifier.alignByBaseline(),
            text = stringResource(id = R.string.card_view_comment3),
            fontSize = 14.sp
        )
    }
}

筆者が実装したソース

参考資料