2. Interfete Grafice

Despre XML

XML-ul (eXtensible Markup Language) este un limbaj descriptiv, fiind alcatuit din marcaje si asemanandu-se cu HTML-ul, care este de fapt, in mod indirect, derivat din limbajul XML.

Principiul unui limbaj de programare (Java, C++, Pascal) este de a efectua calcule al caror rezultat sa il afiseze intr-o interfata grafica. Prin intermediul unui meta-limbaj, cum este XML-ul, nu se efectueaza nici calcule, nici asezarea in pagina, ci structureaza informatiile.

Sintaxa

Fiecare element este incadrat de tag-uri de inceput si sfarsit si contine un set de atribute. Exemple:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
</RelativeLayout>

<Button 
    android:layout_width="40dp"
    android:layout_height="40dp"/>

Observati ca exista doua tipuri de tag-uri de inchidere.

Atributele se definesc in felul urmator:

android:proprietate="valoare" 

Componente simple (widgets)

Un widget este un element de baza care permite afisarea de continut sau care permite interactionarea cu aplicatia. Fiecare widget are un numar important de atribute XML.

TextView permite afisarea unui sir de caractere pe care utilizatorul nu le poate modifica.

<TextView
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:text="@string/textView"
  android:textSize="8sp"
  android:textColor="#112233" />

Button este un simplu buton, care de fapt este un TextView "clickable".

<Button
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:text="@string/button" />

Printre widget-urile folosite frecvent se numara si EditText, CheckBox, RadioButton si RadioGroup. Mai multe informatii despre componente si atributule specifice fiecaruia gasiti pe site-ul http://developer.android.com/.

Layout-uri

LinearLayout asaza elementele grafice pe aceeasi linie, specificandu-se orientarea prin atributul android:orientation, care poate avea doua valori:

• vertical: elementele vor fi asezate in coloana

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent" >
  <Button 
    android:id="@+id/b1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Premier bouton" />
 
  <Button 
    android:id="@+id/b2"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Second bouton" />
</LinearLayout>

• horizontal: elementele vor fi asezate pe linie

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="horizontal"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent" >
  <Button 
    android:id="@+id/premier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Premier bouton" />
  <Button 
    android:id="@+id/second"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:text="Second bouton" />
</LinearLayout>

RelativeLayout plaseaza componentele unele in functie de celelalte.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp" >
    <EditText
        android:id="@+id/name"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/reminder" />
    <Spinner
        android:id="@+id/dates"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/times" />
    <Spinner
        android:id="@id/times"
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentRight="true" />
    <Button
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/times"
        android:layout_alignParentRight="true"
        android:text="@string/done" />
</RelativeLayout>

Accesarea elementelor grafice din Java

Widget-urile pot fi modificate si din codul Java, nu doar fisierul XML, deoarece apropate toate proprietatile din XML au o functie echivalenta in JAVA. Apelam la aceasta optiune cand dorim ca la apelarea unui anumit eveniment, un element al ferestrei sa se modifice. Pentru a realiza acest lucru, trebuie sa cream o legatura intre elementul din XML si partea de cod. In primul rand, pe langa propietatile deja setate, ale elementului, vom mai adauga una:id.

android:id="@+id/idElement"

Dupa ce elementul poate fi identificat prin id, il putem lega de codul Java.

Button buton=findViewById(R.id.buton1);