Table of contents
overview
In Android's traditional View, when we need to display a large amount of data, we generally use ListView or the more advanced RecyclerView. In Compose, we can use Column to achieve this requirement, and also allow the list to scroll, lazy load, and quickly locate specific locations. Very flexible, the following is to use Column to realize the content of the list
Example analysis
1. Implement a simple list
When implementing a simple list, we only need to enumerate the items to be displayed through the Column component, such as a control such as a menu.
code show as below:
@Composable
fun SimpleColumn() {
Surface(border = BorderStroke(2.dp,Color.Gray),
modifier = Modifier
.padding(5.dp)
.height(80.dp)
.width(70.dp)
) {
Column {
Text(text = "添加好友", style = MaterialTheme.typography.subtitle1)
Text(text = "更换背景", style = MaterialTheme.typography.subtitle1)
Text(text = "隐私协议", style = MaterialTheme.typography.subtitle1)
}
}
}
This is just a simple demo, the purpose is to tell readers that you can use column to make a menu, and then use DropdownMenu to make a drop-down menu. The characteristic of the menu is that all items can be enumerated. Moreover, these items are within the display range of the mobile phone screen. If there are too many items to be displayed, the menu needs to support sliding.
2. Implement a sliding menu list
In many cases, there will be a lot of items in the list, such as address book, SMS, music list, etc. We need to slide the list to view all the content. We can make the list slide by adding the verticalScroll() method to the Modifier of Column.
这里需要注意的是，当展示的内容变多时，我们不能再用Column组件了，因为Column组件会将所有的数据全部加载，这非常的耗内存和性能，这里采用的是LazyColumn组件，这个组件加载数据时是懒加载。即使用到时才加载数据.
The effect is shown in the figure above. The code is also very simple, as follows:
@Composable
fun SimpleColumn() {
Surface(border = BorderStroke(2.dp,Color.Gray),
modifier = Modifier
.padding(5.dp)
.height(80.dp)
.width(70.dp)
) {
val scrollState = rememberScrollState()
Column(modifier = Modifier.verticalScroll(scrollState)) {
Text(text = "添加好友", style = MaterialTheme.typography.subtitle1)
Text(text = "更换背景", style = MaterialTheme.typography.subtitle1)
Text(text = "隐私协议", style = MaterialTheme.typography.subtitle1)
Text(text = "添加好友", style = MaterialTheme.typography.subtitle1)
Text(text = "更换背景", style = MaterialTheme.typography.subtitle1)
Text(text = "隐私协议", style = MaterialTheme.typography.subtitle1)
Text(text = "添加好友", style = MaterialTheme.typography.subtitle1)
Text(text = "更换背景", style = MaterialTheme.typography.subtitle1)
Text(text = "隐私协议", style = MaterialTheme.typography.subtitle1)
Text(text = "添加好友", style = MaterialTheme.typography.subtitle1)
Text(text = "更换背景", style = MaterialTheme.typography.subtitle1)
Text(text = "隐私协议", style = MaterialTheme.typography.subtitle1)
}
}
}
3. Implement a list that can slide and quickly slide to the specified position
When our list has too many items, we introduce a swipeable list, so that users can swipe to view more information, but sometimes when the user slides to the bottom, they want to quickly return to the first item, or the user If we want to quickly view the content of the last item, we need to implement the function of quickly sliding to the last item of the list or quickly sliding from the last item to the first item. The effect is as follows:
that is, the user can either swipe to view the content, or quickly swipe to the specified Item by clicking the corresponding button. The code is as follows:
@Composable
fun ScrollingList() {
val scrollState = rememberLazyListState()
val listSize = 100;
val coroutineScope = rememberCoroutineScope()
Column {
Row {
Button(
onClick = {
coroutineScope.launch {
scrollState.animateScrollToItem(0)
}
},
modifier = Modifier.weight(1f)
) {
Text(text = "scroll to top")
}
Button(
onClick = {
coroutineScope.launch {
scrollState.animateScrollToItem(listSize - 1)
}
},
modifier = Modifier.weight(1f)
) {
Text(text = "scroll to end")
}
}
LazyColumn(state = scrollState) {
items(listSize) {
ImageListItem(index = it)
}
}
}
}
ImageListItem code is as follows:
@Composable
fun ImageListItem(index: Int) {
Row(verticalAlignment = Alignment.CenterVertically) {
Image(
painter = rememberImagePainter(data = "图片链接"),
contentDescription = "",
modifier = Modifier.size(50.dp)
)
}
Spacer(modifier = Modifier.size(10.dp))
Box(modifier = Modifier
.fillMaxWidth()
.height(40.dp)
.background(color = Color.Red)){
Text(text = "Item $index", style = MaterialTheme.typography.subtitle1)
}
}
注意：展示图片这里需要引入一个库：implementation('io.coil-kt:coil-compose:1.3.0')
As shown in the above code, the function of quickly sliding to the specified item in the list is mainly scrollState.animateScrollToItem(0)completed through the api. The amount of code is also small. Compared with the traditional ListView and RecycleView, Compose ui has less code and is easier to read. And there is no need to write the layout of the Adapter adapter and xml. It feels really super good.
注意：使用scrollState.animateScrollToItem(0) API时需要搭配协程使用
Summarize
This article mainly introduces how to use Compose UI to display some list data, mainly divided into non-scrollable lists, which can be used as menus; scrollable lists, which can be used to display a large amount of data; and can quickly locate specific items A list of that allows the user to quickly scroll to the item they need to view. There are two ways to implement a list, one is Column, which is suitable for scenarios with a relatively small amount of data, and the other is LazyColumn, which is a lazy loading method, which is suitable for scenarios with a large amount of data. The display of the list in the UI is more important, and I hope readers can firmly grasp it.