Jetpack Compose : TabLayout + ViewPager
3172 ワード
Implement Library
implementation "com.google.accompanist:accompanist-pager:0.12.0"
Tab Layout + View Pager
@OptIn(ExperimentalPagerApi::class)
@Composable
fun Procedures(slug: String){
val tabData = listOf(
Procedure.treatment.value,
Procedure.diagnostic.value
)
val pagerState = rememberPagerState(
pageCount = tabData.size,
initialOffscreenLimit = 2,
infiniteLoop = true,
initialPage = 0,
)
val tabIndex = pagerState.currentPage
val coroutineScope = rememberCoroutineScope()
// TAB
TabRow(selectedTabIndex = tabIndex,
modifier = Modifier.padding(top = 20.dp)) {
tabData.forEachIndexed { index, text ->
Tab(selected = tabIndex == index, onClick = {
coroutineScope.launch {
pagerState.animateScrollToPage(index)
}
}, text = {
Text(text = text)
})
}
}
// PAGER
HorizontalPager(
state = pagerState
) { index ->
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
if (tabData[index] == Procedure.treatment.value) {
Services(Procedure.treatment, slug)
} else {
Services(Procedure.diagnostic, slug)
}
}
}
}
@Composable
fun Services(procedure: Procedure, slug: String) {
val viewModel: ProcedureVM = viewModel()
val services = viewModel.services.observeAsState().value
val loadingState = viewModel.loading.observeAsState().value
LaunchedEffect("GET_HOSPITALS_SERVICES") {
viewModel.fetchHospitalService(procedure, slug, 20)
}
if (loadingState == true) {
LoadingBar()
} else {
services?.items?.let { services ->
Column(Modifier.fillMaxWidth()) {
services.forEach { service ->
Row(horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxWidth().padding(vertical = 5.dp)
) {
Text(text = service.name!!, modifier = Modifier.width(200.dp), maxLines = 2)
Text(text = price(service), color = MaterialTheme.colors.primaryVariant)
}
}
}
}
}
}
SpaceBetween
ちょっと待ってチップ
Row()
〜horizontalArrangement
を適用するために、親の幅値はfillMaxWidth()
であるべきである.リファレンス
https://levelup.gitconnected.com/implement-tablayout-with-viewpager-in-android-jetpack-compose-d509fc6e2d8e
Reference
この問題について(Jetpack Compose : TabLayout + ViewPager), 我々は、より多くの情報をここで見つけました https://velog.io/@aaaram__/Jetpack-Compose-TabLayout-ViewPagerテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol