Compose로 최적의 환경에서 개발하려면 Android 스튜디오를 다운로드하고 설치하세요. 새 프로젝트 템플릿, Compose UI와 애니메이션을 즉시 미리 볼 수 있는 기능 등 다양한 스마트 편집기 기능이 포함되어 있습니다.
새 Compose 앱 프로젝트를 만들거나 기존 앱 프로젝트에 Compose를 설정하거나 Compose로 작성된 샘플 앱을 가져오려면 아래 안내를 따르세요.
Compose 지원으로 새로운 앱 만들기
Android 스튜디오에는 Compose 지원이 기본적으로 포함된 새 프로젝트를 시작할 때 도움이 되는 다양한 프로젝트 템플릿이 포함되어 있습니다. 새 프로젝트의 Compose를 올바르게 설정하려면 다음 단계를 따르세요.
- Welcome to Android Studio 창에 있다면 Start a new Android Studio project를 클릭합니다. 이미 Android 스튜디오 프로젝트가 열려 있다면 메뉴 바에서 File > New > New Project를 선택합니다.
- Select a Project Template 창에서 Empty를 선택합니다. Activity를 클릭하고 Next를 클릭합니다.
- Configure your project 창에서 다음을 완료합니다.
- 평소처럼 Name, Package name 및 Save location을 설정합니다. Language 드롭다운 메뉴에서는 Kotlin 옵션만 사용할 수 있습니다. Jetpack Compose는 Kotlin으로 작성된 클래스에서만 작동하기 때문입니다.
- Minimum API level 드롭다운 메뉴에서 API 수준 21 이상을 선택합니다.
- Finish를 클릭합니다.
이제 Jetpack Compose를 사용하여 앱 개발을 시작할 준비가 되었습니다. 시작하는 데 도움을 받고 툴킷으로 할 수 있는 작업을 알아보려면 Jetpack Compose 튜토리얼을 참고하세요.
기존 앱에 Compose 설정
그런 다음 앱의 build.gradle
파일에 다음 정의를 추가합니다.
Groovy
android {
buildFeatures {
compose true
}
}
Kotlin
android {
buildFeatures {
compose = true
}
}
Android BuildFeatures
내에서 compose
플래그를 true
로 설정
블록은 Android 스튜디오에서 Compose 기능을 사용 설정합니다.
마지막으로 Compose BOM과 Compose 라이브러리 종속 항목의 하위 집합을 추가합니다. 다음 블록의 종속 항목을 추가해야 합니다.
Groovy
dependencies {
def composeBom = platform('androidx.compose:compose-bom:2024.06.00')
implementation composeBom
androidTestImplementation composeBom
// Choose one of the following:
// Material Design 3
implementation 'androidx.compose.material3:material3'
// or Material Design 2
implementation 'androidx.compose.material:material'
// or skip Material Design and build directly on top of foundational components
implementation 'androidx.compose.foundation:foundation'
// or only import the main APIs for the underlying toolkit systems,
// such as input and measurement/layout
implementation 'androidx.compose.ui:ui'
// Android Studio Preview support
implementation 'androidx.compose.ui:ui-tooling-preview'
debugImplementation 'androidx.compose.ui:ui-tooling'
// UI Tests
androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
debugImplementation 'androidx.compose.ui:ui-test-manifest'
// Optional - Included automatically by material, only add when you need
// the icons but not the material library (e.g. when using Material3 or a
// custom design system based on Foundation)
implementation 'androidx.compose.material:material-icons-core'
// Optional - Add full set of material icons
implementation 'androidx.compose.material:material-icons-extended'
// Optional - Add window size utils
implementation 'androidx.compose.material3:material3-window-size-class'
// Optional - Integration with activities
implementation 'androidx.activity:activity-compose:1.9.0'
// Optional - Integration with ViewModels
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1'
// Optional - Integration with LiveData
implementation 'androidx.compose.runtime:runtime-livedata'
// Optional - Integration with RxJava
implementation 'androidx.compose.runtime:runtime-rxjava2'
}
Kotlin
dependencies {
val composeBom = platform("androidx.compose:compose-bom:2024.06.00")
implementation(composeBom)
androidTestImplementation(composeBom)
// Choose one of the following:
// Material Design 3
implementation("androidx.compose.material3:material3")
// or Material Design 2
implementation("androidx.compose.material:material")
// or skip Material Design and build directly on top of foundational components
implementation("androidx.compose.foundation:foundation")
// or only import the main APIs for the underlying toolkit systems,
// such as input and measurement/layout
implementation("androidx.compose.ui:ui")
// Android Studio Preview support
implementation("androidx.compose.ui:ui-tooling-preview")
debugImplementation("androidx.compose.ui:ui-tooling")
// UI Tests
androidTestImplementation("androidx.compose.ui:ui-test-junit4")
debugImplementation("androidx.compose.ui:ui-test-manifest")
// Optional - Included automatically by material, only add when you need
// the icons but not the material library (e.g. when using Material3 or a
// custom design system based on Foundation)
implementation("androidx.compose.material:material-icons-core")
// Optional - Add full set of material icons
implementation("androidx.compose.material:material-icons-extended")
// Optional - Add window size utils
implementation("androidx.compose.material3:material3-window-size-class")
// Optional - Integration with activities
implementation("androidx.activity:activity-compose:1.9.0")
// Optional - Integration with ViewModels
implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1")
// Optional - Integration with LiveData
implementation("androidx.compose.runtime:runtime-livedata")
// Optional - Integration with RxJava
implementation("androidx.compose.runtime:runtime-rxjava2")
}
Jetpack Compose 샘플 앱 사용해 보기
Jetpack Compose의 기능을 실험하는 가장 빠른 방법은 GitHub에서 호스팅되는 Jetpack Compose 샘플 앱을 사용해 보는 것입니다. Android 스튜디오에서 샘플 앱 프로젝트를 가져오려면 다음 단계에 따라 진행하세요.
- Welcome to Android Studio 창에 있다면 Import an Android code sample을 선택합니다. 이미 Android 스튜디오 프로젝트가 열려 있다면 메뉴 바에서 File > New > Import Sample을 선택합니다.
- Browse Samples 마법사 상단 근처의 검색창에 'compose'를 입력합니다.
- 검색결과에서 Jetpack Compose 샘플 앱 중 하나를 선택하고 Next를 클릭합니다.
- Application name 및 Project location을 변경하거나 기본값을 유지합니다.
- Finish를 클릭합니다.
Android 스튜디오는 지정된 경로로 샘플 앱을 다운로드하고 프로젝트를 엽니다. 그런 다음 각 예의 MainActivity.kt
를 검사하여 IDE 내 미리보기에서 크로스페이드 애니메이션, 맞춤 구성요소, 타이포그래피 사용, 밝은 색상과 어두운 색상 표시와 같은 Jetpack Compose API를 확인할 수 있습니다.
Wear OS용 Jetpack Compose를 사용하려면 Wear OS에 Jetpack Compose 설정을 참고하세요.
추천 서비스
- 참고: JavaScript가 사용 중지되어 있으면 링크 텍스트가 표시됩니다.
- Compose를 통해 탐색
- Compose 레이아웃 테스트
- 집중에 대한 반응