preface

For Compose, it’s been a while since its official launch, and I still feel like I need to get into the game. Therefore, in my spare time, WITH reference to the design of the douban list page, I have developed several “Compose” version of the douban list page UI effect is pretty good. If you are interested, you can click the “Star” :Compose imitation douban list client

rendering

First take a look at the final renderings

features

The following features were used in the project to beautify the UI and experience

  1. Support setting of immersive status bar and status bar color
  2. Supports horizontal and vertical scrollingUIThe effect
  3. Support toImageSet a gradient filter to beautify the display
  4. Title and list page linkage is supported
  5. throughPagingPaging loading is supported

The main implementation

Specific source code can be viewed directly, here mainly introduces the realization of some main functions

Immersive status bar Settings

The status bar provides a series of commonly used first-confidence strings, such as the status bar, first-confidence strings, and first-confidence strings. For example, FlowLayout,ViewPager, etc., Compose library, FlowLayout,ViewPager, etc

Setting the status bar is mainly divided into the following steps

  1. Set the status bar for immersion
  2. Gets the status bar height
  3. Sets the status bar color
override fun onCreate(savedInstanceState: Bundle?). {
        super.onCreate(savedInstanceState)
        // 1. Set the status bar to be immersive
        WindowCompat.setDecorFitsSystemWindows(window, false)

        setContent {
            BD_ToolTheme {
            	/ / to join ProvideWindowInsets
                ProvideWindowInsets {
                    // 2. Set the status bar color
                    rememberSystemUiController().setStatusBarColor(
                        Color.Transparent, darkIcons = MaterialTheme.colors.isLight)
                    Column {
                    	// 3. Obtain the height of the status bar and set the placeholder
                        Spacer(modifier = Modifier
                            .statusBarsHeight()
                            .fillMaxWidth())
                        Text(text = "Home \r\n home 1\r\n home 2\r\n home 3")}}}}}Copy the code

Through the above methods, it is relatively simple to achieve the setting of the immersion status bar

ImageSet the gradient filter

Douban list page to set the Image gradient filter, in order to beautify the UI effect is actually relatively simple to achieve, add a layer of gradient mask before the Image

@Composable
fun TopRankItem(item: HomeTopRank) {
    Box(
        modifier = Modifier
            .size(180.dp, 220.dp)
            .padding(8.dp)
            .clip(RoundedCornerShape(10.dp))
    ) {
    	/ / 1. Images
        Image(
            painter = rememberCoilPainter(request = item.imgUrl),
            contentDescription = null,
            contentScale = ContentScale.Crop,
            modifier = Modifier.fillMaxSize()
        )
        Column(
            modifier = Modifier
                .fillMaxSize()
                // Gradient filter
                .background(
                    brush = Brush.linearGradient(
                        colors = listOf(Color(item.startColor), Color(item.endColor)),
                        start = Offset(0f.Float.POSITIVE_INFINITY),
                        end = Offset(Float.POSITIVE_INFINITY, 0f)
                    )
                )
                .padding(8.dp)

        ) {
            / / content}}}Copy the code

As shown above, using the Box layout, give the foreground a gradient from bottom left to top right

The title is linked to the list

This effect is also very common in The Android View system. The main idea is very simple:

  1. Listen for list scroll to get list scrolloffset
  2. Scroll by listoffsetSet up theHeaderEffects, such as background or height changes
@Composable
fun RankScreen(viewModel: RankViewModel = RankViewModel()) {
    val scrollState = rememberLazyListState()
    Box {
    	// 1
        LazyColumn(state = scrollState) {
            // List contents
        }
        RankHeader(scrollState)
    }
}

@Composable
fun RankHeader(scrollState: LazyListState) {
    val target = LocalDensity.current.run {
        200.dp.toPx()
    }
    // 2. Calculate the scale based on the list offset
    val scrollPercent: Float = if (scrollState.firstVisibleItemIndex > 0) {
        1f
    } else {
        scrollState.firstVisibleItemScrollOffset / target
    }
    val activity = LocalContext.current as Activity
    val backgroundColor = Color(0xFF7F6351)
    Column() {
        Spacer(
            modifier = Modifier
                .fillMaxWidth()
                .statusBarsHeight()
                // 3. Set the alpha of the Header according to the scale to achieve the gradient effect
                .alpha(scrollPercent)
                .background(backgroundColor)
        )
        //....}}Copy the code

As shown above, there are three main steps:

  1. Listening to the list
  2. Calculate the scale based on the list offset
  3. Set according to scaleHeaderthealphaTo achieve the gradient effect

usingPagingImplement paging

Currently Pagin3 already supports Compose, we can easily implement Paging effect by using Paging, which can be divided into the following steps:

  1. inViewModelSet data source in
  2. Listen on the pagePagingdata
  3. Load more depending on the load status Settingsfootrstate
//1. Set the data source
class RankViewModel : ViewModel() {
    val rankItems: Flow<PagingData<RankDetail>> =
        Pager(PagingConfig(pageSize = 10, prefetchDistance = 1)) {
            MovieSource()
        }.flow
}

@Composable
fun RankScreen(viewModel: RankViewModel = RankViewModel()) {
    val lazyMovieItems = viewModel.rankItems.collectAsLazyPagingItems()
    Box {
        LazyColumn(state = scrollState) {
            // 2. On the page, listen for pagingitems(lazyMovieItems) { it? .let { RankListItem(it) } }// 3. Load more footer status based on paging status Settings
            lazyMovieItems.apply {
                when (loadState.append) {
                    is LoadState.Loading -> {
                        item { LoadingItem() }
                    }
                }
            }
        }
    }
}
Copy the code

Through the above steps, it is relatively simple and convenient to achieve paging

conclusion

The project address

ComposeDouban open source is not easy, if the project helps you, welcome to like,Star, favorites ~

The resources

Android Jetpack Compose Immersive/Transparent status bar Collapsing Toolbar made easy with Compose Infinite Lists with Paging 3 in Jetpack Compose