Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Ch4 creating user interfaces

Nächste SlideShare
Intro to Adobe Photoshop
Intro to Adobe Photoshop
Wird geladen in …3

Hier ansehen

1 von 44 Anzeige

Weitere Verwandte Inhalte

Andere mochten auch (19)

Ähnlich wie Ch4 creating user interfaces (20)


Aktuellste (20)


Ch4 creating user interfaces

  1. 1. Ch4. Creating User Interface Browny 10, May, 2011
  2. 2. Outline • Introducing Views • Introducing Layouts • Creating New Views • Drawable Resources • Creating and Using Menus
  3. 3. Terminology • View ‣ ,    UI  controls    layout  classes    View   ,    control    widget  (not  home  screen  or  App   Widgets) • View Groups ‣ View    extension,    child  Views • Activities ‣  user  interface,    View  assign     Ac>vity
  4. 4. Creating Activity with Views(1/2) • Activity user interface ‣ Call  setContentView,  passing  in  the  View   instance    layout  resources  (layout  resource  ID) ‣ Almost  always  use  in  onCreate  handler • Get references to the Views used within a layout with the findViewById method
  5. 5. Creating Activity with Views(2/2) Inflating an Activity layout Creating a UI layout in code
  6. 6. The Android Widget Toolbox • Android supplies a toolbox of standard Views to help you create simple interfaces • TextView, EditText, ListView, Spinner, Button, CheckBox, RadioButton, ViewFlipper, QuickContactBadge http://developer.android.com/guide/tutorials/views/index.html
  7. 7. Layouts • Layout managers (layouts) are extensions of the ViewGroup class used to position child controls for your UI • The Android SDK includes some simple layouts to help you construct your UI http://developer.android.com/guide/topics/ui/
  8. 8. Using Layouts • Preferred way ‣ Implement  layouts  by  using  XML  as  external   resources • A simple layout that places a TextView above an EditText control using a vertical LinearLayout
  9. 9. Simple Linear Layout in XML
  10. 10. Simple LinearLayout in Code
  11. 11. Optimizing Layouts(1/2) • Inflating layouts into your Activities is an expensive process • Good practice ‣ Keep  your  layouts  as  simple  as  possible ‣ Avoid  to  inflate  an  en>rely  new  layout  for  small   changes  to  an  exis>ng  one
  12. 12. Optimizing Layouts(2/2) • Avoid unnecessary nesting (Don’t put one layout within another unless it is necessary) • Avoid using too many Views • Avoid deep nesting (It’s good practice to restrict nesting to fewer than 10 levels) • Android SDK includes the layoutopt command line tool
  13. 13. Creating New Views • Modify or Extend (appearance and/or behavior) an existing control • Combine Views to create atomic, reusable controls (leverage the functionality of several interconnected Views) • Create an entirely new control
  14. 14. Modifying Existing Views • Create a new class that extends an existing control • To override the appearance (onDraw) • To override behavior (onKeyDown)
  15. 15. Creating Compound Controls • Create compound controls by extending a ViewGroup (usually a layout) • Choose the layout class that’s most suitable for positioning the child controls, and extend it
  16. 16. Compound View: Using an External Resource(1/3)
  17. 17. Compound View: Using an External Resource(2/3) • To use this layout for your new View, override the View’s constructor to inflate the layout resource using the inflate method from the LayoutInflate system service
  18. 18. Compound View: Using an External Resource(3/3)
  19. 19. Compound View: in code
  20. 20. Hook up the event handlers for each child control
  21. 21. Creating Custom Views • Extend either the View (lightweight solution) or SurfaceView classes (supports drawing from a background thread and using openGL for 3D graphics) • The View class provides a Canvas object with a series of draw methods and Paint classes. Use them to create a visual interface with bitmaps and raster graphics
  22. 22. Creating a New Visual Interface(1/2) • The base View class presents a distinctly empty 100-pixel-by-100- pixel square • You need to override the onMeasure and onDraw methods to change it
  23. 23. Creating a New Visual Interface(2/2)
  24. 24. Drawing Your Control(1/3) • Android provides a variety of tools to help draw your design on the Canvas using various Paint objects • The Canvas class includes helper methods for drawing primitive 2D objects including circles, lines, etc. • Also supports transformations that let you rotate, translate (move), and scale (resize) the Canvas while you draw on it
  25. 25. Drawing Your Control(2/3) • Any object created in your onDraw method will be created and destroyed every time the screen refreshes ( ) • Improve efficiency by making as many of these objects (particularly instances of Paint and Drawable) class-scoped and by moving their creation into the constructor
  26. 26. Drawing Your Control(3/3)
  27. 27. Sizing Your Control(1/3) • The onMeasure method is called when the control’s parent is laying out its child controls ‣ It  asks  the  ques>on  ‘‘How  much  space  will  you   use?’’  and  passes  in  two  parameters:   widthMeasureSpec  and  heightMeasureSpec • Rather than return a result, you pass the View’s height and width into the setMeasuredDimension method
  28. 28. Sizing Your Control (3/3) • Before widthMeasureSpec and heightMeasureSpec can be used, they first need to be decoded using the static getMode and getSize methods from the MeasureSpec class • Depending on the mode value, the size represents either the maximum space available for the control (AT_MOST), or the exact size that your control will occupy (EXACTLY)
  29. 29. Handling User Interaction Events (1/2) • Android exposes several virtual event handlers that let you react to user input ‣ onKeyDown  (D-­‐pad,  keyboard,  hang-­‐up,  call,   back,  and  camera  buPons) ‣ onKeyUp ‣ onTrackballEvent ‣ onTouchEvent
  30. 30. Handling User Interaction Events (2/2)
  31. 31. Using Custom Controls In Code In XML
  32. 32. Drawable Resources • Introduce several new types of Drawables resources • Show how to use these resources to create user interfaces that are independent of screen size and resolution
  33. 33. Shapes, Colors, and Gradients • Android includes a number of simple Drawable resource types that can be defined entirely in XML ‣ ColorDrawable,  ShapeDrawable,  and  GradientDrawable   classes ‣ Composite  Drawables  (Transforma>ve  Drawables,  Layer   Drawable,  State  List  Drawables,  Level  List  Drawables) ‣ NinePatch  Drawable • These resources are stored in the res/drawable folder and can then be identified in code by their lowercase XML filenames
  34. 34. Resolution and Density Independence • The resource directory qualifiers ‣ Store  alterna>ve  assets  and  layouts  for  different   screen  configura>ons   • The manifest elements ‣ Limit  the  screen  sizes  your  applica>on  supports.
  35. 35. Resource Qualifiers for Screen Size and Pixel Density • Folder-name qualifiers ‣ Include  alterna>ve  resources  for  different   screen  sizes,  pixel  densi>es,  and  aspect  ra>os ‣ Screen  size  (small,  medium,  large),  Pixel  density   (ldpi,  mdpi,  hdpi,  nodpi),  Aspect  ra>o  (long,   notlong) • Can be used independently, or in combination with each other
  36. 36. Manifest to Limit • <supports-screens> manifest element to specify which screens your application can be run on • A false value will force Android to use compatibility scaling to attempt to scale your application UI correctly
  37. 37. Best Practices for Resolution Independence • Relative Layouts and Density- Independent Pixels • Using Scalable Graphics Assets • Provide Optimized Resources for Different Screens • Testing, Testing and Testing
  38. 38. Android Menu System • Android features a three-stage menu system optimized for small screens: submenus expanded menu icon menu
  39. 39. The Icon Menu • It displays the icons and text for a limited number of Menu Items (typically six) • If the menu contains more than the maximum number of visible Menu Items, a More Menu Item is displayed. When selected, it displays the expanded menu
  40. 40. The Expanded Menu • The expanded menu is triggered when a user selects the More Menu Item from the icon menu • It does not display icons. Pressing back from the expanded menu returns you to the icon menu • You cannot force Android to display the expanded menu instead of the icon menu
  41. 41. Submenus • Android does not support nested submenus, you can’t add a submenu to a submenu • As with the extended menu, icons are not displayed in the submenu
  42. 42. Thank you :)