Categories
How To Studio

Complex UI in Jetpack Compose. Jetpack Compose provides many tools for… | by Rasul Aghakishiyev | Apr, 2021

Rasul Aghakishiyev

Jetpack Compose provides many tools for creating UI. Jetpack Compose makes it easy to create an MVP for your project and see what it looks like. For example, to create a list in the usual way on Android, you need to use RecyclerView. And of course, you need to create an adapter and view holder to manage your items in RecyclerView. Jetpack Compose makes it easy to do.

@Composable
fun NewsList() {
LazyColumn {
items(rows) { item ->
Text(
modifier = Modifier
.height(80.dp),
text = item
)
}
}
}

And that’s all. No adapter or view holder is required.
LazyColumn Used when creating a vertical list. To create a horizontal LazyColumn When LazyRow And our list will be horizontal

@Composable
fun NewsList() {
LazyRow {
items(rows) { item ->
Text(
modifier = Modifier
.height(80.dp),
text = item
)
}
}
}

If you want to get the index of an item items To itemsIndexed And you access the index of the current item

itemsIndexed(rows) { index, item ->
Text(
modifier = Modifier
.height(80.dp),
text = item
)
}

What if I create a nested list? This includes both vertical and horizontal items. Of course, you can use LazyVerticalGrid for this purpose.

LazyVerticalGrid(cells = GridCells.Fixed(10)) {
itemsIndexed(rows) { row, item->
Text(
modifier = Modifier
.height(80.dp),
text = item
)
}
}

However, there are some issues with the solution. First, LazyVerticalGrid It is still annotated as the Experimental Foundation Api. The second is to allow the grid to scroll only vertically. And the third is that it always fits the width of the screen. For example, if you want 8 columns LazyVerticalGrid Try to fit them all on the screen. Here is an example of that work.

You agree that it looks a bit weird because you want to be able to scroll the grid horizontally to see all the items instead of putting them all on the screen. To do this, use the components used before LazyRow and LazyColumn. The combination of these two components allows you to create complex scrollable grids with minimal effort. Let’s start!

First, you need to create a LazyColumn so that you can scroll the item vertically. However, at this time, the LazyColumn item is now a LazyRow. I’ve added some modifiers to the Text component to make the grid a little more beautiful.

LazyColumn {
itemsIndexed(rows) { index, row ->
LazyRow {
itemsIndexed(columns) { index, column ->
Text(
modifier = Modifier
.padding(8.dp)
.background(Color.Red)
.width(100.dp)
.height(100.dp),
textAlign = TextAlign.Center,
color = Color.White,
text = "Row $row Column = $column"
)
}
}}
}

Row — An array of strings of size 10

Column — An array of strings of size 10

So it creates a grid with 10 rows and columns of the same size

When I run the code, it looks like this:

There are several benefits to using this solution.

  1. More customization opportunities.Ability to change all items in the grid, or change items only in specific columns or rows

Jetpack Compose provides many tools for creating complex UIs. Today you learned how to create a grid with Jetpack Compose. If you want to create a simple grid with no features such as horizontal scrolling or infinitive scrolling, you should use: LazyVerticalGrid.. Otherwise, LazyRow And LazyColumn For these purposes.

Follow me on Twitter. Also, don’t hesitate to ask questions related to Jetpack Compose.

twitter : https://twitter.com/a_rasul98

Thank you for reading, and later!



Source

Leave a Reply

Your email address will not be published. Required fields are marked *