Compose ile geliştirmede en iyi deneyim için Android Studio'yu indirip yükleyin. Yeni proje şablonları ve Compose kullanıcı arayüzünüzü ve animasyonlarınızı anında önizleme gibi birçok akıllı düzenleyici özelliği içerir.
Yeni bir Compose uygulama projesi oluşturmak, mevcut bir uygulama projesi için Compose'u ayarlamak veya Compose'da yazılmış örnek bir uygulamayı içe aktarmak için aşağıdaki talimatları uygulayın.
Compose'u destekleyen yeni bir uygulama oluşturma
Varsayılan olarak Compose desteği içeren yeni bir projeye başlamak istiyorsanız Android Studio, başlamanıza yardımcı olacak çeşitli proje şablonları içerir. Compose ayarını doğru şekilde yapan yeni bir proje oluşturmak için aşağıdaki adımları uygulayın:
- Android Studio'ya hoş geldiniz penceresindeyseniz Yeni bir Android Studio projesi başlat'ı tıklayın. Zaten açık bir Android Studio projeniz varsa menü çubuğundan Dosya > Yeni > Yeni Proje'yi seçin.
- Proje Şablonu Seçin penceresinde Etkinlik Boş'u seçin ve İleri'yi tıklayın.
- Projenizi yapılandırın penceresinde aşağıdakileri yapın:
- Ad, Paket adı ve Konumu kaydet seçeneklerini normalde yaptığınız gibi ayarlayın. Jetpack Compose yalnızca Kotlin'de yazılmış sınıflarla çalıştığından Dil açılır menüsünde kullanılabilen tek seçenek Kotlin'dir.
- Minimum API düzeyi açılır menüsünden API düzeyi 21 veya üstünü seçin.
- Son'u tıklayın.
Artık Jetpack Compose'u kullanarak uygulama geliştirmeye hazırsınız. Başlamanıza ve araç setiyle neler yapabileceğinizi öğrenmenize yardımcı olması için Jetpack Compose eğiticisini deneyin.
Mevcut bir uygulama için Compose'u kurma
Compose'u kullanmaya başlamak için önce projenize bazı derleme yapılandırmaları eklemeniz gerekir. Uygulamanızın build.gradle
dosyasına aşağıdaki tanımı ekleyin:
Modern
android {
buildFeatures {
compose true
}
composeOptions {
kotlinCompilerExtensionVersion = "1.5.11"
}
}
Kotlin
android {
buildFeatures {
compose = true
}
composeOptions {
kotlinCompilerExtensionVersion = "1.5.11"
}
}
Dikkat edilmesi gereken bazı noktalar:
- Android
BuildFeatures
blokunun içindecompose
işaretinitrue
olarak ayarlamak, Oluşturma işlevini etkinleştirir. ComposeOptions
bloğunda tanımlanan Kotlin Derleyici uzantısı sürümü oluşturma işlemi, Kotlin sürümü oluşturmaya bağlıdır. Uyumluluk haritasına göz atmayı ve projenizin Kotlin sürümüyle eşleşen kitaplık sürümünü seçtiğinizden emin olun.
Ayrıca, Compose BOM'yi ve ihtiyacınız olan Compose kitaplığı bağımlılıklarının alt kümesini aşağıdaki bloktan ekleyin:
Modern
dependencies {
def composeBom = platform('androidx.compose:compose-bom:2024.04.01')
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.8.2'
// 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.04.01")
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.8.2")
// 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 örnek uygulamalarını deneyin
Jetpack Compose'un özelliklerini denemenin en hızlı yolu GitHub'da barındırılan Jetpack Compose örnek uygulamaları kullanmayı denemektir. Bir örnek uygulama projesini Android Studio'dan içe aktarmak için aşağıdaki adımları uygulayın:
- Android Studio'ya hoş geldiniz penceresindeyseniz Android kod örneğini içe aktar'ı seçin. Zaten açık bir Android Studio projeniz varsa menü çubuğundan Dosya > Yeni > Örneği İçe Aktar'ı seçin.
- Browse Samples (Örneklere Göz At) sihirbazının üst tarafındaki arama çubuğuna "compose" (oluştur) yazın.
- Arama sonuçlarındaki Jetpack Compose örnek uygulamalarından birini seçin ve Sonraki'yi tıklayın.
- Uygulama adı ve Proje konumu'nu değiştirin veya varsayılan değerleri koruyun.
- Son'u tıklayın.
Android Studio, örnek uygulamayı belirttiğiniz yola indirir ve projeyi açar. Ardından, çapraz geçiş animasyonu, özel bileşenler, tipografi kullanımı, IDE içi önizlemede açık ve koyu renkler görüntüleme gibi Jetpack Compose API'lerini görmek için örneklerin her birinde MainActivity.kt
parametresini inceleyebilirsiniz.
Wear OS'te Jetpack Compose'u kullanmak için Wear OS'te Jetpack Compose'u ayarlama başlıklı makaleyi inceleyin.
Sizin için önerilenler
- Not: Bağlantı metni JavaScript kapalıyken görüntülenir
- Oluşturma ile gezinme
- Oluşturma düzeninizi test etme
- Odaklanmak için tepki verin