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.

Exemplu de sintaxa:

<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>

Se observa folosirea tagurilor “<“ si “>“, ca in HTML. La fel ca in HTML, exista doua variante de a inchide un tag:

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

sau

<EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
</EditText>

Fiecare element are anumite atribute, care se definesc in felul urmator:

android:proprietate="valoare" 

Exista anumite atribute generale, care se aplica atat componentelor, cat si layout-urilor:

  
  Pozitionarea
* android:layout_margin="20dp" 
* android:layout_padding="20dp"
  
  Dimensiunea
* android:layout_width="40dp", unde dp este o unitate de masura independenta de rezolutia ecranului. Exista si alte unitati de masura (cum ar fi px, mm), dar acestea variaza de la un ecran la altul.
* android:layout_width="wrap_content", inseamna ca va ocupa cat de putin spatiu cu putinta pe axa respectiva
* android:layout_width="fill_parent", inseamna ca va ocupa la fel de mult spatiu ca parintele sau, pe axa corespunzatoare (orizontal sau vertical) 

  Text
* android:text="Bunaaaaa"
  Culoarea textului
* android:textColor="#FF0000", simbolul # permite sa scriem culoarea in cod hexadecimal. 

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" />

EditText este permite utilizatorului sa scrie texte. De fapt, este vorba despre un TextView editabil.

<EditText
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:hint="@string/editText"
  android:inputType="textMultiLine"
  android:lines="5" />

Button este un simplu buton, care de fapt este un TextView clicabil.

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

CheckBox este o casuta care poate avea doua stari: este bifata sau nu.

<CheckBox
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:text="@string/checkBox"
  android:checked="true" />

RadioButton si RadioGroup este de fapt un layout, dar este folosit numai pentru RadioButton si de aceea vorbim despre el acum. Scopul este ca intr-un RadioGroup sa nu poate fi bifat decat un RadioButton.

<RadioGroup
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="horizontal" >
  <RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:checked="true" />
  <RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
  <RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
</RadioGroup>

Documentatia

Mai multe informatii despre componente si atributule specifice fiecaruia gasiti pe site-ul http://developer.android.com/.

De exemplu, daca vreau sa schimb culoarea textului dintr-un TextView, intru pe site, scriu in campul de cautare din partea stanga sus TextView (va aparea o lista din care pot alege clasa despre care vreau sa aflu mai multe) ca in figura de mai jos:

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.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent" >
  <TextView
    android:id="@+id/alPatrulea"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="[IV] In josul (V), marginea stanga aliniata cu marginea stanga a lui (II)"
    android:layout_above="@+id/alCincilea"
    android:layout_alignLeft ="@id/alDoilea" />
  <TextView
    android:id="@+id/alCincilea"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="[V] Jos stanga"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true" />
 
  <TextView
      android:id="@+id/alTreilea"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentRight="true"
      android:layout_below="@+id/primul"
      android:layout_marginTop="14dp"
      android:text="[III] In josul si la dreapta lui (I)" />
 
  <TextView
      android:id="@+id/alDoilea"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignBaseline="@+id/alTreilea"
      android:layout_alignBottom="@+id/alTreilea"
      android:layout_alignRight="@+id/primul"
      android:text="[II] In josul lui (I)" />
 
  <TextView
      android:id="@+id/primul"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentLeft="true"
      android:layout_alignParentTop="true"
      android:text="[I] Sus by default" />
 
</RelativeLayout>

TableLayout organizeaza elementele sub forma unui tabel, ca in HTML, dar fara margini.

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);

Exercitii

  1. Creati interfata grafica a unei aplicatii, care sa arate ca in figura urmatoare.

 Instructiuni:
* Vom folosi XML.
* Pentru a pune mai multe componente intr-un layout, vom integra elementele in interiorul tagurilor layoutului respectiv.
* Vom folosi un singur layout.
* In cele doua EditText-uri se vor putea introduce doar numere. Pentru aceasta vom folosi atributul android:inputType si selectam valoarea numbers.
* TextView-urile vor fi scrise cu rosu si centrate.
* Pentru a ingrosa un TextView, vom folosi atributul android:textStyle, unde vom seta valoarea bold.
  1. Creati o fereastra care sa arate ca in imagine:

introducere_android/curs/curs1.txt · Ultima modificare: 2013/08/03 02:39 de către diana.popescu
CC Attribution-Noncommercial-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0