Compose ile geliştirme yaparken en iyi deneyimi yaşamak için Android Studio'yu indirip yükleyin. Yeni proje şablonları ve Oluşturma kullanıcı arayüzünüzü ve animasyonlarınızı hemen ö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ış bir örnek uygulamayı içe aktarmak için aşağıdaki talimatları uygulayın.
Oluşturma özelliğini destekleyen yeni bir uygulama oluşturma
Varsayılan olarak Compose desteği içeren yeni bir proje başlatmak istiyorsanız Android Studio'da başlangıçta size yardımcı olacak çeşitli proje şablonları bulunur. Compose kurulumunun doğru şekilde yapıldığı yeni bir proje oluşturmak için şu adımları uygulayın:
- Android Studio'ya hoş geldiniz penceresindeyseniz Yeni bir Android Studio projesi başlat'ı tıklayın. Açık bir Android Studio projeniz zaten varsa menü çubuğundan Dosya > Yeni > Yeni Proje'yi seçin.
- Proje Şablonu Seçin penceresinde Boş Etkinlik'i seçin ve Sonraki'yi tıklayın.
- Projenizi yapılandırın penceresinde aşağıdakileri yapın:
- Ad, Paket adı ve Kaydetme konumu'nu normalde yaptığınız gibi ayarlayın. Jetpack Compose yalnızca Kotlin dilinde yazılan sınıflarla çalıştığından, Dil açılır menüsündeki tek seçenek Kotlin'dir.
- Minimum API düzeyi açılır menüsünde 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 Oluştur'u ayarlama
Öncelikle, Compose Derleyici Gradle eklentisini kullanarak Compose derleyiciyi yapılandırın.
Ardından, uygulamanızın build.gradle
dosyasına aşağıdaki tanımı ekleyin:
Groovy
android {
buildFeatures {
compose true
}
}
Kotlin
android {
buildFeatures {
compose = true
}
}
Android BuildFeatures
bloğunda compose
işaretini true
olarak ayarlamak, Android Studio'da Oluşturma işlevini etkinleştirir.
Son olarak, aşağıdaki bloktan Compose BOM'u ve ihtiyacınız olan Compose kitaplığı bağımlılıklarının alt kümesini bağımlılıklarınıza ekleyin:
Groovy
dependencies {
def composeBom = platform('androidx.compose:compose-bom:2024.10.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.adaptive:adaptive'
// Optional - Integration with activities
implementation 'androidx.activity:activity-compose:1.9.2'
// Optional - Integration with ViewModels
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5'
// 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.10.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.adaptive:adaptive")
// Optional - Integration with activities
implementation("androidx.activity:activity-compose:1.9.2")
// Optional - Integration with ViewModels
implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5")
// 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ı deneme
Jetpack Compose'un özelliklerini denemenin en hızlı yolu, GitHub'da barındırılan Jetpack Compose örnek uygulamalarını denemektir. Android Studio'dan örnek bir uygulama projesini içe aktarmak için aşağıdaki adımları uygulayın:
- Android Studio'ya hoş geldiniz penceresindeyseniz Android kod örneği içe aktar'ı seçin. Açık bir Android Studio projeniz varsa menü çubuğundan Dosya > Yeni > Sana Özel Örneği İçe Aktar'ı seçin.
- Sana Özel sihirbazının üst kısmındaki arama çubuğuna "compose" yazın.
- Arama sonuçlarından Jetpack Compose örnek uygulamalarından birini seçin ve İleri'yi tıklayın.
- Uygulama adını ve Proje konumunu değiştirin veya varsayılan değerleri kullanın.
- Son'u tıklayın.
Android Studio, örnek uygulamayı belirttiğiniz yola indirir ve projeyi açar. Ardından, örneklerin her birinde MainActivity.kt
öğesini inceleyerek Jetpack Compose API'lerini (ör. geçiş animasyonu, özel bileşenler, yazı tipini kullanma ve IDE içi önizlemede açık ve koyu renkleri gösterme) görebilirsiniz.
Wear OS için Jetpack Compose'u kullanmak istiyorsanız Wear OS'te Jetpack Compose'u ayarlama başlıklı makaleyi inceleyin.
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Oluştur ile gezinme
- Oluşturma düzeninizi test etme
- Odağı algılama