Upload
vlad-petre
View
925
Download
1
Embed Size (px)
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
Citation preview
1 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
AndroidUser Interface
Vlad PETRE
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?