preface

Jetpack Compose is a new Android toolkit for building native interfaces. It simplifies and speeds up interface development on Android. Use less code, powerful tools, and an intuitive Kotlin API to make your application lively and exciting quickly. This is the official description of it. Google launched Jetpack Compose in 2019, and the stable version will be released in July 2021, so it’s worth studying up front.

Jectpack Compose is a new UI development framework, which uses declarative programming philosophy and is completely based on Kotlin language. It completely disuses the previous Xml UI rendering logic, so the interface layout/render/refresh mechanism is completely new.

Functions that need to be implemented

The following figure

Introduction to the Pager component

The Pager component is a library for developing a page-switching layout for Jetpack Compose, similar to the Viewpager in AndroidView. It is important to note that the Pager component is still in the experimental stage, so the API in the library may change. And all apis are annotated with @experimentalPagerAPI

The component library currently provides:

1) HorizontalPager: switch components of a page horizontally

// Display 10 items val pagerState = rememberPagerState(pageCount = 10) HorizontalPager(state = pagerState) { page -> //  Our page content Text( text = "Page: $page", modifier = Modifier.fillMaxWidth() ) }Copy the code

PagerState to get the currentPage: pagerstate.currentpage, scroll to the specified page: PagerState. ScrollToPage (index), or pagerState animateScrollToPage (index), but these two methods need to be used in CoroutineScope, as follows:

coroutineScope.launch { pagerState.animateScrollToPage(index)}
Copy the code

2) VerticalPager: Switch the components of the page vertically, basically using the same way as the HorizontalPager

3) Like ViewPager, the Pager component can also specify the number of pages on either side of the current page by setting the initOffscreenLimit field

val pagerState = rememberPagerState( pageCount = 10, initialOffscreenLimit = 2,) HorizontalPager(state = pagerState) { page -> // ... }Copy the code

And, when the user slides between screens, any more than that number of screens will be dynamically removed.

The Demo implementation

TabRow + Pager + Indicators + LazyColumn, corresponding to TabLayout of AndroidView + ViewPager + RecyclerView

Environment preparation: Build. Gradle in app introduces the following dependencies:

Implementation "com. Google. Accompanist: accompanist - pager: 0.13.0" implementation "Com. Google. Accompanist: accompanist - pager - indicators: 0.13.0"Copy the code

Node: Based on Jetpack Compose 1.0.0-beta09′

@ExperimentalPagerApi @Composable private fun TabContentScreen(recItems: List<PostData>, followItems: List<PostData>, hotItems: List<PostData>) {val pages = listOf(" PostData ", "PostData ", Column {val coroutineScope = rememberCoroutineScope() val pagerState = rememberPagerState(pageCount = pages.size, initialOffscreenLimit = 2, ) TabRow( selectedTabIndex = pagerState.currentPage, indicator = { tabPositions -> TabRowDefaults.Indicator( Modifier.pagerTabIndicatorOffset(pagerState, tabPositions), color = Color.White ) }, backgroundColor = Color.White, modifier = Modifier.width(210.dp), divider = { TabRowDefaults.Divider(color = Color.White) } ) { pages.forEachIndexed { index, title -> Tab( selected = pagerState.currentPage == index, onClick = { coroutineScope.launch { pagerState.animateScrollToPage(index) } }, modifier = Modifier.height(50.dp).background(Color.White), selectedContentColor = Color.Black, unselectedContentColor = Color.Gray ) { Text(title, maxLines = 1, fontSize = if (pagerState.currentPage == index) 20.sp else 16.sp, fontWeight = if (pagerState.currentPage == index) FontWeight.Bold else FontWeight.Normal ) } } } HorizontalPager( state = pagerState, modifier = Modifier .weight(1f) .fillMaxWidth() ) { LazyColumn(contentPadding = PaddingValues(start = 16.dp, end = 16.dp)) { val curItems = if (pagerState.currentPage == 0) { recItems } else if (pagerState.currentPage == 1) { followItems } else { hotItems } items(items = curItems) { PostCardView(itemData = it) } } } } }Copy the code