Xamarin.Forms – Scroll (Bölüm 17)

Xamarin

Content’ı Kaydırmak

Bir Xamarin.Forms programının .NET temel sınıf kütüphanesine erişebildiğini ve Xamarin.Forms.Core gibi bir derlemede tanımlanan tüm sınıflar ve yapılar hakkında bilgi edinmek için .NET Reflection (yansımasını) kullanabileceğini unutmayın. Bu, static alanların ve Renk yapısının elde edilmesinin otomatikleştirilebileceğini önermektedir.

Çoğu .NET yansıması bir Type nesnesi ile başlar. C# typeof operatörünü kullanarak herhangi bir sınıf veya yapı için bir Type nesnesi edinebilirsiniz. Örneğin, typeof(Color), Renk yapısı için bir Type nesnesi döndürür.

Reflection için en iyi örneğin bu makalede ele alındığını düşünüyorum. Bu makaleden yararlanarak çok kolay otomatik renkleri elde edebilirsiniz.

PCL’de bulunan .NET sürümünde, GetTypeInfo adlı Type sınıfı için bir uzantı (extension) metodu, ek bilgi elde edilebilecek bir TypeInfo nesnesi döndürür. Buna rağmen aşağıda gösterilen uygulamada gerekli değildir; GetRuntimeFields ve GetRuntimeProperties adlı, Type sınıfı için tanımlanan diğer extension metodlarına ihtiyaç duyar. Bunlar, FieldInfo ve PropertyInfo nesnelerinin koleksiyonları biçiminde alanların ve özelliklerin türünü (type) döndürür. Bunlardan, properties’in isimleri ve değerleri (values) elde edilebilir.

Bu ReflectedRenkler uygulaması tarafından gösterilmiştir. ReflectedRenkler.cs dosyası, System.Reflection için bir using komutu gerektirir.

İki ayrı foreach ifadesinde ReflectedRenkler sınıfı, Renk yapısının tüm alanlarını ve özelliklerini döndürür. Renk değerlerini döndüren tüm public static üyeler için iki döngü, CreateColorLabel öğesini çağırarak Renk değeri ve adı içeren bir Label oluşturur ve bu Label’i StackLayout öğesine ekler.

Uygulama, tüm public static alanları ve özellikleri dahil ederek, önceki programda görüntülenen 17 static alanla birlikte Color.Transparent, Color.Default ve Color.Accent’ı listeler. Ayrı bir CreateColorLabel metodu, her öğe için bir Label view’ü oluşturur. ReflectedRenkler sınıfının tam listesi:

Constructor’ın sonuna doğru StackLayout, ScrollView’in Content özelliğine ayarlanır ve daha sonra sayfanın Content özelliğine ayarlanır.

Sınıftaki CreateColorLabel metodu, zıt bir arka plan ayarlayarak her rengin görünür olmasını sağlamaya çalışır. Metod, kırmızı, yeşil ve mavi bileşenlerin standart ağırlıklı ortalaması temel alınarak bir parlaklık değeri hesaplar ve daha sonra beyaz veya siyah bir arka plan seçer.

Bu teknik Transparent için işe yaramayacak, böylece madde hiç görüntülenemiyor ve metod Color.Default’u özel bir case olarak ele alıyor ve bir Color.Default arka planına karşı bu rengi görüntüliyor (ne olursa olsun).

İşte estetik olarak tatmin edici olmak için hala oldukça kısa olan sonuçlar:

#ThanksMicrosoft

StackLayout ScrollView’ın bir childi olduğu için ekranı kaydırabilirsiniz.

StackLayout ve ScrollView sınıf hiyerarşisinde ilişkilidir. StackLayout, Layout <View> ‘dan türetilir ve Layout <T> sınıfının StackLayout öğesinin inherit ettiği Children özelliğini tanımladığını hatırlarsınız. Jenerik Layout <T> sınıfı, nesnel olmayan Layout sınıfından türer ve ScrollView de bu nongeneric Layout’dan türemiştir. Teorik olarak ScrollView, yalnızca bir çocuğu olsa bile, bir layout nesnesi türüdür.

Ekran görüntüsünde görebileceğiniz gibi, Label’in arka plan rengi StackLayout’un tam genişliğine kadar uzanır, yani her Label’ın StackLayout kadar geniş olduğu anlamına gelir.

Xamarin.Forms layoutunu daha iyi anlamak için biraz uğraşalım. Bu uğraşlar için, geçici olarak StackLayout ve ScrollView’e farklı arka plan renkleri vermek isteyebilirsiniz:

Layout nesneleri genellikle varsayılan olarak saydam arka planlara sahiptir. Ekrandaki bir alanı kaplamalarına rağmen doğrudan görünür değildirler. Layout nesnelerine geçici renkler vermek, tam olarak nerede olduklarını görmek için harika bir yoldur. Karmaşık layoutlar için iyi bir hata ayıklama tekniğidir.

Mavi StackLayout’un tek tek Label görünümleri arasındaki boşluğa baktığını göreceksiniz. Bu, StackLayout’un varsayılan Spacing özelliğinin bir sonucudur. StackLayout, şeffaf bir arka plana sahip olan Label için Color.Default aracılığıyla da görünür.

LayoutOptions.Start için tüm Label görünümlerinin HorizontalOptions özelliğini ayarlamayı deneyin:

Artık StackLayout’un mavi arka planı daha belirgindir çünkü tüm Label görünümleri yalnızca metnin gerektirdiği yatay alanı kaplar ve hepsi sol tarafa itilir. Her Label görünümü farklı bir genişlikte olduğundan, bu ekran ilk sürüme göre daha kötü görünüyor!

Şimdi, HorizontalOptions ayarını Label’dan kaldırın ve bunun yerine StackLayout üzerinde bir HorizontalOptions ayarlayın:

Şimdi StackLayout, en geniş Label kadar geniş (en azından iOS ve Android’de) ve ScrollView’un kırmızı arka planı görünür durumda.

Bir görsel nesneler ağacı oluşturmaya başladığınızda, bu nesneler bir üst-alt ilişki kazanır. Bir üst nesne, bazen çocuğunun (child) veya çocuklarının (children) kapsayıcısı olarak da adlandırılır; çünkü çocuğun konumu ve boyutu üstündedir.

Varsayılan olarak, HorizontalOptions ve VerticalOptions, her alt görünüm üst konteyneri doldurmaya çalıştığı anlamına gelen LayoutOptions.Fill olarak ayarlanır. Arka plan rengi olmaksızın bir Label bile ana konteyneri doldurur, ancak Label yalnızca gerektirdiği kadar yer kaplar gibi görünür.

Bir görünümün HorizontalOptions veya VerticalOptions özelliğini LayoutOptions.Start, Center veya End olarak ayarlamak, görünümü, yalnızca görünümün gerektirdiği boyuta (yatay olarak, dikey olarak veya her ikisi) daraltmaya zorlar.

Bir StackLayout, çocuğunun dikey (vertical) boyutu üzerinde aynı etkiye sahiptir: StackLayout’daki her çocuk, yalnızca gereken yüksekliği kaplar. Bir StackLayout’un bir alt öğesindeki VerticalOptions özelliğini Start, Center veya Finish olarak ayarlamanın hiç bir etkisi olmamıştır! Bununla birlikte, çocuklara LayoutOptions.Fill dışında bir HorizontalOptions özelliği verildiğinde, çocuk görünümleri hala StackLayout genişliğini dolduracak şekilde genişler.

Bir StackLayout ContentPage’in Content özelliğine ayarlanırsa, StackLayout’da HorizontalOptions veya VerticalOptions ayarlayabilirsiniz. Bu özelliklerin iki etkisi vardır: ilk olarak, StackLayout genişliğini veya yüksekliğini (veya her ikisini birden) çocuklarının boyutuna küçültür; ve ikinci olarak, StackLayout’un sayfaya göre konumlandırıldığı yeri yönetirler.

StackLayout, ScrollView içeriyorsa, ScrollView, StackLayout öğesinin yalnızca çocuklarının yüksekliklerinin toplamı kadar uzun olmasını sağlar. ScrollView, dikey olarak StackLayout öğesinin nasıl kaydırılacağını belirleyebilir. Genişliği ve yatay yerleşimi denetlemek için StackLayout’daki HorizontalOptions özelliğini ayarlamaya devam edebilirsiniz.

Bununla birlikte, VerticalOptions öğesini ScrollView’da LayoutOptions.Start, Center veya End olarak ayarlamanız gerekir.

ScrollView’de bir StackLayout koymak normal olsa da, bir ScrollView öğesini bir StackLayout’a koymak pek doğru görünmemektedir. Teorik olarak, StackLayout yalnızca gerektiren bir yüksekliğe sahip olmak için ScrollView’u ayarlar.

Bir ScrollView öğesini Xamarin.Forms layout ilkelerine tam uyum sağlayan bir StackLayout’a koymanın uygun bir yolu vardır.

Önceki yaptığımız, dikey olarak yönlendirilmiş StackLayout ve ScrollView öğeleri için geçerlidir. StackLayout, StackOrientation numaralandırma-Dikey (Vertical) (varsayılan) veya Yatay’ın (Horizontal) bir üyesine ayarlayabileceğiniz Orientation adlı bir özelliğe sahiptir. Benzer şekilde, ScrollView, ScrollOrientation numaralandırma üyesine ayarladığınız bir Orientation özelliği de vardır. Bunu deneyelim:

Şimdi Label görünümleri yatay olarak stacklenir ve ScrollView sayfayı dikey olarak doldurur, ancak dikey olarak ScrollView’ı dolduran StackLayout’un yatay kaydırılmasına izin verir:

Diğer makalede, devamında görüşmek üzere.

 

Previous
Xamarin.Forms Bölüm 16 – Color Üzerinden Stacklayout ve Stack’s View
Next
Arduino için Visual Studio Code – (Visual Studio Code for Arduino)

Leave a comment

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