Text와 Button 표시하기

이번 시리즈에서는 Jetpack Compose 사용법에 대해 다뤄보려 합니다. Jetpack Compose가 익숙치 않은 분들을 위해 간단히 특징을 설명하자면 아래와 같습니다.

• XML 레이아웃 대신 선언형 함수를 사용하여 UI를 구성
• UI 개발 효율성 극대화

쉽게 말해, 레이아웃을 xml 파일이 아닌, Activity의 코드로 정의하는 방식입니다. 기존 xml을 사용하는 방식보다 코드 가독성 및 재사용성, 유지 보수성이 높고, 애니메이션이나 그래프 표현에도 훨씬 유연하기 때문에 최근들어 대부분의 앱이 Jetpack Compose 방식으로 구성되고 있습니다.

Jetpack Compose가 2021년 정도에 출시되었다보니, 다소 생소하게 느껴질 수 있겠지만, 실제로는 대부분의 회사에서 Jetpack Compose를 다룰 수 있는 프론트엔드 개발자를 모집하고 있을만큼 중요한 기술입니다. (그렇다고 해서 xml을 사용하는 방식을 모르는 상태에서 Jetpack Compose만 학습하시면 안됩니다.)

이번 포스팅은 첫 포스팅인만큼 Jetpack Compose의 기본적인 사용법에 대해서만 알아보기로 하겠습니다.

1. 프로젝트 생성하기

① File > New > New Project를 클릭한다.

② Empty Activity를 선택하고 Next 버튼을 클릭한다.

③ 프로젝트의 이름을 지정한 뒤 Finish 버튼을 클릭한다.

④ 코드의 의미는 아래와 같다.

• setContent 함수: 액티비티의 콘텐츠를 설정한다.

• ChromeApplicationTheme: 앱의 테마를 설정하는 Composable 함수로, 이 함수 내에 앱의 테마 스타일을 정의한다.

• Surface

  • 뷰의 배경 또는 콘텐츠의 배경을 설정한다.
  • modifier를 사용하여 Surface를 화면 전체 크기로 채우도록 지정하고, color를 사용하여 배경색을 현재 테마에서 정의된 배경 색상으로 설정한다.
  • Surface 내부에서 Greeting이라는 컴포저블 함수를 호출하고 있다.

• Greeting 함수

  • @Composable 어노테이션이 붙은 함수는 사용자 정의 UI 구성 요소를 정의하는 데 사용된다.
  • 문자열 name을 인자로 받아 "Hello {name}!"을 보여주는 Text 요소를 생성한다.
  • modifier 매개변수를 사용하여 해당 텍스트에 적용할 Compose modifier를 지정할 수 있다.

• @Preview 어노테이션

  • Composable 함수의 미리 보기를 정의하는 데 사용된다.
  • 단, 미리보기에만 적용될 뿐 실제 앱 화면에 적용되지는 않는다.

• GreetingPreview 함수: Greeting을 호출하여 "Hello Android!"을 미리 보여준다.

2. 텍스트 표시하기

기존 xml 방식에서는 TextView 태그를 사용했었다. Jetpack Compose에서는 어떻게 텍스트를 표시하는지 알아보자.

1) 텍스트 표시하기

① MainActivity에 아래의 Composable 함수를 추가한다.

@Composable
fun FirstText() {
    Text(
        text = "나의 첫번째 텍스트"
    )
}

② GreetingPreview 함수를 아래와 같이 수정한다.

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ChromeApplicationTheme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            FirstText()
        }
    }
}

③ 우측 미리보기 화면에서 변경된 텍스트를 확인할 수 있다.

2) 텍스트 서식 적용하기

① FirstText 메서드를 아래와 같이 수정한다.

@Composable
fun FirstText() {
    Text(
        text = "나의 첫번째 텍스트",
        fontSize = 30.sp,
        color = Purple40,
        fontStyle = FontStyle.Italic,
        modifier = Modifier.padding(10.dp),
        style = androidx.compose.ui.text.TextStyle(background = Pink80)
    )
}

• color와 background 속성의 속성 값으로 사용된 값은 default 패키지 > ui.theme > Color.kt에 정의된 값이다.
  

② 우측 미리보기 화면에서 새롭게 적용된 텍스트 서식을 확인할 수 있다.

3. 버튼 만들기

1) 클릭 이벤트 리스너

① MainActivity에 아래의 Composable 메서드를 추가한다.

@Composable
fun FirstButton() {
    Button(onClick = {
        Log.d("MainActivity", "Clicked")
    }) {

    }
}

② GreetingPreview 함수를 아래와 같이 수정한다.

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ChromeApplicationTheme {
        FirstButton()
    }
}

③ 우측의 미리보기 화면에서 생성한 버튼의 모양을 확인할 수 있다.

④ 실제 앱 화면에서 버튼을 확인하기 위해서는 setContent에서 FirstButton을 호출해야 한다.

setContent {
    ChromeApplicationTheme {
        FirstButton()
    }
}

이제 코드를 실행시켜보자. AVD에서 버튼을 클릭해보면, "Clicked"라는 내용의 Log가 찍힐 것이다.

2) 버튼 서식 적용하기

① FirstButton 메서드를 아래와 같이 수정한다.

@Composable
fun FirstButton() {
    Button(
        onClick = {
            Log.d("MainActivity", "Clicked")
        },
        colors = ButtonDefaults.buttonColors(
            containerColor = Color.Yellow,
            // contentColor = Color.Blue
        ),
        modifier = Modifier.width(200.dp).height(100.dp)
    ) {
        Text(
            text = "버튼을 눌러주세요",
            fontSize = 30.sp,
            lineHeight = 50.sp,
            color = Color.Blue
        )
    }
}

• 버튼의 텍스트 색상을 적용할 때에는 button의 contentColor 속성을 사용해도 되고, Text의 color 속성을 사용해도 된다.
• lineHight는 Text가 두 줄 이상일 때, 줄 간격을 정의하는 속성이다.

② 버튼 클릭에 대해 토스트 메시지를 띄우는 방법은 아래와 같다.

@Composable
fun FirstButton() {

    val context : Context = LocalContext.current

    Button(
        onClick = {
            Log.d("MainActivity", "Clicked")
            Toast.makeText(context, "Clicked", Toast.LENGTH_SHORT).show()
        },
        colors = ButtonDefaults.buttonColors(
            containerColor = Color.Yellow,
            // contentColor = Color.Blue
        ),
        modifier = Modifier.width(200.dp).height(100.dp)
    ) {
        Text(
            text = "버튼을 눌러주세요",
            fontSize = 30.sp,
            lineHeight = 50.sp,
            color = Color.Blue
        )
    }
}

• 참고로, Toast의 context로 this를 넣을 수 없다.