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

Transkript

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

2 Layout LinearLayout TableLayout GridLayout RelativeLayout 9 Mart 2015

3 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

4 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.

5 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ış)

6 Ö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"

7 FrameLayout <FrameLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".mainactivity"> <TextView android:layout_width="wrap_content" android:layout_width="wrap_content" android:text="new Button" android:layout_gravity="center_horizontal top" /> </FrameLayout>

8 LinearLayout android:orientation=«horizantal» android:orientation=«vetical» Kaynak: 8 Mart 2015

9 LinearLayout (Horizantal) <LinearLayout xmlns:android=" xmlns:tools= android:orientation="horizontal" tools:context=".mainactivity"> android:text="button1" android:text="button2" /> </LinearLayout>

10 LinearLayout (Vertical) <LinearLayout xmlns:android=" xmlns:tools= android:orientation= vertical" tools:context=".mainactivity"> android:layout_width="match_parent" android:text="button1" android:layout_width="match_parent android:text="button2" /> </LinearLayout>

11 TableLayout <TableLayout xmlns:android=" xmlns:tools= android:stretchcolumns="1" tools:context=".mainactivity"> <TableRow> android:text="button1" android:text="button2" android:gravity="right" /> </TableRow> <TableRow> android:text="button3" android:text="button4" android:gravity="right" /> </TableRow> </TableLayout>

12 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: 8 Mart 2015

13 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: 8 Mart 2015

14 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: 8 Mart 2015

15 GridLayout örnek-3 <GridLayout xmlns:android=" xmlns:tools= android:columncount="3" android:rowcount="2" tools:context=".mainactivity"> android:text="button1" android:text="button2" android:gravity="right" /> android:text="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>

16 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: 8 Mart 2015

17 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: 8 Mart 2015

18 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:layout_alignparenttop="true" android:layout_centerhorizontal="true" /> android:text="button3 android:layout_centerhorizontal="true" />

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

20 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: 8 Mart 2015

21 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: 8 Mart 2015

22 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"/>

23 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: 8 Mart 2015

24 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: 8 Mart 2015

25 Nested Layout (İç içe Layout) <OuterLayoutType...> <InnerLayoutType...> <Widget... /> <Widget... /> </InnerLayoutType> <InnerLayoutType...> <Widget... /> <Widget... /> </InnerLayoutType> <Widget... /> <Widget... /> </OuterLayoutType> Kaynak: 8 Mart 2015

26 Nested Layout (İç içe Layout) <LinearLayout > <ImageView android:layout_width="60dp" android:layout_height="60dp /> <LinearLayout android:layout_width="wrap_content" android:layout_height="80dp" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:text="new Text" android:textsize="25dp" /> <TextView android:layout_width="wrap_content" android:text="new Text" android:textsize="15dp" /> </LinearLayout> </LinearLayout> Kaynak: 8 Mart 2015 resim textview1 textview2

27 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:layout_width="match_parent" android:text="button2" </LinearLayout> <LinearLayout android:layout_width="fill_parent android:orientation="horizontal"> android:layout_width="wrap_content" android:text="button3" android:layout_width="match_parent" android:text="button4" </LinearLayout> </LinearLayout>

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