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.
Kod:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.tasarimkodlama.MainActivity"> <TextView android:layout_width="100dp" android:layout_height="100dp" android:layout_centerHorizontal="true" android:background="#E65100" android:text="layout_centerHorizontal" android:textAllCaps="true" android:textSize="15sp" /> <TextView android:layout_width="100dp" android:layout_height="100dp" android:background="#DEDEDE" android:text="layout_centerVertical" android:textAllCaps="true" android:layout_centerVertical="true" android:textSize="15sp" /> <TextView android:layout_width="100dp" android:layout_height="100dp" android:background="#DEDEDE" android:text="layout_centerInParent" android:textAllCaps="true" android:layout_centerInParent="true" android:textSize="15sp" /> </RelativeLayout> |
Ü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.
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.tasarimkodlama.MainActivity"> <TextView android:id="@+id/main" android:layout_width="100dp" android:layout_height="100dp" android:background="#fdcb6e" android:text="MERKEZ" android:textAllCaps="true" android:layout_centerInParent="true" android:textSize="20sp" /> <TextView android:layout_width="100dp" android:layout_height="100dp" android:background="#fdcb6e" android:text="1.KUTU" android:textAllCaps="true" android:layout_toLeftOf="@id/main" android:textSize="20sp" /> <TextView android:layout_width="100dp" android:layout_height="100dp" android:background="#fdcb6e" android:text="2.KUTU" android:textAllCaps="true" android:layout_toRightOf="@id/main" android:textSize="20sp" /> <TextView android:layout_width="100dp" android:layout_height="100dp" android:background="#fdcb6e" android:text="3.KUTU" android:textAllCaps="true" android:layout_above="@id/main" android:textSize="20sp" /> <TextView android:layout_width="100dp" android:layout_height="100dp" android:background="#fdcb6e" android:text="4.KUTU" android:textAllCaps="true" android:layout_below="@id/main" android:textSize="20sp" /> </RelativeLayout> |
Layout XML’de RelativeLayout’u tanımlama
Şimdi aşağıdaki kodu anlayalım:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFEB3B" tools:context="com.tasarimkodlama.MainActivity"> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:textStyle="bold" android:textAllCaps="true" android:textSize="17sp" android:text="İki buton referans olarak kullanacak" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="İkinci buton hizalandı" android:layout_below="@+id/textView" android:layout_alignLeft="@+id/textView" android:layout_margin="5dp" android:layout_alignStart="@+id/textView" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="İlk buton \nHizalandı" android:layout_toRightOf="@id/button" android:layout_alignTop="@id/button" android:layout_below="@+id/textView" android:layout_marginRight="21dp" android:layout_marginEnd="21dp" /> <TextView android:id="@+id/textView5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/button" android:layout_alignStart="@+id/button" android:layout_below="@+id/button" android:layout_marginTop="70dp" android:textStyle="bold|italic" android:textSize="20sp" android:textColor="#25c" android:text="Seninle temel çizgiye \ngöre hizalanmak istiyorum" /> <TextView android:id="@+id/textView6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/textView5" android:layout_alignTop="@+id/textView5" android:layout_margin="10dp" android:textSize="20sp" android:textStyle="bold|italic" android:textColor="#25c" android:layout_marginTop="70dp" android:layout_alignBaseline="@id/textView5" android:text="Tamam, niteliği kullanmama izin ver" /> <TextView android:id="@+id/textView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_alignParentLeft="true" android:textAllCaps="true" android:textStyle="bold" android:textSize="20sp" android:textColor="#D50000" android:text="3 sakız benzeri özellik kullandım ve şimdi dipte kaldım"/> </RelativeLayout> |
Çıktı:
Yukarıdaki kodda:
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
button,textViewkimliğine sahip TextView’in altına yerleştirilir. Bu, her iki Düğme etiketinde deAndroid:layout_below="@+id/textView"özniteliği kullanılarak yapılır. Android:layout_alignTop="@id/button"özniteliğini kullanarak her iki düğmeyi de üst kenar boşluğundan (birbirlerinin) hizaladık.- Ayrıca iki
TextView‘i metinlerine göre hizalamaya çalıştık, yani her iki görünümün metinlerini hizaladık. - Son olarak, textView4’ü ekranın altına yapıştırmak için
android:layout_alignParentBottom="true",Android:layout_alignParentRight="true"veAndroid:layout_alignParentLeft="true"yapışkan özniteliklerini kullandık. Sakızın gerilebilir olması gibi, bu örnektekiTextViewda 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