[Curs Android] C04 - User Interface (IPW 2011)

19
1 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea Android User Interface Vlad PETRE vlad@vladpetre.com http://twitter.com/vladpetre88 http://facebook.com/vladpetre88 http://www.linkedin.com/in/ vladpetre88

description

These slides are part of the Android Development Course which I taught to 10 students, while participating in the IP Workshop Summer School 2011. http://www.scoaladevara.info/2011/?page_id=39

Transcript of [Curs Android] C04 - User Interface (IPW 2011)

Page 1: [Curs Android] C04 - User Interface (IPW 2011)

1 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

AndroidUser Interface

Vlad PETRE

[email protected]

http://twitter.com/vladpetre88

http://facebook.com/vladpetre88

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

Page 2: [Curs Android] C04 - User Interface (IPW 2011)

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.

Page 3: [Curs Android] C04 - User Interface (IPW 2011)

3 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Widgets• Statice

– TextView– ProgressBar– ImageView

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

Page 4: [Curs Android] C04 - User Interface (IPW 2011)

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

Page 5: [Curs Android] C04 - User Interface (IPW 2011)

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

Page 6: [Curs Android] C04 - User Interface (IPW 2011)

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

Page 7: [Curs Android] C04 - User Interface (IPW 2011)

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

Page 8: [Curs Android] C04 - User Interface (IPW 2011)

8 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Exemplu de fişier GUI XML

Page 9: [Curs Android] C04 - User Interface (IPW 2011)

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

Page 10: [Curs Android] C04 - User Interface (IPW 2011)

10 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Exemplu de fişier GUI XML

Page 11: [Curs Android] C04 - User Interface (IPW 2011)

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

Page 12: [Curs Android] C04 - User Interface (IPW 2011)

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.

Page 13: [Curs Android] C04 - User Interface (IPW 2011)

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.

Page 14: [Curs Android] C04 - User Interface (IPW 2011)

14 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Exemplu Meniu doar Cod Java

Page 15: [Curs Android] C04 - User Interface (IPW 2011)

15 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Exemplu Meniu XML

Page 16: [Curs Android] C04 - User Interface (IPW 2011)

16 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Exemplu Meniu XML în cod Java

Page 17: [Curs Android] C04 - User Interface (IPW 2011)

17 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Toast

Page 18: [Curs Android] C04 - User Interface (IPW 2011)

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

Page 19: [Curs Android] C04 - User Interface (IPW 2011)

19 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

Întrebări?