4. UI 변경하기 - color,size, padding (Jetpack Compose UI 코틀린 앱 개발)

 

 

---

<구글이 알려주는 앱 개발 무료 강의>

[Jetpack Compose] 가이드 맵 - 전체 보기

---

 

안드로이드 Jetpack Compose에서는 UI를 조정하기 위해 다양한 방법을 제공합니다. 이번에는 UI 요소의 색상, 크기, 배치 등을 조정하는 방법에 대해 알아보겠습니다.

1. UI 요소의 색상 조정

Jetpack Compose에서는 UI 요소의 색상을 조정하기 위해 다양한 방법을 제공합니다. 대표적인 방법은 다음과 같습니다.

• MaterialTheme.colorScheme: Material Theme에서 제공하는 색상 스키마를 사용하여 UI 요소의 색상을 조정할 수 있습니다.
• 예를 들어, Surface 컴포넌트의 색상을 아래와 같이 설정 할 수있습니다.
•  MaterialTheme.colorScheme.primary
•  MaterialTheme.colorScheme.background
• Color.Red < 컬러 지정

Surface(
    modifier = Modifier.fillMaxSize(),
    color = Color.Red
) {
    Greeting("Android")
}

 

 

2. UI 요소의 크기 조정

UI 요소의 크기를 조정하기 위해서는 modifier를 사용합니다. modifier는 UI 요소의 속성을 변경하는 데 사용됩니다. 대표적인 modifier는 다음과 같습니다.

 

• fontSize : fontSize 사용하여 Text의 size 지정할 수 있습니다.
• Modifier.size: UI 요소의 크기를 조정합니다. size() 함수를 사용하여 너비와 높이를 지정할 수 있습니다.

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        fontSize = 18.sp,
        modifier = modifier.size(300.dp,400.dp)
        )
}

 

3. UI 요소의 배치 조정

UI 요소의 배치를 조정하기 위해서도 modifier를 사용합니다. 대표적인 modifier는 다음과 같습니다.

• Modifier.padding: UI 요소의 내부에 패딩을 추가합니다. padding() 함수를 사용하여 패딩의 크기를 지정할 수 있습니다.

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        fontSize = 18.sp,
        modifier = modifier.padding(24.dp)
                            .size(300.dp,400.dp)
        )
}

 

 

4. 결론

안드로이드 Jetpack Compose에서는 UI를 조정하기 위해 다양한 방법을 제공합니다. 이를 활용하여 UI를 더욱 아름답고 사용자 친화적으로 만들 수 있습니다.

 

 

 

 

---

• [Jetpack Compose] 가이드 맵으로 돌아가기