[Compose 코드랩] 단원 1: 첫 번째 Andriod 앱

• `onCreate()` : 앱의 진입점. 다른 함수를 호출하여 사용자 인터페이스를 빌드함.    ex) Kotlin의 main() 함수
• `setContent()` : 레이아웃을 정의하는데 사용
• `@Composable` : 이 주석으로 표시된 모든 함수는 `setContent()` 함수 또는 다른 구성 가능한 함수에서 호출할 수 있다. 아무것도 반환하지 않는다.
• 주석은 Jetpack Compose에서 이 함수가 UI를 생성하는 데 사용된다고 Kotlin 컴파일러에게 알리는 역할을 한다.

 

1. 구성 가능한 함수

몇 가지 입력을 받아 화면에 표시되는 내용을 생성하는 함수

 

구성 요소

developer.android.com/codelabs

ex)

• `Greeting()` 함수 : 위에 `@Composable` 주석이 있으므로 구성 가능한 함수이다.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!"
}

 

 

• `DefaultPreview()` : 전체 앱을 빌드하지 않고도 앱이 어떻게 표시되는 지 확인할 수 있는 기능
• `@Preview` : 미리보기 함수로 만들어 주는 주석. `showBackground` 매개변수가 true로 설정되면 앱 미리보기에 배경이 추가된다.

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    GreetingCardTheme {
        Greeting("Android")
    }
}

 

 

2. 배경 색상 변경

배경 색상을 변경하려면 텍스트를 `Surface`로 둘러 싸야한다.

• `Surface` : 배경 색상이나 테두리와 같은 모양을 개발자가 변경할 수 있는 UI 섹션을 나타내는 컨테이너

1. Surface로 텍스트를 둘러 싸기 위해 텍스트 줄을 드래그 한 후, Alt + Enter 를 누른다.
2. Surround with widget을 선택한다.
3. Surround with Container를 선택한다.

4. 기본적으로 Box 컨테이너가 제공되지만, Surface를 사용하기 위해 Surface를 입력한다.

5. Color를 Green으로 지정해주면 배경색이 바뀐다.

 

 

3. 패딩 추가

• `Modifier` : 컴포저블을 강화하거나 장식하는 데 사용
• `Modifier.padding()` 을 사용해 패딩을 지정해줌