Android User Interface

Dann

y Für

niß,

12.

11.2

012,

1

Programmierungvon Apps

Android User Interface

Dann

y Für

niß,

12.

11.2

012,

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.

Dann

y Für

niß,

12.

11.2

012,

3

Motivation

Dann

y Für

niß,

12.

11.2

012,

4

Mach Deine Benutzer glücklich!

Bild

quel

le: h

ttp://

ww

w.th

einf

ochi

ef.c

om/w

p-co

nten

t/up

load

s/20

10/0

9/ha

ppy-

ipad

-use

r.jpg

Dann

y Für

niß,

12.

11.2

012,

5 5 Sterne

Dann

y Für

niß,

12.

11.2

012,

6 being featured

Dann

y Für

niß,

12.

11.2

012,

7

More installs, more money!

Bild

quel

le: h

ttp://

ww

w.k

asco

mm

issi

egid

s.nl

/imag

es/d

agob

ert_

duck

_gel

dpak

huis

.jpg

Dann

y Für

niß,

12.

11.2

012,

8

Prinzipien

Dann

y Für

niß,

12.

11.2

012,

9

Be usableBe beautiful

Be responsiveBe Android

Dann

y Für

niß,

12.

11.2

012,

10

Concept first!

Dann

y Für

niß,

12.

11.2

012,

12

ms

Dann

y Für

niß,

12.

11.2

012,

13

Demo

Dann

y Für

niß,

12.

11.2

012,

14

Patterns

Dann

y Für

niß,

12.

11.2

012,

15

Dashboard

Bildquelle: http://www.androiduipatterns.com/p/android-ui-pattern-collection.html

Dann

y Für

niß,

12.

11.2

012,

16

Dashboard

Bildquelle: http://donstorch.com/2012/09/24/rest-in-peace/

Dann

y Für

niß,

12.

11.2

012,

17

Drawer

Bildquelle: http://www.androiduipatterns.com/2012/06/emerging-ui-pattern-side-navigation.html

Dann

y Für

niß,

12.

11.2

012,

18

Navigation

Bildquelle: http://developer.android.com/design/patterns/navigation.html

Dann

y Für

niß,

12.

11.2

012,

19

Bildquelle: http://developer.android.com/design/patterns/navigation.html

Dann

y Für

niß,

12.

11.2

012,

20

Action Bar

Bildquelle: http://developer.android.com/design/patterns/actionbar.html

Dann

y Für

niß,

12.

11.2

012,

21


Dann

y Für

niß,

12.

11.2

012,

22


Dann

y Für

niß,

12.

11.2

012,

23


Dann

y Für

niß,

12.

11.2

012,

24

Quick Actions

Bildquelle:http://www.androiduipatterns.com/p/android-ui-pattern-collection.html

Dann

y Für

niß,

12.

11.2

012,

25

Views und Layout

Dann

y Für

niß,

12.

11.2

012,

26

deklarativ vs. prozedural<?xml version="1.0" encoding="utf-8"?><LinearLayout

<TextViewandroid:id="@+id/textView1"android:text="Dauer in Millisekunden"/>

<EditTextandroid:id="@+id/delayTextView"android:text="200" >

</EditText>

<Buttonandroid:id="@+id/startTaskButton"android:text="Starte LongRunningTask" />

</LinearLayout>

XML Java

new LinearLayout()

new TextView()

new EditText()

new Button()

Dann

y Für

niß,

12.

11.2

012,

27

android.view.View

View

Basisklasse aller UI Elemente

Dann

y Für

niß,

12.

11.2

012,

28

android.view.ViewGroup

Basisklasse der Layouts

Dann

y Für

niß,

12.

11.2

012,

29

FrameLayout

Dann

y Für

niß,

12.

11.2

012,

30

LinearLayout

Dann

y Für

niß,

12.

11.2

012,

31

GridLayout

Dann

y Für

niß,

12.

11.2

012,

32

android.view.ViewStub

Dann

y Für

niß,

12.

11.2

012,

33

View Hierarchy

Bildquelle: http://developer.android.com/guide/topics/ui/index.htmlDemo

Max 10 Ebenen, Max 80 Views je Screen

Dann

y Für

niß,

12.

11.2

012,

34

Bildquelle: http://android-developers.blogspot.de/2009/03/android-layout-tricks-3-optimize-by.html

Dann

y Für

niß,

12.

11.2

012,

35

<merge/><?xml version="1.0" encoding="utf‐8"?><merge xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent">

<TextViewandroid:id="@+id/textView1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/large_text"android:textAppearance="?android:attr/textAppearanceLarge" />

<Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/button" />

</merge>

Dann

y Für

niß,

12.

11.2

012,

36

View properties

Demo

layout_heightlayout_width

layout_weight

layout_gravitygravity

text id …

visibility

Dann

y Für

niß,

12.

11.2

012,

37

Density Independent Pixels

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

px

dip/dp

Beispiel: Samsung Galaxy S (4 Zoll, 480x800 Pixel)Baseline: 160dpi (mdpi)c = Screendiagonale in PixelnFaktor SGS: 240dpi / 160dpi = 1,5Displaygröße in dp: 320dp x 533dp

480 800 480 800 932,952

932,9524 233,238 240

Dann

y Für

niß,

12.

11.2

012,

38

Custom Views

• Nutzung bestehender Views als Basis für Überschreibung

• Implementierung „from Scratch“ durch Ableitung von android.view.View

• Compound Views (Kombination bestehender Views)

Dann

y Für

niß,

12.

11.2

012,

39

Input Events

onClick() View.OnClickListener

boolean onLongClick() View.OnLongClickListener

boolean onKey() View.OnKeyListener

boolean onTouch() View.OnTouchListener

...

Dann

y Für

niß,

12.

11.2

012,

40

Input MethodFramework

Demo

Dann

y Für

niß,

12.

11.2

012,

41

Listen und Adapter

Dann

y Für

niß,

12.

11.2

012,

42

Adapter

Dann

y Für

niß,

12.

11.2

012,

43

ListView

Thanks Romain Guy

Dann

y Für

niß,

12.

11.2

012,

44

Thanks Romain Guy

Dann

y Für

niß,

12.

11.2

012,

45

Thanks Romain Guy

Dann

y Für

niß,

12.

11.2

012,

46

Thanks Romain Guy

Dann

y Für

niß,

12.

11.2

012,

47

Thanks Romain Guy

Dann

y Für

niß,

12.

11.2

012,

48

ViewHolder Pattern

static class ViewHolder { TextView name; ImageView icon;

}

Dann

y Für

niß,

12.

11.2

012,

49

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)); holder.icon.setImageBitmap( mIcon1 );return convertView;

}

Dann

y Für

niß,

12.

11.2

012,

50

Threading

Dann

y Für

niß,

12.

11.2

012,

51

Use Strict Modepublic 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()

.build());}super.onCreate();

}

Dann

y Für

niß,

12.

11.2

012,

52

Demo

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.

}}

new LongRunningAsyncTask().execute(Params);

Dann

y Für

niß,

12.

11.2

012,

53

Trace View

Demo

Dann

y Für

niß,

12.

11.2

012,

54

Menus

Dann

y Für

niß,

12.

11.2

012,

55

OptionsMenu

Bildquelle: http://developer.android.com/guide/topics/ui/menus.html

public boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.optionsmenu, menu);return true;

}

Dann

y Für

niß,

12.

11.2

012,

56

ContextMenu/Contextual Action Mode

Bildquelle: http://developer.android.com/guide/topics/ui/menus.html

Dann

y Für

niß,

12.

11.2

012,

57

Preferences

Dann

y Für

niß,

12.

11.2

012,

58

Preferences

• PreferenceActivity / PreferenceFragment• PreferenceScreen• PreferenceCategory• CheckBoxPreference• EditTextPreference• ListPreference• MultiSelectListPreference• …

Demo

Dann

y Für

niß,

12.

11.2

012,

59

PreferenceScreen<PreferenceScreen

xmlns:android="http://schemas.android.com/apk/res/android"android:key="first_preferencescreen">

<CheckBoxPreferenceandroid:key="wifi enabled"android:title="WiFi" />

<PreferenceScreenandroid:key="second_preferencescreen"android:title="WiFi settings">

<CheckBoxPreferenceandroid:key="prefer wifi"android:title="Prefer WiFi" />

...</PreferenceScreen>

</PreferenceScreen>

Dann

y Für

niß,

12.

11.2

012,

60

Eye Candy

Dann

y Für

niß,

12.

11.2

012,

61

Styles and Themes

Dann

y Für

niß,

12.

11.2

012,

62

Styles and Themes

Dann

y Für

niß,

12.

11.2

012,

63

Drawable Resources

• 2D Graphics• Erstellt aus Bilddateien• Erstellt aus XML-Ressourcen

Dann

y Für

niß,

12.

11.2

012,

64

/res/drawable(.png empfohlen, .jpg, .gif)

BitmapDrawable

Dann

y Für

niß,

12.

11.2

012,

65

NinePatchDrawable

<Dateiname>.9.pngBeispiel: MyButton.9.png

Dann

y Für

niß,

12.

11.2

012,

66

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>

Dann

y Für

niß,

12.

11.2

012,

67

<?xml version="1.0" encoding="utf-8"?><selectorxmlns: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"]android:state_checked=["true" | "false"]android:state_enabled=["true" | "false"]android:state_activated=["true" | "false"]android:state_window_focused=["true" | "false"] />

</selector>

State-List (StateListDrawable)

Such

lauf

von

oben

nac

h un

ten

(def

ault

Stat

e so

llte

ganz

unt

en s

tehe

n)

Dann

y Für

niß,

12.

11.2

012,

68

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>

Dann

y Für

niß,

12.

11.2

012,

69

TransitionDrawable

<?xml version="1.0" encoding="utf-8"?><transitionxmlns:android="http://schemas.android.com/apk/res/android" >

<itemandroid:drawable="@[package:]drawable/drawable_resource"android:id="@[+][package:]id/resource_name"android:top="dimension"android:right="dimension"android:bottom="dimension"android:left="dimension" />

</transition>

Dann

y Für

niß,

12.

11.2

012,

70

<?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" />

<gradientandroid:angle="integer"android:centerX="integer"android:centerY="integer"android:centerColor="integer"android:endColor="color"android:gradientRadius="integer"android:startColor="color"android:type=["linear" | "radial" | "sweep"]android:useLevel=["true" | "false"] />

ShapeDrawable 1/2

Dann

y Für

niß,

12.

11.2

012,

71

ShapeDrawable 2/2<padding

android:left="integer"android:top="integer"android:right="integer"android:bottom="integer" />

<sizeandroid:width="integer"android:height="integer" />

<solidandroid:color="color" />

<strokeandroid:width="integer"android:color="color"android:dashWidth="integer"android:dashGap="integer" />

</shape>

Dann

y Für

niß,

12.

11.2

012,

72

Animation Resources

• Property Animation (any object)• Tween Animation (views only)• Drawable Animation

Dann

y Für

niß,

12.

11.2

012,

73

Color und alpha kanal

Dann

y Für

niß,

12.

11.2

012,

74

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.

Education

Android User Interface