1 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

AndroidUser Interface

Vlad PETRE

vlad@vladpetre.com

http://twitter.com/vladpetre88

http://facebook.com/vladpetre88

http://www.linkedin.com/in/vladpetre88

2 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Componentele Grafice• UI-ul este alcatuit din

obiecte de tip View sau ViewGroup:– View este clasa moştenită

de widgets.– ViewGroup este clasa

moştenită de layouts.

• Sunt plasate într-un Activity.

3 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Widgets• Statice

– TextView– ProgressBar– ImageView

• Dinamice– EditText– Button– CheckBox– RadioButton– MapView

4 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Layouts• Elemente de tip

container (pot conţine alte View-uri)

• Tipuri:– LinearLayout– RelativeLayout– TableLayout– ScrollLayout

5 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Resurse• Se regasesc grupate in directorul

res.

• Imagini (drawable)– drawable-hdpi– drawable-mdpi– drawable-ldpi

– Accesul din cod are loc folosind: R.drawable.nume

6 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Resurse• Interfeţe grafice

– layout– Accesul din cod are loc folosind:

R.layout.nume

• Constante– values

7 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Constructia Layout-urilor• Din cod sau folosind un fişier xml.• Fişierul xml se ataseaza unui Activity în cod:

– this.setContentView (R.layout.nume);

• Pentru a customiza un element dintr-o lista, se defineşte corespunzător fişierul xml şi se încarcă apoi asupra view-ului element:– View element = inflater.inflate

(R.layout. list_element_view, null);

8 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Exemplu de fişier GUI XML

9 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Exemplu de fişier GUI XML

• xmlns:android – necesar de definit doar pentru componenta radacina

• android:layout_width şi android:layout_height sunt obligatorii• Valori:

• fill_parent, wrap_content• px, dp, sp, mm, in, pt

• android:id – necesar pentru utilizarea componentei in codul Java• @+id/button1 – în xml• R.id.button1 – în cod

10 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Exemplu de fişier GUI XML

11 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Unităţi de Măsură pentru Dimensiuni• dp – Density Independent Pixels

– Unitate de măsură abstractă, bazată pe densitatea de pixeli a ecranului. Unitatea este relativă la 160dpi. Deci 160dp va avea mereu 1 inch indiferent de densitatea ecranului. Se recomanda a fi aplicat asupra view-urilor pentru ca sistemul sa scaleze corespunzator dimensiunea acestora indiferent de marimea ecranului.

• sp – Scale Independent Pixels– Analog cu dp, dar se recomanda a fi aplicat asupra fonturilor.

• pt – Points– 1/72 dintr-un inch, bazată pe dimensiunea fizica a ecranului.

• px – Pixeli• mm - Milimetri• in - Inches

12 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Resurse în funcţie de Densitatea Pixelilor• ldpi – Low Density Screens

– 120dpi

• mdpi – Medium Density Screens– 160dpi

• hdpi – High Density Screens– 240dpi

• xhdpi – Extra High Density Screens– 230dpi

• nodpi – folosit pe resurse de tip bitmap daca nu se doreste scalarea in functie de dimensiunea ecranului

• Avem o scalare 3:4:6:8 intre cele cele 4 densitati. Deci un bitmap de 9x9 in ldpi va avea 12x12 în mdpi, 18x18 în hdpi şi 24x24 în xhdpi.

13 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Meniu• Activat la apăsarea tastei Meniu.• Trebuie suprascrise metodele:

– public boolean onCreateOptionsMenu(Meniu menu);

– public boolean onOptionsItemSelected (MenuItem item)

• Adăugarea unui meniu din cod:– menu.add(…);

• Definirea meniului într-un fişier xml.

14 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Exemplu Meniu doar Cod Java

15 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Exemplu Meniu XML

16 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Exemplu Meniu XML în cod Java

17 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Toast

18 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Referinţe• http://pdm.ipworkshop.ro• http://developer.android.com/guide/topics/ui/index.html• http://developer.android.com/resources/tutorials/views/

index.html• http://developer.android.com/guide/topics/resources/

more-resources.html#Dimension• http://developer.android.com/guide/topics/resources/

providing-resources.html

19 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Întrebări?