Motywy i style Androida w praktyce

Transcript

1. Motywy i style Androida w praktyce Mikołaj K ą kol
2. Definicja stylu <TextView android:layout_width= "match_parent" android:layout_height= "wrap_content" android:padding="16dp" android:textColor="@color/red" android:textSize="28sp" />
3. Definicja stylu <style name="Title"> <item name="android:padding" >16dp</item> <item name="android:textColor" >@color/red</item> <item name="android:textSize" >28sp</item> </style> <TextView style="@style/Title" android:layout_width= "match_parent" android:layout_height= "wrap_content" />
4. Kiedy nadawać styl, a kiedy nie elementy UI wyglądają podobnie i mają taką samą funkcjonalność
5. Kiedy nadawać styl, a kiedy nie elementy UI wyglądają podobnie i mają taką samą funkcjonalność
6. Kiedy nadawać styl, a kiedy nie elementy UI wyglądają podobnie i mają taką samą funkcjonalność dane elementy powinny wyglądać tak samo
7. Kiedy nadawać styl, a kiedy nie elementy UI wyglądają podobnie i mają taką samą funkcjonalność dane elementy powinny wyglądać tak samo
8. Kiedy nadawać styl, a kiedy nie elementy UI wyglądają podobnie i mają taką samą funkcjonalność dane elementy powinny wyglądać tak samo widoki mają przypadkowo ten sam zestaw atrybutów
9. Kiedy nadawać styl, a kiedy nie elementy UI wyglądają podobnie i mają taką samą funkcjonalność dane elementy powinny wyglądać tak samo widoki mają przypadkowo ten sam zestaw atrybutów
10. Kiedy nadawać styl, a kiedy nie elementy UI wyglądają podobnie i mają taką samą funkcjonalność dane elementy powinny wyglądać tak samo widoki mają przypadkowo ten sam zestaw atrybutów ALE…
11. À propos dziedziczenia... Sposoby definiowania rodzica <style name="Red"> <item name="android:textColor" >#f00</item> </style> <style name="Green" > <item name="android:textColor" >#0f0</item> </style>
12. À propos dziedziczenia... Sposoby definiowania rodzica <style name="Red"> <item name="android:textColor">#f00</item> </style> <style name="Green" > <item name="android:textColor">#0f0</item> </style> <style name="MyStyle" parent="Green" />
13. À propos dziedziczenia... Sposoby definiowania rodzica <style name="Red"> <item name="android:textColor">#f00</item> </style> <style name="Green" > <item name="android:textColor">#0f0</item> </style> <style name="MyStyle" parent="Green" /> <style name="Red.MyStyle" />
14. À propos dziedziczenia... Jaki będzie kolor tekstu? <style name="Red"> <item name="android:textColor">#f00</item> </style> <style name="Green" > <item name="android:textColor">#0f0</item> </style> <style name="Red.MyStyle" parent="Green" > <item name="android:textColor" >????</item> </style>
15. Tymczasem motywy <style name="AppTheme" parent="android:Theme.Material" > <item name="android:windowActionBar" >false</item> <item name="android:windowNoTitle" >true</item> <item name="android:windowBackground" > @android:color/white </item> <item name="android:navigationBarColor" >@color/red</item> </style>
16. Motywy • kontrolują styl widoków tworzonych przez system • definiują domyślne style dla widoków • pozwalają nadawać tło system i navigation bar
17. Motywy • kontrolują styl widoków tworzonych przez system • definiują domyślne style dla widoków • pozwalają nadawać tło system i navigation bar • należy je wprost przypisać do widoku • mogą używać referencji do motywu Style
18. ¡Hola ?android:attr/… ?attr/…
19. ¡Hola ?android:attr/… ?attr/… deklaracje zmiennych
20. ¡Hola ?android:attr/… ?attr/… deklaracje zmiennych mogą być daklarowane dla motywów
21. Deklarowanie atrybutów <declare-styleable name="AppThemeAttr" > <attr name="fancyColor" format="reference|color" /> </declare-styleable>
22. Deklarowanie atrybutów <declare-styleable name="AppThemeAttr"> <attr name="fancyColor" format="reference|color" /> </declare-styleable> <style name="AppTheme" parent="android:Theme.Material" > <item name="fancyColor">@color/gold</item> </style>
23. Deklarowanie atrybutów <declare-styleable name="AppThemeAttr"> <attr name="fancyColor" format="reference|color" /> </declare-styleable> <style name="AppTheme" parent="android:Theme.Material"> <item name="fancyColor">@color/gold</item> </style> <TextView android:text="@string/fancy_txt" android:textColor="?attr/fancyColor" android:layout_width= "match_parent" android:layout_height= "wrap_content" />
24. Deklarowanie atrybutów <declare-styleable name="AppThemeAttr" > <attr name="fancyColor" format="reference|color" /> </declare-styleable> <style name="AppTheme" parent="android:Theme.Material" > <item name="fancyColor">@color/gold</item> </style> <TextView android:text="@string/fancy_txt" android:textColor="?attr/fancyColor" android:layout_width= "match_parent" android:layout_height= "wrap_content" />
25. Tworzenie wielu motywów dla aplikacji <style name="AppTheme.Green" > <item name="fancyColor">@color/green</item> </style> <style name="AppTheme.Red" > <item name="fancyColor">@color/red</item> </style>
26. Tworzenie wielu motywów dla aplikacji <style name="AppTheme.Green"> <item name="fancyColor">@color/green</item> </style> <style name="AppTheme.Red"> <item name="fancyColor">@color/red</item> </style> <activity android:name=".MainActivity" android:theme="@style/AppTheme.Red" android:label="@string/app_name" >
27. Tworzenie wielu motywów dla aplikacji <style name="AppTheme.Green"> <item name="fancyColor">@color/green</item> </style> <style name="AppTheme.Red"> <item name="fancyColor">@color/red</item> </style> @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState) ; setTheme(R.style.AppTheme_Green); setContentView(R.layout. activity_main);
28. ¡Hola ?android:attr/… ?attr/… deklaracje zmiennych mogą być daklarowane dla motywów
29. ¡Hola ?android:attr/… ?attr/… deklaracje zmiennych mogą być daklarowane dla motywów i stylów
30. Deklarowanie atrybutów dla stylów <declare-styleable name="MyViewAttr"> <attr name="viewColor" format="reference|color" /> <attr name="makeItCamelCase" format="reference|boolean" /> </declare-styleable>
31. Deklarowanie atrybutów dla stylów <declare-styleable name="MyViewAttr"> <attr name="viewColor" format="reference|color" /> <attr name="makeItCamelCase" format="reference|boolean" /> </declare-styleable> <com.sample.MyView app:makeItCamelCase= "true" app:viewColor="?attr/fancyColor" android:layout_width= "match_parent" android:layout_height= "wrap_content" />
32. Deklarowanie atrybutów dla stylów <declare-styleable name="MyViewAttr"> <attr name="viewColor" format="reference|color" /> <attr name="makeItCamelCase" format="reference|boolean" /> </declare-styleable> <com.sample.MyView app:makeItCamelCase="true" app:viewColor="?attr/fancyColor" android:layout_width="match_parent" android:layout_height="wrap_content" /> TypedArray a = context.obtainStyledAttributes(attrs , R.styleable.MyViewAttr); a.getColorStateList(R.styleable. MyViewAttr_viewColor); a.getBoolean(R.styleable. MyViewAttr_makeItCamelCase, false); a.recycle();
33. Problemy… deklaracje nie mogą się duplikować <declare-styleable name="MyThemeAttr"> <attr name="fancyColor" format="reference|color" /> </declare-styleable> <declare-styleable name="MyViewAttr"> <attr name="viewColor" format="reference|color" /> <attr name="fancyColor" format="reference|color" /> <attr name="makeItCamelCase" format="reference|boolean" /> </declare-styleable>
34. Problemy… deklaracje nie mogą się duplikować <declare-styleable name="MyThemeAttr"> <attr name="fancyColor" format="reference|color" /> </declare-styleable> <declare-styleable name="MyViewAttr"> <attr name="viewColor" format="reference|color" /> <attr name="fancyColor" format="reference|color" /> <attr name="makeItCamelCase" format="reference|boolean" /> </declare-styleable>
35. Problemy… i rozwiązania ale można je reużywać <declare-styleable name="MyThemeAttr"> <attr name="fancyColor" format="reference|color" /> </declare-styleable> <declare-styleable name="MyViewAttr"> <attr name="viewColor" format="reference|color" /> <attr name="fancyColor" /> <attr name="makeItCamelCase" format="reference|boolean" /> </declare-styleable>
36. Problemy… i rozwiązania ale można je reużywać <declare-styleable name="MyThemeAttr"> <attr name="fancyColor" format="reference|color" /> </declare-styleable> <declare-styleable name="MyViewAttr"> <attr name="viewColor" format="reference|color" /> <attr name="fancyColor" /> <attr name="android:textColorPrimary" /> <attr name="makeItCamelCase" format="reference|boolean" /> </declare-styleable>
37. więcej problemów • nie można się odwołwać do atrybutów z elementów typu drawable
38. więcej problemów • nie można się odwołwać do atrybutów z elementów typu drawable • chyba, że wspieramy tylko Android 5+
39. Jaki motyw dobrać do aplikacji? • Material vs Material.Light • domyślny kolor dla: ◦ dialogów ◦ pop-up’ów ◦ dropdown list • kolorystyka podczas listowania aplikacji ◦ Material = Material.Light.DarkActionBar
40. Jaki motyw dobrać do aplikacji? • Material vs Material.Light • domyślny kolor dla: ◦ dialogów ◦ pop-up’ów ◦ dropdown list • kolorystyka podczas listowania aplikacji ◦ Material = Material.Light.DarkActionBar
41. TIPS • Google Design
42. TIPS • Google Design • SOURCE CODE!!!
43. TIPS • Google Design • SOURCE CODE!!! • SOURCE CODE!!! • SOURCE CODE!!! • SOURCE CODE!!! • i dokumentacja
44. TIPS • Google Design • SOURCE CODE!!! • AppCompat FTW
45. AppCompat FTW • ?attr/… • ?attr:selectableItemBackground !!! • ?attr:selectableItemBackgroundBorderless • theme:
46. TIPS • Google Design • SOURCE CODE!!! • AppCompat FTW • Używaj częściej FrameLayout
47. FrameLayout > LinearLayout
48. FrameLayout > LinearLayout <LinearLayout android:layout_width= "match_parent" android:layout_height= "wrap_content" android:minHeight="?attr/listPreferredItemHeight" android:padding="@dimen/margin_default" > <ImageView android:layout_width= "56dp" android:layout_height= "wrap_content" /> <TextView android:layout_width= "match_parent" android:layout_height= "wrap_content" /> </LinearLayout>
49. FrameLayout > LinearLayout <FrameLayout android:layout_width= "match_parent" android:layout_height= "wrap_content" android:minHeight="?attr/listPreferredItemHeight" > <ImageView android:layout_marginLeft= "@dimen/margin_default" android:layout_width= "wrap_content" android:layout_height= "wrap_content" /> <TextView android :paddingTop="@dimen/padding_text_vertical" android :paddingBottom= "@dimen/padding_text_vertical" android:layout_marginLeft= "@dimen/margin_avatar" android:layout_marginRight= "@dimen/margin_default" android:layout_width= "match_parent" android:layout_height= "wrap_content" /> </FrameLayout>
50. Przy okazji FrameLayout > RelativeLayout • zawsze dwie fazy mierzenia • szczególnie groźne jeżeli znajdzie się gdzieś na szczycie hierarchi
51. TIPS • Google Design • SOURCE CODE!!! • AppCompat FTW • Używaj częściej FrameLayout • Gradle pozwala organizować lepiej kod
52. Gradle
53. ThreeHardThings in programming 1. Naming things
54. ThreeHardThings in programming 1. Naming things 2. Off-by-one errors
55. THE END
56. PYTANIA?