Design android-aplikaci-z-pohledu-programatora
Post on 18-Dec-2014
711 Views
Preview:
DESCRIPTION
Transcript
Design android aplikací z pohledu programátora
Tomáš Vondráček
Bratislava, 21.10.2011
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
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
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
Design android aplikace z pohledu programátora
Než začneme s vývojem◦Koncová zařízení
◦Verze androida
5
Design android aplikace z pohledu programátora
Koncová zařízení
6
Design android aplikace z pohledu programátora
Koncová zařízení
7
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
Design android aplikace z pohledu programátora
Koncová zařízení
normal-hdpi
xlarge(large)-mdpi
small-mdpi
9
Design android aplikace z pohledu programátora
Koncová zařízení
10
◦hustota pixelů
hdpi
ldpi
Design android aplikace z pohledu programátora
Koncová zařízení
11
◦hustota pixelů
Design android aplikace z pohledu programátora
Koncová zařízení
12
◦velikost
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
Design android aplikace z pohledu programátora
Koncová zařízení
14
Design android aplikace z pohledu programátora
Koncová zařízení
http://developer.android.com/resources/dashboard/platform-versions.html
15
◦verze androida
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
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
Design android aplikace z pohledu programátora
UI aplikace
18
Design android aplikace z pohledu programátora
UI aplikaceNotifikační lišta
Menu19
Design android aplikace z pohledu programátora
UI aplikace - layout◦ViewGroup - Linear Layout,
Relative, Layout,...
◦View - TextView, ImageView, ListView, Button ...
20
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
Design android aplikace z pohledu programátora
UI aplikace - patterny◦TabBar
◦ActionBar
◦Dashboard
◦Multi pane layout
22
Design android aplikace z pohledu programátora
UI aplikace - TabBar
23
Design android aplikace z pohledu programátora
UI aplikace - ActionBar
24
Design android aplikace z pohledu programátora
UI aplikace - Dashboard
25
Design android aplikace z pohledu programátora
UI aplikace - Multi pane
26
Design android aplikace z pohledu programátora
UI aplikace - Multi pane
27
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
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
Design android aplikace z pohledu programátora
Tudy ne◦backstack
◦absolute layout, px
◦portrait only
◦modální dialog
30
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
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
Design android aplikace z pohledu programátora
PNG v aplikaci◦Ikonka aplikace
◦Ikonky akcí
◦Pozadí okna
◦Pozadí pro view (Button, EditText)
33
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
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>
Design android aplikace z pohledu programátora
Shapes◦Rectangle
◦Oval
◦Line
◦Ring
36
Design android aplikace z pohledu programátora
9-patch
37
Design android aplikace z pohledu programátora
9-patch
38
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
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
Design android aplikace z pohledu programátora
XML drawables◦Selector
◦Xml Bitmap
◦Layer list
◦a další
41
Design android aplikace z pohledu programátora
Selector◦Umožňuje jednoduše odlišit různé stavy UI
◦normal vs focused vs pressed
42
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>
Design android aplikace z pohledu programátora
XML bitmap◦alias pro skutečnou bitmapu
◦dlaždice
◦výřez
44
Design android aplikace z pohledu programátora
XML bitmap
45
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" />
Design android aplikace z pohledu programátora
Layer List
47
Design android aplikace z pohledu programátora
Layer List
48
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>
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
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
Design android aplikace z pohledu programátora
Inline vs Style vs Theme◦Level 0 - inline
◦Level 1 - style
◦Level 2 - theme
52
layout.xml
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
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
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
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
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
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
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
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
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); }
...
}
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; }
}
Design android aplikace z pohledu programátora
Přepínání témat
63
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
Design android aplikace z pohledu programátora
AsyncTask◦zpracování na pozadí
◦synchronizace s UI
◦AsyncTask vs Service
65
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
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
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
Design android aplikace z pohledu programátora
69
Díky za pozornost!
Otázky?
top related