Design android-aplikaci-z-pohledu-programatora

909 views

Published on

Jesenne stretnutie GTUG Bratislava 21.10.2011

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
909
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Design android-aplikaci-z-pohledu-programatora

  1. 1. Design android aplikací z pohleduprogramátoraTomáš VondráčekBratislava, 21.10.2011
  2. 2. Design android aplikace z pohledu programátoraPř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. 3. Design android aplikace z pohledu programátoraAgenda 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. 4. Design android aplikace z pohledu programátoraCí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. 5. Design android aplikace z pohledu programátoraNež začneme s vývojem Koncová zařízení Verze androida 5
  6. 6. Design android aplikace z pohledu programátoraKoncová zařízení 6
  7. 7. Design android aplikace z pohledu programátoraKoncová zařízení 7
  8. 8. Design android aplikace z pohledu programátoraKoncová zařízení Různé hustoty pixelů - ldpi, mdpi, hdpi, xhdpi Různé velikosti - small, normal, large, xlarge Výbava 8
  9. 9. Design android aplikace z pohledu programátora Koncová zařízenínormal-hdpi small-mdpi xlarge(large)- mdpi 9
  10. 10. Design android aplikace z pohledu programátoraKoncová zařízení hustota pixelů hdpi ldpi 10
  11. 11. Design android aplikace z pohledu programátoraKoncová zařízení hustota pixelů 11
  12. 12. Design android aplikace z pohledu programátoraKoncová zařízení velikost 12
  13. 13. Design android aplikace z pohledu programátoraKoncová 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. 14. Design android aplikace z pohledu programátoraKoncová zařízení 14
  15. 15. Design android aplikace z pohledu programátoraKoncová zařízení verze androida http://developer.android.com/resources/dashboard/platform-versions.html 15
  16. 16. Design android aplikace z pohledu programátoraKoncová 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. 17. Design android aplikace z pohledu programátoraAgenda 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. 18. Design android aplikace z pohledu programátoraUI aplikace 18
  19. 19. Design android aplikace z pohledu programátora UI aplikaceNotifikační lišta Menu 19
  20. 20. Design android aplikace z pohledu programátoraUI aplikace - layout ViewGroup - Linear Layout, Relative, Layout,... View - TextView, ImageView, ListView, Button ... 20
  21. 21. Design android aplikace z pohledu programátoraUI 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. 22. Design android aplikace z pohledu programátoraUI aplikace - patterny TabBar ActionBar Dashboard Multi pane layout 22
  23. 23. Design android aplikace z pohledu programátoraUI aplikace - TabBar 23
  24. 24. Design android aplikace z pohledu programátoraUI aplikace - ActionBar 24
  25. 25. Design android aplikace z pohledu programátoraUI aplikace - Dashboard 25
  26. 26. Design android aplikace z pohledu programátoraUI aplikace - Multi pane 26
  27. 27. Design android aplikace z pohledu programátoraUI aplikace - Multi pane 27
  28. 28. Design android aplikace z pohledu programátoraAgenda 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. 29. Design android aplikace z pohledu programátoraTudy 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. 30. Design android aplikace z pohledu programátoraTudy ne backstack absolute layout, px portrait only modální dialog 30
  31. 31. Design android aplikace z pohledu programátoraAgenda 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. 32. Design android aplikace z pohledu programátoraDrawables drawable je obecný koncept pro gra ku, která může být nakreslena na obrazovku Bitmapy (png) 9-patche Xml Drawables 32
  33. 33. Design android aplikace z pohledu programátoraPNG v aplikaci Ikonka aplikace Ikonky akcí Pozadí okna Pozadí pro view (Button, EditText) 33
  34. 34. Design android aplikace z pohledu programátoraPNG v aplikaci Ikonka aplikace Ikonky akcí Pozadí okna Pozadí pro view (Button, EditText)Jedna obrazovka - 2 layouty x 3 dpi -> spousta png 34
  35. 35. Design android aplikace z pohledu programátoraShapes <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. 36. Design android aplikace z pohledu programátoraShapes Rectangle Oval Line Ring 36
  37. 37. Design android aplikace z pohledu programátora9-patch 37
  38. 38. Design android aplikace z pohledu programátora9-patch 38
  39. 39. Design android aplikace z pohledu programátoraShape 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. 40. Design android aplikace z pohledu programátoraShape 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. 41. Design android aplikace z pohledu programátoraXML drawables Selector Xml Bitmap Layer list a další 41
  42. 42. Design android aplikace z pohledu programátoraSelector Umožňuje jednoduše odlišit různé stavy UI normal vs focused vs pressed 42
  43. 43. Design android aplikace z pohledu programátoraSelector <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. 44. Design android aplikace z pohledu programátoraXML bitmap alias pro skutečnou bitmapu dlaždice výřez 44
  45. 45. Design android aplikace z pohledu programátoraXML bitmap 45
  46. 46. Design android aplikace z pohledu programátoraXML bitmap <bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/bg" android:gravity="top|center_horizontal" /> 46
  47. 47. Design android aplikace z pohledu programátoraLayer List 47
  48. 48. Design android aplikace z pohledu programátoraLayer List 48
  49. 49. Design android aplikace z pohledu programátoraLayer 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. 50. Design android aplikace z pohledu programátoraAgenda 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. 51. Design android aplikace z pohledu programátoraStyly 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. 52. Design android aplikace z pohledu programátoraInline vs Style vs Theme Level 0 - inline layout.xml Level 1 - style Level 2 - theme 52
  53. 53. Design android aplikace z pohledu programátoraInline vs Style vs Theme Level 0 - inline Level 1 - style layout.xml Styles.xml Level 2 - theme 53
  54. 54. Design android aplikace z pohledu programátoraInline vs Style vs Theme Level 0 - inline Level 1 - style Level 2 - theme layout.xml themes.xml 54
  55. 55. Design android aplikace z pohledu programátoraVýhody Šetří čas Neopakuje se stále stejný kód Oddělení vzhledu od struktury UI je vyměnitelný 55
  56. 56. Design android aplikace z pohledu programátoraPř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. 57. Design android aplikace z pohledu programátoraAttribute 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. 58. Design android aplikace z pohledu programátoraAttribute 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. 59. Design android aplikace z pohledu programátoraAttribute 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. 60. Design android aplikace z pohledu programátoraAttribute <ImageButton android:id="@+id/homeAtm" android:layout_width="wrap_content" android:layout_height="wrap_content" layout.xml android:src="?homeATMsIcon" /> 60
  61. 61. Design android aplikace z pohledu programátora Přepínání tématpublic 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. 62. Design android aplikace z pohledu programátoraPř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. 63. Design android aplikace z pohledu programátoraPřepínání témat 63
  64. 64. Design android aplikace z pohledu programátoraAgenda 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. 65. Design android aplikace z pohledu programátoraAsyncTask zpracování na pozadí synchronizace s UI AsyncTask vs Service 65
  66. 66. Design android aplikace z pohledu programátoraCompatibility package novinky z android 3.0 dostupné i na telefonech až po 1.6 Fragmenty Loader ViewPager 66
  67. 67. Design android aplikace z pohledu programátoraBitmapy 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. 68. Design android aplikace z pohledu programátoraVý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. 69. Design android aplikace z pohledu programátora Díky za pozornost! Otázky? 69

×