[Kotlin]JetpackComposeでインジケーター付きのスクロール可能なメニューバーを作る

# 概要
JetpackComposeでインジケーター付きのスクロール可能なメニューバーを作ります。
各項目が可変長でさらにインジケーターを付けたかったのでコードが長くなっています。
その必要がなければコードはもっと短くて済みます。

![forQiitaGif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/2b45c6d4-81bd-8513-b2f5-cbc5aece3045.gif)
# 本文

```kotlin
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import jp.co.forqiita.ui.theme.ForQiitaTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ForQiitaTheme {
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
                    val itemList: List<String> = listOf("例", "選択項目は可変長です", "項目1", "項目2", "項目3", "項目4", "項目5", "項目6")
                    Column() {
                        HeaderMenu(itemList) { Toast.makeText(applicationContext, it, Toast.LENGTH_SHORT).show() }
                    }
                }
            }
        }
    }
}

@Composable
fun HeaderMenu(
    itemList: List<String>,
    onItemSelected: (String) -> Unit
) {
    val menuHeight = 40.dp
    val indicatorHeight = 5.dp
    val itemAroundPadding = 20.dp
    val fontSize = 18.sp

    val selectedItemName: MutableState<String> = remember { mutableStateOf("") }

    Box(modifier = Modifier.wrapContentSize()) {
        // 基本の枠線
        Box(
            modifier = Modifier
                .offset(y = menuHeight)
                .fillMaxWidth()
                .height(indicatorHeight)
                .background(
                    color = Color.Gray
                )
        )
        LazyRow() {
            items(itemList) { item ->
                Column() {
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(menuHeight)
                            .clickable(
                                onClick = {
                                    selectedItemName.value = item
                                    onItemSelected(item)
                                },
                            ),
                        contentAlignment = Alignment.Center
                    ) {
                        Text(
                            text = item,
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(start = itemAroundPadding, end = itemAroundPadding),
                            fontSize = fontSize,
                            textAlign = TextAlign.Center,
                        )
                    }
                    // 選択された項目を表すインジケータ部分
                    val indicatorColor = if (item == selectedItemName.value) Color.Black else Color.Gray
                    Box(
                        modifier = Modifier
                            .height(indicatorHeight)
                            .background(color = indicatorColor)
                            .padding(start = itemAroundPadding, end = itemAroundPadding),
                    ) {
                        // 横幅を合わせる為だけのダミーデータ
                        Text(
                            text = item,
                            fontSize = fontSize,
                            color = indicatorColor
                        )
                    }
                }
                HorizontalDivider(height = menuHeight)
            }
        }
    }
}

// 区分け線
@Composable
fun HorizontalDivider(height: Dp) {
    Spacer(
        modifier = Modifier
            .width(1.dp)
            .height(height)
            .background(color = Color.Black)
    )
}
```

# 補足
MainActivity内のThemeやSurface部分はご自身の環境に合わせて変更してください（もしくはまるまる削除）