Layout. (Düzen,Plan,Yerleşim)

Layout (Düzen,Plan,Yerleşim)

Layout LinearLayout TableLayout GridLayout RelativeLayout http://developer.android.com/guide/topics/ui/declaring-layout.html, 9 Mart 2015

Layout Telefon/Tablet Ekranındaki görsel nesnelerin (view/widget) ekranda yerleşimini düzenlemek için gerekli olan yapılardır. Daha kullanışlı arayüzler oluşturmak için gereklidir. Android de an itibaryla aşağıdaki Layoutlar mevcuttur. Ekran farklı view şeklinde kullanılabilir. Nesneler ekranda yan yana(horizantal) veya alt alta (vertical) yerleştirilir. Her widget bir tablo satırı içinde görünür Her widget bir hücre içine yerleştirilir Her widget birbirine göre yerleşir

Layout Activity ekran tasarımmı dosyasıdır. res-layout içerisinde uzantısı.xml şeklinde bulunur. Programa eklenen her yeni Aktivity için arayüz dosyası res-layout içerisine eklenir. Yeni Arayüzleri (Layout) tasarlamak için yeni xml dosya düzenlenmelidir. Layout hem tasarım ekranından (Design), hem de kod (xml) ile yapılabilir. Tasarım yapılsa bile yapılan tasarımın bilgiler xml koduna otomatik eklenir.

XML kodu XML kodları tıpkı HML tagları gibidir. XML elementlerinin değeri ve özellikleri tanımlanır. <element attr="value" attr="value">... </element> <element attr="value" attr="value" /> (kendi kendine kapatılmış)

Örnek: XML kodları <ders adi= BIL241" donem= bahar"> <hoca>kazım Koç</hoca> <yardimci>yok</yardimci> </ders> <LinearLayout. android:layout_width="fill_parent" android:layout_height="wrap_content android:orientation="vertical > </LinearLayout> android:layout_width="wrap_content" android:text="button3" android:id="@+id/button3"/>

FrameLayout <FrameLayout 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" tools:context=".mainactivity"> <TextView android:text="@string/hello_world" android:layout_width="wrap_content" android:id="@+id/textview1"/> android:layout_width="wrap_content" android:text="new Button" android:id="@+id/button" android:layout_gravity="center_horizontal top" /> </FrameLayout>

LinearLayout android:orientation=«horizantal» android:orientation=«vetical» Kaynak:http://web.stanford.edu/class/cs193a/lectures.shtml, 8 Mart 2015

LinearLayout (Horizantal) <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=http://schemas.android.com/tools android:orientation="horizontal" tools:context=".mainactivity"> android:text="button1" android:id="@+id/button1"/> android:text="button2" android:id="@+id/button2" /> </LinearLayout>

LinearLayout (Vertical) <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=http://schemas.android.com/tools android:orientation= vertical" tools:context=".mainactivity"> android:layout_width="match_parent" android:text="button1" android:id="@+id/button1"/> android:layout_width="match_parent android:text="button2" android:id="@+id/button2" /> </LinearLayout>

TableLayout <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=http://schemas.android.com/tools android:stretchcolumns="1" tools:context=".mainactivity"> <TableRow> android:text="button1" android:id="@+id/button1"/> android:text="button2" android:gravity="right" android:id="@+id/button2" /> </TableRow> <TableRow> android:text="button3" android:id="@+id/button3"/> android:text="button4" android:gravity="right" android:id="@+id/button4" /> </TableRow> </TableLayout>

GridLayout Ekranı satır ve sütunlara böler. Android 4 den sonraki sürümler ile birlikte gelmiştir. Oriantation(vertical, horizantal) özelliği satıra göre mi, yoksa sütuna göre mi sıralama olacağını ifade eder. Tablo satır ve sütunları başlangıçta eşit büyüklüktedir. Her bir nesne sırasıyla Satır/sütun şeklinde sırayla yerleştirilir. Ancak istenirse nesnenin yerleşeceği satır ve sütun belirlenebilir (android:layout_row="1, android:layout_column="2"). Satır ve sütun indisleri 0 dan başlar Örnek: 4 Satır 3 sütunlu bir GridLayout Kaynak:http://web.stanford.edu/class/cs193a/lectures.shtml, 8 Mart 2015

GridLayout örnek-1 <GridLayout... android:rowcount="2" android:columncount="3" tools:context=".mainactivity">... android:text="button 1" />... android:text="button Two" />... android:text="button 3" />... android:text="button Four" />... android:text="button 5" />... android:text="button Six" /> </GridLayout> Kaynak:http://web.stanford.edu/class/cs193a/lectures.shtml, 8 Mart 2015

GridLayout örnek-2 <GridLayout... android:rowcount="2" android:columncount="3" android:orientation="vertical">... android:text="button 1" />... android:text="button Two" />... android:text="button 3" />... android:text="button Four" />... android:text="button 5" android:layout_row="1" android:layout_column="2" />... android:text="button Six" android:layout_row="0" android:layout_column="2" /> </GridLayout> Kaynak:http://web.stanford.edu/class/cs193a/lectures.shtml, 8 Mart 2015

GridLayout örnek-3 <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=http://schemas.android.com/tools android:columncount="3" android:rowcount="2" tools:context=".mainactivity"> android:text="button1" android:id="@+id/button1"/> android:text="button2" android:gravity="right" android:id="@+id/button2" /> android:text="button3" android:id="@+id/button3"/> 1,2 ( ilk satır ve ilk sütün (0,0) ) android:text="button4" android:layout_row="1" android:layout_column="2" android:id="@+id/button4" /> </GridLayout>

GridLayout örnek-4 <GridLayout... android:rowcount="2" android:columncount="3 >... android:text="b1" />... android:text="b2" />... android:text="button Number 3!" />... android:text="b4" android:layout_columnspan="2 android:layout_gravity="center" />... android:text="b5" />... android:text="b6" android:layout_paddingtop="40dp" android:layout_paddingbottom="40dp" />... android:text="b7" />... android:text="button #8" </GridLayout> android:layout_gravity="right" /> Kaynak:http://web.stanford.edu/class/cs193a/lectures.shtml, 8 Mart 2015

RelativeLayout (Default) Nesnelerin birbirlerinin konumu dikkate alınarak yerleştirme yapılır. orelative to parent : kendi kendine referans (Activity kendisine) orelative to diğer widgets/views ox-pozisyonu: Left, right, center oy-posizyonu Top, Bottom, Center Kaynak:http://web.stanford.edu/class/cs193a/lectures.shtml, 8 Mart 2015

Relative to Anchor Points Reative X/Y diğer nesnelere (view/vidget) layout_below, above, toleftof, torightof x/y relative to Container (Activity): içinde bulundu yere göre layout_alignparenttop, Botom, Left, Right layout_centerhorizontal, Vertical, InParent android:text="button2 android:id="@+id/button2" android:layout_alignparenttop="true" android:layout_centerhorizontal="true" /> android:text="button3 android:id="@+id/button3" android:layout_below="@+id/button2" android:layout_centerhorizontal="true" />

RelativeLayout (Default değer) Nesnelerin birbirleri dikkate alınarak yerleştirilir. Performans açısından en iyi layout dur. <RelativeLayout. android:text="button1" android:id="@+id/button1"/> android:text="button2" android:id="@+id/button2" android:layout_alignparenttop="true" android:layout_centerhorizontal="true" /> android:text="button3" android:id="@+id/button3" android:layout_below="@+id/button2" android:layout_centerhorizontal="true" /> </RelativeLayout>

Gravity Gravity: nesnenin içinde bulunduğu yerde ne tarafa yaslanacağını belirler. - top, bottom, left, right, center - Bunların kombinesi olarak araya sembolü ile birden çok olabilir Layout içindeki nesneler ortaya ve sağa yaslanacak <LinearLayout... android:orientation="vertical" android:gravity="center right» >... android:text="button 1" />... android:text="button 2 Hooray" />... android:text="button 3" />... android:text="button 4 Very Long Text" />... android:text="button 5" android:layout_gravity="left" /> </LinearLayout> Layout içindeki nesneler ortaya ve sağa yaslanırken «Buton 5» sola yaslanacak Kaynak:http://web.stanford.edu/class/cs193a/lectures.shtml, 8 Mart 2015

weight weight: toplam ekran alanının widgetler arasında paylaşımıyla ilgilidir. Tam sayı olarak 1,2 verilir ve N/toplam formülüyle hesaplanır. Örnek: Aşağıdaki gibi tanımlanmış bir layout da butonların yerleşimi: <LinearLayout... android:orientation="vertical">... android:text="b1" android:layout_weight="1" />... android:text="b2" android:layout_weight="3" />... android:text="b3 android:layout_weight="1" /> </LinearLayout> Örnekte layout_weight değerleri toplamı: 1+3+1=5 dir B1 için; android:layout_weight="1" ise 1 /5 ini kaplar B2 için; android:layout_weight= 3" ise 3 /5 ini kaplar B3 için; android:layout_weight="1" ise 1 /5 ini kaplar Kaynak:http://web.stanford.edu/class/cs193a/lectures.shtml, 8 Mart 2015

wrap_content / match_parent wrap_content: nesnenin içindeki yazı kadar büyür. match_parent: nesne içinde bulunduğu kabı kaplar android:layout_width="wrap_content" android:text="button1" android:id="@+id/button1"/> android:layout_width="match_parent" android:text="button2" android:id="@+id/button2"/>

pading Pading: nesnenin içindeki yazı kenarlardan (Top, Bottom,Left, Right) ne kadar mesafede olacağını belirler. Örnekte: Buton 1 de sadece pdding:50dp verilmiş dolayısıyla (Top,Bottom,Left,Right) 50 şer dp ayrılmış Buton 2 de belirtilmemiş Buton 3 de soldan (paddingleft) 30dp ve alttan (paddingbottom) 40dp mesafe bırakılmış <LinearLayout... android:orientation="vertical">... android:text="button 1" android:padding="50dp" />... android:text="button 2 Hooray" />... android:text="button 3 android:paddingleft="30dp" android:paddingbottom="40dp" /> </LinearLayout> Kaynak:http://web.stanford.edu/class/cs193a/lectures.shtml, 8 Mart 2015

margine margine: nesnenin kendisine komşu olan nesnelerden olan mesafesi. setlayout_margin ifadesiyle tüm taraflardan olan mesafeyi;toadjustallsides; layout_margintop, Bottom, Lefrt, Right ile hangi taraftan olacağı belirtilir <LinearLayout... android:orientation="vertical">... android:text="button 1" android:layout_margin="50dp" />... android:text="button 2 Hooray" />... android:text="button 3 android:layout_marginleft="30dp" android:layout_margintop="40dp" /> </LinearLayout> Kaynak:http://web.stanford.edu/class/cs193a/lectures.shtml, 8 Mart 2015

Nested Layout (İç içe Layout) <OuterLayoutType...> <InnerLayoutType...> <Widget... /> <Widget... /> </InnerLayoutType> <InnerLayoutType...> <Widget... /> <Widget... /> </InnerLayoutType> <Widget... /> <Widget... /> </OuterLayoutType> Kaynak:http://web.stanford.edu/class/cs193a/lectures.shtml, 8 Mart 2015

Nested Layout (İç içe Layout) <LinearLayout > <ImageView android:id="@+id/resim" android:layout_width="60dp" android:layout_height="60dp /> <LinearLayout android:layout_width="wrap_content" android:layout_height="80dp" android:orientation="vertical"> <TextView android:id="@+id/textview1 android:layout_width="wrap_content" android:text="new Text" android:textsize="25dp" /> <TextView android:id="@+id/textview2 android:layout_width="wrap_content" android:text="new Text" android:textsize="15dp" /> </LinearLayout> </LinearLayout> Kaynak:http://web.stanford.edu/class/cs193a/lectures.shtml, 8 Mart 2015 resim textview1 textview2

Nested Layout (İç içe Layout) <LinearLayout. android:orientation="vertical" tools:context=".mainactivity"> <LinearLayout android:layout_width="fill_parent android:orientation="vertical > android:layout_width="wrap_content" android:text="button1" android:id="@+id/button1"/> android:layout_width="match_parent" android:text="button2" android:id="@+id/button2"/> </LinearLayout> <LinearLayout android:layout_width="fill_parent android:orientation="horizontal"> android:layout_width="wrap_content" android:text="button3" android:id="@+id/button3"/> android:layout_width="match_parent" android:text="button4" android:id="@+id/button4"/> </LinearLayout> </LinearLayout>

Kodla Layout - widget ekleme LinearLayout linlayout = new LinearLayout(this); Button b = new Button(this); b.settext("hello Button"); linlayout.addview( b ); setcontentview(linlayout);