User Interface. Linear Layout

Scopul acestui tutorial este de a face o prezentare a celui mai simplu layout existent pe platforma Android şi anumeLinear Layout, dar în cadrul căreia vor fi  integrate şi alte tipuri de controale.

Interfaţa grafică a aplicaţiilor Android are ca şi componente principale View şi ViewGroup.  Clasa View este clasă de bază pentru subclasa elementelor numite “widgets“, iar ViewGroup pentru “layouts“.

După cum am menţionat în prezentările anterioare, design-ul interfeţelor grafice se realizează cu ajutorul unor fişiere xml în care sunt utilizate tag-uri speciale.

Pentru a realiza o nouă interfaţă grafică:  click dreapta pe proiectul în care vreţi să adăugaţi noul design, New > Other > Android XML File > Next > LinearLayoutExample.xml (reprezentând numele fişierului), selectaţi Layout la tipul resursei unde va fi creat fişierul şi Finish.

Componenta LinearLayout deţine numeroase proprietăţi printre care cele mai importante ar fi :

• Orientation
• Fill model
• Gravity
• Padding

Orientation:

Această proprietate stabileşte cum vor fi afişate elementele, fie orizontal, stil rând sau vertical, gen coloană.

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 înălţime şi lăţime. Aceste proprietăţi pot avea trei valori:

1. o valoare numerică în pixeli,  dpi sau inchi (pentu mai multe detalii citiţi aici).
2. “wrap_content” – widget-ul ocupă un spaţiu egal cu aria sa.
3. “fill_parent“ – widget-ul ocupă tot spaţiul 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:

Iniţial toate controalele sunt poziţionate în partea stângă-sus. Acest lucru însă se poate modifica utlizând 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” determină spaţiul între 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 în 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>