[Jetpack Compose] Compose의 문법 (1)

해당 게시물은 과거에 작성한 블로그 내용을 옮겨 온 것으로, 가독성이 떨어지고 내용이 부정확할 수 있습니다.

@Composable 어노테이션

• 원하는 요소를 정의하여 레이아웃을 사용
• XML이나 Layout Editor를 사용할 필요가 없음
• 선언형 함수
  • UI의 구성 과정보다는 앱 모양을 설명하거나 종속 항목을 제공
• Composable 함수명은 반드시 대문자로 시작

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

setContent 블록

• Composable 함수가 호출되는 액티비티의 레이아웃 정의
• Composable 함수는 다른 Composable 함수에서만 호출 가능

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

Text()

• 텍스트 라벨을 화면에 표시
  • 즉, 텍스트 출력
• onCreate 메서드 내에 선언

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.Text

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

@Preview 어노테이션

• 어플리케이션을 빌드하여 안드로이드 기기나 에뮬레이터에 설치하지 않아도 Composable 함수를 미리 확인 가능
• 매개변수를 사용하지 않는 Composable 함수에서만 사용

@Preview		
@Composable
fun PreviewMessageCard() { // 프리뷰 사용 가능
    MessageCard("Android")
}

@Preview		
@Composable
fun PreviewMessageCard(msg: Message) { // 프리뷰 사용 불가
    MessageCard(message)
}

Column() & Row()

• 구성 요소들을 수직 정렬
• Composable 함수 내에 선언
• Column 함수 내에 정렬할 요소 작성

import androidx.compose.foundation.layout.Column

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

import androidx.compose.foundation.layout.Column

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

Image

• 이미지 삽입
• Composable 함수 내에 선언
• Resource Manager: 사진 라이브러리에서 이미지 가져오기

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Row
import androidx.compose.ui.res.painterResource

@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)
        }
    }
}

Modifier

• Composable을 장식하거나 구성
• 상위 수준의 상호작용 추가 가능
  • Composable의 크기, 레이아웃, 모양 등을 변경
  • 요소를 클릭할 수 있게 설정
• 수정자를 연결하여 더 복잡한 Composable 생성가능
• Modifier.padding
  • 객체에 padding을 주어 공백 추가
• .size(…)
  • 객체의 사이즈를 설정
• .clip(…)
  • 이미지의 형태를 자름
• Spacer(…)
  • Modifier.width(…)
    ⇒ 열과 객체 사이에 수평 공간 생성
  • Modifier.height(…)
    ⇒ 객체 간에 수직 공간 생성

import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp

@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)
        }
    }
}