Jesenne stretnutie GTUG Bratislava 21.10.2011

1. Design android aplikací z pohledu
programátora
Tomáš Vondráček
Bratislava, 21.10.2011

2. Design android aplikace z pohledu programátora
Představení
Tomáš Vondráček
Android Developer
Inmite
Vývoj pro chytré telefony (Android: Mobilní Banka,
YouRadio, Radio Tycoon, ČT24, Corkbin, SMS jízdenka a
další)
2

3. Design android aplikace z pohledu programátora
Agenda
Cíle přednášky
Než začneme programovat
Z čeho se skládá UI aplikace
Co dělat a čemu se vyhnout
Máme rádi XML
Od inline kódu po dynamické přepínání témat
Tipy na závěr, Q & A
3

4. Design android aplikace z pohledu programátora
Cíle přednášky
Úskálí při vytváření UI pro android a jejich řešení
Jak udělat naší aplikaci hezčí navenek i v kódu
4

5. Design android aplikace z pohledu programátora
Než začneme s vývojem
Koncová zařízení
Verze androida
5

6. Design android aplikace z pohledu programátora
Koncová zařízení
6

7. Design android aplikace z pohledu programátora
Koncová zařízení
7

8. Design android aplikace z pohledu programátora
Koncová zařízení
Různé hustoty pixelů - ldpi, mdpi, hdpi, xhdpi
Různé velikosti - small, normal, large, xlarge
Výbava
8

9. Design android aplikace z pohledu programátora
Koncová zařízení
normal-hdpi
small-mdpi
xlarge(large)-
mdpi
9

10. Design android aplikace z pohledu programátora
Koncová zařízení
hustota pixelů
hdpi
ldpi
10

11. Design android aplikace z pohledu programátora
Koncová zařízení
hustota pixelů
11

12. Design android aplikace z pohledu programátora
Koncová zařízení
velikost
12

13. Design android aplikace z pohledu programátora
Koncová zařízení
Jednotky nezávislé na hustotě - dip
Resources podle dpi
ldpi 0.75x / mdpi 1.0x / hdpi 1.5x /xhdpi 2.0x
Layout podle velikosti, orientace
13

14. Design android aplikace z pohledu programátora
Koncová zařízení
14

15. Design android aplikace z pohledu programátora
Koncová zařízení
verze androida
http://developer.android.com/resources/dashboard/platform-versions.html
15

16. Design android aplikace z pohledu programátora
Koncová zařízení
verze androida - příklady rozdílů
2.1 - Sync adapters, nové API pro kontakty
2.2 - Androida Cloud to Device Messaging, nové API pro
audio focus, APP2SD
2.3 - Nové gra cké téma
3.0 - Tablety
Hardwarová výbava - senzory
16

17. Design android aplikace z pohledu programátora
Agenda
Cíle přednášky
Než začneme programovat
Z čeho se skládá UI aplikace
Co dělat a čemu se vyhnout
Máme rádi XML
Od inline kódu po dynamické přepínání témat
Tipy na závěr, Q & A
17

18. Design android aplikace z pohledu programátora
UI aplikace
18

19. Design android aplikace z pohledu programátora
UI aplikace
Notifikační lišta
Menu
19

20. Design android aplikace z pohledu programátora
UI aplikace - layout
ViewGroup - Linear Layout,
Relative, Layout,...
View - TextView,
ImageView, ListView,
Button ...
20

21. Design android aplikace z pohledu programátora
UI aplikace - layout
<LinearLayout android:id="@+id/pricelayout"
style="@style/priceInfoBlock"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="right" >
<TextView
android:id="@+id/price"
style="@style/moneyText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/money_item_text"/>
<TextView
android:id="@+id/change"
style="@style/subText.Small"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/money_item_text"/>
</LinearLayout>
21

22. Design android aplikace z pohledu programátora
UI aplikace - patterny
TabBar
ActionBar
Dashboard
Multi pane layout
22

23. Design android aplikace z pohledu programátora
UI aplikace - TabBar
23

24. Design android aplikace z pohledu programátora
UI aplikace - ActionBar
24

25. Design android aplikace z pohledu programátora
UI aplikace - Dashboard
25

26. Design android aplikace z pohledu programátora
UI aplikace - Multi pane
26

27. Design android aplikace z pohledu programátora
UI aplikace - Multi pane
27

28. Design android aplikace z pohledu programátora
Agenda
Cíle přednášky
Než začneme programovat
Z čeho se skládá UI aplikace
Co dělat a čemu se vyhnout
Máme rádi XML
Od inline kódu po dynamické přepínání témat
Tipy na závěr, Q & A
28

29. Design android aplikace z pohledu programátora
Tudy ano
dip
podporujte obě orientace
d-pad
ukažte obsah hned jak ho máte
přístup do sítě, databáze, kartu, dlouhé operace -
background thread, neblokovat UI
29

30. Design android aplikace z pohledu programátora
Tudy ne
backstack
absolute layout, px
portrait only
modální dialog
30

31. Design android aplikace z pohledu programátora
Agenda
Cíle přednášky
Než začneme programovat
Z čeho se skládá UI aplikace
Co dělat a čemu se vyhnout
Máme rádi XML
Od inline kódu po dynamické přepínání témat
Tipy na závěr, Q & A
31

32. Design android aplikace z pohledu programátora
Drawables
drawable je obecný koncept pro gra ku, která může
být nakreslena na obrazovku
Bitmapy (png)
9-patche
Xml Drawables
32

33. Design android aplikace z pohledu programátora
PNG v aplikaci
Ikonka aplikace
Ikonky akcí
Pozadí okna
Pozadí pro view (Button, EditText)
33

34. Design android aplikace z pohledu programátora
PNG v aplikaci
Ikonka aplikace
Ikonky akcí
Pozadí okna
Pozadí pro view (Button, EditText)
Jedna obrazovka - 2 layouty x 3 dpi -> spousta png
34

35. Design android aplikace z pohledu programátora
Shapes
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="1dip" />
<gradient
android:angle="90"
android:endColor="@color/money_item_green_end"
android:startColor="@color/money_item_green_start"
android:centerColor="@color/money_item_green_center"
android:type="linear"/>
<padding
android:left="2dip"
android:top="2dip"
android:right="2dip"
android:bottom="2dip" />
<stroke
android:width="0.5dip"
android:color="#909090"/>
</shape>
35

36. Design android aplikace z pohledu programátora
Shapes
Rectangle
Oval
Line
Ring
36

37. Design android aplikace z pohledu programátora
9-patch
37

38. Design android aplikace z pohledu programátora
9-patch
38

39. Design android aplikace z pohledu programátora
Shape vs 9-patch
Shape 9-patch
zakulacené rohy zakulacené rohy
gradienty gradienty
nenáročný na pamět a padding
CPU obecné roztahovatelné
padding regiony
1 shape pro všechny dpi dithering
39

40. Design android aplikace z pohledu programátora
Shape vs 9-patch
Shape 9-patch
zakulacené rohy zakulacené rohy
gradienty gradienty
nenáročný na pamět a padding
CPU obecné roztahovatelné
padding regiony
1 shape pro všechny dpi dithering
40

41. Design android aplikace z pohledu programátora
XML drawables
Selector
Xml Bitmap
Layer list
a další
41

42. Design android aplikace z pohledu programátora
Selector
Umožňuje jednoduše odlišit různé stavy UI
normal vs focused vs pressed
42

43. Design android aplikace z pohledu programátora
Selector
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/btn_home_pressed" />
<item android:state_focused="true"
android:drawable="@drawable/btn_home_focused" />
<item android:drawable="@drawable/btn_home_normal"/>
</selector>
43

44. Design android aplikace z pohledu programátora
XML bitmap
alias pro skutečnou bitmapu
dlaždice
výřez
44

45. Design android aplikace z pohledu programátora
XML bitmap
45

46. Design android aplikace z pohledu programátora
XML bitmap
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/bg"
android:gravity="top|center_horizontal" />
46

47. Design android aplikace z pohledu programátora
Layer List
47

48. Design android aplikace z pohledu programátora
Layer List
48

49. Design android aplikace z pohledu programátora
Layer list
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="@id/background">
<bitmap
android:src="@drawable/bg"
android:gravity="top|center_horizontal" />
</item>
<item
android:top="@dimen/actionBarHeight"
android:right="0dp">
<bitmap
android:src="@drawable/bg_stain"
android:gravity="top|right" />
</item>
</layer-list>
49

50. Design android aplikace z pohledu programátora
Agenda
Cíle přednášky
Než začneme programovat
Z čeho se skládá UI aplikace
Co dělat a čemu se vyhnout
Máme rádi XML
Od inline kódu po dynamické přepínání témat
Tipy na závěr, Q & A
50

51. Design android aplikace z pohledu programátora
Styly a témata
Style
sada vlastností které určují vzhled a formát okna nebo
konkrétního view
Theme
styl aplikovaný na celou aplikaci
51

52. Design android aplikace z pohledu programátora
Inline vs Style vs Theme
Level 0 - inline
layout.xml
Level 1 - style
Level 2 - theme
52

53. Design android aplikace z pohledu programátora
Inline vs Style vs Theme
Level 0 - inline
Level 1 - style
layout.xml
Styles.xml
Level 2 - theme
53

54. Design android aplikace z pohledu programátora
Inline vs Style vs Theme
Level 0 - inline
Level 1 - style
Level 2 - theme
layout.xml
themes.xml
54

55. Design android aplikace z pohledu programátora
Výhody
Šetří čas
Neopakuje se stále stejný kód
Oddělení vzhledu od struktury UI
je vyměnitelný
55

56. Design android aplikace z pohledu programátora
Přepínání témat
Plné využití themes jak jsme si ukázali
Navíc:
Vlastní view
Ikonky
Různé styly pro text
56

57. Design android aplikace z pohledu programátora
Attribute
V layout.xml nepřiřadíme přímo style, ale attribute
Hodnotu attributu nastavíme v theme
Attribute se vyhodnotí v runtimu podle aktuálního
tématu
57

58. Design android aplikace z pohledu programátora
Attribute
nejdříve deklarace co chceme mít témovatelné
<declare-styleable name="homeIcons">
<attr name="homeBranchesIcon" format="integer" />
<attr name="homeATMsIcon" format="integer" />
<attr name="homeContactsIcon" format="integer" />
<attr name="homeNewsIcon" format="integer" />
<attr name="homeSettingsIcon" format="integer" />
</declare-styleable> attrs.xml
58

59. Design android aplikace z pohledu programátora
Attribute
Nastavení hodnot pro theme
<style name="CustomTheme" parent="android:Theme.Light.NoTitleBar">
<item name="android:radioButtonStyle">@style/radioStyle</item> theme.xml
<item name="android:seekBarStyle">@style/seekbarStyle</item>
<item name="android:editTextStyle">@style/editTextStyle</item>
<item name="homeBranchesIcon">@drawable/ic_affiliate_selector</item>
<item name="homeATMsIcon">@drawable/ic_atm_selector</item>
<item name="homeContactsIcon">@drawable/ic_contact_selector</item>
<item name="homeNewsIcon">@drawable/ic_news_selector</item>
<item name="homeSettingsIcon">@drawable/ic_settings_selector</item>
</style>
<style name="CustomTheme.Green">
<item name="android:radioButtonStyle">@style/greenRadioStyle</item>
<item name="android:seekBarStyle">@style/greenSeekbarStyle</item>
<item name="android:editTextStyle">@style/greenEditTextStyle</item>
<item name="homeBranchesIcon">@drawable/green_ic_affiliate_selector</item>
<item name="homeATMsIcon">@drawable/green_ic_atm_selector</item>
<item name="homeContactsIcon">@drawable/green_ic_contact_selector</item>
<item name="homeNewsIcon">@drawable/green_ic_news_selector</item>
<item name="homeSettingsIcon">@drawable/green_ic_settings_selector</item>
</style>
59

60. Design android aplikace z pohledu programátora
Attribute
<ImageButton android:id="@+id/homeAtm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
layout.xml android:src="?homeATMsIcon" />
60

61. Design android aplikace z pohledu programátora
Přepínání témat
public abstract class BaseActivity extends Activity {
private SkinManager mManager;
private int mCurrentThemeId;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
...
final int themeId = this.mManager.getSelectedThemeId();
this.mCurrentThemeId = themeId;
this.setTheme(themeId);
}
...
}
61

62. Design android aplikace z pohledu programátora
Přepínání témat
@Override
protected void onResume() {
if (this.mCurrentThemeId != this.mManager.getSelectedThemeId()) {
Log.d(Utils.TAG, "new theme selected, restarting activity");
Intent starterIntent = this.getIntent();
starterIntent.setAction(null);
startActivity(starterIntent);
finish();
super.onResume();
return;
}
}
62

63. Design android aplikace z pohledu programátora
Přepínání témat
63

64. Design android aplikace z pohledu programátora
Agenda
Cíle přednášky
Než začneme programovat
Z čeho se skládá UI aplikace
Co dělat a čemu se vyhnout
Máme rádi XML
Od inline kódu po dynamické přepínání témat
Tipy na závěr, Q & A
64

65. Design android aplikace z pohledu programátora
AsyncTask
zpracování na pozadí
synchronizace s UI
AsyncTask vs Service
65

66. Design android aplikace z pohledu programátora
Compatibility package
novinky z android 3.0 dostupné i na telefonech až po
1.6
Fragmenty
Loader
ViewPager
66

67. Design android aplikace z pohledu programátora
Bitmapy
vyvarovat se velkým bitmapám
2.3 a starší - bitmapy nejsou v heapu aplikace
lepší je shape, 9-patch, dlaždice
používat palety
67

68. Design android aplikace z pohledu programátora
Výkon
Nealokovat pamět pokud to není potřeba
Zjednodušit architekturu
enum -> public static nal
String.format(...)
Static je lepší než Virtual je lepší než interface
68

69. Design android aplikace z pohledu programátora
Díky za pozornost!
Otázky?
69