BirthDayCard App - Column Container, 람다후행문법

BirthDayCard App - Column Container, 람다후행문법

텍스트 컴포저블로 간단한 앱 빌드  |  Android Developers

텍스트 컴포저블로 간단한 앱 빌드  |  Android Developers

위의 페이지를 참고해서 Column Container와 람다후행문법에 대해서 같이 배워보자

 

 

Column 컨테이너 추가해보기

우선 BirthDayCard라는 이름의 프로젝트를 만들어보자

그 후에 다음과 같이 변경해보자

package com.example.birthdaycard

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import com.example.birthdaycard.ui.theme.BirthdayCardTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BirthdayCardTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    BirthdayGreetingWithText("Happy Birthday computer science student!", "- from professor")
                }
            }
        }
    }
}

@Composable
fun BirthdayGreetingWithText(message: String, from: String){
    Column {
        Text(
            text = message,
            fontSize = 36.sp
        )
        Text(
            text = from,
            fontSize = 24.sp
        )
    }
}

@Preview(showBackground = false)
@Composable
fun DefaultPreview() {
    BirthdayCardTheme {
        BirthdayGreetingWithText("Happy Birthday computer science student!", "- from professor")
    }
}

Text Composable은 전에 한 번 봤으니 위 코드에서 확인할 포인트는 Column과 fontSize 뿐이다

 

Row는 행으로 정렬해주는(즉 하나의 가로줄에 나열),

Column은 열로 정렬해주는(즉 하나의 세로줄에 나열) 컨테이너 Composable이다 

 

지금은 이해할 수 없겠지만

여기서 중요한 포인트는 람다후행문법이라는 걸 통해서

Column(
    content = {
        Text(
            text = message,
            fontSize = 36.sp
        )
        Text(
            text = from,
            fontSize = 24.sp
        )
    }
)

원래 이런식으로 써야하는 문법을

Column {
    Text(
        text = message,
        fontSize = 36.sp
    )
    Text(
        text = from,
        fontSize = 24.sp
    )
}

이렇게 깔끔하게 쓸 수 있게 해준다

참고로 fontSize는 글자 크기를 의미하고 sp는 절대적크기임을 저번에 확인했었다

 

결과화면

.