User Interface - Linear Layout
27.08.2012
Scopul acestui tutorial este de a face o prezentare a celui mai simplu layout existent pe platforma Android si anume Linear Layout, dar in cadrul careia vor fi integrate si alte tipuri de controale.
20911 afisari 0 Rating (3 voturi) 35 min
Citeste acest tutorial si pe Smartphone Platforms

Scopul acestui tutorial este de a face o prezentare a celui mai simplu layout existent pe platforma Android si anume Linear Layout, dar in cadrul careia vor fi integrate si alte tipuri de controale.

Interfata grafica a aplicatiilor Android are ca si componente principale View si ViewGroup. Clasa View este clasa de baza pentru subclasa elementelor numite "widgets", iar ViewGroup pentru "layouts".

Dupa cum am mentionat in prezentarile anterioare, design-ul interfetelor grafice se realizeaza cu ajutorul unor fisiere xml in care sunt utilizate tag-uri speciale.

Pentru a realiza o noua interfata grafica: click dreapta pe proiectul in care vreti sa adaugati noul design, New -> Other -> Android XML File -> Next -> LinearLayoutExample.xml (reprezentand numele fisierului), selectati Layout la tipul resursei unde va fi creat fisierul si Finish.

Componenta LinearLayout detine numeroase proprietati printre care cele mai importante ar fi:
Orientation
Fill model
Gravity
Padding

Orientation:

Aceasta proprietate stabileste cum vor fi afisate elementele, fie orizontal, stil rand sau vertical, gen coloana.

Horizontal orientation:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:orientation="horizontal">
<Button
android:id= "@+id/Button01"
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:text= "Acesta este un buton">
</Button>
<TextView
android:id= "@+id/TextView01"
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:text= "Acesta este un TextView">
</TextView>
</LinearLayout>

Vertical orientation:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android= "http://schemas.android.com/apk/res/android"
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:orientation= "vertical">
<Button
android:id= "@+id/Button01"
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:text= "Acesta este un buton">
</Button>
<EditText
android:id= "@+id/EditText01"
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:text= "Acesta este un EditText">
</EditText>
<TextView
android:id= "@+id/TextView01"
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:text= "Acesta este un TextView">
</TextView>
</LinearLayout>

Fill model:

Widget-urile din interiorul unui LinearLayout au inaltime si latime. Aceste proprietati pot avea trei valori:

  • o valoare numerica in pixeli, dpi sau inchi;
  • "wrap_content" - widget-ul ocupa un spatiu egal cu aria sa;
  • "fill_parent" - widget-ul ocupa tot spatiul existent.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android= "http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:id= "@+id/TextView01"
android:layout_width="fill_parent"
android:layout_height= "wrap_content"
android:text= "Acesta este un TextView">
</TextView>
<Button
android:id= "@+id/Button01"
android:layout_width="fill_parent"
android:layout_height= "wrap_content"
android:text= "Acesta este un buton">
</Button>
</LinearLayout>

Gravity:

Initial toate controalele sunt pozitionate in partea stanga-sus. Acest lucru insa se poate modifica utlizand proprietatea "layout_gravity":

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/mainlayout"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Linear Layout">
</TextView>
<Button
android:layout_gravity="left"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="left">
</Button>
<Button
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="center">
</Button>
<Button
android:layout_gravity="center_vertical" 
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="center_vertical">
</Button>
<Button
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="center_horizontal">
</Button>
<Button
android:layout_gravity="right"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="right">
</Button>
<Button
android:layout_gravity="bottom"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="bottom">
</Button>
</LinearLayout>

Padding:

Proprietatea "padding" determina spatiul intre widget-uri: padding_left, padding_top, padding_right, padding_buttom, padding.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/mainlayout"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:paddingLeft="20dip">
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button 1">
</Button>
<Button
android:id="@+id/btn"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingLeft="40dip"
android:text="Button 2">
</Button>
</LinearLayout>

LinearLayout in LinearLayout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="horizontal">
<Button
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:text= "Button 1">
</Button>
<Button
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:text= "Button 1">
</Button>
</LinearLayout>
<LinearLayout
android:layout_height= "wrap_content"
android:layout_width= "fill_parent"
android:orientation= "horizontal">
<Button
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:text= "Button 3">
</Button>
<Button
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:text= "Button 4">
</Button>
</LinearLayout>
</LinearLayout>

Copyright © 2008-2010 E-LEARN.ro. Toate drepturile rezervate. Conceput si realizat de Neokinetics Software.