Android Compose如何实现联系人列表

这篇文章主要介绍“Android Compose如何实现联系人列表”，在日常操作中，相信很多人在Android Compose如何实现联系人列表问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Android Compose如何实现联系人列表”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

效果：

准备数据

data class ContactEntity(    val letter: Char,    val name: String,    val color: Color)fun getContactData(): MutableList<ContactEntity> {    val contactList = mutableListOf<ContactEntity>()    (65..90).forEach { letter ->//        val random = (5..20).random()        val random = 5        repeat(random) { index ->            contactList.add(                ContactEntity(                    letter = letter.toChar(), name = "联系人  $index",                    color = Color(                        red = (0..255).random(),                        blue = (0..255).random(),                        green = (0..255).random()                    )                )            )        }    }    return contactList}fun getCharList(): MutableList<Char> {    val charList = mutableListOf<Char>()    (65..90).forEach { letter ->        charList.add(letter.toChar())    }    return charList}

思路

• 整体是由Box布局包裹， 左侧是LazyColumn 右侧放置自定义布局

• 左侧LazyColumn用state来观察滑动的一些参数，来控制右侧字母的位置

• 右侧使用canvas绘制字母 在触控的时候使用scrollToItem准确的定位到左侧应该滑动的位置，感觉有些不准确，不知道是计算的问题还是bug，在谷歌上看到类似的issue提交。

• 中间显示滑动到的字母，也可以使用贝塞尔曲线来绘制类似于水滴的样式，懒得去搞了。

• 利用derivedStateOf来跟踪变化的remember数据，这样可以减少性能的损耗，但是感觉有个地方没处理好，就是触摸的时候需要改变，滑动的时候也需要改变，而derivedStateOf是val类型的，不能直接赋值，所以又设置了一个remember变量。有可以优化的地方请指出。

• 数据和样式都可以自定义，非常方便

代码实现

@OptIn(ExperimentalTextapi::class)@Composablefun ContactPage(navCtrl: NavHostController, title: String) {    //联系人数据    val contactList = getContactData()    //字母数据    val charList = getCharList()    val offsetY = with(LocalDensity.current) {        20.dp.toPx()    }    val offsetX = with(LocalDensity.current) {        25.dp.toPx()    }    val coroutineScope = rememberCoroutineScope()    val textMeasure = rememberTextMeasurer()    val state = rememberLazyListState()    //触摸的位置    var touchOffset by remember() {        mutableStateOf(Offset.Zero)    }    //触摸到的上一次的字母下标    var touchIndexLast by remember {        mutableStateOf(-1)    }    //触摸的字母的下标    val touchIndex = remember(touchOffset.y) {        derivedStateOf {            if (touchOffset.y > 0f) {                //通过偏移的倍数计算滑动到哪个字母的位置了                val y = (touchOffset.y / offsetY).roundToInt()                if (y in 0..25) {                    touchIndexLast = y                    y                } else {                    touchIndexLast                }            } else touchIndexLast        }    }    //触摸到的字符的index    val touchLetterIndex = remember {        derivedStateOf {            if (state.isScrollInProgress && state.layoutInfo.visibleItemsInfo.isNotEmpty()) {                val key = state.layoutInfo.visibleItemsInfo[0].key                if (key is Int && key < contactList.size) {                    val letter = contactList[key].letter                    val findIndex = charList.indexOfFirst {                        it == letter                    }                    findIndex                } else {                    touchIndex.value                }            } else {                touchIndex.value            }        }    }    //上一次选择的letter    var lastLetter by remember {        mutableStateOf("")    }    //滑动到的letter    val scrollLetter = remember {        derivedStateOf {            if (touchIndex.value > 0) {                val letter = (65 + touchIndex.value).toChar()                coroutineScope.launch {                    //找到相应的item                    val index = getIndex(contactList, letter)                    state.scrollToItem(index, scrollOffset = 20)                }                val str = letter.toString()                lastLetter = str                str            } else {                lastLetter            }        }    }    CommonToolbar(navCtrl, title) {        Box(modifier = Modifier.fillMaxSize()) {            LazyColumn(modifier = Modifier.fillMaxWidth(), state = state, content = {                contactList.forEachIndexed { index, contactEntity ->                    item(key = index) {                        Column(                            modifier = Modifier.fillMaxWidth()                        ) {                            Row(                                modifier = Modifier                                    .fillMaxWidth()                                    .padding(horizontal = 10.dp),                                verticalAlignment = Alignment.CenterVertically                            ) {                                Box(                                    modifier = Modifier                                        .size(50.dp)                                        .clip(CircleShape)                                        .background(                                            color = contactEntity.color,                                        ), contentAlignment = Alignment.Center                                ) {                                    Text(                                        text = "${contactEntity.letter}",                                        fontSize = 16.sp,                                        color = Color.White,                                        fontWeight = FontWeight.SemiBold,                                    )                                }                                Text(                                    text = contactEntity.name,                                    modifier = Modifier                                        .padding(20.dp)                                        .weight(1f)                                        .padding(horizontal = 10.dp, vertical = 16.dp)                                )                            }                            Divider()                        }                    }                }                item {                    Text(                        text = "共${contactList.size}联系人",                        fontSize = 12.sp,                        color = Color(0xFF333333),                        modifier = Modifier                            .fillMaxWidth()                            .padding(vertical = 20.dp),                        textAlign = TextAlign.Center                    )                }            })            //绘制右侧的26个字母            Canvas(modifier = Modifier                .padding(top = 30.dp)                .width(50.dp)                .fillMaxHeight()                .align(Alignment.TopEnd)                .pointerInput(Unit) {                    coroutineScope {                        while (true) {                            // down事件                            val downPointerInputChange = awaitPointerEventScope {                                awaitFirstDown()                            }                            // 如果位置不在手指按下的位置，先动画的形式过度到手指按下的位置                            if (touchOffset.x != downPointerInputChange.position.x && touchOffset.y != downPointerInputChange.position.y) {                                launch {                                    touchOffset = downPointerInputChange.position                                }                            }                            // touch Move事件                            // 滑动的时候，box随着手指的移动去移动                            awaitPointerEventScope {                                drag(downPointerInputChange.id, onDrag = {                                    touchOffset = it.position                                })                            }                            // 在手指弹起的时候，才通过动画的形式，回到原点的位置                            val dragUpOrCancelPointerInputChange = awaitPointerEventScope {                                awaitDraGorCancellation(downPointerInputChange.id)                            }                            // 等于空，说明已经抬起                            if (dragUpOrCancelPointerInputChange == null) {                                launch {                                    touchOffset = Offset.Zero                                }                            }                        }                    }                }, onDraw = {                charList.forEachIndexed { index, char ->                    drawText(                        size = Size(width = offsetY, offsetY),                        textMeasurer = textMeasure, text = "$char",                        style = TextStyle(                            fontWeight = if (touchLetterIndex.value == index) FontWeight.SemiBold else FontWeight.Medium,                            color = if (touchLetterIndex.value == index) Color.Blue else Color(                                0xFF333333                            ),                            textAlign = TextAlign.Center,                            fontSize = if (touchLetterIndex.value == index) 16.sp else 14.sp                        ),                        topLeft = Offset(offsetX, offsetY * index),                    )                }            })            //中间显示的大写字母            val textMeasurer1 = rememberTextMeasurer()            if (touchOffset.x != 0f && touchOffset.y != 0f && scrollLetter.value.isNotEmpty()) {                val annotatedString = AnnotatedString(                    scrollLetter.value, spanStyle = SpanStyle(                        fontWeight = FontWeight.Medium,                        color = Color(0xFF333333),                        fontSize = 20.sp,                    )                )                val textLayoutResult = textMeasurer1.measure(text = annotatedString)                val textSize = textLayoutResult.size                Canvas(modifier = Modifier                    .align(Alignment.Center)                    .requiredSize(width = 50.dp, height = 50.dp), onDraw = {                    //底部颜色                    drawRoundRect(                        color = Color(0xA403A9F4), cornerRadius = CornerRadius(10f, 10f)                    )                    //绘制字母                    drawText(                        textMeasurer = textMeasurer1,                        text = annotatedString,                        topLeft = Offset(                            (size.width - textSize.width) / 2f,                            (size.height - textSize.height) / 2f                        )                    )                })            }        }    }}

private fun getIndex(list: MutableList<ContactEntity>, letter: Char): Int {    val findIndex = list.indexOfFirst { contactEntity ->        contactEntity.letter == letter    }    return findIndex}

到此，关于“Android Compose如何实现联系人列表”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！