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

968 views

Published on

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
968
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
47
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Android User Interface Vlad PETRE vlad@vladpetre.com http://twitter.com/vladpetre88 http://facebook.com/vladpetre88 http://www.linkedin.com/in/vladpetre881 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
  2. 2. 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.2 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
  3. 3. Widgets • Statice – TextView – ProgressBar – ImageView • Dinamice – EditText – Button – CheckBox – RadioButton – MapView3 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
  4. 4. Layouts • Elemente de tip container (pot conţine alte View-uri) • Tipuri: – LinearLayout – RelativeLayout – TableLayout – ScrollLayout4 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
  5. 5. Resurse • Se regasesc grupate in directorul res. • Imagini (drawable) – drawable-hdpi – drawable-mdpi – drawable-ldpi – Accesul din cod are loc folosind: R.drawable.nume5 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
  6. 6. Resurse • Interfeţe grafice – layout – Accesul din cod are loc folosind: R.layout.nume • Constante – values6 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
  7. 7. 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);7 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
  8. 8. Exemplu de fişier GUI XML8 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
  9. 9. 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 cod9 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
  10. 10. Exemplu de fişier GUI XML10 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
  11. 11. 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 - Inches11 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
  12. 12. 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.12 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
  13. 13. 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.13 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
  14. 14. Exemplu Meniu doar Cod Java14 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
  15. 15. Exemplu Meniu XML15 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
  16. 16. Exemplu Meniu XML în cod Java16 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
  17. 17. Toast17 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
  18. 18. Referinţe • http://pdm.ipworkshop.ro • http://developer.android.com/guide/topics/ui/index.html • http://developer.android.com/resources/tutorials/views/index.h • http://developer.android.com/guide/topics/resources/more-reso • http://developer.android.com/guide/topics/resources/providing-18 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
  19. 19. Întrebări?19 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

×