Android Developers codelab -Happy Birthday

한로·2025년 2월 17일

Android-Developers

목록 보기

2/4

설치
https://developer.android.com/codelabs/basic-android-kotlin-training-install-android-studio?hl=ko#0

Andriod 최신버전은 Empty Activity에서 Compose 를 기본적으로 내장하고 있습니다.

텍스트 업데이트

oncreate() 함수는 앱의 진입점이며 다른 함수를 호출하여 사용자 인터페이스를 빌드합니다.

onCreate() 함수 내 setContent() 함수는 구성 가능한 함수를 통해 레이아웃을 정의하는 데 사용됩니다.
@Componsable 어노테이션으로 표시된 모든 함수는 setContent() 함수 또는 다른 구성 가능한 함수에서 호출할 수 있습니다.

Gretting() 함수

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

@Composable 함수 이름은 대문자로 표기됩니다.
함수 위에 추가해줍니다.
@Composable 함수는 아무것도 반환할 수 없습니다

꾸미기


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            GrettingCardTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { paddingValues ->
                    Box(modifier = Modifier
                        .fillMaxSize()
                        .padding(paddingValues)) {
                        Greeting(name = "jinsung")
                    }
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Surface(
        modifier = Modifier
            .fillMaxSize(),  // Surface 크기 지정
        color = Color.Yellow // 배경색 설정

    ) {
        Text(
            text = "Hi, my name is $name!",
            color = Color.Green,
            modifier = Modifier.padding(20.dp)
        )
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    GrettingCardTheme {
        Greeting("jinsung")
    }
}

modifier 는 여러 개를 체인처럼 연결할 수 있어서 여러가지 동작을 적용시켜줄 수 있습니다.

@Composable
fun Greeting(name: String) {
    Surface(
        modifier = Modifier
            .fillMaxSize(),  // Surface 크기 지정
        color = Color.Yellow // 배경색 설정

    ) {
        Text(
            text = "Hi, my name is $name!",
            color = Color.Green,
            modifier = Modifier.padding(20.dp)
        )
    }
}

BirthdayCardPreview

프로젝트 생성

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

메시지가 겹치는 이유는 줄 높이를 지정해야 하기 때문입니다.

sp 는 sp 단위를 만든 Int 의 확장 속성입니다.
마찬가지로 Float 및 Double 과 같은 다른 데이터 유형에서 .sp 확장 속성을 사용할 수 있습니다.
https://kotlinlang.org/docs/extensions.html#companion-object-extensions

줄 높이를 포함하도록 구성한 Text 함수

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        fontSize = 100.sp,
        lineHeight = 116.sp,
        modifier = modifier
    )
}

추가로 meessage와 from 을 추가합니다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            HappyBirthdayTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding),
                        message = "Happy Birthday",
                        from = "From Emma"
                    )
                }
            }
        }
    }
}

@Composable
fun Greeting(message: String, from: String, name: String, modifier: Modifier = Modifier) {
    Text(
        text = from,
        fontSize = 36.sp,
    )
    Text(
        text = "Hello $name!",
        fontSize = 100.sp,
        lineHeight = 116.sp,
        modifier = modifier
    )
}

행과 열에 텍스트 요소 정렬

UI 계층 구조

UI 계층구조는 한 구성요소가 하나 이상의 구성요소를 포함할 수 있으며 상위 요소 및 하위 요소라는 용어가 사용되는 경우도 있습니다.

여기에서는 상위 Ui 요소가 하위 Ui 요소를 포함하는 것이며 하위 Ui 요소 또한 하위 Ui를 포함할 수 있습니다.

Compose의 세 가지 기본 표준 레이아웃 요소는 구성 가능한 함수인 Column, Row, Box 입니다.

Column, Row, Box 는 컴포저블 콘텐츠를 인수로 사용하는 구성 가능한 함수이므로 이러한 레이아웃 요소 내에 항목을 배치할 수 있습니다

Row 예

Row {
    Text("First Column")
    Text("Second Column")
}

이러한 텍스트 요소는 아래 이미지에서 처럼 화면에 나란히 표시됩니다.

후행 람다 문법

이전 코드 스니펫에서 구성 가능한 함수 Row 에 괄호 대신 중괄호가 사용되었습니다.
이를 후행 람다 문법이라고 합니다.

함수의 마지막 매개변수가 람다 함수일 때 중괄호 {}를 함수의 괄호 () 밖에 위치시킬 수 있습니다.

함수를 매개변수로 전달하면 후행 람다 문법을 사용할 수 있습니다.
괄호 안에 함수를 넣는 대신 괄호 밖 중괄호 안에 넣을 수 있습니다.
이는 Compose에서 일반적인 사항이므로 코드가 어떻게 보이는지 잘 알고 있어야합니다.

예를 들어 구성 가능한 함수 Row() 의 마지막 매개변수는 하위 Ui 요소를 설명하는 함수인 content 매개변수입니다.

텍스트 요소 세 개가 포함된 행을 만든다고 가정합니다

Row(
    content = {
        Text("Some text")
        Text("Some more text")
        Text("Last text")
    }
)

다음과 같이 content 매개변수와 괄호를 삭제할 수 있습니다.

Row {
    Text("Some text")
    Text("Some more text")
    Text("Last text")
}

하나의 행에 텍스트 요소 정렬

텍스트 요소가 겹치는 것을 피하기 위해 앱의 텍스트 요소를 한 행에 정렬합니다

@Composable
fun Greeting(message: String, from: String, modifier: Modifier = Modifier) {
    Row {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
        )
        Text(
            text = from,
            fontSize = 36.sp
        )
    }
}

하나의 열에 텍스트 요소 정렬

이제 겹치는 부분은 없지만 요소의 크기와 정렬이 필요합니다.

@Composable
fun Greeting(message: String, from: String, modifier: Modifier = Modifier) {
    Column {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
        )
        Text(
            text = from,
            fontSize = 36.sp
        )
    }
}

앱에 인사말 추가

먼저 중앙정렬을 하기 위해 Column 에 추가합니다

        verticalArrangement = Arrangement.Center

@Composable
fun Greeting(message: String, from: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
        )
        Text(
            text = from,
            fontSize = 36.sp
        )
    }
}

패딩을 추가해주고 Message는 중앙정렬
from 은 End 정렬 해줍니다

@Composable
fun Greeting(message: String, from: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = Arrangement.Center,
        modifier = modifier.padding(8.dp)
    ) {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
            textAlign = TextAlign.Center
        )
        Text(
            text = from,
            fontSize = 36.sp,
            modifier = Modifier
                .padding(16.dp)
                .align(alignment = Alignment.End)

        )
    }
}

화면 중앙 정렬을 위해 Column 에 fillMaxSize() 추가해줍니다

        modifier = modifier.padding(8.dp).fillMaxSize()

한로

"Hello World"

이전 포스트

Android Developers codelab -Kotlin - 1

다음 포스트

Android Developers codelab -Happy Birthday