Jetpack Compose, kullanıcı arayüzü geliştirmeyi basitleştiren ve hızlandıran, bildirime dayalı, yerel bir kullanıcı arayüzü araç setidir. Jetpack Compose ile uygulamanızın nasıl görünmesini istediğinizi açıklarsınız ve gerisini Jetpack Compose'a bırakırsınız.
Android için Haritalar SDK'sına yönelik Haritalar Compose kitaplığı, uygulamanızı oluşturmak üzere Jetpack Compose ile kullanabileceğiniz bir dizi açık kaynak composable işlev ve veri türüdür.
Haritalar Compose kitaplığı, birçok yaygın görevi gerçekleştirmenize olanak tanıyan composable işlevler ve veri türleri içerir. Sık kullanılan composable işlevlerden ve veri türlerinden bazıları şunlardır:
| Oluşturulabilir | Açıklama |
|---|---|
| Daire | Haritaya daire eklemek için composable işlev. |
| GoogleMap | Harita eklemek için composable işlev. |
| GroundOverlay | Haritaya zemin yer paylaşımı eklemek için composable işlev. |
| MapProperties | Haritada değiştirilebilen özelliklerin veri türü. |
| MapUISettings | Haritadaki kullanıcı arayüzüyle ilgili ayarların veri türü. |
| İşaretçi | Haritaya işaretçi eklemek için composable işlev. |
| Polygon | Haritaya poligon eklemek için composable işlev. |
| Çoklu çizgi | Haritaya çoklu çizgi eklemek için composable işlev. |
| TileOverlay | Haritaya karo yer paylaşımı eklemek için composable işlev. |
Tüm composable işlevlerin ve veri türlerinin tam listesi için Haritalar Compose kitaplığı referansı'na bakın.
Şartlar
Haritalar Compose kitaplığını Android için Haritalar SDK'sı ile kullanmak için şunları yapmanız gerekir:
- Android Studio Arctic Fox'u indirip yükleyin.
Android Studio'da Google Haritalar projesi oluşturun. Bunun için:
- Empty Compose Activity şablon türü. Bu şablon, Jetpack Compose için gereken bağımlılıkları ekler.
- Minimum SDK, Android API düzeyi 23 ("Marshmallow"; Android 6.0) veya sonraki bir sürüme ayarlanmalıdır.
- Language (Dil) ayarı Kotlin olarak belirlenmelidir.
Bir API anahtarı alın ve projenize ekleyin.
Haritalar Compose kitaplığını bir sonraki bölümde açıklandığı şekilde projeye yükleyin.
Kurulum
Haritalar Compose kitaplığını Google Haritalar projenize yüklemek için:
Modül düzeyindeki
build.gradle.ktsdosyanıza aşağıdaki bağımlılıkları ekleyin:dependencies { // Modern Android projects use version catalogs to manage dependencies. To include the Maps Compose library, // first add the following to your gradle/libs.versions.toml file: // // [versions] // mapsCompose = "8.4.0" // // [libraries] // maps-compose = { module = "com.google.maps.android:maps-compose", version.ref = "mapsCompose" } // // Android Maps Compose composables for the Maps SDK for Android implementation(libs.maps.compose) // If your project does not use a version catalog, you can use the following dependency instead: // // implementation("com.google.maps.android:maps-compose:8.4.0") }
Bu değişiklikleri senkronize etmek için projenizi Android Studio'da yeniden derleyin.
Uygulamanıza harita ekleme
Aşağıdaki örnekte, harita eklemek için GoogleMap composable'ının nasıl kullanılacağı gösterilmektedir.
val singapore = LatLng(1.35, 103.87) val singaporeMarkerState = rememberUpdatedMarkerState(position = singapore) val cameraPositionState = rememberCameraPositionState { position = CameraPosition.fromLatLngZoom(singapore, 10f) } GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState, ) { Marker( state = singaporeMarkerState, title = "Singapore", snippet = "Marker in Singapore", ) }
Bu örnekte harita, izin verilen maksimum alanı kaplar ve kamerası Singapur'u ortalar. Kameranın konumunu ayarlamak için bir CameraPositionState de oluşturulur ve cameraPositionState içinde sağlanır.
Örnekte, haritaya işaretçi eklemek için harita içeriğinde Marker bileşeni çağrılır.
Bu örneği, görünümleri kullanarak harita ekleyen bir örnekle karşılaştırmak için QuickStart bölümüne bakın. Oluşturulabilir işlevlerin daha az kod gerektirdiğini ve haritanın yaşam döngüsü konusunda endişelenmeniz gerekmediğini fark edeceksiniz.
Haritada özellik ayarlama
Haritada özellikleri ayarlamak için bir MapProperties nesnesi veya kullanıcı arayüzüyle ilgili özellikler için MapUiSettings nesnesi sağlayabilirsiniz. Haritanın yeniden oluşturulmasını tetiklemek için bu nesneleri değiştirebilirsiniz.
Aşağıdaki örnekte, haritadaki yakınlaştırma kontrollerini açıp kapatmak için Materyal Tasarım bileşeni olan Switch kullanılmıştır.
var uiSettings by remember { mutableStateOf(MapUiSettings()) } var properties by remember { mutableStateOf(MapProperties(mapType = MapType.SATELLITE)) } Box(Modifier.fillMaxSize()) { GoogleMap( modifier = Modifier.matchParentSize(), properties = properties, uiSettings = uiSettings, ) Switch( checked = uiSettings.zoomControlsEnabled, onCheckedChange = { uiSettings = uiSettings.copy(zoomControlsEnabled = it) }, ) }
Sırada ne var?
- Haritalar Compose kitaplığı GitHub proje sayfasını görüntüleyin.
- Jetpack Compose belgelerini inceleyin.