Android           User Interface                      Vlad PETRE               vlad@vladpetre.com          http://twitter....
Componentele Grafice    • UI-ul este alcatuit din      obiecte de tip View sau      ViewGroup:      – View este clasa moşt...
Widgets    • Statice       – TextView       – ProgressBar       – ImageView    • Dinamice       –   EditText       –   But...
Layouts    • Elemente de tip      container (pot conţine      alte View-uri)    • Tipuri:      – LinearLayout      – Relat...
Resurse    • Se regasesc grupate in directorul      res.    • Imagini (drawable)       – drawable-hdpi       – drawable-md...
Resurse    • Interfeţe grafice      – layout      – Accesul din cod are loc folosind:        R.layout.nume    • Constante ...
Constructia Layout-urilor    • Din cod sau folosind un fişier xml.    • Fişierul xml se ataseaza unui Activity în cod:    ...
Exemplu de fişier GUI XML8       Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
Exemplu de fişier GUI XML                     • xmlns:android – necesar de definit doar                       pentru compo...
Exemplu de fişier GUI XML10       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 ...
Resurse în funcţie de Densitatea Pixelilor     • ldpi – Low Density Screens        – 120dpi     • mdpi – Medium Density Sc...
Meniu     • Activat la apăsarea tastei Meniu.     • Trebuie suprascrise metodele:        – public boolean          onCreat...
Exemplu Meniu doar Cod Java14        Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
Exemplu Meniu XML15    Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
Exemplu Meniu XML în cod Java16         Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
Toast17   Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
Referinţe     •   http://pdm.ipworkshop.ro     •   http://developer.android.com/guide/topics/ui/index.html     •   http://...
Întrebări?19   Scoala de Vara IP Workshop 2011 – Calimanesti Valcea
Upcoming SlideShare
Loading in...5
×

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

742

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
742
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
45
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×