[Compose] 코드랩 따라가기 1

https://developer.android.com/courses/android-basics-compose/unit-3?hl=ko

Compose 사용 시 알아야 하는 Android 기본사항  |  목록 표시 및 Material Design 사용  |  Android Developers

---

스크롤 가능한 List 만들기

• LazyColumn을 통해서 스크롤 가능한 Column을 만든다.
• item() 메소드를 통해서 Data List를 전달한다.

@Composable
fun AffirmationList(affirmationList: List<Affirmation>, modifier: Modifier = Modifier) {
    LazyColumn(modifier = modifier) {
        items(affirmationList) { affirmation ->
					//padding과 같은 속성 추가
        }
    }
}

목록 표시 → AffirmationsList Composable 호출

@Composable
fun AffirmationsApp() {
    AffirmationList(
        affirmationList = Datasource().loadAffirmations(),
    )
}

Modifier의 역할

• Composable의 크기, 레이아웃, 동작, 모양 변경
• 접근성 라벨과 같은 정보 추가
• 사용자 입력 처리
• 클릭, 스크롤, 드래그, 확대/축소등 높은 수준의 상호작용 추가

호출하는 순서에 따라서 결과가 달라질 수 있다.

• ex) clickable을 먼저 호출 하는지, padding을 먼저 호출하는 지에 따라서 화면 효과가 바뀔 수 있다.

내장 수정자

• Compose는 Composable을 수정하기위해 Modifier함수들을 제공합니다. 다음 제시되는 수정자는 Modifier함수의 대표적인 수정자들 입니다.
• 패딩 및 크기
  • size - 기본적으로 Compose에서 제공하는 레이아웃은 하위요소의 크기에 맞춰집니다(WrapContentSize). 하지만, size 수정자를 사용하여 크기를 임의로 정할 수 있습니다.
  • modifier = Modifier.size(width = 400.dp, height = 100.dp)
  • requiredSize - 제약 조건을 무시하고 크기를 정할 때 사용합니다.이렇게 하면 상위요소의 크기가 100dp라고 하더라도 150dp가 됩니다.
  • modifier = Modifier.requiredSize(150.dp)
  • fillMax - 높이를 가득 채우려면 fillMaxHeight(), 넓이를 가득채우려면 fillMaxWidth(), 둘 다 가득채우려면 **fillMaxSize()**를 사용합니다.
  • padding - 주위에 padding을 추가합니다. 레이아웃 상/하단에서 텍스트 기준선(Text의 밑부분 선)위에 padding을 추가하려면 paddingFromBaseline를 사용합니다.

실행 안하고 View 보기

• 메서드에 @Preview 주석을 달면 Split 탭에 미리보기가 표시 된다.

@Preview
@Composable
private fun AffirmationCardPreview() {
    AffirmationCard(Affirmation(R.string.affirmation1, R.drawable.image1))

LazyColumn과 Column의 차이

• Compose는 한 번에 정보를 모두 불러온다.
• Column
  • 표시할 항목이 적은 경우에 사용한다.
  • 사전 정의되었거나 고정된 개수의 컴포저블만 보유 할 수 있다.
• LazyColumn
  • 주문형 컨텐츠를 추가할 수 있어 목록의 길이를 알 수 없을 때 유용하다.
  • 추가 코드 없이 기본적인 스크롤을 제공한다.
  • 디자인에 따라 세로(LazyVerticalColumn), 가로(LazyHorizontalColumn)이 있고 Column뿐만아니라 Grid도 존재!
• Column → ListView LazyColumn → RecyclerView 느낌인가..?

---

Material Theming

• xml 방식에서는 .xml 파일을 통해 마크업 언어를 사용했지만 Compose에서는 .kt 파일에서 코틀린 언어로 사용한다.
• 각 파일에서 색상, 테마, 폰트를 설정하고 Theme.kt 파일에서 MateraialTheme() 의 매개변수를 통해서 전체 변경 된다.

색상

• Color.kt
• val를 통해 변수를 선언하는 형식이다.

val md_theme_light_primary = Color(0xFF006C4C)

테마

• Theme.kt

private val LightColors = lightColorScheme(
   primary = md_theme_light_primary,
   onPrimary = md_theme_light_onPrimary
)

문자열

• Dimens.xml
• String.xml과 마찬가지로 사용한다.

<resources>
   <dimen name="padding_small">8dp</dimen>
   <dimen name="padding_medium">16dp</dimen>
   <dimen name="image_size">64dp</dimen>
</resources>

@Composable
modifier = Modifier.padding(dimensionResource(id = **R.dimen.padding_small**)

도형

• Shape.kt

val Shapes = Shapes(
   small = RoundedCornerShape(50.dp),
)

@Composable
modifier = modifier
	.clip(MaterialTheme.shapes.small)

폰트

• Type.kt
• 다운로드 한 폰트를 Type.kt 파일에서 초기화한다.

val AbrilFatface = FontFamily(
   Font(R.font.abril_fatface_regular)
)
val Montserrat = FontFamily(
   Font(R.font.montserrat_regular),
   Font(R.font.montserrat_bold, FontWeight.Bold) // 굵은 글꼴 명시
)

• 사용할 폰트에 맞게 연결! 하게 되면 MaterialTheme 매개변수로 자동적으로 업데이트!

val Typography = Typography(
   displayLarge = TextStyle(
       fontFamily = AbrilFatface,
       fontWeight = FontWeight.Normal,
       fontSize = 36.sp
   ),
   displayMedium = TextStyle(
       fontFamily = Montserrat,
       fontWeight = FontWeight.Bold,
       fontSize = 20.sp
   ),
   labelSmall = TextStyle(
       fontFamily = Montserrat,
       fontWeight = FontWeight.Bold,
       fontSize = 14.sp
   ),
   bodyLarge = TextStyle(
       fontFamily = Montserrat,
       fontWeight = FontWeight.Normal,
       fontSize = 14.sp
   )
)