User Interface. Relative Layout

Obiectiv tutorial:

Scopul acestui tutorial este de a prezenta o altă modalitate de organizare a controalelor care alcătuiesc  interfaţa grafică a unei aplicaţii Android, şi anume RelativeLayout.

Acest tip de organizare presupune, după cum şi numele exprimă, poziţionarea elementelor grafice relativ la un alt control sau  chiar relativ la părinte (ţinând cont de structura ierarhică a screen-ului).

Ce vrea să însemne aceasta? Acest tip de aşezare  implică faptul că “un copil” de tip control, ce poate fi reprezentat printr-un Button,  TextView, EditText sau oricare alt tip de control, poate fi plasat relativ la o altă componentă a interfeţei grafice fie deasupra, dedesupt, în dreapta sau în partea stânga a acesteia. “Copilul” de tip control poate fi poziţionat şi faţă de container-ul părinte: sus, jos, la drepata sau la stânga. Această poziţionare trebuie să respecte nişte reguli stricte (acestea se pot găsi aici).

Relativ la container:

android:layout_alignParentBottom
android:layout_alignParentLeft
android:layout_alignParentRight
android:layout_alignParentTop
android:layout_centerHorizontal
android:layout_centerInParent
android:layout_centerVertical

Relativ la alte elemente grafice:

android:layout_above
android:layout_below
android:layout_toLeftOf
android:layout_toRightOf

Aliniere cu alte elemente:

android:layout_alignBaseline
android:layout_alignBottom
android:layout_alignLeft
android:layout_alignRight
android:layout_alignTop

 

Exemplul 1:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TextView android:id="@+id/txtName"
android:layout_alignParentLeft="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="@+id/EditText01"
android:text="EditText left: ">
</TextView>
<EditText
android:id="@+id/EditText01"
android:layout_width="260dip"
android:layout_alignParentRight="true"
android:layout_height="wrap_content"
android:text="EditText right">
</EditText>
<Button android:id="@+id/topBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Buton -center horizontal-"
android:layout_centerHorizontal="true"
android:layout_below="@id/EditText01">
</Button>
</RelativeLayout>


Exemplul 2 -Nesting Layouts:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TextView android:id="@+id/txtName"
android:layout_alignParentLeft="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="@+id/EditText01"
android:text="EditText stanga ">
</TextView>
<EditText
android:id="@+id/EditText01"
android:layout_width="260dip"
android:layout_alignParentRight="true"
android:layout_height="wrap_content"
android:text="EditText dreapta">
</EditText>
<Button android:id="@+id/topBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Buton -center horizontal-"
android:layout_centerHorizontal="true"
android:layout_below="@id/EditText01">
</Button>
<LinearLayout android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:orientation= "vertical"
android:layout_below="@id/topBtn">
<Button
android:id= "@+id/Button01"
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:text= "Acesta este un buton intr-un linear layout"/>
<EditText
android:id= "@+id/EditText01"
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:text= "Acesta este un EditText intr-un linear layout"/>
<TextView
android:id= "@+id/TextView01"
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:text= "Acesta este un TextView intr-un linear layout"/>
</LinearLayout>
</RelativeLayout>


Concluzii:

După cum se poate observa din exemplele prezentate anterior, RelativeLayout asigură o organizare mai eficientă a componentelor interfeţei grafice fără a fi necesară utilizarea dimensiunii screen-ului sau a elementelor existente.

Advertisements
User Interface. Relative 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