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>


Advertisements
User Interface. Linear Layout

2 thoughts on “User Interface. Linear Layout

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s