Android User Interface

1,175 views
1,086 views

Published on

Unterlage zur Android Vorlesung "Programmierung von Apps" an der Hochschule Karlsruhe.
Die Studierenden
kennen die grundlegenden
Prinzipien, Patterns und Bestandteile
eines Android User Interface
und verstehen, wie damit effizient
eine Benutzeroberfläche erstellt
werden kann.

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

No Downloads
Views
Total views
1,175
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Android User Interface

  1. 1. Programmierung von Apps Android User InterfaceDanny Fürniß, 12.11.2012, 1
  2. 2. Die Studierenden kennen die grundlegenden Prinzipien, Patterns und Bestandteile eines Android User Interface und verstehen, wie damit effizient eine Benutzeroberfläche erstellt werden kann.Danny Fürniß, 12.11.2012, 2
  3. 3. Danny Fürniß, 12.11.2012, 3 Motivation
  4. 4. Danny Fürniß, 12.11.2012, 4 Bildquelle: http://www.theinfochief.com/wp-content/uploads/2010/09/happy-ipad-user.jpg glücklich! Mach Deine Benutzer
  5. 5. Danny Fürniß, 12.11.2012, 5 5 Sterne
  6. 6. Danny Fürniß, 12.11.2012, 6 being featured
  7. 7. Danny Fürniß, 12.11.2012, 7 Bildquelle: http://www.kascommissiegids.nl/images/dagobert_duck_geldpakhuis.jpg More installs, more money!
  8. 8. Danny Fürniß, 12.11.2012, 8 Prinzipien
  9. 9. Be usable Be beautiful Be responsive Be AndroidDanny Fürniß, 12.11.2012, 9
  10. 10. Danny Fürniß, 12.11.2012, 10 Concept first!
  11. 11. Danny Fürniß, 12.11.2012, 12 ms
  12. 12. Danny Fürniß, 12.11.2012, 13 Demo
  13. 13. Danny Fürniß, 12.11.2012, 14 Patterns
  14. 14. DashboardDanny Fürniß, 12.11.2012, 15 Bildquelle: http://www.androiduipatterns.com/p/android-ui-pattern-collection.html
  15. 15. DashboardDanny Fürniß, 12.11.2012, 16 Bildquelle: http://donstorch.com/2012/09/24/rest-in-peace/
  16. 16. DrawerDanny Fürniß, 12.11.2012, 17 Bildquelle: http://www.androiduipatterns.com/2012/06/emerging-ui-pattern-side-navigation.html
  17. 17. NavigationDanny Fürniß, 12.11.2012, 18 Bildquelle: http://developer.android.com/design/patterns/navigation.html
  18. 18. Danny Fürniß, 12.11.2012, 19 Bildquelle: http://developer.android.com/design/patterns/navigation.html
  19. 19. Action BarDanny Fürniß, 12.11.2012, 20 Bildquelle: http://developer.android.com/design/patterns/actionbar.html
  20. 20. Danny Fürniß, 12.11.2012, 21 Bildquelle: http://developer.android.com/design/patterns/actionbar.html
  21. 21. Danny Fürniß, 12.11.2012, 22 Bildquelle: http://developer.android.com/design/patterns/actionbar.html
  22. 22. Danny Fürniß, 12.11.2012, 23 Bildquelle: http://developer.android.com/design/patterns/actionbar.html
  23. 23. Quick ActionsDanny Fürniß, 12.11.2012, 24 Bildquelle:http://www.androiduipatterns.com/p/android-ui-pattern-collection.html
  24. 24. Danny Fürniß, 12.11.2012, 25 Views und Layout
  25. 25. deklarativ vs. prozedural <?xml version="1.0" encoding="utf-8"?> <LinearLayout new LinearLayout() <TextView new TextView() android:id="@+id/textView1" android:text="Dauer in Millisekunden"/> <EditText new EditText() android:id="@+id/delayTextView" android:text="200" > </EditText> <Button new Button() android:id="@+id/startTaskButton" android:text="Starte LongRunningTask" />Danny Fürniß, 12.11.2012, 26 </LinearLayout> XML Java
  26. 26. android.view.View View Basisklasse aller UI ElementeDanny Fürniß, 12.11.2012, 27
  27. 27. android.view.ViewGroupDanny Fürniß, 12.11.2012, 28 Basisklasse der Layouts
  28. 28. Danny Fürniß, 12.11.2012, 29 FrameLayout
  29. 29. Danny Fürniß, 12.11.2012, 30 LinearLayout
  30. 30. Danny Fürniß, 12.11.2012, 31 GridLayout
  31. 31. Danny Fürniß, 12.11.2012, 32 android.view.ViewStub
  32. 32. View HierarchyDanny Fürniß, 12.11.2012, 33 Max 10 Ebenen, Max 80 Views je Screen Demo Bildquelle: http://developer.android.com/guide/topics/ui/index.html
  33. 33. Danny Fürniß, 12.11.2012, 34 Bildquelle: http://android-developers.blogspot.de/2009/03/android-layout-tricks-3-optimize-by.html
  34. 34. <?xml version="1.0" encoding="utf‐8"?> <merge/> <merge xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/large_text" android:textAppearance="?android:attr/textAppearanceLarge" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content"Danny Fürniß, 12.11.2012, 35 android:text="@string/button" /> </merge>
  35. 35. View properties layout_height layout_weight layout_width gravity layout_gravity visibilityDanny Fürniß, 12.11.2012, 36 text id … Demo
  36. 36. Density Independent Pixels px dip/dp Beispiel: Samsung Galaxy S (4 Zoll, 480x800 Pixel) 480 800Danny Fürniß, 12.11.2012, 37 Baseline: 160dpi (mdpi) 480 800 932,952 c = Screendiagonale in Pixeln Faktor SGS: 240dpi / 160dpi = 1,5 932,952 Displaygröße in dp: 320dp x 533dp 233,238 240 4 Quelle: http://www.brandbuildercompany.com/blog/2012/03/29/device-independent-pixel-formula-for-mobile-devices/, Bildquelle: http://developer.android.com/guide/practices/screens_support.html
  37. 37. Custom Views • Nutzung bestehender Views als Basis für Überschreibung • Implementierung „from Scratch“ durch Ableitung von android.view.View • Compound Views (Kombination bestehender Views)Danny Fürniß, 12.11.2012, 38
  38. 38. Input Events onClick() View.OnClickListener boolean onLongClick() View.OnLongClickListener boolean onKey() View.OnKeyListener boolean onTouch() View.OnTouchListener ...Danny Fürniß, 12.11.2012, 39
  39. 39. Danny Fürniß, 12.11.2012, 40 Framework Input Method Demo
  40. 40. Danny Fürniß, 12.11.2012, 41 Listen und Adapter
  41. 41. Danny Fürniß, 12.11.2012, 42 Adapter
  42. 42. Danny Fürniß, 12.11.2012, 43 Thanks Romain Guy ListView
  43. 43. Danny Fürniß, 12.11.2012, 44 Thanks Romain Guy
  44. 44. Danny Fürniß, 12.11.2012, 45 Thanks Romain Guy
  45. 45. Danny Fürniß, 12.11.2012, 46 Thanks Romain Guy
  46. 46. Danny Fürniß, 12.11.2012, 47 Thanks Romain Guy
  47. 47. ViewHolder Pattern static class ViewHolder {  TextView name;  ImageView icon;  } Danny Fürniß, 12.11.2012, 48
  48. 48. public View getView(int position, View convertView, ViewGroup parent) {  ViewHolder holder;  if (convertView == null) {  convertView = mInflater.inflate(R.layout.sample, null);  holder = new ViewHolder();  holder.name = (TextView)convertView.findViewById(R.id.text);  holder.icon = (ImageView)convertView.findViewById(R.id.icon);  convertView.setTag(holder);  } else {  holder = (ViewHolder) convertView.getTag(); }  holder.name.setText(myElements.get(id)); Danny Fürniß, 12.11.2012, 49 holder.icon.setImageBitmap( mIcon1 ); return convertView; } 
  49. 49. Danny Fürniß, 12.11.2012, 50 Threading
  50. 50. Use Strict Mode public void onCreate() { if (DEVELOPER_MODE) { StrictMode.setThreadPolicy( new StrictMode.ThreadPolicy.Builder() .detectDiskReads() .detectDiskWrites() .detectNetwork() .penaltyLog() .build()); StrictMode.setVmPolicy( new StrictMode.VmPolicy.Builder() .detectLeakedSqlLiteObjects() .detectLeakedClosableObjects() .penaltyLog() .penaltyDeath()Danny Fürniß, 12.11.2012, 51 .build()); } super.onCreate(); }
  51. 51. public class LongRunningAsyncTask extends AsyncTask<Params, Progress, Result> { protected void onPreExecute() { // Wird im UI-Thread ausgeführt. } protected Result doInBackground(Params... params) { // Wird In einem neuen Background-Thread ausgeführt. publishProgress(Progress) return Result; } protected void onProgressUpdate(Progress... values) { // Wird im UI-Thread ausgeführt. } protected void onPostExecute(Result result) { // Wird im UI-Thread ausgeführt. } }Danny Fürniß, 12.11.2012, 52 new LongRunningAsyncTask().execute(Params); Demo
  52. 52. Danny Fürniß, 12.11.2012, 53 Trace View Demo
  53. 53. Danny Fürniß, 12.11.2012, 54 Menus
  54. 54. OptionsMenu public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.optionsmenu, menu); return true; }Danny Fürniß, 12.11.2012, 55 Bildquelle: http://developer.android.com/guide/topics/ui/menus.html
  55. 55. ContextMenu/Contextual Action ModeDanny Fürniß, 12.11.2012, 56 Bildquelle: http://developer.android.com/guide/topics/ui/menus.html
  56. 56. Danny Fürniß, 12.11.2012, 57 Preferences
  57. 57. Preferences • PreferenceActivity / PreferenceFragment • PreferenceScreen • PreferenceCategory • CheckBoxPreference • EditTextPreference • ListPreference • MultiSelectListPreference …Danny Fürniß, 12.11.2012, 58 • Demo
  58. 58. PreferenceScreen <PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android" android:key="first_preferencescreen"> <CheckBoxPreference android:key="wifi enabled" android:title="WiFi" /> <PreferenceScreen android:key="second_preferencescreen" android:title="WiFi settings"> <CheckBoxPreference android:key="prefer wifi" android:title="Prefer WiFi" /> ...Danny Fürniß, 12.11.2012, 59 </PreferenceScreen> </PreferenceScreen>
  59. 59. Danny Fürniß, 12.11.2012, 60 Eye Candy
  60. 60. Danny Fürniß, 12.11.2012, 61 Styles and Themes
  61. 61. Danny Fürniß, 12.11.2012, 62 Styles and Themes
  62. 62. Drawable Resources • 2D Graphics • Erstellt aus Bilddateien • Erstellt aus XML-RessourcenDanny Fürniß, 12.11.2012, 63
  63. 63. BitmapDrawable /res/drawable (.png empfohlen, .jpg, .gif)Danny Fürniß, 12.11.2012, 64
  64. 64. NinePatchDrawableDanny Fürniß, 12.11.2012, 65 <Dateiname>.9.png Beispiel: MyButton.9.png
  65. 65. Layer-List (LayerDrawable) <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@[package:]drawable/drawable_resource" android:id="@[+][package:]id/resource_name" android:top="dimension" android:right="dimension" android:bottom="dimension" android:left="dimension" /> </layer-list>Danny Fürniß, 12.11.2012, 66
  66. 66. Suchlauf von oben nach unten (default State sollte ganz unten stehen) State-List (StateListDrawable) <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" android:constantSize=["true" | "false"] android:dither=["true" | "false"] android:variablePadding=["true" | "false"] > <item android:drawable="@[package:]drawable/drawable_resource" android:state_pressed=["true" | "false"] android:state_focused=["true" | "false"] android:state_hovered=["true" | "false"] android:state_selected=["true" | "false"] android:state_checkable=["true" | "false"]Danny Fürniß, 12.11.2012, 67 android:state_checked=["true" | "false"] android:state_enabled=["true" | "false"] android:state_activated=["true" | "false"] android:state_window_focused=["true" | "false"] /> </selector>
  67. 67. Level-List (LevelListDrawable) <?xml version="1.0" encoding="utf-8"?> <level-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/drawable_resource" android:maxLevel="integer" android:minLevel="integer" /> </level-list>Danny Fürniß, 12.11.2012, 68
  68. 68. TransitionDrawable <?xml version="1.0" encoding="utf-8"?> <transition xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@[package:]drawable/drawable_resource" android:id="@[+][package:]id/resource_name" android:top="dimension" android:right="dimension" android:bottom="dimension" android:left="dimension" /> </transition>Danny Fürniß, 12.11.2012, 69
  69. 69. ShapeDrawable 1/2 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape=["rectangle" | "oval" | "line" | "ring"] > <corners android:radius="integer" android:topLeftRadius="integer" android:topRightRadius="integer" android:bottomLeftRadius="integer" android:bottomRightRadius="integer" /> <gradient android:angle="integer" android:centerX="integer" android:centerY="integer" android:centerColor="integer"Danny Fürniß, 12.11.2012, 70 android:endColor="color" android:gradientRadius="integer" android:startColor="color" android:type=["linear" | "radial" | "sweep"] android:useLevel=["true" | "false"] />
  70. 70. ShapeDrawable 2/2 <padding android:left="integer" android:top="integer" android:right="integer" android:bottom="integer" /> <size android:width="integer" android:height="integer" /> <solid android:color="color" /> <stroke android:width="integer" android:color="color"Danny Fürniß, 12.11.2012, 71 android:dashWidth="integer" android:dashGap="integer" /> </shape>
  71. 71. Animation Resources • Property Animation (any object) • Tween Animation (views only) • Drawable AnimationDanny Fürniß, 12.11.2012, 72
  72. 72. Danny Fürniß, 12.11.2012, 73 Color und alpha kanal
  73. 73. Portions of this presentation are modifications based on work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License.Danny Fürniß, 12.11.2012, 74

×