Xamarin.Forms Düzen ve Color – Bölüm 14

Xamarin

Ne kadar gelişmiş grafiksel kullanıcı arayüzleri olsa da, text pek çok uygulamanın omurgasını oluşturuyor. Bununla birlikte, text en karmaşık görsel nesnelerden biri olabilir, çünkü yüzlerce yıllık tipografinin yükünü taşır. Temel düşünce, metnin okunabilir olmasıdır. Bu, metnin çok küçük olmamasını gerektirir, ancak metin çok büyük olmamalı ve ekranda çok fazla yer kaplamamalıdır.

Paragraf Wrapping

Metnin bir paragrafını görüntülemek, tek bir metin satırını görüntülemek kadar kolaydır. Metni birden çok satıra sığacak kadar uzun yapın:

Açılmış ve kapalı “akıllı tırnak işaretleri” (\ u201C ve \ u201D) ve tire çizgileri (\u2014) için embedded (gömülmüş) Unicode kodlarının kullanılmasına dikkat edin. Metnin ekranın kenarlarına yaslanmasını önlemek için Padding, sayfanın etrafında 5 birim için ayarlanmış ancak VerticalOptions özelliği sayfadaki tüm paragrafın dikey olarak ortalanması için de kullanılmıştır.

 

Metin ve arka plan renkleri

Gördüğünüz gibi Label görünümü, metni cihaza uygun bir renkte görüntüler. TextColor ve BackgroundColor adlı iki özelliği ayarlayarak bu davranışı geçersiz kılabilirsiniz. Label’ın kendisi TextColor’u tanımlar, ancak BackgroundColor öğesini VisualElement öğesinden devralır (inherit); bu, Page ve Layout’un da BackgroundColor özelliğine sahip olduğu anlamına gelir.

TextColor ve BackgroundColor, ortak renkleri elde etmek için 17 statik alanı tanımlayan bir yapı türü olan Color değerine ayarlarsınız. Bu özelliklerle önceki bölümdeki Greeting programı ile deneme yapabilirsiniz. Metni ortalamak için HorizontalTextAlignment ve VerticalTextAlignment ile birlikte kullanılan bu renklerden ikisi şunlardır:

Sonuç sizi şaşırtabilir. Bu ekran resimleri gösterdiği gibi, Label aslında (iOS durum çubuğunun da dahil olmak üzere) sayfanın tüm alanını kaplar ve HorizontalTextAlignment ve VerticalTextAlignment özellikleri, metni bu alanın içine yerleştirir.

Buna karşılık, metni renklendiren ancak metnin HorizontalOptions ve VerticalOptions özelliklerini kullanarak merkezlenmesini sağlayan bazı kodlar:

Şimdi Label, metin için gereken kadar alanı kaplar ve sayfanın merkezinde yer alan şey budur.

Metnin varsayılan görünümü önermek üzere HorizontalOptions ve VerticalOptions’ın varsayılan değeri LayoutOptions.Start değildir. Bunun yerine varsayılan değer LayoutOptions.Fill’dir. Label’ın sayfayı doldurmasına neden olan ayar budur. TextAlignment.Start’ın varsayılan HorizontalTextAlignment ve VerticalTextAlignment değeri, metnin önceki bölümdeki Greeting programının ilk sürümünde sol üstte yer almasına neden olmuştur.

Farklı efektler için HorizontalOptions, VerticalOptions, HorizontalTextAlignment ve VerticalTextAlignment’in çeşitli ayarlarını birleştirebilirsiniz.

Merak edebilirsiniz: Varsayılan (default) değerler farklı platformlar için farklı renkler oluşturduğundan Metin Rengi ve Arka Plan Renk özelliklerinin varsayılan değerleri nelerdir?

TextColor ve BackgroundColor’un varsayılan değeri aslında gerçek bir rengi temsil etmeyen, bunun yerine belirli platform için uygun metin ve arka plan renklerini referanslamak için kullanılan Color.Default adlı özel bir renk değeridir.

Rengi daha ayrıntılı olarak keşfelim.

Renk yapısı

Dahili olarak, Renk yapısı renkleri iki farklı yoldan saklar:

  • 0’dan 1’e değişen, double türündeki kırmızı, yeşil ve mavi (RGB) değerler gibi. R, G ve B olarak adlandırılan Read-only özelliklerde bu değerler ortaya çıkar.
  • Ayrıca, 0’dan 1’e değişen, double türündeki ton, doygunluk ve parlaklık değerleri olarak. Bu değerler, Hue, Saturation ve Luminosity adlı Read-only özelliklerle açıklanır.

Renk yapısı, opacity derecelerini belirten bir alfa kanalı da desteklemektedir. A adlı readonly bir özellik, şeffaflık için 0’dan opaklık için 1’e kadar değişen bu değeri ortaya çıkarır.

Bir rengi tanımlayan tüm özellikler read-only’dir. Başka bir deyişle, bir kez bir Renk değeri oluşturulduğunda değişmez olur.

Birkaç yoldan birinde bir Renk değeri oluşturabilirsiniz. Üç yapılandırıcı’ı en kolayıdır:

  • new Color(double grayShade)
  • new Color(double r, double g, double b)
  • new Color(double r, double g, double b, double a)

Argümanlar 0’dan 1’e değişebilir. Renk ayrıca aşağıdakileri içeren birkaç statik oluşturma metodunu tanımlar:

  • FromRgb(double r, double g, double b)
  • FromRgb(int r, int g, int b)
  • FromRgba(double r, double g, double b, double a)
  • FromRgba(int r, int g, int b, int a)
  • FromHsla(double h, double s, double l, double a)

Integer argümanları olan iki static metot, değerlerin RGB renklerinin geleneksel gösterimi olan 0’dan 255’e kadar olduğunu varsayıyor. Dahili olarak, constructor, integer değerlerini 255.0’a bölünerek double haline dönüştürür.

Dikkat edin! Bu kodla kırmızı renkte olduğunuzu düşünebilirsiniz:

Color.FromRgb(1, 0, 0)

Bununla birlikte, C# derleyicisi bu argümanların tam sayı olduğunu varsayacaktır. Integer FromRgb metodu çağrılır ve ilk argüman 255.0’a bölünür ve sonuç neredeyse sıfır olur. Double argüman olan metodu çağırmak istiyorsanız, daha belirgin olun:

Color.FromRgb(1.0, 0, 0)

Renk yapısı aynı zamanda, Renk türlerinden 17 public static readonly alanı tanımlar. Aşağıdaki tabloda, Renk yapısının bu alanları tanımlamak için dahili olarak kullandığı tamsayı RGB değerleri, netlik amacıyla bir şekilde yuvarlanan ilgili Renk Tonu, Doygunluk ve Parlaklık değerleri ile birlikte gösterilir:

  1. public static readonly alana Transparent adı verilir; R, G, B ve A özelliklerinin hepsi sıfır olarak ayarlanır.

İnsanlara karşılıklı olarak bir renk formüle etme fırsatı verildiğinde, HSL renk modeli genellikle RGB’den daha sezgisel olur. Renk tonu, 0’da kırmızı ile başlayan, 0.33’te yeşil, 0.67’de mavi ve 1’de kırmızıya dönen görülebilir spektrumun (ve gökkuşağının renkleri) dolaşımını sağlar.

Saturation, renkte renk tonunu gösterir, 0’dan hiç renk tonu olmaz ve gri bir tonla sonuçlanır, tam doygunluk için 1’e değişir.

Luminosity, siyahta 0’a beyazda 1’e kadar değişen bir açıklık ölçüsüdür.

Son olarak Color, Color türünün static read-only iki özel özelliğini tanımlar:

  • Default
  • Accent

Color.Default özelliği, viewlerin varsayılan renklerini tanımlamak için Xamarin.Forms içinde yoğun şekilde kullanılır. VisualElement sınıfı BackgroundColor özelliğini Color.Default olarak başlatır ve Label sınıfı TextColor özelliğini Color.Default olarak başlatır.

Bununla birlikte, Color.Default, R, G, B ve A özelliklerinin hepsi -1’e ayarlanmış olan bir Renk değeridir; bu, kendisinde hiçbir şey ifade etmeyen, ancak gerçek değerin platforma özgü olduğunu gösteren özel bir “mock (taklit)” değeri olduğu anlamına gelir.

Label ve ContentPage (ve VisualElement’den türetilen çoğu sınıflar için) Color.Default’un BackgroundColor ayarı şeffaftır. Ekrandaki arka plan rengi, sayfanın arka plan rengidir. Sayfanın BackgroundColor özelliği varsayılan olarak Color.Default ayarına sahip ancak bu değer, çeşitli platformlarda farklı bir anlam ifade ediyor. Label’ın TextColor özelliği için Color.Default öğesinin anlamı da aygıta bağlıdır.

Android, Windows ve Windows Phone aygıtlarında, uygulamanız için bu renk düzenini değiştirebilirsiniz.

Platformların renk düzenleri hakkındaki bilgilerinizi kullanabilir ve platforma özgü renkleri belirtmek için Device.OnPlatform‘u kullanabilirsiniz.

Ancak tüm platform varsayılanlarını göz ardı etmeye çalışmayın ve uygulamanızdaki tüm renkleri kendi renk düzeninize açıkça ayarlayın.

Alternatif bir metin rengi için Color.Accent özelliğini kullanmak basit bir seçenektir. IPhone ve Android platformlarında bu, varsayılan arka plana karşı görünür yapar ancak varsayılan metin rengi olmayan renk yapar.

TextColor öğesinin A özelliğinin 1’den küçük bir Renk değeri ile ayarlayarak metni yarı saydam hale getirebilirsiniz. Bununla birlikte, varsayılan metin renginin yarı saydam bir sürümünü istiyorsanız, bunun yerine Label’in Opacity özelliğini kullanın. Bu özellik VisualElement sınıfı tarafından tanımlanır ve varsayılan 1 değerine sahiptir. Farklı derecelerde saydamlık için 1’den küçük değerlere ayarlayın.

Previous
Xamarin.Forms Bölüm 13 – Text üzerinde Device.OnPlatform
Next
Xamarin.Forms Span ve Font Attributes – Bölüm 15

Leave a comment

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