Jetpack Compose ile Mobil Haritaları Dönüştürme: Geliştiriciler için Google I/O'dan Analizler

Bu yayın, Temmuz 2023'te Londra'da Google Developers Group için I/O Extended'da yapılan bir konuşmaya dayanmaktadır. Konuşmanın slaytlarına ulaşabilirsiniz. Google buradan Haritalar için Jetpack Oluşturma Jetpack Compose 1.0'ın yayınlandığını hayal etmek zor. İki yıl ileri sardığımızda nedenini anlamak kolaydır. Temmuz 2021'de Google Play'deki en iyi 1000 uygulamanın %24'ünün Compose'u benimsemesinin Bütün bu heyecanın arasında, Modern Android Geliştirme'nin çok az ilgi gördüğünü düşündüğüm bir köşesi de Google Haritalar'dır. SDK'yı kullanmayalı uzun zaman oldu, bu nedenle Google Haritalar'ın çağa ayak uydurduğunu ve kendi yayınladığını görmek beni çok şaşırttı. Compose kitaplığını Bu, haritalama alanında çalışan şirketler ve mühendisler için hoş bir haber olacak. Mobil haritalama, 35,5 milyar dolarlık bir endüstridir ve %19,83'lük Bileşik Yıllık Büyüme Oranı (CAGR) ile 2028 yılına kadar 87,7 milyar dolara çıkacağı tahmin edilmektedir. Kaynak Daha büyük bir pazar, şirketlerin mobil haritalama uygulamalarından gelir elde etmesi için daha fazla fırsat anlamına gelir. Bunlar olağan kullanım durumları, yiyecek, market alışverişi teslimatı ve araç çağırma hizmetlerinden oluşur. Ancak derinlere inerseniz, hemen belli olmayan uygulamalar vardır. Bu neden önemli? Kısa bir araştırma sonucu bulabildiğim örnekleri aşağıda bulabilirsiniz: Mobil haritalar Akıllı Şehirler için harikadır; bir şehrin kalp atışını yönetmeye yardımcı olur ve verileri, zorlukları daha iyi anlayıp bunlara tepki verecek şekilde görselleştirir. Şehir planlamacıları, acil müdahale kuruluşları veya sıradan sakinler için kullanışlıdır. Kaynak yönetimi aynı zamanda haritalama çözümlerinden de yararlanır. Tarımdan balıkçılığa, madencilikten ormancılığa kadar uzanan haritalar, bu iş kolunda çalışan kişilere malzemeleri sürdürülebilir bir şekilde hasat etmek için doğru kararları verme perspektifini sağlar. Ulaşım büyük ölçüde haritalama teknolojisine dayanmaktadır. Yalnızca Google Haritalar veya Uber gibi tüketici uygulamaları değil, aynı zamanda bir işletmenin araç filosunun nerede bulunduğunu anlamak gibi işletme düzeyindeki işlevler de vardır. Ulaştırma kurumları ayrıca trafiği yönetmek ve akışı kolaylaştırmak için trafiğin nereye yönlendirileceği konusunda karar verilmesine yardımcı olmak için haritaları kullanır. Son olarak, iklim değişikliği ve havanın giderek daha öngörülemez hale gelmesiyle birlikte haritalar, meteoroloji kurumlarının, acil müdahale birimlerinin ve yaban hayatı koruma uzmanlarının dünyamızın nasıl değiştiğini ve bunu azaltmak için olumlu adımlar atmak için neler yapabileceğimizi anlamalarına olanak tanıyor. , , , , , Kaynaklar: Mordor Intelligence GMInsights Allied Market Research EMR Research Google Earth Sosyal Yardımı Research & Markets Dünya giderek daha fazla veri sağlarken, bu verileri bir haritaya nasıl yerleştireceğinizi öğrenmenin tam zamanı. Bunu yapalım ve koda geri dönelim. Compose için Google Haritalar'ı kullanma Compose için Google Haritalar aşağıdaki bağımlılıklara dayanır: dependencies { implementation "com.google.maps.android:maps-compose:2.11.4" implementation "com.google.android.gms:play-services-maps:18.1.0" // Optional Util Library implementation "com.google.maps.android:maps-compose-utils:2.11.4" implementation 'com.google.maps.android:maps-compose-widgets:2.11.4' // Optional Accompanist permissions to request permissions in compose implementation "com.google.accompanist:accompanist-permissions:0.31.5-beta" } Compose için Google Haritalar, Google Haritalar SDK'sının üzerine inşa edilmiştir; dolayısıyla Compose kitaplığını ve Haritalar SDK'sını içe aktarmanız gerekir. Oluşturma kitaplığı bunların çoğunu Oluşturulabilir Öğeler'de kapsadığından, Google Haritalar SDK'sındaki çoğu nesneyi kullanmanıza gerek kalmayacaktır. Yardımcı programlar ve widget kitaplıkları isteğe bağlı bir bağımlılıktır. Utils kitaplığı, işaretleyicileri haritalarda kümeleme yeteneği sağlarken widget'lar ek kullanıcı arayüzü bileşenleri sağlar. Daha sonra bunların kullanıldığını göreceksiniz. Bu gönderiye, haritalarda sıklıkla kullanılan bir izin olan konum izinlerinin nasıl talep edileceğini göstermek için Accompanist'in istek izinleri kitaplığını ekledim. Accompanist, Google'ın henüz Jetpack Compose'un parçası olmayan özellikleri deneyip geri bildirim toplamasına yönelik deneysel bir kitaplıktır. Son olarak gitmeniz, bir Google Haritalar SDK API anahtarına kaydolmanız ve bunu projenize eklemeniz gerekir. Bunun nasıl yapılacağına ilişkin bir kılavuz bulunmaktadır. Google Geliştirici Konsolu'na Google Haritalar Geliştirici Dokümanları'nda Google Developer Console'da API anahtarınızı kilitleyerek yalnızca uygulamanızla çalışmasını sağlayın. Bu, yetkisiz kullanımın önlenmesini sağlar. Güvenlik İpucu: Harita Gösterme Bir haritayı göstermek aşağıdaki kadar basittir: setContent { val hydePark = LatLng(51.508610, -0.163611) val cameraPositionState = rememberCameraPositionState { position = CameraPosition.fromLatLngZoom(hydePark, 10f) } GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState) { Marker( state = MarkerState(position = hydePark), title = "Hyde Park", snippet = "Marker in Hyde Park" ) } } Bir alanın konumunu içeren bir nesnesi oluşturun ve kameranın başlangıç konumunu ayarlamak için bunu ile birlikte kullanın. Bu yöntem, ellerinizi kullanarak veya programlı olarak hareket ettiğinizde haritanın konumunu . Bu yöntem olmadan Compose, her durum değişikliğinde haritayı başlangıç konumuna yeniden hesaplar. LatLng rememberCameraPositionState hatırlar Ardından, bir oluşturun ve seçtiğiniz bir değiştiriciyi ve kamera durumunu iletin. ayrıca ek şekillendirilebilir öğeler aktarmak için bir Slot API'si de sağlar; bu şekillendirilebilir öğeler, harita üzerinde çizmek istediğiniz şeylerdir. GoogleMap GoogleMap Bir oluşturulabilir ekleyin, ardından içindeki işaretçinin konumunu içeren bir ekleyin. Son olarak işaretçinin başlığını ve açıklamasını ekleyin. Marker MarkerState Bunu çalıştırmak, Hyde Park'ta bir işaretleyiciyle Batı Londra'nın güzel bir havadan görüntüsünü verir. İşaretleyici Penceresini Özelleştirme Composable'ı kullanarak işaretçinin penceresini özelleştirebilirsiniz. Bunun aynı zamanda slot tabanlı bir API'si vardır; bu, özel kullanıcı arayüzünüzü pencerede oluşturmak için oluşturulabilir öğelerinizi aktarabileceğiniz anlamına gelir. MarkerInfoWindowContent setContent { val hydePark = LatLng(51.508610, -0.163611) val cameraPositionState = rememberCameraPositionState { position = CameraPosition.fromLatLngZoom(hydePark, 10f) } GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState) { MarkerInfoWindowContent( state = MarkerState(position = hydePark), title = "Hyde Park", snippet = "Marker in Hyde Park" ) { marker -> Column(horizontalAlignment = Alignment.CenterHorizontally) { Text( modifier = Modifier.padding(top = 6.dp), text = marker.title ?: "", fontWeight = FontWeight.Bold ) Text("Hyde Park is a Grade I-listed parked in Westminster") Image( modifier = Modifier .padding(top = 6.dp) .border( BorderStroke(3.dp, color = Color.Gray), shape = RectangleShape ), painter = painterResource(id = R.drawable.hyde_park), contentDescription = "A picture of hyde park" ) } } } } Bunu çalıştırmak, üzerine dokunduğunuzda işaretçinin üzerindeki özel pencereyi gösterir. Birden fazla işaretçi gösteriliyor Birden fazla işaretçiyi göstermek, ihtiyacınız olduğu kadarını eklemek kadar basittir. Batı Londra'daki birkaç farklı park için işaretçiler ekleyelim. setContent { val hydePark = LatLng(51.508610, -0.163611) val regentsPark = LatLng(51.531143, -0.159893) val primroseHill = LatLng(51.539556, -0.16076088) val cameraPositionState = rememberCameraPositionState { position = CameraPosition.fromLatLngZoom(hydePark, 10f) } GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState) { // Marker 1 Marker( state = MarkerState(position = hydePark), title = "Hyde Park", snippet = "Marker in Hyde Park" ) // Marker 2 Marker( state = MarkerState(position = regentsPark), title = "Regents Park", snippet = "Marker in Regents Park" ) // Marker 3 Marker( state = MarkerState(position = primroseHill), title = "Primrose Hill", snippet = "Marker in Primrose Hill" ) } } Kodu çalıştırın ve işaretçilerinizin haritada göründüğünü göreceksiniz. Kümeleme İşaretleyicileri Bir harita kısa sürede meşgul olabilir. 300 işaretçi göstermeye çalışıyorsanız kullanıcının neler olduğunu anlaması görsel olarak zor olacaktır. Google Haritalar ve cihazınız da size teşekkür etmeyecektir çünkü oluşturmak zorunda kalacak, bu da performansı ve pil ömrünü etkileyecektir. her bir işaretçiyi Bunun çözümü, birbirine yakın işaretleyicileri tek bir işaretleyicide gruplandıran bir teknik olan . Bu Kümeleme yakınlaştırma düzeyinde gerçekleşir. Haritayı uzaklaştırdıkça işaretçiler bir küme halinde gruplanacak, yakınlaştırdıkça küme ayrı işaretçilere bölünecektir. Kümeleme'dir Compose için Google Haritalar, bunu bir oluşturulabilir aracılığıyla kullanıma hazır bir şekilde sağlar. Kümelemenin gerçekleşmesi için karmaşık sıralama veya filtreleme yazmaya gerek yoktur. Clustering setContent { val hydePark = LatLng(51.508610, -0.163611) val regentsPark = LatLng(51.531143, -0.159893) val primroseHill = LatLng(51.539556, -0.16076088) val crystalPalacePark = LatLng(51.42153, -0.05749) val greenwichPark = LatLng(51.476688, 0.000130) val lloydPark = LatLng(51.364188, -0.080703) val cameraPositionState = rememberCameraPositionState { position = CameraPosition.fromLatLngZoom(hydePark, 10f) } GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState) { val parkMarkers = remember { mutableStateListOf( ParkItem(hydepark, "Hyde Park", "Marker in hyde Park"), ParkItem(regentspark, "Regents Park", "Marker in Regents Park"), ParkItem(primroseHill, "Primrose Hill", "Marker in Primrose Hill"), ParkItem(crystalPalacePark, "Crystal Palace", "Marker in Crystal Palace"), ParkItem(greenwichPark, "Greenwich Park", "Marker in Greenwich Park"), ParkItem(lloydPark, "Lloyd park", "Marker in Lloyd Park"), ) } Clustering(items = parkMarkers, onClusterClick = { // Handle when the cluster is tapped }, onClusterItemClick = { marker -> // Handle when a marker in the cluster is tapped }) } } data class ParkItem( val itemPosition: LatLng, val itemTitle: String, val itemSnippet: String) : ClusterItem { override fun getPosition(): LatLng = itemPosition override fun getTitle(): String = itemTitle override fun getSnippet(): String = itemSnippet } veri sınıfının eklendiğine dikkat edin. Buna ihtiyacımız var çünkü bir oluşturulabilirine aktarılan öğelerin arayüzüne uyması gerekiyor. Arayüz, Kümeye her işaretçi için konumu, başlığı ve parçacığı sağlar. ParkItem Clustering ClusterItem Yakınlaştırın ve uzaklaştırın; kümelemeyi çalışırken göreceksiniz. Konum İzni Alma Haritalar ve kullanıcı konumu genellikle el ele gider, bu nedenle bazı haritalama uygulamalarının kullanıcının konumu için izin istemesi mantıklıdır. Bunu yaparsanız ; konum izni, bir kullanıcıdan alınabilecek en hassas izinlerden biridir. kullanıcının iznine saygı gösterin Kullanıcıyı bu izne neden ihtiyaç duyduğunuz konusunda bilgilendirdiğinizden ve bu izni vermenin faydalarını aktif olarak gösterdiğinizden emin olun. Uygulamanız kısmen izne ihtiyaç duymadan çalışıyorsa bonus puanlar. Google, konusunda bazı harika kılavuzların yanı sıra, için ayrı bir kılavuz da sağlar. kullanıcıların konumunun nasıl ele alınacağı arka planda konum verilerine erişim Böylece gerekli incelemeyi yaptınız ve konuma erişim için kullanıcının iznine ihtiyacınız olduğuna karar verdiniz. Accompanist'teki izin kitaplığıyla bunu şu şekilde yapabilirsiniz: // Don't forget to add the permissions to AndroidManifest.xml val allLocationPermissionState = rememberMultiplePermissionsState( listOf(android.Manifest.permission.ACCESS_COARSE_LOCATION, android.Manifest.permission.ACCESS_FINE_LOCATION) ) // Check if we have location permissions if (!allLocationPermissionsState.allPermissionsGranted) { // Show a component to request permission from the user Column( horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center, modifier = Modifier .padding(horizontal = 36.dp) .clip(RoundedCornerShape(16.dp)) .background(Color.white) ) { Text( modifier = Modifier.padding(top = 6.dp), textAlign = TextAlign.Center, text = "This app functions 150% times better with percise location enabled" ) Button(modifier = Modifier.padding(top = 12.dp), onClick = { allLocationPermissionsState.launchMultiplePermissionsRequest() }) { Text(text = "Grant Permission") } } } Eşlikçi aracılığıyla, uygulamanın iznine erişimi olup olmadığını veya İngilizce dilinde yüksek düzeyde GPS doğruluğu olup olmadığını kontrol ediyoruz. Aksi halde izin isteyemeyeceğiniz için, istenen izinleri Android bildirimine dahil etmek önemlidir. ACCESS_FINE_LOCATION Android sistemi ve Google Play mağazası da uygulamanızın nasıl çalıştığını anlamak ve kullanıcıları bilgilendirmek için manifest'i kullanır. İzin verilmezse, izin ihtiyacını açıklayan küçük bir iletişim kutusu ve sistem aracılığıyla izin isteğini başlatmak için bir düğme gösterilir. Haritayı Canlandırmak Çoğu harita uygulaması kullanıcının haritayı dokunarak taşımasını gerektirirken, Compose için Google Haritalar, haritayı programlı olarak taşımak için API'ler sağlar. Bir etkinliğe yanıt olarak belirli bir alana gitmek istiyorsanız bu yararlı olabilir. Bu örnekte, işaretçi koleksiyonumuz aracılığıyla uygulamada yavaşça gezineceğiz. Box(contentAlignment = Alignment.Center) { GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState ) { Clustering(items = parkMarkers, onClusterClick = { // Handle when the click is tapped false }, onClusterItemClick = { marker -> // Handle when the marker is tapped }) LaunchedEffect(key1 = "Animation") { for (marker in parkMarkers) { cameraPositionState.animate( CameraUpdateFactory.newLatLngZoom( marker.itemPosition, // LatLng 16.0f), // Zoom level 2000 // Animation duration in millis ), delay(4000L) // Delay in millis } } } } Buradaki anahtar kısım içindeki koddur. Uygulama, her işaretçi için işaretçiye gitmek üzere bir çağrısı ayarlar. Kamera bu bilgiyi kullanılarak oluşturulan bir kamera güncellemesi yoluyla alır. LaunchedEffect cameraPositionState.animate() CameraUpdateFactory.newLatLngZoom() Bu yöntem, haritanın yakınlaştırma düzeyini belirten bir kayan nokta olan ve animasyonun süresini ayarlamak için uzun bir değeri alır. LatLng Son olarak, animasyonlar arasında boşluk bırakmak için her animasyonun arasına 4 saniyelik bir duraklama eklemek üzere kullanırız. delay() Sokak Görünümü Gösteriliyor Compose için Google Haritalar'ın size yardımcı olduğu yalnızca bir hava haritası değildir. Uygulamaların, bir konumun 360 derece görünümünü gösteren erişmesine de izin verebilirsiniz. Bunu oluşturulabilir özelliğini kullanarak yaparsınız: Street View'a StreetView var selectedMarker: ParkItem? by remember { mutableStateOf(null) } if (selectedMarker != null) { StreetView(Modifier.fillMaxSize(), streetViewPanoramaOptionsFactory = { StreetViewPanoramaOptions().position(selectedMarker!!.position) }) } else { Box(contentAlignment = Alignment.Center) { GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState ) { Clustering(items = parkMarkers, onClusterClick = { // Handle when the cluster is clicked false }, onClusterItemClick = { marker -> // Handle when a marker in the cluster is clicked selectedMarker = marker false }) } } } Bu örnekte, bir işaretçiye her dokunulduğunda değişkenini ayarlıyoruz. Bir işaretçi seçilirse, işaretçinin konumundan geçen Sokak Görünümü'nü gösteririz. selectedMarker Şekil Çizimi Haritaya kendi şekillerinizi ve açıklamalarınızı çizmek isteyebilirsiniz. Compose için Google Haritalar bunu yapmak için bir dizi oluşturulabilir öğe sağlar; bu yazıda oluşturulabilir öğesini kullanacağız. Circle Uygulamanız, kullanıcının konumundaki değişikliklere tepki vermek için Geofence kullanıyorsa daire iyi bir şekildir. Bir daire, coğrafi çitin aktif olduğu alanı temsil edebilir. Box(contentAlignment = Alignment.Center) { GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState ) { Clustering(items = parkMarkers, onClusterClick = { // Handle when the cluster is clicked false }, onClusterItemClick = { marker -> // Handle when a marker in the cluster is clicked selectedMarker = marker false }) } } parkMarkers.forEach { Circle( center = it.position, radius = 120.0, fillColor = Color.Green, strokeColor = Color.Green ) } Burada işaretçilerimizin her biri için bir daire oluşturduk. Bir daire oluşturmak, ona dairenin yarıçapının bir konumunu ve boyutunu aktarmayı içerir. Ayrıca kenarlığın rengini ayarlamak ve dairenin rengini doldurmak için iki isteğe bağlı parametre kullanırız. ScaleBar'ı Gösterme İyi bir harita genellikle haritadaki alan ölçüsünün mesafeye eşdeğer olduğunu gösteren açıklamalar ve diyagramlarla birlikte gelir. Her harita aynı ölçüm biçimini kullanmayabileceğinden, bu size haritada yer alan alanlar hakkında bir fikir verir. Yakınlaştırıp uzaklaştırabilen dijital haritalar için bu, temsil edilen mesafelerin dinamik olarak değişebilmesi nedeniyle belirli bir karmaşıklık katmanı ekler. Neyse ki Compose için Google Haritalar ihtiyacınızı karşılıyor. Widget kitaplığını kullanarak ve oluşturulabilir öğelerine erişim kazanırsınız. Bunlar, haritanın üst kısmında yer alan ve kullanıcılara yakınlaştırma düzeyine bağlı olarak değişen bir mesafe ölçüsü sağlayan kullanıcı arayüzü bileşenleridir. DisappearingScaleBar ScaleBar Box(contentAlignment = Alignment.Center) { GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState ) { // You can also use ScaleBar DisappearingScaleBar( modifier = Modifier .padding(top = 5.dp, end = 15.dp) .align(Alignment.TopStart), cameraPositionState = cameraPositionState ) Clustering(items = parkMarkers, onClusterClick = { // Handle when the cluster is clicked false }, onClusterItemClick = { marker -> // Handle when a marker in the cluster is clicked selectedMarker = marker false }) } } parkMarkers.forEach { Circle( center = it.position, radius = 120.0, fillColor = Color.Green, strokeColor = Color.Green ) } Şekillendirilebilir öğeyi ekledikten sonra, haritanın üst kısmında yakınlaştırma düzeyine bağlı olarak değişen bir ScaleBar elde edersiniz. Yardım ve Destek Compose için Google Haritalar, Google Haritalar ile çalışmanın harika bir yoludur ve öğrenecek daha çok şey var. Yardıma ihtiyacınız olursa önerebileceğim birkaç yer var: : Kitaplığın kaynak kodunu içeren depo. Kitaplığın nasıl kullanılacağına ve ayrıca hata raporlarınızı ve katkılarınızı nereye gönderebileceğinize ilişkin kod örnekleri içerir Compose Repo için Google Haritalar : Android için Google Haritalar'ın arkasındaki kavramları öğrenmek için gidilecek yer. Bunlar yüksek düzeydedir ve Compose kütüphanesini kullanmazlar, ancak yine de arka planda kullanıldıkları için bunları bilmek önemlidir. Android için Google Haritalar Web Sitesi Google Haritalar için resmi Discord sunucusu. Burada birden fazla platform için Google Haritalar'ı tartışan, yardım isteyen ve teklif eden ve kendi çalışmalarını sergileyen kişileri bulabilirsiniz. Google Haritalar Platformu Discord