+ All Categories
Home > Documents > Design android-aplikaci-z-pohledu-programatora

Design android-aplikaci-z-pohledu-programatora

Date post: 18-Dec-2014
Category:
Upload: tomas-vondracek
View: 711 times
Download: 0 times
Share this document with a friend
Description:
Jesenne stretnutie GTUG Bratislava 21.10.2011
69
Design android aplikací z pohledu programátora Tomáš Vondráček Bratislava, 21.10.2011
Transcript
Page 1: Design android-aplikaci-z-pohledu-programatora

Design android aplikací z pohledu programátora

Tomáš Vondráček

Bratislava, 21.10.2011

Page 2: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

◦Tomáš Vondráček

◦Android Developer

◦Inmite

◦Vývoj pro chytré telefony (Android: Mobilní Banka, YouRadio, Radio Tycoon, ČT24, Corkbin, SMS jízdenka a další)

Představení

2

Page 3: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

◦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

Agenda

 

3

Page 4: Design android-aplikaci-z-pohledu-programatora

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

Page 5: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Než začneme s vývojem◦Koncová zařízení

◦Verze androida

5

Page 6: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Koncová zařízení

6

Page 7: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Koncová zařízení

7

Page 8: Design android-aplikaci-z-pohledu-programatora

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

Page 9: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Koncová zařízení

normal-hdpi

xlarge(large)-mdpi

small-mdpi

9

Page 10: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Koncová zařízení

10

◦hustota pixelů

hdpi

ldpi

Page 11: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Koncová zařízení

11

◦hustota pixelů

Page 12: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Koncová zařízení

12

◦velikost

Page 13: Design android-aplikaci-z-pohledu-programatora

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

Page 14: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Koncová zařízení

14

Page 15: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Koncová zařízení

http://developer.android.com/resources/dashboard/platform-versions.html

15

◦verze androida

Page 16: Design android-aplikaci-z-pohledu-programatora

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

Page 17: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

◦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

Agenda

17

Page 18: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

UI aplikace

18

Page 19: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

UI aplikaceNotifikační lišta

Menu19

Page 20: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

UI aplikace - layout◦ViewGroup - Linear Layout,

Relative, Layout,...

◦View - TextView, ImageView, ListView, Button ...

20

Page 21: Design android-aplikaci-z-pohledu-programatora

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

Page 22: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

UI aplikace - patterny◦TabBar

◦ActionBar

◦Dashboard

◦Multi pane layout

22

Page 23: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

UI aplikace - TabBar

23

Page 24: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

UI aplikace - ActionBar

24

Page 25: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

UI aplikace - Dashboard

25

Page 26: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

UI aplikace - Multi pane

26

Page 27: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

UI aplikace - Multi pane

27

Page 28: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

◦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

Agenda

28

Page 29: Design android-aplikaci-z-pohledu-programatora

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

Page 30: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Tudy ne◦backstack

◦absolute layout, px

◦portrait only

◦modální dialog

30

Page 31: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

◦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

Agenda

31

Page 32: Design android-aplikaci-z-pohledu-programatora

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

Page 33: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

PNG v aplikaci◦Ikonka aplikace

◦Ikonky akcí

◦Pozadí okna

◦Pozadí pro view (Button, EditText)

33

Page 34: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

PNG v aplikaci◦Ikonka aplikace

◦Ikonky akcí

◦Pozadí okna

◦Pozadí pro view (Button, EditText)

34

Jedna obrazovka - 2 layouty x 3 dpi -> spousta png

Page 35: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Shapes

35

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

Page 36: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Shapes◦Rectangle

◦Oval

◦Line

◦Ring

36

Page 37: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

9-patch

37

Page 38: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

9-patch

38

Page 39: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Shape vs 9-patch◦Shape

◦zakulacené rohy

◦gradienty

◦nenáročný na pamět a CPU

◦padding

◦1 shape pro všechny dpi

◦9-patch

◦zakulacené rohy

◦gradienty

◦padding

◦obecné roztahovatelné regiony

◦dithering

39

Page 40: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Shape vs 9-patch◦Shape

◦zakulacené rohy

◦gradienty

◦nenáročný na pamět a CPU

◦padding

◦1 shape pro všechny dpi

◦9-patch

◦zakulacené rohy

◦gradienty

◦padding

◦obecné roztahovatelné regiony

◦dithering

40

Page 41: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

XML drawables◦Selector

◦Xml Bitmap

◦Layer list

◦a další

41

Page 42: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Selector◦Umožňuje jednoduše odlišit různé stavy UI

◦normal vs focused vs pressed

42

Page 43: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Selector

43

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

Page 44: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

XML bitmap◦alias pro skutečnou bitmapu

◦dlaždice

◦výřez

44

Page 45: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

XML bitmap

45

Page 46: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

XML bitmap

46

<bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/bg" android:gravity="top|center_horizontal" />

Page 47: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Layer List

47

Page 48: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Layer List

48

Page 49: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Layer list

49

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

Page 50: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

◦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

Agenda

50

Page 51: Design android-aplikaci-z-pohledu-programatora

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

Page 52: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Inline vs Style vs Theme◦Level 0 - inline

◦Level 1 - style

◦Level 2 - theme

52

layout.xml

Page 53: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Inline vs Style vs Theme◦Level 0 - inline

◦Level 1 - style

◦Level 2 - theme53

Styles.xml

layout.xml

Page 54: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Inline vs Style vs Theme◦Level 0 - inline

◦Level 1 - style

◦Level 2 - theme

54

layout.xml

themes.xml

Page 55: Design android-aplikaci-z-pohledu-programatora

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

Page 56: Design android-aplikaci-z-pohledu-programatora

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

Page 57: Design android-aplikaci-z-pohledu-programatora

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

Page 58: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Attribute◦nejdříve deklarace co chceme mít témovatelné

58

<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

Page 59: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Attribute◦Nastavení hodnot pro theme

59

<style name="CustomTheme" parent="android:Theme.Light.NoTitleBar"> <item name="android:radioButtonStyle">@style/radioStyle</item> <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>

theme.xml

Page 60: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Attribute

60

<ImageButton android:id="@+id/homeAtm" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="?homeATMsIcon" />layout.xml

Page 61: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Přepínání témat

61

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

...

}

Page 62: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Přepínání témat

62

@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; }

}

Page 63: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

Přepínání témat

63

Page 64: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

◦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

Agenda

64

Page 65: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

AsyncTask◦zpracování na pozadí

◦synchronizace s UI

◦AsyncTask vs Service

65

Page 66: Design android-aplikaci-z-pohledu-programatora

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

Page 67: Design android-aplikaci-z-pohledu-programatora

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

Page 68: Design android-aplikaci-z-pohledu-programatora

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

Page 69: Design android-aplikaci-z-pohledu-programatora

Design android aplikace z pohledu programátora

69

Díky za pozornost!

Otázky?


Recommended