• Like
Stylování ActionBaru
Upcoming SlideShare
Loading in...5
×

Stylování ActionBaru

  • 1,089 views
Uploaded on

Lecture on Android ActionBar styling. At aDev Meetup #2 FIT ČVUT Prague.

Lecture on Android ActionBar styling. At aDev Meetup #2 FIT ČVUT Prague.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,089
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
13
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Stylování ActionBaru Tomáš Kypta @TomasKypta
  • 2. ActionBar ● přidán v Androidu 3.0 (API level 11) ● další rozšíření v Androidu 4.0 (API level 14) ● není v support library ● ActionBarSherlock
  • 3. ActionBarSherlock ● backportuje ActionBar na Android 2.x ● nahrazuje nativní ActionBar na Android 3.x ● nyní ve verzi 4.2.0
  • 4. ActionBar 1. main action bar 2. top action bar 3. bottom action bar
  • 5. ActionBar
  • 6. Základ ● tmavé a světlé téma – definují default styly pro všechny UI prvky ● Theme.Sherlock (Theme.Holo, Theme) ● Theme.Sherlock.Light (Theme.Holo.Light, Theme.Light) ● kombinace tmavého a světlého tématu ● Theme.Sherlock.Light.DarkActionBar (Theme.Holo.Light.DarkActionBar)
  • 7. ActionBar – kde začít● http://developer.android.com/guide/topics/ui/actionbar.html● http://jgilfelt.github.com/android-actionbarstylegenerator
  • 8. ActionBar - styly ● matoucí, co kde má být nastaveno ● celkové stylování definováno několika položkami v tématu – některé položky obsahují kompexní styly ● pro ActionBarSherlock je třeba položky (většinou) zduplikovat bez namespace android
  • 9. ActionBar ● vypnutí ActionBaru ● nelze pak zapnout v kódu
  • 10. ActionBar - overlay
  • 11. ActionBar - výška ● portrait - 48dp ● landscape - 40dp ● sw600dp - 56dp ● raději neměnit
  • 12. Home Layout ● složen z: – icon/logo – title & subtitle – homeAsUpIndicator ● nelze vyměnit
  • 13. Home Layout
  • 14. Home Layout
  • 15. Home Layout ● části lze vypnout
  • 16. Home Layout
  • 17. Home Layout – z kódu ● setDisplayOptions() ● setDisplayHomeAsUpEnabled() ● setDisplayShowCustomEnabled() ● setDisplayShowHomeEnabled() ● setDisplayShowTitleEnabled() ● setDisplayUseLogoEnabled() ● setHomeButtonEnabled()
  • 18. Icon/Logo ● defaultně se zobrazuje ikona aplikace ● lze zobrazit jakoukoliv ikonu/obrázek ● setIcon(), setLogo()
  • 19. Icon/Logo ● 4dip top & bottom margin – nelze změnit ● designer si toho musí být vědom – logo by mělo mít transparent pozadí – nedělat stavy s barevným pozadím
  • 20. Icon/Logo background ● nelze použít color selector - crash ● společné pozadí pro homeAsUpIndicator a ikonu/logo ● na celou výšku ActionBaru ● použije se i pro další prvky v ActionBaru
  • 21. homeAsUpIndicator ● 16dip x 16dip ● lze použít jiný rozměr ● ideálně jen přebarvit defaultní ikonu ● šířka ovlivňuje odsazení ikony/loga zleva
  • 22. homeAsUpIndicator ● šířka ovlivňuje odsazení ikony/loga zleva ● ikona/logo částečně zprava překrývá homeAsUpIndicator ● mdpi – 3px, hdpi – 5px, xhdpi - 7px
  • 23. homeAsUpIndicator ● šířka ovlivňuje odsazení ikony/loga zleva ● ikona/logo částečně zprava překrývá homeAsUpIndicator ● mdpi – 3px, hdpi – 5px, xhdpi - 7px
  • 24. homeAsUpIndicator ● měl by mít transparent pozadí ● nedělat stavy s barevným pozadím
  • 25. Title ● default hodnota z android:label z manifestu ● lze měnit v kódu ● raději nepoužívat android:label=””
  • 26. Subtitle ● text se nastavuje v kódu
  • 27. Menu
  • 28. Menu● položky menu umísťované do AB● atribut android:showAsAction – always – položka se přidá vždy do AB (nemusí se vejít) – ifRoom – podle místa se buď přidá do AB nebo do overflow menu – never – vždy v overflow menu – withText – snaží se zobrazit ikonu s textem – collapseActionView – položka má view, které kolabuje do normální položky menu
  • 29. Menu● může ovlivnit zobrazení titulku● ikona a homeAsUpIndicator neovlivněny● overflow ikona ovlivněna
  • 30. Action button ● defaultní background je ?attr/actionBarItemBackground ● ikona má celou výšku AB ● ikony by měly mít transparentní pozadí
  • 31. Action button - actionLayout ● menu resource item může mít vlastní layout ● background je třeba nastavit v layoutu
  • 32. Action button - actionViewClass ● menu resource item může být definován nějakým widgetem
  • 33. Action button - collapseActionView● actionView lze rozbalit – zabere celou šířku kromě homeAsUpIndicatoru, ikony a overflow ikony
  • 34. Action overflow button ● zobrazen, pokud nema telefon HW menu tlačítko ● v předchozí verzi ABS existovalo téma .ForceOverflow
  • 35. Action overflow button
  • 36. Action overflow button
  • 37. Action overflow button ● defaultní background je ?attr/actionBarItemBackground ● ideálně pouze přebarvit defaultní ikonu
  • 38. Action overflow menu ● pozadí
  • 39. Action overfow menu ● item selector ● pozor – nastaví se pro každý spinner dropdown ● nepoužívat color selector ani barvy v drawable selectoru
  • 40. Action overflow menu ● text
  • 41. ProgressBar● inditerminateProgress & progress zabudovány v AB● requestWindowFeature(Window.FEATURE_INDETERMINATE_ PROGRESS)● requestWindowFeature(Window.FEATURE_PROGRESS)● setSupportProgressBarIndeterminateVisibility(true)● setSupportProgress(progressValue) - hodnota od 0 do 10000● setSupportProgressBarVisibility(true)
  • 42. Indeterminate Progress
  • 43. Progress
  • 44. Custom view ● lze i v kódu setCustomView(R.layout.custom);
  • 45. Custom view ● natazeni na cely AB (schova i title)
  • 46. Stín pod ActionBarem ● res/values ● res/values-v14
  • 47. Split ActionBar ● defaultně vypnuto ● nebo v <application> ● umísťuje se sem menu
  • 48. Split ActionBar
  • 49. Split ActionBar ● expandovaná action views jsou roztažena v hlavním actionbaru
  • 50. Taby ● vytvářeny v kódu ● setNavigationMode(ActionBar.NAVIGATION_MODE_TABS) ● můžou obsahovat text, ikonu, custom view
  • 51. Taby ● podle dostupného místa vytvořeny v hlavním action baru nebo stacked action baru ● pokud není dost místa mohou zkolabovat do list navigation ● nelze vynutit umístění ani formu
  • 52. Taby
  • 53. Taby – stacked action bar ●
  • 54. Taby – TabBar ● TabBar background
  • 55. Taby ● tab background
  • 56. Taby - text
  • 57. List navigation ● created in code ● setNavigationMode(ActionBar.NAVIGATION_MODE_LIST) ● taby a list menu nemohou existovat společně
  • 58. List navigation
  • 59. List navigation ● list selector – lze nastavit společně s overflow menu ● nebo nutné vytvořit v layoutu položek ● dobré stejně vyřešit i text ● nefunguje, pokud vzniklo z tabu
  • 60. ActionMode ● context menu ● nahrazení of plovoucího menu ● implementováno action barem ● může být split action mode
  • 61. ActionMode
  • 62. ActionMode - background
  • 63. ActionMode
  • 64. ActionMode
  • 65. SearchView (android:)searchDropdownBackground ● (android:)searchViewTextField ● (android:)searchViewTextFieldRight ● (android:)searchViewCloseIcon ● (android:)searchViewSearchIcon ● (android:)searchViewGoIcon ● (android:)searchViewVoiceIcon
  • 66. THE END