View
623
Download
4
Category
Preview:
DESCRIPTION
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.
Citation preview
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
Bildquelle: http://developer.android.com/design/patterns/actionbar.html
Dann
y Für
niß,
12.
11.2
012,
22
Bildquelle: http://developer.android.com/design/patterns/actionbar.html
Dann
y Für
niß,
12.
11.2
012,
23
Bildquelle: http://developer.android.com/design/patterns/actionbar.html
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.
Recommended