[Compose] Slot-based Layouts

Compose는 UI를 쉽게 빌드할 수 있도록 Material Design 및 Android Studio에서 Compose 프로젝트를 만들 때 포함되는 androidx.compose.material:material 종속 항목을 기반으로 한 다양한 Composable을 제공합니다.

Drawer, FloatingActionButton 및 TopAppBar와 같은 요소가 모두 제공됩니다.

 

Slot API의 개념

Compose는 Composable 위에 맞춤설정 레이어를 배치하기 위해 Slot API라는 패턴을 사용합니다.

이 접근 방식은 하위 요소의 모든 구성 매개변수를 노출하지 않고도 자체적으로 하위 요소를 구성할 수 있게 하여 구성 요소의 유연성을 향상합니다.

• 슬롯: 개발자가 원하는 대로 UI에 빈 공간을 남기고, 이를 통해 개발자는 특정 요소를 사용자 정의할 수 있습니다.

 

예를 들어, TopAppBar에서 맞춤설정할 수 있는 슬롯을 아래 그림과 같이 사용할 수 있습니다.

슬롯은 개발자가 원하는 대로 채울 수 있도록 UI에 빈 공간을 남겨둡니다.

예를 들어 다음은 개발자가 TopAppBar에서 맞춤설정할 수 있는 슬롯입니다.

 

Composable과 Slot API

Composable은 일반적으로 content라는 컴포저블 람다 (content: @Composable () -> Unit)를 사용하여 내부 요소를 정의합니다. Slot API는 특정 용도에 맞춰 여러 content 매개변수를 노출합니다.

예를 들어, TopAppBar는 title, navigationIcon, actions와 같은 슬롯을 제공합니다.

 

Scaffold를 통한 기본 레이아웃 구현

Scaffold를 사용하면 기본 Material Design 레이아웃 구조로 UI를 쉽게 구현할 수 있습니다.

Scaffold는 TopAppBar, BottomAppBar, FloatingActionButton, Drawer와 같은 일반적인 상위 구성 요소를 위한 슬롯을 제공합니다. 이를 통해 이러한 구성 요소가 적절하게 배치되고 함께 작동하는지 쉽게 확인할 수 있습니다.

@Composable
fun HomeScreen(topBar: @Composable () -> Unit) {
    Scaffold(
        topBar = myTopBar
    ) { contentPadding ->
        // 메인 콘텐츠
    }
}

@Composable
fun MyTopBar(){
	TopAppBar(
        title = { Text("홈 화면") },
        navigationIcon = { Icon(Icons.Default.Menu, contentDescription = null) },
        actions = { /* 액션 아이콘들 */ }
    ) 
}

@Preview(showBackground = true)
@Composable
fun HomeScreenPreview() {
    MyTheme {
        HomeScreen(
        	topBar = { MyTopBar() }
        )
    }
}

이와 같이 Slot API와 Scaffold를 활용하면 Android Compose에서 구조적이고 유연한 UI를 쉽게 구현할 수 있습니다.

이러한 접근 방식은 개발자에게 더 많은 자유도를 제공하여 사용자 경험을 향상하는 데 기여합니다.

 

결론

Android Compose의 Slot-based Layout은 UI 구성 요소를 유연하고 효율적으로 관리할 수 있는 방법을 제공합니다.

Slot API를 통해 개발자는 필요한 부분만을 사용자 정의할 수 있으며, Scaffold를 사용하여 일관된 레이아웃을 쉽게 구현할 수 있습니다.