Basic Layout - Happy Birthday App

Android Basics in Kotlin 강의에서 만든 Happy Birthday 앱을 Compose를 사용하여 만든다.

학습 내용

• Composable 함수를 작성하는 방법
• 텍스트를 표시하고, 텍스트 형식을 지정하는 방법
• 이미지를 표시하는 방법
• Compose 레이아웃

텍스트 표시하기

@Composable
fun BirthdayGreetingWithText(message: String, from: String){
    Column() {
        Text(
            text = message,
            fontSize = 36.sp,
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentWidth(Alignment.Start)
                .padding(start = 16.dp, top = 16.dp)
        )
        Text(
            text = from,
            fontSize = 24.sp,
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentWidth(Alignment.End)
                .padding(start = 16.dp, end = 16.dp)
        )
    }
}

모든 Composable 함수는 @Composable 주석으로 시작한다. @Composable 주석이 있으면 이 함수가 데이터를 UI로 변환하게 되어 있다는 것을 Compose 컴파일러에게 알릴 수 있다.

Text() 컴포저블에 표시할 text와 fontSize를 지정해준 것을 확인할 수 있다. 또한 modifier로 텍스트의 위치, 패딩 값 등을 정할 수 있다.

Compose의 세 가지 기본 표준 레이아웃 요소는 Column, Row, Box 컴포저블이다. 여기서는 Column을 사용해 텍스트를 한 행에 정렬했다.

Modifier.fillMaxWidth() 값을 할당하면 컴포저블의 너비가 사용 가능한 최대 너비로 설정된다. .wrapContentWidth()로는 사용 가능한 화면 너비에 맞춰 컴포저블을 정렬할 수 있다.
Alignment.Top은 상단, Alignment.Start는 왼쪽 시작, Alignment.End는 오른쪽 끝, Alignment.Bottom은 하단으로 정렬된다. 이 뿐만 아니라 Alignment.CenterHorizontally 같은 값으로도 정렬할 수 있다.
Padding값도 마찬가지로 top, start, end, bottom값을 따로 설정할 수 있다.

이미지 표시하기

@Composable
fun BirthdayGreeting(message: String, from: String) {
    val image = painterResource(id = R.drawable.androidparty)
    Box{
        Image(
            painter = image,
            contentDescription = null,
            modifier = Modifier.fillMaxHeight().fillMaxWidth(),
            contentScale = ContentScale.Crop
        )
        BirthdayGreetingWithText(message = message, from = from)
    } 
}

이미지를 표시하기 위해서는 Box 레이아웃을 사용한다. Box 레이아웃은 요소를 위로 쌓아올린다. Box 레이아웃에 Image를 먼저 작성하고, 그 뒤에 텍스트를 표시하는 Composable 함수를 호출한다.

리소스에서 이미지를 불러올 때는 painterResource()를 사용한다.

Image()에서 painter에 이미지를 설정하고, contentDescription에는 음성 안내에 사용되는 메시지를 작성할 수 있다. 앱 접근성을 높이기 위해서 이미지에 대한 설명을 작성하는 것이 좋다. 여기서는 null값으로 생략했다.

Composable 호출하기

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayComposeTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    BirthdayGreeting(getString(R.string.happy_birthday_text), getString(R.string.from_emma))
                }
            }
        }
    }
}

onCreate()에서 Composable을 호출해 화면에 표시한다.

setContent 내에 작성하고, Theme은 프로젝트 이름인 HappyBirthdayCompose로 자동으로 설정된다.

하드코딩 된 문자열은 Extract string resource로 추출하는 것이 좋다.

결과