Design android-aplikaci-z-pohledu-programatora

Design android aplikací z pohledu
programátora

Tomáš Vondráček
Bratislava, 21.10.2011

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


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


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


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

5



6



7


Různé hustoty pixelů - ldpi, mdpi, hdpi, xhdpi
Různé velikosti - small, normal, large, xlarge
Výbava

8


normal-hdpi
small-mdpi

xlarge(large)-
mdpi

9


hustota pixelů

hdpi

ldpi

10


hustota pixelů

11


velikost

12


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


verze androida

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

15


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


Agenda
Cíle přednášky
Máme rádi XML

17


UI aplikace

18


UI aplikace
Notifikační lišta

Menu
19


UI aplikace - layout
ViewGroup - Linear Layout,
Relative, Layout,...
View - TextView,
ImageView, ListView,
Button ...

20


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:textColor="@color/money_item_text"/>
</LinearLayout>

21


UI aplikace - patterny
TabBar
ActionBar
Dashboard
Multi pane layout

22


UI aplikace - TabBar

23


UI aplikace - ActionBar

24


UI aplikace - Dashboard

25


UI aplikace - Multi pane

26


UI aplikace - Multi pane

27


Agenda
Cíle přednášky
Máme rádi XML

28


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


Tudy ne
backstack
absolute layout, px
portrait only
modální dialog

30


Agenda
Cíle přednášky
Máme rádi XML

31


Drawables
drawable je obecný koncept pro gra ku, která může
být nakreslena na obrazovku
Bitmapy (png)
9-patche
Xml Drawables

32


PNG v aplikaci
Ikonka aplikace
Ikonky akcí
Pozadí okna
Pozadí pro view (Button, EditText)

33


PNG v aplikaci
Ikonka aplikace
Ikonky akcí
Pozadí okna
Pozadí pro view (Button, EditText)

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


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


Shapes
Rectangle
Oval
Line
Ring

36


9-patch

37


9-patch

38


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


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


XML drawables
Selector
Xml Bitmap
Layer list
a další

41


Selector
Umožňuje jednoduše odlišit různé stavy UI
normal vs focused vs pressed

42


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


XML bitmap
alias pro skutečnou bitmapu
dlaždice
výřez

44


XML bitmap

45


XML bitmap

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

46


Layer List

47


Layer List

48


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


Agenda
Cíle přednášky
Máme rádi XML

50


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


Inline vs Style vs Theme
Level 0 - inline

layout.xml

Level 1 - style
Level 2 - theme

52


Level 0 - inline
Level 1 - style

layout.xml

Styles.xml

Level 2 - theme
53


Level 0 - inline
Level 1 - style
Level 2 - theme

layout.xml

themes.xml

54


Výhody
Šetří čas
Neopakuje se stále stejný kód
Oddělení vzhledu od struktury UI
je vyměnitelný

55


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


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


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


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


Attribute

<ImageButton android:id="@+id/homeAtm"

layout.xml android:src="?homeATMsIcon" />

60


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



@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


Agenda
Cíle přednášky
Máme rádi XML

64


AsyncTask
zpracování na pozadí
synchronizace s UI
AsyncTask vs Service

65


Compatibility package
novinky z android 3.0 dostupné i na telefonech až po
1.6
Fragmenty
Loader
ViewPager

66


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


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


Díky za pozornost!

Otázky?

69

Design android-aplikaci-z-pohledu-programatora

Recommended

Recommended

More Related Content

Similar to Design android-aplikaci-z-pohledu-programatora

Similar to Design android-aplikaci-z-pohledu-programatora (13)

Design android-aplikaci-z-pohledu-programatora