Xamarin.Forms Bölüm 13 – Text üzerinde Device.OnPlatform

Xamarin

HiLabel adlı PCL bir solution başlatalım.

Şimdi projemizde her yapı için yeni bir sınıf açacağız.

  • Visual Studio’da, Solution Explorer’da HiLabel projesini sağ tıklayıp menüden Add > New Item’yi seçebilirsiniz. Add New Item iletişim kutusunun solundaki Visual C# ve CrossPlatform’u seçin ve ortadaki Forms ContentPage’ı seçin (Dikkat: Forms ContentView seçeneği de vardır. Seçmeyin!)
  • Yeni dosyaya GreetingPage.cs adını verin.

GreetingPage.cs dosyası, ContentPage’den gelen GreetingPage adlı bir sınıf için bazı iskelet koduyla başlatılacaktır. ContentPage Xamarin.Forms namespace’inde olduğundan, using dizini bu namespace’i içerir.

GreetingPage constructor’ında ve kullanım yönergelerinin çoğundaki tüm kodları silelim, böylece dosya şöyle görünür:

GreetingPage sınıfının constructor’ında, bir Label view’unu başlatır, Text özelliğini ayarlar ve bu Label örneğini, GreetingPage’in ContentPage’den devraldığı (inheritance) Content özelliğine ayarlarsak:

Şimdi, bu GreetingPage sınıfını MainPage’e ayarlamak için App.cs dosyasındaki App sınıfını değiştirelim:

Bu adımı unutmak kolaydır ve programınızın sayfa sınıfınızı tamamen görmezden geldiğinde ve hala “Welcome to Xamarin Forms!” yazarsa şaşkınlık yaşamayın.

Birçok Xamarin.Forms programcısı, sayfa constructor’larında C# 3.0 style nesne oluşturma (style of object) ve özellik başlatmayı tercih eder. Label nesnesi için bunu yapabilirsiniz. Ek olarak Label nesnesini takiben, bir çift süslü parantez virgülle ayrılmış bir veya daha fazla özellik ayarını içine alabilir.

 

İşte bir alternatif GreetingPage tanımı yaptık. Peki Content için bir alternatif geçebilir miyiz?

Bu özellik başlatma stili Label örneğinin doğrudan Content özelliğine ayarlanmasını sağlar, böylece Label bir isim gerektirmez.

Projemizi çalıştırdık, biz şuan sonucu Android’te aldığımız için sıkıntı yok fakat IOS tam bir hayal kırıklığı oluşturacaktır. Bu sorun IOS 7’den sonra durum çubuğunu uygulamanın Layout’una eklemesiyle başladı. Bu sorunu blog sayfamda ele almıştım. (Blog sayfasına git!) Blog’da bir solution göstermiştim ama bundan farklı 4-5 solution daha vardır. SAP projesi kullanıyorsanız sadece SAP için bir yol daha olacaktır bu da 5 çözüm demektir.

Çözüm 1 – Sayfada padding ekleyin

Page sınıfı, content’in içeri girmeyeceği sayfanın iç çevresinde bir alanı kapsayn Padding adlı bir özelliği tanımlar. Padding özelliği, Thickness türüdür; bu, Left, Top, Right, Bottom adında dört özelliği tanımlayan bir yapıdır. (Bu sırayı ezberlemek isteyebilirsiniz) Thickness metodu ayrıca, dört tarafın tamamında aynı dolgu miktarını ayarlamak için sadece bir argüman tanımlar veya argümanında bütün kenarlar için aynı değeri verebilirsiniz.

Bir araştırma sonucunda, iOS durum çubuğunun en fazla 20 yüksekliğinde olduğunu ortaya koyacaktır.

(Yirmi ne? diye sorabilirsiniz. Yirmi piksel mi? Aslında hayır, şimdilik sadece 20 “birim (unit)” olarak düşünün. Xamarin.Forms programlamanızın çoğunda sayısal boyutlarla uğraşmanız gerekmez, ancak ilerleyen zamanlarda piksel seviyesine inmeniz gerektiğinde rehberlik sağlayacağım.)

Durum çubuğuna şu şekilde uyum sağlayabiliriz, üstten 20 birim padding eklersek sıkıntı çözülür.

 

Şimdi greeting, sayfanın üst kısmından 20 birim aşağıda göründü:

ContentPage’deki Padding özelliğini ayarlama, iOS durum çubuğunun üzerine yazan textin sorununu çözer, ancak Android ve Windows Phone’da aynı paddinge gerek var mı? Bu paddingi yani dolguyu yalnızca iPhone’da ayarlamak için bir yol var mı?

Çözüm 2 – Sadece iOS için padding ekleyin (PCL veya SAP)

Evet! Static Device sınıfı, kodunuzun runtime’ında aygıt farklılıklarıyla uğraşmasına çok basit ve kolay bir şekilde izin veren birkaç özellik ve metod içerir:

 Device.OS özelliği, TargetPlatform numaralandırma metodu platformun üyesini return eder: iOS, Android, WinPhone veya diğer.

Bu kodu çalıştırmak için if-else ifadelerinde veya bir switch-case bloğunda kullanabilirsiniz.

Ama daha iyisi OnPlatform adlı iki metod daha da zarif çözümler sunar:

 static generic method OnPlatform<T>, iOS için birincil, Android için ikincisi ve Windows Phone için üçüncül (tüm Windows platformlarını kapsar) T tipi üç argüman alır ve çalışan platform için argümanı döndürür.

 OnPlatform static metodu, iOS, Android ve Windows Phone sırasına göre Action türü dört argümana sahiptir ve varsayılan için dördüncü olur ve çalışan platform için argümanı yürütür.

Üç platformda da aynı Padding özelliğini ayarlamak yerine, Device.OnPlatform metodunu kullanarak Padding’i yalnızca iPhone’a sınırlandırabilirsiniz:

İlk Thickness argümanı iOS için, ikincisi Android içindir ve üçüncüsü Windows Phone içindir (bu bir sılamadır, ezberlemek isteyebilirsiniz). Device.OnPlatform argümanlarını köşeli parantez içinde açıkça belirttik, ancak derleyici argümanlardan anlamışsa, bu da gerekli değildir:

Veya yalnızca bir Thickness constructor’ına sahip olursunuz ve ikinci parametre için Device.OnPlatform kullanabilirsiniz:

Padding, gerekli olduğunda programlarda genellikle bu şekilde ayarlanır. Elbette, sayfada fazladan bir padding istiyorsanız, sıfırlar için başka bazı numaraları da değiştirebilirsiniz. Bazen kenarlardaki birazcık dolgu daha cazip bir görüntü sağlar.

Padding’i ayarlama deneyimi yalnızca program IOS’ta çalışırken yürütülecektir. Tabii ki, Device.OnPlatform’a yapılan bu tek argümanla kodunuzu okumak isteyen insanlar için biraz belirsiz olabilir, dolayısıyla argümanından önce parametre adını ekleyerek bu ifadenin yalnızca iOS için olduğunu belirtebilirsiniz:

Argümanı böyle adlandırmak, C# 4.0’da tanıtılan bir özelliktir.

Device.OnPlatform metodu çok kullanışlıdır ve hem PCL hem de SAP projelerinde çalışma avantajına sahiptir. Bununla birlikte, ayrı platformlardaki API’lere erişemez. Yani yalnızca IOS için kameraya ulaşmak veya cihazın titreşimine ulaşmak gibi. Bunun için, DependencyService’e ihtiyacınız olacak ileride göreceğiz.

Çözüm 4. Label’ı sayfanın ortasına yerleştirin

IOS durum çubuğuyla kesişen textle ilgili sorun, yalnızca metnin varsayılan görünümü sol üst köşede olduğu için oluşur.

Xamarin.Forms, programın boyutları ve koordinatları içeren hesaplamalar yapmasını gerektirmeden düzeni kolaylaştırmak için bir dizi imkanı destekler. View sınıfı, bir görünümün üst öğesine (bu örnekte ContentPage) göre nasıl konumlandırılacağını belirten HorizontalOptions ve VerticalOptions adlı iki özellik tanımlar. Bu iki özellik, Xamarin.Forms’da son derece önemli bir yapı olan LayoutOptions türündedir.

Genellikle, LayoutOptions değerlerini döndürmeyi tanımladığı sekiz public static readonly alanlardan birini belirterek LayoutOptions yapısını kullanırsınız:

  •  Start
  •  Center
  •  End
  •  Fill
  •  StartAndExpand
  •  CenterAndExpand
  •  EndAndExpand
  •  FillAndExpand

Bununla birlikte, kendiniz de bir LayoutOptions değeri oluşturabilirsiniz. LayoutOptions yapısı aynı aynı kombinasyonlarla bir değer oluşturmanıza izin veren iki örnek niteliğini de tanımlar:

  • Dört üyeli bir numaralandırma türü olan LayoutAlignment türünde bir Alignment özelliği:

Start, Center, End, ve Fill.

  • Bool türünde bir Expands özelliği.

Tüm bu seçeneklerin ayrıntılı bir açıklaması da sizi bekliyor ancak şimdilik Label’ın HorizontalOptions ve VerticalOptions özelliklerini LayoutOptions değerleri tarafından tanımlanan statik alanlardan birine ayarlayabilirsiniz. HorizontalOptions için, Start sözcüğü sola, bitişik anlamına gelir; VerticalOptions için Start, top anlamına gelir ve End, bottom anlamına gelir.

HorizontalOptions ve VerticalOptions özelliklerini kullanma konusunda ustalık Xamarin.Forms layout sisteminde deneyim edinmenin önemli bir parçasıdır, ancak burada Label’i sayfanın ortasına yerleştiren basit bir örnek verilmiştir:

Metni, sayfaya göre dokuz yerden herhangi birine konumlandırmak için çeşitli HorizontalOptions ve VerticalOptions kombinasyonlarını kullanabilirsiniz.

Çözüm 5. Label’ın içindeki metni ortalayın

Label, bir paragrafa kadar metin görüntülemeyi amaçlamaktadır. Metin satırlarının yatay olarak hizalanmasını kontrol etmek çoğunlukla arzu edilir: sola yaslanmış, sağa yaslanmış veya ortalanmış.

Label görünümü, bu amaçla bir HorizontalTextAlignment özelliği ve dikey olarak metin yerleştirmek için bir VerticalTextAlignment özelliği tanımlar. Her iki özellik, sağdan sola veya yukarıdan aşağıya doğru çalışan metinler için yeterince çok yönlü olması için Start, Center, ve End adlı üyeleri olan TextAlignment numaralandırma üyesine ayarlanır. Start, sol veya üst anlamına gelir ve End, sağ veya alt anlamındadır.

IOS durum çubuğu sorununun bu son çözümü için HorizontalTextAlignment ve VerticalTextAlignment’i TextAlignment.Center olarak ayarlayın:

 

Görsel olarak, bu tek satırlık metnin sonucu HorizontalOptions ve VerticalOptions’ı Center’a ayarlamakla aynıdır ve metni, sayfanın çevresindeki dokuz farklı konumdan birinde konumlandırmak için bu özelliklerin çeşitli kombinasyonlarını da kullanabilirsiniz.

Bununla birlikte, metni ortalamak için kullanılan bu iki teknik, bir sonraki bölümde göreceğiniz üzere aslında oldukça farklıdır.

Previous
Xamarin.Forms Her Derde Deva mı?
Next
Xamarin.Forms Düzen ve Color – Bölüm 14

Leave a comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir