[2주차/심화과제] Custom Tab Layout

[jihyunniiii]

🔴 심화 과제 - Custom Tab Layout

✅ Custom할 Tab Layout에 대해 분석한 내용을 적어주세요.

[boiledEgg-s]

컴포즈에서 TabLayout은 TabRow라는 컴포저블 함수를 사용하여 구현해야 합니다.

TabRow는 tabs에 받은 목록을 사용하여 Row 형태로 탭 레이아웃을 구성하고, indicator와 divider를 통해 디자인할 수 있도록 해줍니다.

제가 분석한 심화과제 TabLayout 요소들은 다음과 같습니다:

1. Tab 아이템 목록
2. 선택된 아이템 인덱스
3. 배경 색상
4. 글자 색상
5. 인디케이터
6. 탭 아이템의 뷰
7. 수정자

다음은 분석한 요소들을 토대로 구성한 제 커스텀 TabRow입니다:

@Composable
fun WavveTabRow(
    selectedTabIndex: Int,
    modifier: Modifier = Modifier,
    containerColor: Color = WavveBackground,
    tabTitles: List<Int> = emptyList(),
    indicator: @Composable (List<TabPosition>) -> Unit = {},
    content: @Composable (Int, Int) -> Unit = { _, _ -> }
) { ... }

[ThirFir]

일반적으로 대다수의 탭은 Text로만 이루어지기 때문에, tabs를 Composable 인자로 받는 기본 TabRow와 달리, text와 textStyle을 인자로 받는 것으로 구성하였습니다.
하단 Indicator는 기본적으로 HorizontalDivider가 그대로 활용될 가능성이 높으므로 두께와 색상 정도만 변경이 가능하도록 설정하였습니다. 특히, 각 탭의 텍스트 길이에 Indicator 길이를 대응시킨 Tab Layout을 구현하고 싶었던 것도 Indicator를 HorizontalDivider로 고정시킨 이유에 포함됩니다.
또한 pagerState를 인자로 받는 것으로 하여 Pager Layout과의 연동이 용이하게 이루어지는 것도 생각해 볼 수 있었습니다.

---

1. modifier : 수정자 - 선택
2. tabs : 탭 타이틀 - 필수
3. textStyle : 탭 타이틀 Style - 선택
4. pagerState : 동적으로 scroll을 해주기 위해 필요 - 선택
5. containerColor : 탭 배경 색 - 선택
6. indicatorColor : 하단 Indicator 색 - 선택
7. indicatorThickness : 하단 Indicator 두께 - 선택

@Composable
fun DefaultTabRow(
    modifier: Modifier = Modifier,
    tabs: List<String>,
    textStyle: TextStyle = WavveTheme.typography.bodyMedium,
    pagerState: PagerState = rememberPagerState { tabs.size },
    containerColor: Color = WavveTheme.colorScheme.background,
    indicatorColor: Color = WavveTheme.colorScheme.accent,
    indicatorThickness: Dp = 5.dp
)