Merhaba,

Bu makalemizde Xamarin.Forms AbsoluteLayout yapısını inceleyeceğiz.

ABSOLUTE LAYOUT

İçerisine eklenen kontrolün kendi boyutları ile orantılı olarak veya kesin değerler vererek (WidthRequest/HeightRequest), ekran üzerinde konumlandırmanızı ve boyutlandırmanızı sağlar.

Not :  RelativeLayout gibi ekran üzerindeki koordinatları kullanır (x,y)

Not : AbsoluteLayout ile RelativeLayout arasındaki temel fark;
AbsoluteLayout x, y (koordinatları), width ve height özelliklerini ekran üzerinden alır, yani sadece parent ilişkisi vardır ve tamamen bir parentview ilişkisi yoktur. Fakat Flag yardımı ile konumlandırma ve boyutlandırmayı farklılaştırabilirsiniz.

Children.Add() metodu ile içerisine istediğiniz View kontrolünü ekleyebilirsiniz. Göreceğiniz gibi metodumuzun 1'den fazla kullanımı var. (Overload)

1. View item'ı direkt olarak ekleyebiliyorsunuz
2. View item'ı Point sınıfı yardımı ile ekleyebiliyorsunuz
   1. Point yardımcı sınıfını isterseniz Size sınıfı ile beraber veya direkt x,y vererek kullanabilirsiniz
3. View item'ı Rectangle yardımcı sınıfı ile ekleyebiliyorsunuz (x,y,w,h)

Hadi kodlayalım..

Okuyalım..

AbsoluteLayout ve BoxView neslelerini oluşturdum ve oluşturmuş olduğum BoxView nesnemin BackgroundColor özelliğini "Kırmızı" olarak tanımladım.

Children.Add() metodumun ilk overload metodunu kullanıyorum. Yani.. ekranıma direkt olarak View item ekliyorum.

Tahmin edeceğiniz gibi böyle bir sonuç alıyoruz.

Soru : Eğer bir View item daha eklersem ne olur? Sonuçta AbsoluteLayout ekran üzerindeki koordinatlara göre çalışıyor ve ben koordinat belirtmedim.

Kodlarımızı ekledik ve çalıştırıyoruz..

Nasıl yani??? "Kırmızı" kutu nerde? 🙂 Bence kaybolmakta çok haklı. Çünkü AbsoluteLayout'a koordinat vermezsek, tasarladığımız her View item x=0, y=0 koordinatlarıyla ekran'a ekleniyor.

Kanıtlayalım..

Mavi kutu'ya x=10 ve y=10 koordinatlarını vererek ve Opacity değerini düşürerek aslında Kırmızı kutu'nun kaybolmadığını görüyoruz.

• Kırmızı kutu için; x = 130, y = 130, w = 150, h = 150
• Mavi kutu için; x = 150, y = 150, w = 150, h = 150
• Label için; x = 50, y = 180

Yani.. istersem sadece koordinat veya hem koordinat hem width height verebiliyorum.

Sonucu görelim..

Not : En son eklediğim View item her zaman ondan önce eklenen View item'ın üzerinde görünecektir. View item ekleme sıranızı değiştirerek bu durumu kontrol edebilirsiniz.

AbsoluteLayoutFlags

AbsoluteLayout içerisinde eklediğiniz View item'ları nasıl bir düzen biçiminde eklediğinizi belirtirsiniz. 8 adet hazır değeri vardır. Kısacası Flag kullanarak ekrana eklediğiniz bir View item'ın yüzdesel olarak mı yoksa sabit değerlerle mi düzenlenmesini istediğinizi seçersiniz. Varsayılan değeri "None"

1. All : Ortantısal olarak ekran boyutunu hesaplayarak View itemlara düzenleme yapar
2. None : Tüm eklediğiniz flag değerlerini disable eder
3. HeightProportional : Eklediğiniz View itemların height özelliğini baz alarak orantılı şekilde düzenleme yapar
4. WidthProportional : Eklediğiniz View itemların width özelliğini baz alarak orantılı şekilde düzenleme yapar
5. PositionProportional : X ve Y pozisyonlarına eşdeğer olarak düzenleme yapar
6. SizeProportional : WidthProportional ve HeightProportional değerlerine göre eşdeğer olarak düzenleme yapar
7. XProportional : Eklenen View item'ın X değerini ekranda kalan değere göre düzenleme yapar
8. YProportional : Eklenen View item'ın Y değerini ekranda kalan değere göre düzenleme yapar

Not : AbsoluteLayoutFlags kullanabilmeniz için Children.Add() metodunun 3. overload metodu olan Rectangle ile kullanımı seçmelisiniz.

SetLayoutBounds : Metodu içerisinde kullandığınız View item'a daha AbsoluteLayout'a eklemeden x,y,w,h gibi değerleri vermenizi sağlıyor.

SetLayoutFlags : Metodu içerisinde kullandığınız View item'a daha AbsoluteLayout'a eklenmeden Flag özelliğini vermenizi sağlıyor.

Bu tarz kullanımlar daha ileri seviye AbsoluteLayout kullanımlara örnek olarak gösteriliyor. Bu sayede oluşturduğunuz AbsoluteLayout nesnesine sadece eklemeniz yeterli oluyor.

Bu sayede aklınızdaki ekran tasarımlarını daha net oluşturabiliyorsunuz. Flag, kullanımı uzmanlık gerektiren fakat bir çok konuda yardımınıza koşacak bir arkadaş.

Yaptığımız işlemde flag kullanarak ekranımızı tamamen oransal olarak kullandık. Fakat Flag değiştirerek sabit değerli width ve height kullanımı da incelemiş olduk.

Not : Sabit değerler ile çalışacaksak Flag seçimimizi doğru yapmalıyız. PositionProportional ve SizeProportional bu durumlar için çok ideal. Dikkat ederseniz Mavi kutu Flag'ini değiştirdiğinizde ekranda görünmeyecektir. Çünkü Mavi kutu oransal değil, sabit değerlerle (new Size(50,50)) Bound edildi!

Not : Rectangle içerisinde Point ve Size sınıflarını kullanarak View item ekleyebiliyoruz. new Rectangle(new Point(0.1, 0.1), new Size(50, 50))

Görüşmek üzere