Jetpack Compose: 스와이프 기능이 있는 탭

탭으로 인터페이스를 만드는 것은 Android 앱 세계에서 매우 일반적입니다.

예전에는 탭 인터페이스를 만들려면 어댑터와 때로는 탭 데이터를 보유하는 조각이 필요했습니다.

하지만 Jetpack Compose를 사용하면 이러한 복잡성이 과거의 일이 됩니다. 탭으로 UI를 빠르고 쉽게 만들 수 있습니다.

물론 과거에는 당연하게 여겼지만 (아직) 기본적으로 지원되지 않는 것들이 있습니다. 탭을 변경하기 위해 스 와이프하는 기능이 그 중 하나입니다. 그러나 두려워하지 마십시오. 라이브러리를 사용하여 이러한 종류의 기능을 얻는 방법이 있습니다.

탭 UI 빌드

탭 버튼을 선택했을 때 탭 스트립을 만들고 콘텐츠를 전환하는 것은 매우 쉽습니다. 외부 종속성이 필요하지 않으며 모든 것이 Compose에 내장되어 있습니다.

@Composable
fun tabs() {
    var tabIndex by remember { mutableStateOf(0) } // 1.
    val tabTitles = listOf("Hello", "There", "World")
    Column { // 2.
        TabRow(selectedTabIndex = tabIndex) { // 3.
            tabTitles.forEachIndexed { index, title ->
                Tab(selected = tabIndex == index, // 4.
                    onClick = { tabIndex = index },
                    text = { Text(text = title) }) // 5.
            }
        }
        when (tabIndex) { // 6.
            0 -> Text("Hello content")
            1 -> Text("There content")
            2 -> Text("World content")
        }
    }
}

재구성이 수행될 때 어떤 탭이 선택되었는지 기억해야 합니다. 그렇지 않으면 선택한 색인이 매번 첫 번째 위치로 전환됩니다.

Column를 사용하여 탭 스트립 행과 탭 콘텐츠를 세로로 쌓습니다.

이TabRow 컴포저블에는 탭 버튼이 포함된 탭 표시줄이 있습니다.

각 탭 버튼은 Tab 컴포저블로 표시됩니다.

여기에서 컴포저블Text을 사용자 정의하여 탭 버튼의 텍스트(예: 글꼴, 색상 등)를 사용자 정의하십시오.

선택한 탭에 따라 내용이 전환됩니다.

스와이프가 있는 탭

탭이 있는 인터페이스를 볼 때 첫 번째 반응은 왼쪽/오른쪽으로 스와이프하여 나머지 탭을 탐색하는 것입니다. 실제로 탭 제목을 클릭하여 탭을 전환할 수 있다는 사실을 거의 잊었습니다.

이 동작은 탭으로 기본 UI를 빌드하는 이전 예제에는 포함되지 않습니다. 일반적으로 Compose에는 포함되지 않습니다.

고맙게도 Compose에서 필수이지만 누락된 다양한 기능을 제공하는 라이브러리Accompanist가 있습니다. Pager 라이브러리는 이 경우에 필요한 것입니다. 현재 탭 내용을 스와이프하고 탭을 변경할 수 있는 기능을 제공합니다.

install this library 에 다음을 build.gradle ( check for the latest version )에 추가합니다.

implementation "com.google.accompanist:accompanist-pager:0.21.2-beta"
implementation "com.google.accompanist:accompanist-pager-indicators:0.21.2-beta"

@ExperimentalPagerApi // 1.
@Preview
@Composable
fun tabsWithSwiping() {
    var tabIndex by remember { mutableStateOf(0) }
    val tabTitles = listOf("Hello", "There", "World")
    val pagerState = rememberPagerState() // 2.
    Column {
        TabRow(selectedTabIndex = tabIndex,
            indicator = { tabPositions -> // 3.
                TabRowDefaults.Indicator(
                    Modifier.pagerTabIndicatorOffset(
                        pagerState,
                        tabPositions
                    )
                )
            }) {
            tabTitles.forEachIndexed { index, title ->
                Tab(selected = tabIndex == index,
                    onClick = { tabIndex = index },
                    text = { Text(text = title) })
            }
        }
        HorizontalPager( // 4.
            count = tabTitles.size,
            state = pagerState,
        ) { tabIndex ->
            Text(
                tabIndex.toString(),
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.White)
            )
        }
    }
}

향후 변경될 수 있는 실험적 API입니다. 이를 확인하려면 Pager 라이브러리를 사용하는 구성 가능한 각 메서드에 주석을 달아야 합니다.

탭 인덱스와 유사하게 재구성이 수행될 때 호출기 상태를 유지해야 합니다.

호출기를 탭 행 표시기와 동기화하는 데 필요합니다. 이 기능이 없으면 선택한 탭을 표시하는 표시기가 탭을 스와이프할 때 동기화되지 않습니다.

콘텐츠를 스와이프할 수 있는 호출기입니다. 탭 인덱스가 주어지면 각 탭에 적절한 콘텐츠를 채울 수 있습니다.

이제 탭과 탭 사이를 스와이프하는 기능을 사용할 수 있습니다.

즐거운 코딩하세요!