Jetpack Compose - Adaptive App Practice.ver2

<미리 보기>

Usual Phone

Folderble Phone

Tablet PC

 

 

<소스 코드>

https://github.com/SeongHyunJeon/android-kotlin-practice/tree/4ac41bc7a1a3b69db7e3debd30322f3463272028/Restaurant

 

 

<정리>

strings.xml 리소스 파일의 문자열에 특수 문자인 '>' 혹은 '<'를 포함시키려면 '&lt;'와 '&gt;'로 대체하여 사용해야한다.

<string name="for_example">&lt;알려드립니다&gt;</string> 
//위의 문자열은 "<알려드립니다>"를 의미한다.

---

세로 구분선은 Row + Spacer 조합을 고려해보자.

< 위의 폴더블 화면에서 탐색 메뉴와 컨텐츠를 구분하는 경계선을 그린다고 가정하겠음! >

Row(
    modifier = modifier.fillMaxSize()
) {
    AnimatedVisibility(visible = navigationType == RestaurantNavigationType.NAVIGATION_RAIL) {
        //폴더블의 레일 탐색 부분.
    }
    Spacer(
        modifier = Modifier
            .width(1.dp)
            .fillMaxHeight()
            .background(Color.Black)
    ) //탐색 부분과 컨텐츠 부분의 경계를 그릴 수 있게 됐다.
    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        //탐색을 제외한 컨텐츠 부분.
    }
}

---

NavigationDrawerItem에서 icon을 설정하면 해당 아이콘들은 원본의 색을 잃어버리고 테마의 색이 지정되는데, 이는 colors프로퍼티를 사용하면 복구가 가능하다.

각 구의 심볼이 갑자기 전설의 포켓몬으로 변했다.

NavigationDrawerItem(
                label = { Text(
                        text = it.text,
                        style = MaterialTheme.typography.headlineMedium) 
                        },
                icon = { Icon(
                        painter = it.character,
                        contentDescription = "",
                        modifier = Modifier.size(dimensionResource(R.dimen.restaurant_navigation_permanent_icon_size))) 
                       },
                colors = NavigationDrawerItemDefaults.colors( //해당 프로퍼티를 통해 원본의 색을 되찾을 수 있다.
                    selectedIconColor = Color.Unspecified,
                    unselectedIconColor = Color.Unspecified
                ),
                selected = currentSelectedDistrictType == it.districtType,
                onClick = { onClickNavigationTab(it.districtType) },
                modifier = Modifier.padding(bottom = dimensionResource(R.dimen.restaurant_navigation_permanent_item_padding_bottom))
)

---

처음부터 다양한 화면의 레이아웃을 계획하고 구성하는 것은 오랜 세월의 경험이 있어야 순조로울 것 같다.

 

가장 먼저 일반 스마트 폰 레이아웃을 구성하고 공통된 컴포저블을 추상화 시킨 후, 폴더블과 테블릿PC의 레이아웃을 구성하는 게 오히려 덜 복잡한 것 같다.

 

이 작업을 머지않아 AI가 대체한다는 게 무서우면서도 신기하다..