Merhaba,

Xamarin ile uygulamalarımızı geliştirirken, ekran tasarımları ve cihazlara özel ekran boyutları geliştiricileri biraz korkutmakta. Xamarin'in bize bu konuda sağladığı yapılar ile güzel ve esnek tasarımlar yapıp, cihazlara özel ekran boyutlarını ve kullanım tercihleri olan dikey ve yatay kullanımları kolayca kontrol edebiliyoruz.

Xamarin bize 4 farklı ekran yapısı sunmakta bunlar;

StackLayout : Yatay veya dikey olarak tek boyutlu bir yapıdır. İçerisine eklenen kontrollerin(Button, Label, Entry gibi.) margin ve padding gibi değerlerini kolayca ayarlayabilirsiniz. StackLayout diğer ekran yapılarına göre kullanımı en kolay olan yapıdır.

RelativeLayout : Herhangi bir ekran boyutundan bağımsız olarak Constraints, Parent ve ParentView ilişkisi ile kontrollerinizi konumlandırabileceğiniz bir yapıdır. Kullanım yapısı ile StackLayout ve AbsoluteLayout kullanımlarından biraz daha karışıktır.

AbsoluteLayout : Sayfa üzerindeki kontrolleri birbirinden bağımsız olarak sayfa'nın x ve y değerine göre (sayfa koordinatlarına göre) konumlandırabileceğiniz bir yapıdır. Projenizde x ve y koordinatlarına göre tasarım yapacaksanız AbsoluteLayout kullanabilirsiniz.

Grid : Satır ve sütun mantığı ile oluşturulan bir yapıdır. Eklediğiniz ekranda 1. satır 1. sütun Button olsun ve 1. satır 2. sütun Entry olsun diyebiliyorsunuz. Kullanımı basir bir yapıdır.

StackLayout

Orientation : Yön verme ve hizalama için kullanılır. Kullandığınız StackLayout içerisindeki objeleri yatay veya dikey olarak hizalamanınızı sağlamaktadır.

HorizontalOptions : Kullandığınız obje'nin içerisindeki objeleri yatay olarak nasıl hizalayacağınızı belirtirsiniz.

VerticalOptions : Kullandığınız obje'nin içerisindeki objeleri dikey olarak nasıl hizalayacağınızı belirtirsiniz.

HorizontalOptions ve VerticalOptions 8 seçeneği vardır;

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

Bu özellikler ile objelerinizi ekranda nerden başlatacağınızı söylersiniz. "AndExpand" kullandığınız yerlerde nerden başlatıyorsanız içerisindeki objenizin kaplayacağı alan kadar ekranın sonuna doğru genişletecektir.

Not: Bu kavramları örneklerinizde değişik kombinasyonlarda deneyerek kullanın ve aralarındaki farkları o görerek öğrenmeye çalışın.

Padding : StackLayout içerisindeki tüm objelerin bu özellikten etkileneceğini unutmayalım!

CSS üzerindeki padding ile Xamarin içerisinde kullanacağımız padding biraz farklı çalışıyor.

CSS = Top, Right, Bottom, Left olarak çalışırken, Xamarin = Left, Top, Right, Bottom olarak çalışmaktadır.

Spacing : StackLayout varsayılan olarak içerisine eklenen kontrollerin arasına 6px boşluk ekler. Bu değeri istediğiniz gibi ayarlayabilirsiniz.

Yaptığımız tasarımdaki detayları okumak gerekirse;

Button üzerinde eklediğimiz VerticalOptions="Start" verdiğimizde ekranımızın dikey olarak en üstünde duracağını ve HorizontalOptions="FillAndExpand" ile Button'un yatayda ekranı kaplamasını sağladık.

Eğer bu özelliği bu şekilde kullanmamış olsaydık ekranı kaplamadığını görecektik.

Örnek:Denemelerinizi yaparken HorizontalOptions özelliklerini Center ve Fill yaparak deneyin. Bu sayede değişiklerini görebileceksiniz.

Not: VerticalOptions FillAndExpand verdiğinizde objeniz ondan sonra gelen obje'nin y koordinatına kadar dikey olarak ekranı kaplayacaktır!

Yeşil kutumuzun HorizontalOptions özelliği'nin Start ve Kırmızı kutumuzun End olduğunu görüyoruz. Burada yeşil kutu ekranın soluna, kırmızı kutunun ise ekranın sağına dayalı olmasını bekliyoruz.

Mavi kutu ise VerticalOptions="End" ile ekranımızın sonunda olması gerektiğini söylüyoruz.

Spacing 10 değeri ile StackLayout içerisindeki kontrollerimizin arasındaki boşluğun 10 olmasını sağladık.

StackLayout ile yaptığımız tasarımın değişik ekran boyutlarında da görünümünü bozmadan koruduğunu görüyoruz.

RelativeLayout

Farklı ekran büyüklüklerine, cihaz dikey ve yatay kullanımlara göre tasarımlarınızı kontrol edebileceğiniz bir yapı.

Not : RelativeLayout .cs tarafında yazılarak daha iyi anlaşıldığını düşündüğüm için .cs ile ilerliyorum.

1 Button ve 4 adet BoxView oluşturuyorum.

RelativeLayout içerisine bir kontrol eklerken Children.Add() metodunu kullanacağız. Burada dikkat etmemiz gereken nokta RelativeLayout Children.Add() metodu'nun 4 adet overload'u olduğu.

RelativeLayout Children.Add() Overload Metotları Hakkında :

1. Direkt view'i ekleyebilirsiniz.
2. View'i ekledikten sonra, function yazarak içerisinde Rectangle sınıfı yardımı ile location, koordinatlarını ve isterseniz width, height değerlerini belirleyebilirsiniz.
3. View'i ekledikten sonra Constraint sınıfı yardımı ile x, y koordinatlarını belirleyip, isterseniz width ve height değerlerini belirleyebilirsiniz.
4. View'i ekledikten sonra funcktion içerisinde x, y koordinatlarını belirleyip, isterseniz width ve height değerlerini belirleyebilirsiniz.

Not : Bana göre RelativeLayout kullanımı ve anlaşılması en kolay olan 3. overload metot (Constraint) ile ilerleyeceğiz.

layout.Children.Add(redBox, Constraint.Constant(10), Constraint.Constant(50));
layout.Children.Add(blueBox, Constraint.Constant(30), Constraint.Constant(70));

Kodlarımızı okuyalım;

redBox'ı, x olarak 10, y olarak 50 değer boşluk vererek ekle demiş oluyoruz.

blueBox'ı, x olarak 30, y olarak 70 değer boşluk vererek ekle demiş oluyoruz.

Soru : Peki RelativeLayout'a eklediğimiz kontrollerimiz birbirinden bağımsız ve ekran koordinatlarına göre eklendiyse nasıl bir görüntü elde ettim?

Kendimizi biraz zorlayalım.. Bence bu çok kolay oldu 🙂

RelativeLayout kullanırken Constraint sınıfı bize harika 2 metot ile ekran boyutu değişikliklerini umursamamız gerektiğini söylüyor.

RelativeToParent ve RelativeToView bu RelativeTo kardeşler ile hayat gerçekten çok kolay! 🙂

RelativeToParent : Kontrolünüzün parent'i olarak verilen objeyi baz alarak, parent'ın ekran üzerindeki koordinatlarını ve diğer özelliklerini kullanarak, (width ve height gibi) x, y ve w, h değerlerini vermenizi sağlar.

RelativeToView : Kontrolünüzün ParentView'i olarak verilen obje'nin özelliklerini ve parent'ın ekran üzerindeki koordinatlarını ve diğer özelliklerini kullanarak (width, height gibi) x, y ve w, h değerlerini vermenizi sağlar.

yellowBox'ı Parent'ın Width ve Height değerlerine göre ekranıma ekliyorum.

(x) => Buradaki "X" yerine başka bir isimlendirme yapabildiğimizi biliyorsunuz mesela Xamarin gibi.. 🙂

Not : Bir kontrol'ün Parent'ı default olarak oluşturduğunuz RelativeLayout'tur! Fakat bunu siz değiştirebilirsiniz.

Burdan şunu anlamamız gerekiyor.. RelativeLayout ekranı kapladığına göre ekran çözünürlüğümüzün boyutu ne olursa olsun eklediğim kutu ekran ortasında çıkacaktır. Çünkü RelativeLayout'a sabit bir width ve height vermediğimiz için ekranı kaplayacaktır.

blackBox'ı eklerken RelativeToView metodunu kullanıp, RelativeView'ini yellowBox olarak belirliyoruz ve parent olarak blackBox'ın parent'ının (yani RelativeLayout) tüm özelliklerini, sibling ile RelativeView olarak belirlediğimiz yellowBox'ın tüm özelliklerini kullanıp bu özelliklere göre işlemler yapabiliyoruz.

blackBox'ın "X ve Y" değerlerini ParentView'in (yellowBox) "X ve Y" değerinden alarak belirliyoruz.

sibling.Y = yellowBox'ın ekran üzerindeki Y koordinatı olduğunu ve sibling.X'in yellowBox'ın ekran üzerindeki X koordinatı olduğuna dikkat edelim.

sibling = RelativeToView = yellowBox

Şimdi dikkat çekmek istediğim bir konu var. Kontrollerinize verdiğiniz X ve Y değerleri ekran üzerindeki başlangıç noktalarıdır. Yani siz X değerine 50 verirseniz bu kontrolünüz için X=50 koordinatından başla demek oluyor. Ortalama ve hizalama işlemleri için 100 WidthRequest verdiğiniz bir alandaki Button'a X=50 verirseniz Button normal olarak X 50'den başlar ve sonuna eklemiş gibi bir görüntü alırsınız. Koordinatlara göre kontrol yerleşimi yaparken width ve  height değerlerini hesaplamanıza eklemeniz gerekmektedir!

Şimdi bir Button eklemek istiyorum fakat çözünürlük değişse bile ekranın altında ve ortalı bir şekilde olmasını istiyorum.

Bunun için RelativeToParent benim işimi görecektir..

(parent.Width – 200) / 2 verdiğimiz değere dikkat! Button'u her çözünürlüğe ve kullanım göre ortalamak istediğim için Button WidthRequest değerini hesaba katıyorum 🙂 Çünkü neydi.. Kontrollerimizin Width ve Height değerlerini Koordinatlarla çalışırken hesaplamalıyız!

Uygulamamızı test edip gerçekten farklı ekran çözünürlüklerinde ve yatay kullanımlarda nasıl sonuç aldığımızı g

İster tablet ister telefon çözünürlüklerinin veya yatay kullanımın bizi yenemediğini görüyoruz 🙂

Sonraki makalemizde Koordinatların efendisi AbsoluteLayout'u ve Row&Columns kardeşliği ile Grid'i inceleyeceğiz.

Not : Örnek uygulama yazmadan bu tarz konuların zor kavranabileceğine dikkat çekmek isterim! 🙂

Keyifli okumalar.

Görüşmek üzere