Compose Column & Row

Column : composable을 세로로 배치

Row : composable을 가로로 배치

 

각 scope은 Modifier.Alignment에서 제약이 발생

ColumnScope은 composable이 세로로 배치되므로, horizontal align만 조정 가능

RowScope은 composable이 가로로 배치되므로, vertical align만 조정 가능

 

composable을 겹치게 배치하고 싶다면 Column & Row를 사용하지 않고, 바운더리를 지정할 때 Box로 바꿔주면 됨

 

 

 

 

@OptIn(ExperimentalPagerApi::class)
@Composable
fun prodHome(viewModel: ProdViewModel) {
    val prodListState by viewModel.popularMovies.collectAsState()
    Surface(color = colorResource(id = R.color.lightGray), modifier = Modifier.fillMaxSize()) {
        Column(modifier = Modifier.padding(top = 20.dp)) {
            whiteBox(rounding = 15.dp) {
                Column(
                    verticalArrangement = Arrangement.SpaceEvenly, modifier = Modifier
                        .fillMaxWidth()
                ) {
                    Text(
                        text = "인기영화",
                        fontSize = 20.sp,
                        fontWeight = FontWeight.Bold,
                        modifier = Modifier.padding(horizontal = 15.dp, vertical = 10.dp)
                    )
                    Spacer(modifier = Modifier.height(5.dp))
                    prodListState.forEachIndexed { index, item ->
                        prodItem(item = item, height = 70.dp)
                        if (index != prodListState.size - 1) {
                            Divider(color = colorResource(id = R.color.lightGray), thickness = 1.dp)
                        } else {
                            Spacer(modifier = Modifier.height(5.dp))
                        }
                    }
                }
            }

            if (prodListState.isNotEmpty()) {
                val pagerState = rememberPagerState(
                    initialPage = 0
                )

                LaunchedEffect(Unit) {
                    while (true) {
                        yield()
                        delay(20000)
                        pagerState.animateScrollToPage(
                            page = (pagerState.currentPage + 1) % (pagerState.pageCount)
                        )
                    }
                }


                var imgUrl = stringResource(R.string.img_url)
                imgUrl = imgUrl.substring(0, imgUrl.length - 1) + "/w500/"

                Box {
                    HorizontalPager(
                        count = 3,
                        state = pagerState,
                        modifier = Modifier.padding(10.dp)
                    ) { page ->

                        GlideImage(
                            imageModel = imgUrl + prodListState.get(pagerState.currentPage).posterPath,
                            contentScale = ContentScale.Crop,
                            modifier = Modifier
                                .fillMaxWidth()
                                .height(250.dp)
                                .clip(RoundedCornerShape(15.dp))
                        )
                    }

                    HorizontalPagerIndicator(
                        pagerState = pagerState,
                        modifier = Modifier.align(Alignment.TopEnd).padding(30.dp),
                        activeColor = MaterialTheme.colors.primaryVariant,
                        inactiveColor = colorResource(id = R.color.white)
                    )
                }
            }
        }
    }
}