Android Weekly #-586 "다양한 화면 지원 : Material 3 Adaptive"

9월 1주차에는 이번주 Kotlin Weekly에도 작성했던 dagger 버전패치와 함께 라이브러리에서 개발중인 Material 3 Adaptive에 대한 글이 올라왔습니다. 

https://evowizz.dev/blog/first-look-m3-compose-adaptive

Material 3 Adaptive: Making Responsive Layouts with Jetpack Compose easily

 

 

소개

 

현재 Google의 Material 팀이 Jetpack Compose 라이브러리인 "Material 3 Adaptive"를 개발 중이고, 본문에 나오는 말은 "정식출시를 하지 않았지만, 일찍 보게하는것을 couldn't resist 했다" 고 합니다.


내용

현재 다양한 화면크기를 지원하기 위해서는 Material 3 Window Size Class가 권장사항인 상태입니다.
https://developer.android.com/reference/kotlin/androidx/compose/material3/windowsizeclass/package-summary

androidx.compose.material3.windowsizeclass  |  Android Developers

 

• 1. 새로운 Material 3 Adaptive 라이브러리는 Navigation Suite Scaffold를 사용하여 화면 구성에 따라 Navigation Bar, Navigation Rail 또는 Navigation Drawer를 선택적으로 표시할 수 있게 해줍니다.(들어가서 그림을 보는게 좋습니다!)
• 2. WindowAdaptiveInfo 객체는 화면의 크기 및 posture를 포함하여 다양한 디바이스 구성을 지원합니다.
• 3. Material 3 Adaptive 라이브러리에는 또한 ThreePaneScaffold 및 ListDetailPaneScaffold와 같은 다른 중요한 Composables도 포함되어 있습니다. 이들은 최대 세 개의 패널을 표시할 수 있게 해줍니다.
  
  

@Composable
fun MyAdaptiveApp() {
    val selected = remember { mutableIntStateOf(0) }
 
    NavigationSuiteScaffold(
        navigationSuite = {
            NavigationSuite {
                navigationItems.forEachIndexed { index, (title, icon) ->
                    this.item(
                        icon = { Icon(imageVector = icon, contentDescription = null) },
                        label = { Text(text = title) },
                        selected = selected.intValue == index,
                        onClick = { selected.intValue = index }
                    )
                }
            }
        }
    ) {
        Crossfade(targetState = selected.intValue, label = "CurrentPage") {
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                Text(text = navigationItems[it].first)
            }
        }
    }
}

NavigationSuiteScaffold를 사용해서 여러 네비게이션을 만들고

 

@Composable
fun MyAdaptiveApp(
    adaptiveInfo: WindowAdaptiveInfo = calculateWindowAdaptiveInfo(),
    layoutType: NavigationSuiteType = calculateFromAdaptiveInfo(adaptiveInfo)
) {
    NavigationSuiteScaffold(
        navigationSuite = {
            NavigationSuite(
                layoutType = layoutType
            ) {
                // ...
            }
        }
    ) {
        // ...
    }
}
 
private fun calculateFromAdaptiveInfo(adaptiveInfo: WindowAdaptiveInfo): NavigationSuiteType {
    return with(adaptiveInfo) {
        if (posture.isTabletop || windowSizeClass.heightSizeClass == Compact) {
            NavigationSuiteType.NavigationBar
        } else if (windowSizeClass.widthSizeClass == Expanded) {
            NavigationSuiteType.NavigationDrawer
        } else {
            NavigationSuiteType.NavigationBar
        }
    }
}

 

WindowAdaptiveInfo를 통해 현재 화면의 크기와 상태를 감지하고, 이를 바탕으로 calculateFromAdaptiveInfo 함수를 사용하여 최적의 네비게이션 유형을 결정.

 

 

 

정리

 

지금까지는 화면 크기에 따라 반응형 디자인을 만들었지만, 곧 있으면(예시코드가 있는거보니 어느정도 다만들어졌고, 곧 베타가 나오거나 할 것 같음 뇌피셜) 기기의 환경에 적응하는 UI설계가 가능할 예정입니다. 폴더블 스마트폰 같은 경우에 더욱 다양한 설계가 조금 더 쉽게 가능할 것 같습니다. 초보인 저는 android:screenOrientation 를 잡아버려서 세로모드로 고정시킨 앱들만 만들었는데, 라이브러리가 나오면 혼자서도 시도해볼만한 편리성이 아닐까 싶습니다.

 

 

 

 

 

 

https://androidweekly.net/

Android Weekly - Free weekly Android & Kotlin development newsletter