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

Xamarin – Gökhan Doğru

Xamarin.Forms – XamExxen UI

Full Kaynak Kodu & Full Source