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 için 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 |
|---|---|
| Circle | Haritaya daire eklemek için composable işlev. |
| GoogleMap | Harita eklemek için composable işlev. |
| GroundOverlay | Haritaya yer paylaşımı eklemek için kullanılabilen 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
Android için Haritalar SDK'sı ile Haritalar Compose kitaplığını kullanmak için:
- Android Studio Arctic Fox'u indirip yükleyin.
Android Studio'da aşağıdakileri kullanarak bir Google Haritalar projesi oluşturun:
- Empty Compose Activity (Boş Oluşturma Etkinliği) ş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.
- Dil'i Kotlin olarak ayarlayın.
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ı kaplıyor ve kamerası Singapur'un etrafında ortalanmış. Kameranın konumunu ayarlamak için bir CameraPositionState de oluşturulur ve cameraPositionState içinde sağlanır.
Örnek daha sonra haritaya işaretçi eklemek için haritanın içeriğinde Marker composable'ını çağırı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. Birleştirilebilir işlevlerin daha az kod gerektirdiğini ve haritanın yaşam döngüsüyle ilgili endişelenmenize gerek olmadığını fark edin.
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, haritada yakınlaştırma kontrollerini etkinleştirmek için geçiş, Materyal Tasarım bileşeni kullanın.
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.