두서없이 적는 TIL. 필기 저장 목적이다.
코너를 둥글게 만드는 것은 Card로도 가능하고 Surface로도 가능한 것 같다.
컴포즈 수정자가 궁금하면 공식 문서를 참고해봐도 좋겠다.
https://developer.android.com/develop/ui/compose/modifiers?hl=ko
TextField
EditText에 대응되는 것은 TextField다.
참고로 포커스가 되고 자판도 올라오나, onValueChange를 설정하지 않으면 입력은 되지 않는다.
heightIn 수정자로 최소, 최대 높이를 설정할 수 있다.
수정자는 순서도 중요한데, 너비랑 높이는 서로 영향이 없어서 순서가 상관 없다.
leadingIcon 파라미터를 넣으면 입력창 앞에 아이콘 띄울 수 있다.
leadingIcon = {
Icon(
imageVector = Icons.Default.Search,
contentDescription = null
)
}hint는 placeholder에 Text 컴포저블 람다식을 넣어주면 된다.
placeholder = {
Text(stringResource(R.string.placeholder_search))
}참고로 padding은 여러 번 주면 주는 대로 추가된다.
수정자에 .clip(CircleShape) 을 주면 둥그런 테두리를 간단하게 줄 수 있다.
원형 이미지도 쉽게 가능.
이 경우 이미지의 contentScale 파라미터를 ContentScale.Crop으로 줘야 자연스럽다.
Text의 경우 paddingFromBaseline 수정자로 말 그대로 바닥선에서 위아래 공간을 설정할 수 있다. 이거로 타이틀의 위아래 공간을 조정하기 좋음.
Text의 파라미터 style = MaterialTheme.typography.bodyMedium으로 폰트를 설정할 수 있다.
(style이니까 단순히 폰트뿐만 아니라 크기나 색 등도 들어가는걸까...?)
Surface의 파라미터에 shape = MaterialTheme.shapes.medium 주면 모서리 둥글어짐.
medium 말고 extraSmall에서 extraLarge까지 줄 수 있는데, shape이 그냥 모서리 깎는 것 같다.
(직접 dp를 지정해 깍을 수도 있을 것 같은데 지금은 모르겠다)
Row에서 width 수정자를 안주면 기본적으로 wrapContent 인 것 같다.
Row에서 horizontalArrangement 파라미터로 아이템의 좌우 공간을 줄 수 있는데, Arrangement 하위에 EqualWeight, SpaceBetween, SpaceAround, SpaceEvenly, End (LTR), Center, Start (LTR) 이렇게 줄 수 있다. (Column도 Top Center Bottom 으로 쓰고 똑같음)
고정 여백을 주고 싶으면 Arrangement.spacedBy(8.dp) 를 주면 된다.
그리고 Row 자체에 좌우 패딩을 주고 싶으면 수정자로 줘버리면 내용물이 잘리니까, Row의 파라미터로 contentPadding = PaddingValues(horizontal = 16.dp) 하면 된다.
가로 그리드는 LazyHorizontalGrid 컴포저블이다.
기본적으로 rows 파라미터가 필수인데 rows = GridCells.Fixed(2) 로 주면 된다.
마찬가지로 horizontal, vertical 을 spacedBy로 줄 수 있고, contentPadding도 된다.
(근데 그리드 높이에 맞춰서 아이템 크기가 결정되는 것 같은데, 아이템의 높이값은 전혀 무시가 되는 것 같다. 아이템 높이를 주는 게 무슨 의미가 있지...?)
- 홈 섹션 - 슬롯 API
그냥 타이틀이랑 내용 넣을 수 있게 해두면 그게 '슬롯 기반 레이아웃'인 것 같다.
컴포저블을 람다식으로 받게끔 해서 넣는 쪽에서 만들어 넣을 수 있게 하면 그게 슬롯인 듯?
타이틀도 마찬가지...?
Spacer를 넣으면 공간을 만들 수 있다. Spacer(modifier = Modifier.height(16.dp))
여백 크기는 padding이 아니라 height로 줌. 패딩으로 하면 더블로 되니까.
Row랑 Column은 기본적으로 스크롤이 되지 않는다. LazyColumn으로 만들 때 자동으로 추가되는 것.
Column에 스크롤 수동으로 추가하려면 수정자에 .verticalScroll(rememberScrollState()) 하면 된다.
(rememberScrollState 말고 뭐가 들어갈 수 있는지는 아직 모르겠다.)
- 하단 탐색 - Material
NavigationBar 안에 NavigationBarItem 을 만들면 됨. NavigationBarItem의 파라미터로 줄 만한 건 selected, onClick, icon, label 임.
icon이랑 label 둘 다 람다식으로 컴포저블을 생성해줘야 함.
- MySoothe 앱 - Scaffold
Scaffold는 Material Design을 구현하는 앱을 위한 구성 가능한 최상위 수준 컴포저블을 제공. 한다고 한다.
예제에서는 최상위 수준 컴포저블이므로
- MySootheTheme Material 테마 적용
- Scaffold 추가
- 하단 막대가 SootheBottomNavigation 컴포저블이 되도록 설정
- 콘텐츠가 HomeScreen 컴포저블이 되도록 설정
을 해줘야 한다고 함.
MySootheAppPortrait 가 전체적으로 뭔가 감싸는 역할인 것 같긴 한데, 정확히 왜 해줘야 하는지는 모르겠다.
테마랑 스캐폴드로 감싸주려고 하는건가.
Scaffold가 뭔지 좀 더 알아봐야 할 듯.
- 탐색 레일 - Material
가로 모드 고려. 바텀 내비 역할을 왼쪽의 레일로 전환.
NavigationRail 이다.
NavigationBar랑 다른 점은, 레일을 깔고 Column을 깔고 그 아래에 NavigationRail 아이템을 집어넣어야 함.
컬럼 아래에 들어가니까 정렬도 자동으로 안되고 직접 해줘야 함.
왤케 불편?
(예제에서 여기에서는 왜 함수의 파라미터로 받은 modifier를 레일에도 쓰고 컬럼에도 쓰는지 의문이다. 지금까지는 함수에서의 최상단 컴포저블에만 사용했는데.)
세로에서는 Scaffold를 사용했지만 가로에서는 Row를 사용하고 레일과 콘텐츠를 나란히 배치.
Row를 Surface로 감싸 배경색도 줘야 한다.
- MySoothe 앱 - 창 크기
어느 상황에 세로 모드 혹은 가로 모드로 표시할지 설정해주어야 한다.
MySootheApp 컴포저블(진짜 최상단) 함수에서 파라미터로 WindowSizeClass를 받아서 얘의 widthSizeClass 가 WindowWidthSizeClass.Compact 이면 세로 모드를, WindowWidthSizeClass.Expanded 이면 가로 모드를 생성하도록 해준다.
(예제에서는 Medium은 고려하지 않았다.)
메인액티비티의 onCreate의 setContent에서 최종적으로 MySootheApp을 생성해줄 때 파라미터(WindowSizeClass)로 calculateWindowSizeClass(this) 를 넣어주면 된다.
(this는 Activity)
(아직 실험 단계이므로 경고에서 뜨는 안내대로 @OptIn(ExperimentalMaterial3WindowSizeClassApi::class) 을 onCreate에 달아주면 된다.)
