Bu derste Layout’ların çeşitlerini öğreneceğiz. Ardından ViewGroup(Layout) ve en sık kullanılan Layout’larla dersimize devam edeceğiz…
Layout Çeşitleri:
LinearLayout – View, eğer nesne yatay pozisyonda ise nesneleri bir satır olarak gösterir. Eğer nesne dikey pozisyonda ise nesneleri bir sütün olarak gösterir. Bu özelliği geçen derste zaten kullandık. Önceki derse buradan bakabilirsiniz…
TableLayout – Nesneleri tablo şeklinde yani sütün ve satır olarak gösterir.
RelativeLayout – Her nesnenin pozisyonunu başka nesnelerin pozisyonlarına göre ayarlar.
AbsoluteLayout – X ve Y olarak belirlenen koordinatlarda, her nesne için mutlak bir pozisyon belirler.
1 – LinearLayout (LL)
Bu Layout yeni uygulama yarattığı zaman onu varsayılan olarak kullanır. Çünkü esnektir ve kullanımı rahattır. LL Orientation özelliğine sahiptir. Orientation View, nesnelerin ekranda hangi pozisyonu (Dikey ya da yatay) alacağını belirler.
Basit bir örnekte bu özelliklere detaylı bir şekilde bakalım.
Proje Örneği:
Yeni bir proje açalım.
- Project name: P005_Layouts
- Build Target: Android 4.2
- Application name: Layouts
- Package name: tr.androidApp.Layouts
- Create Activity: MainActivity
Main.xml dosyayı açalım ve aşağıdaki kodu kopyalayalım:
<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout
xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical”>
</LinearLayout>
Şimdi ana nesneler dikey pozisyondadırlar.
Sol taraftan LinearLayout’tan beyaz ekrana üç tane butonu taşıyalım.
Şimdi Properties menüsünden LL özelliği değiştirelim. Orientation – horizontal (Yatay) seçiyoruz ve kaydediyoruz (CTRL+SHIFT+S). Şimdi butonlar yatay pozisyona yerleştirdiler.
GroupView’leri birbirine yerleştirebiliriz. LL içine iki tane yeni LL yerleştirelim. Main.xml dosyada üç tane butonu silelim. Ana LL dikey (vertical) olacak ve iki yeni LL yatay (Horizontal) olacak. Sol taraftan Layout sekmesine tıklayacağız ve LinearLayout (Horizontal) seçip Outline sekmeye taşıyacağız. İsterseniz bunun yerine direkt beyaz ekrana da taşıyabilirsiniz. Her yatay LL’ye üç tane buton ekliyoruz.
2 – TableLayout (TL)
TL TableRow (TR) satırlarından oluşur. Her TR View nesnelerden oluşur. View nesnelerinin sayısı sütünlerin sayısını oluşturur. Sütünlerin sayısının her satırda aynı olması gerekiyor. Eğer sütün içinde View nesnelerinin sayısı farklıysa, kalan sütunlar en büyük sayıya göre düzenleniyor.
Tlayout.xml isimli yeni bir layout-dosya açalım. İçinde ana TableLayout olsun.
Ana TableLayout’a üç tane yeni TableRow satırı ekleyelim. Soldan Layouts sekmesinden seçiyoruz. Ve her TableRow’a iki tane buton ekleyelim. Sonuç: Tablomuz üç satırdan ve iki sütundan oluşuyor.
İlk satıra birkaç tane buton daha ekleyelim. Bundan sonra bütün satırlar için sütun sayısı aynıdır ve 4’e eşittir. Bunun nedeni sütun sayısının en çok nesne içeren satıra göre belirlenmesidir. Yani bu durumda birinci satıra göre. İkinci ve üçüncü satırlar için üçüncü ve dördüncü sütunları hiçbir nesne içermiyorlar.
İkinci satıra TextView ve Button ekleyelim ve eklediğimiz TextView içerisindeki metni boş yapalım. Üçüncü satırda da aynısını uygulayalım. Görüyoruz ki bu elemanlar üçüncü ve dördüncü sütun içerisine yerleştiler. Ve TextView’ımız metin içermediğinden ve ekranda gözükmediğinden üçüncü sütun, ikinci ve üçüncü satırda boş gözüküyor.
Sütun genişliği sütun içerisindeki en geniş elemanına göre belirleniyor. TextView’lerin bir tanesine metin girdiğimizde bu metinin sütunu genişlettiğini görüyoruz.
3 – RelativeLayout (RL)
Bu Layout türünde her View nesnesi belirtilen View nesnesine göre özel bir şekilde yerleştirilebilir.
İlişki çeşitleri:
1) Soldan, sağdan, yukarıdan, belirtilen elemanın altından: layout_toLeftOf, layout_toRightOf, layout_above, layout_below.
2) Belirtilen elemana göre sol, sağ, yukarıdaki ve alttaki kenara göre yaslanan: layout_alignLeft, layout_alignRight, layout_alignTop, layout_alignBottom.
3) Sol, sağ, yukarıdaki ve alttaki ebeveyn kenarına göre yaslanan: layout_alignParentLeft, layout_alignParentRight, layout_alignParentTop, layout_alignParentBottom.
4) Merkeze göre dikey, merkeze göre yatay, ebeveyne ve merkeze göre dikey ve yatay düzleştirilen: layout_centerVertical, layout_centerHorizontal, layout_centerInParent
Daha detaylı bilgiler için help bağlantısından detaylı belgelere de erişebilirsiniz.
Rlayout.xml oluşturalım ve oraya bir de böyle xml kodu kopyalayalım:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/label" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Type here:"> </TextView> <EditText android:id="@+id/entry" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/label" android:background="@android:drawable/editbox_background"> </EditText> <Button android:id="@+id/ok" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_below="@+id/entry" android:layout_marginLeft="10dip" android:text="OK"> </Button> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@+id/ok" android:layout_toLeftOf="@+id/ok" android:text="Cancel"> </Button> </RelativeLayout>
Burada ana nesnemiz RelativeLayout oldu.
Karşımıza böyle bir ekran çıkacak:
Burada ilgimizi çeken xml kodudur. Hemen bilinmeyen özniteliklerin kısa özetini vereyim:
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:id=”@+id/entry”
-Her özniteliğin isminde bulunan android kelimesi bir namespace’tir, bu anlatım esnasında onu kullanmayacağım. Başka bir dersimizde bu konuya daha yakından bakacağız.
– id: elemanın ID’si yani kimliğidir.
– layout_width (Nesne genişliği) ve layout_height (Nesnenin yüksekliği) mutlak olarak da tanımlanabilir, aşağıda belirtildiği gibi de: fill_parent (Mümkün olan maksimum genişliği ya da bir ebeveyn içindeki yüksekliği) и wrap_content (Genişlik ve yükseklik bir elemanın içeriğine göre belirlenir). Help içinde match_parent ‘in de olduğu söyleniyor. match_parent ve fill_parent aynı şeyler. Bazı sebeplerden dolayı sistemin geliştiricileri match_parent ismin daha uygun olduğuna karar verdiler ve ileride fill_parent kullanımdan yavaşça kaybolacak. Şimdilik uyumluluk adına bu isim kullanımda bırakıldı. Burada aklınızda tutmanız gereken şey – match_parent = fill_parent ve ileride match_parent kullanmaya çalışacağımızdır. İleride bunun üzerinde daha fazla duracağız ve detaylara tekrar dönüp bakacağız.
Şimdi biz nesnelerimize dönelim. Örnekte TextView, EditText, OK ve Cancel isimli iki tane Button görüyoruz. Bizi ilgilendiren öznitelikleri detaylı bir şekilde inceleyelim.
TextView
android:id=”@+id/label” – ID
android:layout_width=”match_parent” – Tüm kullanılabilir genişliği kullanır (Ekranda bu gözükmese de);
android:layout_height=”wrap_content” – İçeriğe göre yükseklik;
hiç bir şeye hiç bir şekilde bağlı değildir
EditText
android:id=”@+id/entry” – ID
android:layout_width=”match_parent” – Kullanabileceği bütün genişlik
android:layout_height=”wrap_content” – İçeriğe göre yükseklik
android:layout_below=”@id/label” – TextView göre daha aşağıda bulunuyor (ID’ye göre bağlantı)
Button_OK
android:id=”@+id/ok” – ID
android:layout_width=”wrap_content” – İçeriğe göre genişlik android:layout_height=”wrap_content” – İçeriğe göre yükseklik
android:layout_below=”@id/entry” – EditText’e göre daha aşağıda bulunuyor
android:layout_alignParentRight=”true” – Ebeveynin sağ kenarına göre düzeltildi
android:layout_marginLeft=”10dip” – soldan boşluğı var( Button_Cancel’ın arka arkaya olmaması için)
Button_Cancel
android:layout_width=”wrap_content” – içeriğe göre genişlik
android:layout_height=”wrap_content” – içeriğe göre yükseklik
android:layout_toLeftOf=”@id/ok” – Button_OK’ye göre solda bulunuyor
android:layout_alignTop=”@id/ok” – Button_OK’in yukarıdaki kenarına göre düzeltildi
Siz kendiniz daha da fazla nesne ekleyebilirsiniz ve onların yerleşimiyle ilgili denemeler yaparak tecrübenizi arttırabilirsiniz.
Dikkatinizi çekmek istediğim yer, View nesnesinin ID’si olmayabilir.(android:id). Mesela, TextView için bu genelde gerekmiyor. Çünkü çoğu zaman ID’ler sabittir ve uygulamanın çalışması esnasında biz ID’lere neredeyse hiç başvurmayız.
EditText’te ise durum bunun tam tersidir: Metin kısmının içeriğiyle çalışıyoruz ve Button’lara tıklamaları işlememiz gerekir. Bunun için elbette hangi butonun tıklandığını bilmemiz gerekiyor. Gelecekte View nesnesine ID belirlememiz gereken yerleri de öğreneceğiz.
4 – AbsoluteLayout (AL)
Ekrandaki ögelerin mutlak konumlandırmalarının sağlar. Biz bileşenin sol üst köşesi için koordinatları belirliyoruz.
AbsoluteLayout köklü bir alayout.xml kuralım
Şimdi sürüklemeyle ekrana farklı nesne eklemeyi deneyiniz. Nesne LinearLayot ya da TableLayout’ta olduğu gibi dizilmiyorlar, ama onları sürüklediğiniz yerlerde kalıyorlar. Yani bu mutlak konumlandırmadır.
xml kod’u açtığımızda koordinatların belirlenmesi için layout_x ve layout_y’nin kullanıldığını görebiliriz.
<?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_x="42dp" android:layout_y="62dp" android:text="Button"> </Button> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_x="142dp" android:layout_y="131dp" android:text="TextView"> </TextView> <CheckBox android:id="@+id/checkBox1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_x="55dp" android:layout_y="212dp" android:text="CheckBox"> </CheckBox> <RadioButton android:id="@+id/radioButton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_x="171dp" android:layout_y="318dp" android:text="RadioButton"> </RadioButton> </AbsoluteLayout>
İlk başta nesneleri yerleştirmek için bu yöntem en basit ve kullanışlı gelebilir, çünkü nesneler size gereken yerlerde kalıyorlar. Ama bu sadece çalışmamızı çözünürlüğü belirli olan ekran için yapıyorsak geçerlidir. Eğer böyle bir uygulamayı başka bir ekranda açarsak, nesneler yerlerini değiştirecek ve planladığımız gibi olmayacaktır. Onun için bu Layout’un kullanılması tavsiye edilmiyor. Ve Layout’un Android’in gelecek versiyonlarıyla uyumluluğu garanti edilmiyor.
Layout’un birçok ViewGroup çeşidi daha vardır ve biz onları ilerleyen derslerde birlikte göreceğiz. Şimdilik ise bunlar da işimizi görmek ve öğrenmeyi sürdürmek için yeterli.
Ders Sonu Notları:
Bu derste Layout’un ana tiplerini gördük: LinearLayout, TableLayout, RelativeLayout, AbsoluteLayout.
Sonraki derste ise ViewGroup’ta nesnelerin yerleşimlerini belirlemede bize yardımcı olacak View nesnelerinin, Layout özelliklerini detaylı bir şekilde inceleyeceğiz.
