Android User Interface

Programmierung
von Apps
Android User Interface
Danny Fürniß, 12.11.2012, 1

Die Studierenden
kennen die grundlegenden
Prinzipien, Patterns und Bestandteile
eines Android User Interface
und verstehen, wie damit effizient
eine Benutzeroberfläche erstellt
werden kann.


Motivation

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 Sterne


being featured

Danny Fürniß, 12.11.2012, 7 Bildquelle: http://www.kascommissiegids.nl/images/dagobert_duck_geldpakhuis.jpg

More installs, more money!


Prinzipien

Be usable
Be beautiful
Be responsive
Be Android

Danny Fürniß, 12.11.2012, 10

Concept first!

Danny Fürniß, 12.11.2012, 12

ms

Danny Fürniß, 12.11.2012, 13

Demo

Danny Fürniß, 12.11.2012, 14

Patterns

Dashboard
Danny Fürniß, 12.11.2012, 15

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

Dashboard
Danny Fürniß, 12.11.2012, 16

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

Drawer
Danny Fürniß, 12.11.2012, 17

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

Navigation
Danny Fürniß, 12.11.2012, 18

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

Danny Fürniß, 12.11.2012, 19

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

Action Bar
Danny Fürniß, 12.11.2012, 20

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

Danny Fürniß, 12.11.2012, 21


Danny Fürniß, 12.11.2012, 22


Danny Fürniß, 12.11.2012, 23


Quick Actions
Danny Fürniß, 12.11.2012, 24

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

Danny Fürniß, 12.11.2012, 25

Views und Layout

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

android.view.View

View

Basisklasse aller UI Elemente
Danny Fürniß, 12.11.2012, 27

android.view.ViewGroup
Danny Fürniß, 12.11.2012, 28

Basisklasse der Layouts

Danny Fürniß, 12.11.2012, 29

FrameLayout

Danny Fürniß, 12.11.2012, 30

LinearLayout

Danny Fürniß, 12.11.2012, 31

GridLayout

Danny Fürniß, 12.11.2012, 32

android.view.ViewStub

View Hierarchy
Danny 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

Danny Fürniß, 12.11.2012, 34

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

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

View properties

layout_height layout_weight
layout_width

gravity
layout_gravity

visibility
Danny Fürniß, 12.11.2012, 36

text id …
Demo

Density Independent Pixels

px

dip/dp

Beispiel: Samsung Galaxy S (4 Zoll, 480x800 Pixel) 480 800
Danny 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

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

Input Events
onClick() View.OnClickListener

boolean onLongClick() View.OnLongClickListener

boolean onKey() View.OnKeyListener

boolean onTouch() View.OnTouchListener

...
Danny Fürniß, 12.11.2012, 39

Danny Fürniß, 12.11.2012, 40

Framework
Input Method

Demo

Danny Fürniß, 12.11.2012, 41

Listen und Adapter

Danny Fürniß, 12.11.2012, 42

Adapter

Danny Fürniß, 12.11.2012, 43

Thanks Romain Guy
ListView

Danny Fürniß, 12.11.2012, 44

Thanks Romain Guy

Danny Fürniß, 12.11.2012, 45

Thanks Romain Guy

Danny Fürniß, 12.11.2012, 46

Thanks Romain Guy

Danny Fürniß, 12.11.2012, 47

Thanks Romain Guy

ViewHolder Pattern

static class ViewHolder {
TextView name;
ImageView icon;
}
Danny Fürniß, 12.11.2012, 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;
}

Danny Fürniß, 12.11.2012, 50

Threading

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();
}

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) {
}

protected void onPostExecute(Result result) {
}
}
Danny Fürniß, 12.11.2012, 52

new LongRunningAsyncTask().execute(Params);

Demo

Danny Fürniß, 12.11.2012, 53

Trace View

Demo

Danny Fürniß, 12.11.2012, 54

Menus

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

ContextMenu/Contextual Action Mode
Danny Fürniß, 12.11.2012, 56

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

Danny Fürniß, 12.11.2012, 57

Preferences

Preferences

• PreferenceActivity / PreferenceFragment
• PreferenceScreen
• PreferenceCategory
• CheckBoxPreference
• EditTextPreference
• ListPreference
• MultiSelectListPreference
…
Danny Fürniß, 12.11.2012, 58

•

Demo

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>

Danny Fürniß, 12.11.2012, 60

Eye Candy

Danny Fürniß, 12.11.2012, 61

Styles and Themes

Danny Fürniß, 12.11.2012, 62

Styles and Themes

Drawable Resources

• 2D Graphics
• Erstellt aus Bilddateien
• Erstellt aus XML-Ressourcen
Danny Fürniß, 12.11.2012, 63

BitmapDrawable

/res/drawable
(.png empfohlen, .jpg, .gif)
Danny Fürniß, 12.11.2012, 64

NinePatchDrawable
Danny Fürniß, 12.11.2012, 65

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

Layer-List
(LayerDrawable)

<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

Suchlauf von oben nach unten (default State sollte ganz unten stehen)
State-List
(StateListDrawable)
<selector
android:constantSize=["true" | "false"]
android:dither=["true" | "false"]
android:variablePadding=["true" | "false"] >
<item
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>

Level-List
(LevelListDrawable)

<level-list
<item
android:drawable="@drawable/drawable_resource"
android:maxLevel="integer"
android:minLevel="integer" />
</level-list>
Danny Fürniß, 12.11.2012, 68

TransitionDrawable

<transition
<item
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

ShapeDrawable 1/2
<shape
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"] />

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>

Animation Resources

• Property Animation (any object)
• Tween Animation (views only)
• Drawable Animation
Danny Fürniß, 12.11.2012, 72

Danny Fürniß, 12.11.2012, 73

Color und alpha kanal

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

Android User Interface

Weitere ähnliche Inhalte

Andere mochten auch (13)

Android User Interface