Xamarin.Forms – XamExxen UI

Gökhan Doğru — Thu, 28 Jan 2021 00:41:40 +0000

Herkese selamlar arkadaşlar, geçenlerde Gerald Verslius’un Xamarin hakkında paylaşmış olduğu yeni makalesini (Xamarin Community Toolkit: A Must-Have Xamarin Library) okuduktan sonra aslında kendimin de uzun zamandır Xamarin ve Xamarin.UI hakkında bir şey paylaşmadığımı, artık yeni bir şeyler yapmak gerekiyor diye kendi kendime mızmızlanırken bir reflesh ile LinkedIn anasayfamın en üstüne Ömer Aslan Exxen paylaşımı beliriverdi. Artık şans mı ? Kader mi bilemedim ama kafamda “neden olmasın?” dedim ve hemen kendisiyle iletişime geçip tasarım için izin istedim:) Sağolsun ki kullanmamda bir sakınca olmadığını belirti ve başladım kolları sıvamaya..

Eğer sizlerde bir şeyler denemek istiyorsanız dribbble profiline buradan ulaşabilirsiniz. 🙂

Peki şimdi bu tasarımı nasıl böleceğiz? nereye ne koyacağız? gelin ilk önce iskelet yapısını oluşturalım..

* Unutmayın ki Responsive bir yapı oluşturmak istiyorsanız Grid adlı arkadaşı bol bol kullanacaksınız. Yok burada bu yakıştı, şurada şu olsun gibi eylemlere girmeyiniz sonuçta bunu 5.2″ kullanan telefonlarda olacak 11″ kullanan tabletlerde olacak.. hep ben hep ben yok birazcık da biz diyin:)

Tasarımımıza geri dönecek olursak ilk önce kullanacağımız renkleri paletime (App.xaml) döküyorum.

* Ufak bir dipnot *
Label, Grid, Button vb. araçlarınıza direk olarak BackgroundColor = “#00000” veya TextColor = “#ffffff” vermek ilerde başınızı duvarlara vurmanıza neden olabilir.. neden mi? Artık çoğu uygulamalar Gece Modu olmadan kullanılmıyor. Biz bile Twitter,Instagram vb. uygulamaları Dark Theme’de kullanıyoruz bu yüzden ilerde tek tek renk değiştirmek yerine tek bir noktadan şıp diye erişebilir ve boşa gidecek saatlerinizi kurtarmış olabilirsiniz.

❌ ~~TextColor=”#FFFFFF”~~

✅ TextColor=”{StaticResource colorWhite}”

*Ufak bir dipnot 2*
Iconlar için Android veya IOS katmanına asla resim yüklemiyoruz! Icon işleri için uzun zamandır fontawesome kullanan birisi olarak son 6aydır projelerimin tüm icon ve resim ihtiyacını artık materialdesignicons ile hallediyorum. Nedir bu materialdesignicons derseniz; Projenize 879 KB ile 26.315 responsive icon ekleyebiliyorsunuz desem? peki nasıl diyecek olursanız en aşağıda kaynak 3e ve daha sonrasında kaynak 4’e bakmanızı tavsiye ediyorum.

Şimdi parça parça artık kodlarımızı oluşturmaya başlayalım.

Sorunsuz bir şekilde kodlarımızı dahil ettiğimizde MainPage.xaml bu şekilde olacaktır.

Şimdi sıra geldi SharedTransitions kullanmaya.. (kaynak 1)
* SharedTransitions’ta ki en önemli detay: Anasayfadan içerik sayfasına gidecek olan Image Transition.Name’lerin aynı olmasıdır!
Eğer iki Image Transtion.Name’leri birbirinden farklı bir isimde olursa efektsiz-düz bir geçiş yapacaktır. Buna mutlaka dikkat edin:)

SharedTransitions sorunsuz olduğunda geçişi fark edeceksiniz.

Üşengeç arkadaşlarımız için Github üzerinden projeyi indirip, istediği değişikliği yapabilir ve düzenleyebilirler.
Şuan Mac olmadığı için IOS tarafında test yapamıyorum ama kısa bir süre sonra projeyi ios-update adında bir güncelleme göndereceğim:)
IOS tarafını da kullanmak isteyen arkadaşlar Android.Image’leri IOS katmanına taşırsa sorun yaşamayacaklardır.

Full Kaynak Kodu & Full Source

• Kaynaklar
1) Xamarin.Plugin.SharedTransitions : https://github.com/GiampaoloGabba/Xamarin.Plugin.SharedTransitions
2) Xamarin.Forms 4.8 – Gradients : https://devblogs.microsoft.com/xamarin/xamarinforms-4-8-gradients-brushes/
3) Using Font Icons : Goodbye Images, Hello Fonts! : https://montemagno.com/using-font-icons-in-xamarin-forms-goodbye-images-hello-fonts/
4) Embedding Fonts in Xamarin.Forms : https://www.youtube.com/watch?v=vhl1ISTlFpA

Yeni Uygulamam [DEPREM BİLDİRİMİ]

Gökhan Doğru — Wed, 12 Feb 2020 19:19:57 +0000

Herkese selamlar….

Şöyle bi’ 2020nin ilk aylarına baktığımızda pek de iç açıcı girmediğimiz ortada..
En önemlisi 10 yıldan beri fay hattının durgunluğunu bozup ülkemizde ciddi derece de depremler yaşamaya başlaması…
Yakın bir sürede Aydın ve Marmara’da da büyük bir deprem beklenmekte, alacağımız önlemlerle inşallah 1 kişinin bile hayatını yitirmeden geçiririz..

Şimdi konumuza dönersek Google Play üzerinde araştırma sonucu ne yazık ki depremlerle ilgili AFAT dışında çokta güzel uygulamalar bulamadım, birinde biri varsa diğerinde yok hep bi yetersizlik..
Depremlerin şiddetli olduğu bu günlerde şöyle bir fikir geliştirdim;

1-) Uygulamaya ilk girdiğinde son 10 depremi karmaşık olmadan net bir şekilde listeleyebilmek,
2-) Uygulama kapalı olsa dahi; Türkiye gündeminden veya belirlediği illerden X büyüklüğünde bir deprem olduğunda haberdar olması/anlık bildirim (notificition) alması,
3-) Tartışmaların yapılabileceği bir sohbet paneli (kesinlikle goygoy olmadan, hislerini paylaşabilecekleri bir ortam *bizler tarafından sürekli denetlenecek),
4-) Büyük bir sarsıntı ve deniz seviyesi yüksekliğinde ani bir düşüş olduğu zaman bizim sunucumuza bildirim geçmesi ve bu durumu sağlık bildirimlerine bildirmemiz, *
5-) Büyük bir sarsıntı ve deniz seviyesi yüksekliğinde ani bir düşüşünde telefondan son ses müzik çalması. *

Genel düşüncem bu şekilde, önemli olarak 4 ve 5. maddelere baktığımızda olası bir enkaz durumunda kişinin enkaz altında efor kaybı yaşatmadan telefonundan SOS sesinin dışarıya vermesi ve depremzedenin daha kolay bir şekilde bulunması. (ani bir rakım düşüşü ve sarsıntıda uygulama bizim sunucumuza telefon numarasını kaydedecek ve bizimde sağlık ekiplerine bildirmemiz sağlanacak.)

Fikrimin çoğunu bitirmiş durumdayım bir kaç dizayn düzenlemesi yapıp paylaşacağım.

Uygulamada neler kullandın diye soracak olursanız buyrun arka planda kullanılan nugetler ve bazı hazır dizaynlar;

• Uygulama neyle yazıldı?
– Mobil ; Microsoft Xamarin.Forms
– Sunucuda ki Kandilli Rasathanesinden Veri Çekme ; Python ( https://github.com/emirkabal/deprem-api ) (fakat kısa süre içinde NET Core 3.0’a kendim bir bot yazacağım.)

• Uygulama kapalı olsa dahi bildirim alması (Android Service)
– Xamarin.Android.Services ve Xamarin.Forms.MessagingCenter.Subscribe<>(); kullanımı ile Samsung ,Huwai,Vestel gibi telefonlarda 24 saat boyunca uygulama kapalı olsa dahi bildirimler alıyordum fakat Xiaomi telefonlarda uygulama kapandığı an Android.Services kapanması beni mahvetti o yüzden https://github.com/shinyorg kullanmaya karar verdim 1-2 testlerim oldu tahminlerime göre bütün telefonlarda bu sorunu bununla çözmüş olacağım. (*çözemezsem değiştirmiş olurum:p)
** Özellikle bu konu hakkında ne yazık ki Türkçe ve güncel makale bulmak çok zor bunu özel bir blog yazımda en kısa ayrıntılarına kadar anlatacağım.

• Xamarin Tasarımları Nasıl Geliştirdin?
– Tasarımları sıfırdan yapmak yerine güzel UI tasarımları geliştirmenin daha iyi fikir olduğunu düşündüm. Tasarımlarım şu 2 projeden birleştirme;
a-) https://github.com/devcrux/WeatherApp
b-) https://github.com/sthewissen/KickassUI.Banking

• Extra Kullanılan Nuget Paketleri;
– Tartışma – Mesajlaşma alanı için; SignalR
– Ekranda işleme bağlı async “Lütfen Bekleyiniz” ifadesi için; AiForms.Dialogs
– Xamarin MVVM yapısı için ; FreshMvvm
– Menünün yukarda değilde aşağıda olmasını istediğim için ; LH.BottomNavigationBar.FX
– XAML üzerinde anlık değişiklikleri görebilmem için ; LiveXAML + HotReload
– JSON verileri kullanabilmek için ; Newtonsoft.Json
– Deprem bilgisini paylaş butonları; Plugin.Share
– Kullanıcıya Notification için ; Plugin.LocalNotification **
– Bazı bölgelerde kullanıcıları yönlendirme yapmadan hızlıca pop-up göstermek için ; Rg.Plugins.Popup
– Android Jobs ve Servisler için ; Shiny.Core
– Ayarları ve kullanıcı kayıtlarını kaydetmek için database ; SQLite
– Depremin olduğu noktayı göstermek için ; Xam.Plugin.ExternalMaps
– Deprem notificationunda titreşim gönderebilmek için ; Xam.Plugins.Vibrate
– Xamarin.Android tarafında binding yapabilmek için ; Xamarin.Android.Support.Core.Utils
– Klasik vazgeçilmez pluginimiz : Xamarin.Essentials (anlatmaya gerek yok mikemmel)
– Panel ve Grid yapılarının daha güzel, göze hoş gelmesi için ; Xamarin.Forms.PancakeView

xamarin design – Gökhan Doğru

Xamarin.Forms – XamExxen UI

Full Kaynak Kodu & Full Source

Yeni Uygulamam [DEPREM BİLDİRİMİ]