Tasarım Kodlama

Android Relative Layout Kullanımı

Bir Relative Layout (Göreli Düzen), viewler/widget’ları/viewGroup’u diğer görünümlerin/widget’ların/viewGroup’ların konumuna göre düzenleyen bir düzendir, yani yeni görünümler zaten mevcut görünümlere göre yerleştirilir.

Örneğin bir sınıfta A Öğrencisi bir sandalyede oturuyorsa ve sınıfın öğretmeni Öğrenci B’den Öğrenci A’nın sağına oturmasını isterse. Öğrenci B nerede oturması gerektiğini bilir.

Benzer şekilde, her görünümün konumu, kardeş öğelerine göre (başka bir görünümün solunda veya altında) veya ebeveyne göre konum açısından belirtilebilir.

RelativeLayout, GUI tasarımında en sık kullanılan düzendir. Bir RelativeLayout‘un nasıl çalıştığını bilmek için, RelativeLayout‘un en yaygın özelliklerini görelim ve anlayalım.

RelativeLayout’un Sık Kullanılan Nitelikleri

Parent(Ebeveyn) Görünüme göre Ortalama

Görünümlerinizi ebeveyne göre merkeze yerleştirmek istediğinizde, aşağıdaki 3 özelliği kullanabilirsiniz:

Farklı öznitelikleri öğrenmeden önce, örneğimizdeki ebeveynin aynı zamanda yüksekliği ve genişliği match_parent olarak ayarlanmış bir Relative Layout olduğunu, bu nedenle mobilin tüm ekranını kapsayacağını belirtmek istiyoruz. Yani tam ekran bizim ana görünümümüzdür.

android:layout_centerHorizontal="true"

Bu, görünümü yatay olarak ebeveynin ortasına yerleştirir. Ebeveyn görünümümüz mobilin tüm ekranını kapsadığından, görünüm mobil ekranın ortasına yatay olarak yerleştirilir. (Aşağıdaki şekilde merkezdeki nesneye bakın)

android:layout_centerVertical="true"

Bu, görünümü dikey olarak ebeveynin ortasına yerleştirir. Ebeveyn görünümü mobilin tüm ekranını kapsadığından, görünüm dikey olarak mobil ekranın ortasına yerleştirilir.

android:layout_centerInParent="true"

Bu öznitelik, görünümü ebeveynin ortasına yerleştirecektir. Örneğimizdeki ebeveyn, mobilin tüm ekranını kapsadığından, görünüm hem yatay hem de dikey olarak mobil ekranın ortasına yerleştirilir.

Daha net anlamak için, aşağıdaki kodu ve gösterilen çıktısını kontrol edelim.

Relative Layout Parent(Ebeveyn) Görünüme göre Ortalama

Kod:

Üst görünüme göre hizala

Bu tür öznitelikler, bu öznitelikler kullanılarak ana görünümün herhangi bir tarafına sabitlenebildiğinden, görünümün sakız gibi davranmasını sağlar.

Yine örnek için, üst görünümümüzün yüksekliği ve genişliği match_parent olarak ayarlanmış bir RelativeLayout olduğunu düşünüyoruz, bu nedenle mobilin tüm ekranını kaplayacak. Yani tam ekran bizim ana görünümümüzdür.

android:layout_alignParentTop="true"

Bu özelliği bir Görünüm için yazarsanız, o görünüm üst öğesinin üstüne yapışacaktır. Ebeveyn, cep telefonunun tüm ekranını kapsadığından, görünüm, mobil ekranın sol üst köşesine yapışmış olarak görünecektir.

android:layout_alignParentBottom="true"

Bu özelliği bir Görünüm için yazarsanız, o görünüm üst öğesinin altına yapışacaktır. Ebeveynimiz cep telefonunun tüm ekranını kapsadığından, görünüm mobil ekranın altına yapışmış görünecektir.

android:layout_alignParentLeft="true"

Bu özelliği bir Görünüm için yazarsanız, o görünüm üst öğesinin solunda kalır. Örneğimizdeki ebeveyn, mobilin tüm ekranını kapsadığından, görünüm mobil ekranın soluna yapışmış görünecektir.

android:layout_alignParentRight="true"

Bu özelliği bir Görünüm için yazarsanız, o görünüm üst öğesinin sağında kalır.

Not: Her zaman bu özelliklerden birden fazlasını kullanabilirsiniz. android:layout_alignParentLeft=”true” ve android:layout_alignParentBottom=”true” kullandığınızı varsayalım, ardından görünüm, aşağıdaki şekilde pembe renkli görünümde gösterildiği gibi ekranın sol alt köşesine yapışacaktır.

Daha net anlamak için, aşağıdaki kodu ve gösterilen çıktısını kontrol edelim.

Relative Layout Üst görünüme göre hizala

Mevcut kardeş View’e göre yeni View yerleştirin

Bir RelativeLayout’ta, yeni görünümleri mevcut diğer görünümlere göre tutabilirsiniz (konumlandırabilirsiniz). Bunun için aşağıdaki nitelikler kullanılabilir.

Merkezde bir görünüm olduğunu ve id Android:id=”@+id/main” olarak verildiğini varsayalım. Bu nedenle, diğer yeni görünümler bu görünüme göre aşağıdaki gibi yerleştirilebilir:

android:layout_toLeftOf="@id/main"

Bu, yeni görünüme, idsi main olan görünümün sol tarafında olmanız gerektiğini söyler.

android:layout_toRightOf="@id/main"

Bu, yeni görünüme, idsi main olan görünümün sağ tarafında olmanız gerektiğini söyler.

android:layout_above="@id/main"

Bu, yeni görünüme idsi main olan görünümün üzerinde olmanız gerektiğini söyler.

android:layout_below="@id/main"

Bu, yeni görünüme idsi main olan görünümün altında olmanız gerektiğini söyler.

Not: View‘e bir id atadığınızda, android:id="@+id/main" yazarsınız, yani @ sembolünden sonra o görünüme bir kimlik atadığınızı belirten bir + işareti yazarsınız. Ancak bu id’yi yukarıdaki gibi başka bir amaç için kullandığınızda, belirtilen id değerine sahip mevcut bir görünüme göre yeni bir görünüm eklemiş olursunuz, bu nedenle + işaretinden bahsetmemize gerek yoktur. Biz sadece Android:layout_below="@id/main" yani + işareti olmadan diyoruz.

Daha net anlamak için, aşağıdaki kodu ve gösterilen çıktısını kontrol edelim.

Kod:

Layout XML’de RelativeLayout’u tanımlama

Şimdi aşağıdaki kodu anlayalım:

Çıktı:

Yukarıdaki kodda:

  1. Android:layout_alignParentTop="true" özniteliğini kullanarak ekranın üst kısmına textView kimliğine sahip bir görünüm yerleştirdik.
  2. 2 button, textView kimliğine sahip TextView’in altına yerleştirilir. Bu, her iki Düğme etiketinde de Android:layout_below="@+id/textView" özniteliği kullanılarak yapılır.
  3. Android:layout_alignTop="@id/button" özniteliğini kullanarak her iki düğmeyi de üst kenar boşluğundan (birbirlerinin) hizaladık.
  4. Ayrıca iki TextView‘i metinlerine göre hizalamaya çalıştık, yani her iki görünümün metinlerini hizaladık.
  5. Son olarak, textView4’ü ekranın altına yapıştırmak için android:layout_alignParentBottom="true", Android:layout_alignParentRight="true" ve Android:layout_alignParentLeft="true" yapışkan özniteliklerini kullandık. Sakızın gerilebilir olması gibi, bu örnekteki TextView da uzar, böylece sınırı gerilir ve ekranın soluna, sağına ve altına yapışır.

Daha fazla Android içeriği için Android Dersleri yazısını inceleyebilirsiniz.

1 yorum