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

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

![card.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/f1cb6aee-af09-0de3-6a63-c68dc78f7519.jpeg)

# コードと種類
### 普通のCard
シンプルなデザインです。

```kotlin
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 2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/9cad3ea7-6c49-0eeb-50ec-21d667fdb196.jpeg)

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

```kotlin
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 3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/04e3cb68-a26d-24c3-b273-254c5bf7452c.jpeg)

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

```kotlin
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
        )
    }
}
```
![card 4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/8e5d7285-e2ff-621c-eedf-6c03bf121b70.jpeg)

# 筆者が実装したソース
https://github.com/seyamasan/compose-view

# 参考資料
https://developer.android.com/develop/ui/compose/components/card?hl=ja