Xamarin.Forms Picker ve Map İle Konum Seçimi
Mobil uygulamalarda konum seçimi yaptırmaktan bahsedeceğim. Kullanıcıdan belirli konumlar arasından seçim yaptırmak isteyebiliriz. Bunu konumları listeleyip kullanıcıdan direkt konumun ismine tıklatarak seçim yapmasını sağlayabiliriz. (Dropdown, picker vb. ) Diğer bir yöntem ise uygulamamıza bir harita yerleştirip, bu haritanın üzerine belirlediğimiz konumların Pinlerini koyarak, uygulamaya görsellik katarak yapmaktır. Bu iki yöntemi bir araya getirirsek daha da iyi olacaktır. Kullanıcı isterse konumun ismi üzerinden, isterse uygulamanın içinde var olan haritadan seçim yapabilmesi uygulamamızın kullanıcı deneyimini artıracaktır.
Xamarin’de picker ile map’ten konum seçiminin nasıl senkronize bir şekilde çalışabileceğini anlatacağım. Bunun için ilk önce Xamarin.Forms.Maps eklentisini projemize ekliyoruz.
Google’dan bir adet Google Maps API KEY alıyoruz. Android tarafta AndroidManifest.xml içine API KEY’imizi ekliyoruz.
API KEY’i buradan alabilirsiniz: https://developers.google.com/maps/documentation/android-api/signup
İOS tarafında ise AppDelegate.cs içine global::Xamarin.FormsMaps.Init(); eklememiz yeterli olacaktır.
Haritayla ilgili yapacaklarımız bu kadar.
Uygulamanın kod kısmından daha çok nasıl çalıştığından bahsedeceğim. Kodlarına github’tan erişebilirsiniz. Uygulamanın görüntülerini ve demo videosunu alt taraftan bakabilirsiniz.
Küçük bir konum seçme uygulama örneği yaptım. Uygulamada Picker var ve bizi harita sayfasına yönlendirecek Google Maps iconu var. Bu sayfada Picker kullanılarak konum seçimi yapılabilir. Seçim yapıldıktan sonra ‘Seçili Konum Bilgileri’ butonuna tıklayarak konumun bilgileri Uyarı Mesajı şeklinde gösteriliyor. Google Maps iconuna tıkladığımızda harita açılıyor, haritada Picker’daki konumlar Pin şekilde görüntüleniyor. Pinin üzerine tıkladığımızda Pine ait konumun ismini gösteren label görünüyor ve bu labela tıklandığında Uyarı Mesajı gelerek değişikliği kaydetme onayı istiyor. Değişikliğe evet dendiği takdirde artık seçili konum orası oluyor. Geri tuşuna bastığımızda Picker’ın da harita üzerinde seçtiğimiz konumu gösterdiğini göreceğiz. Aynı şekilde butona bastığımızda seçili konumun bilgileri Uyarı Mesajı şeklinde gösterilecek.
Github Linki: https://bit.ly/2eNGq84
Uygulama Videosu: