Android Compose 튜토리얼 1

Jetpack Compose는 네이티브 UI를 빌드하기 위한 Android의 최신 도구 키트입니다. Jetpack Compose는 Android에서 UI 개발을 간소화, 가속화 합니다.

Lesson 1: Composeable functions

Jetpack Compose는 구성 가능한 함수로 이뤄져 있습니다. 이러한 함수들은 UI 프로세스의 초기화, 상위 요소에 붙이는 것에 초점을 맞추기 보다는 앱의 모양을 설명하고 데이터 종속성을 제공하는 방식으로 앱 UI를 제공할 수 있습니다. Compose 함수를 만들기 위해 단순히 @Composable 어노테이션만 추가하면 됩니다.

Add a text element

시작하기 앞서 안드로이드 스튜디오를 최신 버전으로 다운로드 해주시고, Empty Compose Activity 템플릿으로 생성해주세요.

"Hello world" 텍스트뷰를 onCreate 생명주기에 추가할 것입니다. Text() 함수로 정의할 수 있습니다. setContent는 Composable 함수를 호출하는 액티비티의 레이아웃을 정의합니다. Composable 함수는 오직 Composable 함수에서만 호출할 수 있습니다. Jetpack Compose는 코틀린 컴파일러 플러그인을 사용하여 Composable 함수가 앱의 UI 구성요소로 바뀌도록 합니다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello world!")
        }
    }
}

Define a composable function

@Composable 어노테이션으로 compoable function을 만들 수 있다. 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MessageCard("Android")
        }
    }
}

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

function이지만 다른 컨벤션과 다르게 대문자로 시작하는 모습을 볼 수 있습니다.

Preview your function in Android Studio

Android Studio에서는 앱 설치를 대신하여 composable functions을 IDE 내부에서 미리볼 수 있는 기능을 제공해줍니다. @Preview 어노테이션을 @Composable 이전에 추가하면 됩니다.

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

@Preview
@Composable
fun PreviewMessageCard() {
    MessageCard("Android")
}

이렇게 IDE 우측에 PreView 가 뜬 것을 확인할 수 있습니다. 

함수가 수정되어 미리보기를 업데이트 하려면 미리보기 상단의 녹색의 새로고침 버튼을 누르면 됩니다.

Lesson 2: Layouts

UI 구성요소는 계층적입니다. Compose에서 다른 composable 함수에서 composable함수를 호출하여 UI 계층을 구축합니다.

Add multiple texts

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MessageCard(Message("Android", "Jetpack Compose"))
        }
    }
}

data class Message(val author: String, val body: String)

@Composable
fun MessageCard(msg: Message) {
    Text(text = msg.author)
    Text(text = msg.body)
}

@Preview
@Composable
fun PreviewMessageCard() {
    MessageCard(
        msg = Message("Colleague", "Hey, take a look at Jetpack Compose, it's great!")
    )
}

위 코드는 두 텍스트를 만드나 정렬 방법을 제공하지 않았기 때문에 텍스트가 겹쳐져 읽을 수가 없습니다.

Using a Column

Column 기능을 사용하면 요소를 세로로 정렬할 수 있습니다. Row를 사용하여 항목을 가로로 정렬하고 Box를 사용하여 요소를 쌓을 수 있습니다.

@Composable
fun MessageCard(msg: Message) {
    Column {
        Text(text = msg.author)
        Text(text = msg.body)
    }
}

Add an image element

@Composable
fun MessageCard(msg: Message) {
    Row {
        Image(
            painter = painterResource(R.drawable.profile_picture),
            contentDescription = "Contact profile picture",
        )
    
       Column {
            Text(text = msg.author)
            Text(text = msg.body)
        }
  
    }
  
}

Resource Manager를 통해 이미지를 가져올 수 있습니다. Row를 사용하여 구조를 설계하여 내부에 이미지를 가져올 수 있도록 할 수 있습니다.

Configure your layout

Composable 을 꾸미고 구성하기 위해서는 modifiers를 사용합니다. composable의 사이즈, 레이아웃, 모양, 클릭가능 여부등의 high-level 인터랙션등을 수정할 수 있습니다.

@Composable
fun MessageCard(msg: Message) {
    // Add padding around our message
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(R.drawable.profile_picture),
            contentDescription = "Contact profile picture",
            modifier = Modifier
                // Set image size to 40 dp
                .size(40.dp)
                // Clip image to be shaped as a circle
                .clip(CircleShape)
        )

        // Add a horizontal space between the image and the column
        Spacer(modifier = Modifier.width(8.dp))

        Column {
            Text(text = msg.author)
            // Add a vertical space between the author and message texts
            Spacer(modifier = Modifier.height(4.dp))
            Text(text = msg.body)
        }
    }
}

 

 

https://developer.android.com/jetpack/compose/tutorial?hl=ko 

Android Compose 튜토리얼  |  Android 개발자  |  Android Developers