이번은 「Jetpack Compose의 설정」과 「간단한 텍스트를 표시한다」곳까지 해 보고 싶습니다.

Jetpack Compose 설정

developers의 다음 기사를 참고로 설정했습니다.

Android Studio에서 Jetpack Compose 사용

1. Compose를 지원하는 Android Studio 설치

아래 URL에서 "DOWNLOAD ARCTIC FOX CANARY 9"를 설치합니다.

Preview release

2. Android Studio에서 새 Project 만들기

프로젝트를 만들 때 APIレベル21以上（Android 5.0/Lollipop）를 선택합니다.

3. Kotlin 버전을 1.4.21로 변경

build.gradle

dependencies {
  classpath "com.android.tools.build:gradle:7.0.0-alpha09"
  classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.4.21"
}

4. Compose 라이브러리를 종속성에 추가

app/build.gradle

// バージョンを上げれるよ、とAndroid Studioが教えてくれますが、そのままでOKです。
dependencies {

    implementation 'androidx.compose.ui:ui:1.0.0-alpha10'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.0.0-alpha10'
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.0.0-alpha10'
    // Material Design
    implementation 'androidx.compose.material:material:1.0.0-alpha10'
    // Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.0.0-alpha10'
    implementation 'androidx.compose.material:material-icons-extended:1.0.0-alpha10'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.0-alpha10'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.0-alpha10'
    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.0-alpha10'
}

간단한 텍스트 표시

setContent에서 Text 함수 호출

레이아웃을 XML 파일로 정의하는 대신 setContent 블록에서 Activity 레이아웃을 정의합니다.

그리고 setContent 블록 안에서 컴포즈 가능한 함수를 호출합니다.
setContentView(R.layout.activity_main) 는 삭제하고 OK입니다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            Text("Hello World")
        }
    }
}

그러면 다음 화면이 표시됩니다.

컴포즈 가능한 함수 만들기

컴포즈 가능한 함수는 다른 컴포즈 가능한 함수에서 호출할 수 있습니다.
즉, @Composable 어노테이션이 설정된 함수의 범위내에서만 호출이 가능합니다.

// Good
@Composable
fun method01(name: String) = Text(text = name)
// Bad（@Composableがない関数で、Text関数を呼び出している）
fun method02(name: String) = Text(text = name)

MainActivity.kt를 다음과 같이 변경합니다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting("World")
        }
    }
}

@Composable
fun Greeting(name: String) = Text(text = "Hello $name")

위를 실행하면 이전과 같은 화면이 표시된다고 생각합니다.

Android Studio에서 함수 미리보기

Android Studio에서 함수를 미리 보려면 방금 만든 함수의 @Composable 어노테이션 전에 @Preview를 설정합니다.

참고로 미리보기하는 함수는 매개 변수를 사용할 수 없습니다.

따라서 Greeting 함수는 인수에 name: String 가 있으므로 다른 함수를 정의해야 합니다.

인수가 있는 함수에 @Preview 를 설정하면 "Composable function with non-default parameters are not supported in Preview unless they are annotated with @PreviewParameter "오류가 표시됩니다.

// 引数があるので、@Previewアノテーションを付けることが出来ない
@Preview
@Composable
fun Greeting(name: String) = Text(text = "Hello $name")

Greeting 함수를 호출하는 다른 함수 "PreviewGreeting 함수"를 만들고 @Preview 어노테이션을 설정합니다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting("World")
        }
    }
}

@Composable
fun Greeting(name: String) = Text(text = "Hello $name")

// 追加
@Preview
@Composable
fun PreviewGreeting() = Greeting(name = "Android")

PreviewGreeting 함수를 추가한 후 다시 빌드하면 Android Studio의 오른쪽에 미리 보기가 표시됩니다.