Your SlideShare is downloading. ×
  • Like
Android User Interface
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Android User Interface

  • 567 views
Published

Unterlage zur Android Vorlesung "Programmierung von Apps" an der Hochschule Karlsruhe. …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
567
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
17
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Programmierung von Apps Android User InterfaceDanny Fürniß, 12.11.2012, 1
  • 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. Danny Fürniß, 12.11.2012, 3 Motivation
  • 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. Danny Fürniß, 12.11.2012, 5 5 Sterne
  • 6. Danny Fürniß, 12.11.2012, 6 being featured
  • 7. Danny Fürniß, 12.11.2012, 7 Bildquelle: http://www.kascommissiegids.nl/images/dagobert_duck_geldpakhuis.jpg More installs, more money!
  • 8. Danny Fürniß, 12.11.2012, 8 Prinzipien
  • 9. Be usable Be beautiful Be responsive Be AndroidDanny Fürniß, 12.11.2012, 9
  • 10. Danny Fürniß, 12.11.2012, 10 Concept first!
  • 11. Danny Fürniß, 12.11.2012, 12 ms
  • 12. Danny Fürniß, 12.11.2012, 13 Demo
  • 13. Danny Fürniß, 12.11.2012, 14 Patterns
  • 14. DashboardDanny Fürniß, 12.11.2012, 15 Bildquelle: http://www.androiduipatterns.com/p/android-ui-pattern-collection.html
  • 15. DashboardDanny Fürniß, 12.11.2012, 16 Bildquelle: http://donstorch.com/2012/09/24/rest-in-peace/
  • 16. DrawerDanny Fürniß, 12.11.2012, 17 Bildquelle: http://www.androiduipatterns.com/2012/06/emerging-ui-pattern-side-navigation.html
  • 17. NavigationDanny Fürniß, 12.11.2012, 18 Bildquelle: http://developer.android.com/design/patterns/navigation.html
  • 18. Danny Fürniß, 12.11.2012, 19 Bildquelle: http://developer.android.com/design/patterns/navigation.html
  • 19. Action BarDanny Fürniß, 12.11.2012, 20 Bildquelle: http://developer.android.com/design/patterns/actionbar.html
  • 20. Danny Fürniß, 12.11.2012, 21 Bildquelle: http://developer.android.com/design/patterns/actionbar.html
  • 21. Danny Fürniß, 12.11.2012, 22 Bildquelle: http://developer.android.com/design/patterns/actionbar.html
  • 22. Danny Fürniß, 12.11.2012, 23 Bildquelle: http://developer.android.com/design/patterns/actionbar.html
  • 23. Quick ActionsDanny Fürniß, 12.11.2012, 24 Bildquelle:http://www.androiduipatterns.com/p/android-ui-pattern-collection.html
  • 24. Danny Fürniß, 12.11.2012, 25 Views und Layout
  • 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. android.view.View View Basisklasse aller UI ElementeDanny Fürniß, 12.11.2012, 27
  • 27. android.view.ViewGroupDanny Fürniß, 12.11.2012, 28 Basisklasse der Layouts
  • 28. Danny Fürniß, 12.11.2012, 29 FrameLayout
  • 29. Danny Fürniß, 12.11.2012, 30 LinearLayout
  • 30. Danny Fürniß, 12.11.2012, 31 GridLayout
  • 31. Danny Fürniß, 12.11.2012, 32 android.view.ViewStub
  • 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. Danny Fürniß, 12.11.2012, 34 Bildquelle: http://android-developers.blogspot.de/2009/03/android-layout-tricks-3-optimize-by.html
  • 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. View properties layout_height layout_weight layout_width gravity layout_gravity visibilityDanny Fürniß, 12.11.2012, 36 text id … Demo
  • 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. 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. 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. Danny Fürniß, 12.11.2012, 40 Framework Input Method Demo
  • 40. Danny Fürniß, 12.11.2012, 41 Listen und Adapter
  • 41. Danny Fürniß, 12.11.2012, 42 Adapter
  • 42. Danny Fürniß, 12.11.2012, 43 Thanks Romain Guy ListView
  • 43. Danny Fürniß, 12.11.2012, 44 Thanks Romain Guy
  • 44. Danny Fürniß, 12.11.2012, 45 Thanks Romain Guy
  • 45. Danny Fürniß, 12.11.2012, 46 Thanks Romain Guy
  • 46. Danny Fürniß, 12.11.2012, 47 Thanks Romain Guy
  • 47. ViewHolder Pattern static class ViewHolder {  TextView name;  ImageView icon;  } Danny Fürniß, 12.11.2012, 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. Danny Fürniß, 12.11.2012, 50 Threading
  • 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. 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. Danny Fürniß, 12.11.2012, 53 Trace View Demo
  • 53. Danny Fürniß, 12.11.2012, 54 Menus
  • 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. ContextMenu/Contextual Action ModeDanny Fürniß, 12.11.2012, 56 Bildquelle: http://developer.android.com/guide/topics/ui/menus.html
  • 56. Danny Fürniß, 12.11.2012, 57 Preferences
  • 57. Preferences • PreferenceActivity / PreferenceFragment • PreferenceScreen • PreferenceCategory • CheckBoxPreference • EditTextPreference • ListPreference • MultiSelectListPreference …Danny Fürniß, 12.11.2012, 58 • Demo
  • 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. Danny Fürniß, 12.11.2012, 60 Eye Candy
  • 60. Danny Fürniß, 12.11.2012, 61 Styles and Themes
  • 61. Danny Fürniß, 12.11.2012, 62 Styles and Themes
  • 62. Drawable Resources • 2D Graphics • Erstellt aus Bilddateien • Erstellt aus XML-RessourcenDanny Fürniß, 12.11.2012, 63
  • 63. BitmapDrawable /res/drawable (.png empfohlen, .jpg, .gif)Danny Fürniß, 12.11.2012, 64
  • 64. NinePatchDrawableDanny Fürniß, 12.11.2012, 65 <Dateiname>.9.png Beispiel: MyButton.9.png
  • 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. 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. 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. 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. 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. 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. Animation Resources • Property Animation (any object) • Tween Animation (views only) • Drawable AnimationDanny Fürniß, 12.11.2012, 72
  • 72. Danny Fürniß, 12.11.2012, 73 Color und alpha kanal
  • 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