Is it possible to show a large letter in the middle of the screen when I tap an alphabet letter to right hand side of the screen? Every time I do this with my finger, I cannot see what letter my finger is tapping?

enum class Items(@StringRes val nameId: Int, val typeId: Int) {
    Item1(R.string.apple, R.string.fruit),
    Item2(R.string.banana, R.string.fruit),
    Item3(R.string.cherry, R.string.fruit),
    Item4(R.string.date, R.string.fruit),
    Item5(R.string.eggplant, R.string.vegetable),
    Item6(R.string.fig, R.string.fruit),
    Item7(R.string.guava, R.string.fruit),
    Item8(R.string.jackfruit, R.string.fruit),
    Item9(R.string.kiwi, R.string.fruit),
    Item10(R.string.leek, R.string.vegetable),
    Item11(R.string.okra, R.string.vegetable),
    Item12(R.string.pumpkin, R.string.fruit),
    Item13(R.string.rhubarb, R.string.fruit),
    Item14(R.string.spinach, R.string.vegetable),
    Item15(R.string.turnip, R.string.vegetable),
    Item16(R.string.watermelon, R.string.fruit);
}

val items = remember { arrayOf(
        Items.Item1,
        Items.Item2,
        Items.Item3,
        Items.Item4,
        Items.Item5,
        Items.Item6,
        Items.Item7,
        Items.Item8,
        Items.Item9,
        Items.Item10,
        Items.Item11,
        Items.Item12,
        Items.Item13,
        Items.Item14,
        Items.Item15,
        Items.Item16).sortedBy { getString(it.nameId) } }
val headers = remember { items.map { getString(it.nameId).first().uppercase() }.toSet().toList() }
Row {
    val listState = rememberLazyListState()
    LazyColumn(
        state = listState,
        modifier = Modifier.weight(1f)
    ) {
        items(items) {
            Column() {
                Text(
                    text = stringResource(id = it.nameId)
                )
                Text(
                    text = stringResource(id = it.typeId)
                )
            }
        }
    }
    val offsets = remember { mutableStateMapOf<Int, Float>() }
    var selectedHeaderIndex by remember { mutableStateOf(0) }
    val scope = rememberCoroutineScope()

    fun updateSelectedIndexIfNeeded(offset: Float) {
        val index = offsets
            .mapValues { abs(it.value - offset) }
            .entries
            .minByOrNull { it.value }
            ?.key ?: return
        if (selectedHeaderIndex == index) return
        selectedHeaderIndex = index
        val selectedItemIndex = items.indexOfFirst { getString(it.nameId).first().uppercase() == headers[selectedHeaderIndex] }
        scope.launch {
            listState.scrollToItem(selectedItemIndex)
        }
    }

    Column(
        verticalArrangement = Arrangement.SpaceEvenly,
        modifier = Modifier
            .fillMaxHeight()
            .background(Color.Green)
            .pointerInput(Unit) {
                detectTapGestures {
                    updateSelectedIndexIfNeeded(it.y)
                }
            }
            .pointerInput(Unit) {
                detectVerticalDragGestures { change, _ ->
                    updateSelectedIndexIfNeeded(change.position.y)
                }
            }
    ) {
        headers.forEachIndexed { i, header ->
            Text(
                header,
                modifier = Modifier.onGloballyPositioned {
                    offsets[i] = it.boundsInParent().center.y
                }
            )
        }
    }
}

CodePudding user response：

I would recommend displaying a toast everytime you press an item, provide you can add an onclicklistener. For example:

item1.setOnClickListener {
    Toast.makeText(getActivity(), "A", Toast.LENGTH_SHORT).show()
}