개발일기 #6 메뉴판 구성을 위해서 TabLayout 만들어 보기

TabRow  

앱을 구성하는 부분 중에서 메뉴판 같은 것을 구현하게 되는 경우가 발생합니다. 다른 방법도 있기는 하겠지만, 카테고리별로 TabRow을 구현해서 만들면 같은 종류의 상품을 배열하거나 할 때 도움이 될 것 같습니다.  그래서 오늘은 그걸 만들어 보려고 합니다. 

 

gradle (Module) 파일에 아래 2줄을 추가해 주었습니다.

// tab layout 구현
implementation "com.google.accompanist:accompanist-pager:0.20.1"
implementation "com.google.accompanist:accompanist-pager-indicators:0.20.1"

이제 코드 구현을 해 보겠습니다. 

 

val pagerState = rememberPagerState(0)

먼저 사용할 탭의 상태를 기억할 변수를 선언 합니다. 괄호 안에 숫자는 시작 시 어디에 위치하게 할 건가를 정하게 됩니다. 인덱스는 0부터 시작됩니다.

 

구성된 화면은 다음 그림과 같이 될 예정입니다.

구성된 화면

그래서 화면을 구성할 때 상단에 있는 Tab을 나타내는 부분과 그 아래 내용을 보여줄 부분으로 나누어서 설정을 하게 됩니다. (*맨 아래는 BottomNavigation으로 이번 글과는 무관한 구현이라 설명을 생략합니다.)

 

Column(
    modifier = Modifier.background(grayWhite)
) {
    Tabs(pagerState = pagerState)
    TabsContent(pagerState = pagerState)
}

위에 Tabs는 화면 상단에 표시할 탭을 나타내며 아래 TabsContent는 아래 화면을 구성할 내용을 채워 넣을 공간입니다.

 

@ExperimentalPagerApi
@Composable
fun Tabs(pagerState: PagerState) {
    val list = listOf(
        "Order" to Icons.Outlined.GifBox,
        "Shopping" to Icons.Outlined.ShoppingCart,
        "Payments" to Icons.Outlined.Payments
    )
    val scope = rememberCoroutineScope()
    TabRow(

        selectedTabIndex = pagerState.currentPage,
        backgroundColor = softBlue,
        contentColor = Color.White,
        indicator = { tabPositions ->
            TabRowDefaults.Indicator(
                Modifier.pagerTabIndicatorOffset(pagerState, tabPositions),
                height = 2.dp,
                color = Color.White
            )
        }
    ) {
        list.forEachIndexed { index, _ ->
            Tab(
                icon = {
                    Icon(imageVector = list[index].second, contentDescription = null)
                },
                text = {
                    Text(
                        list[index].first,
                        color = if (pagerState.currentPage == index) grayWhite else Color.LightGray
                    )
                },
                selected = pagerState.currentPage == index,
                onClick = {
                    scope.launch {
                        pagerState.animateScrollToPage(index)
                    }
                }
            )
        }
    }
}

먼저 배열에 표시할 Tab의 제목으로 사용할 부분을 만들고, TabRow을 이용해서 그 항목들을 나열하는 구현을 하게 됩니다. 

 

@ExperimentalPagerApi
@Composable
fun TabsContent(pagerState: PagerState) {
    HorizontalPager(modifier = Modifier.fillMaxSize(), state = pagerState, count = 5) {
            page ->
        when (page) {
            0 -> TabContentScreen(data = "Order")
            1 -> TabContentScreen(data = "Shipping")
            2 -> TabContentScreen(data = "Payments")
        }
    }
}

다음은 그 내용들을 표시할 화면을 만들고 HorizontalPager을 이용해서 어느 탭을 선택했는지 전달받고 그 값에 따라서 하단에 각각의 화면을 구성하는 모양을 만들면 됩니다. 

 

이 적용을 통해서 구현을 잘해 보도록 하겠습니다.

 

이 구현은 다음의 링크에서 참조했음을 밝혀 둡니다.

https://www.geeksforgeeks.org/tab-layout-in-android-using-jetpack-compose/

Tab Layout in Android using Jetpack Compose - GeeksforGeeks