新時代的UI開發套件，用Kotlin寫Android UI。

1. GDG Taichung
UI新時代
Jetpack Compose
En-Ping Hsieh

2. 2019 | Confidential and Proprietary GDG Taichung
Agenda
什麼是 Compose
Compose 想要解決什麼問題？
Jetpack Compose & Android Studio 4.2
示範
注意事項
參考資料

3. GDG Taichung
什麼是Compose

4. GDG Taichung
用Kotlin寫UI

5. GDG Taichung

6. GDG Taichung
只需要給 function 加上 @Composable，
就可以使用各式各樣的Composable元件，如Text、
Divider、Image、Card、Column、Row...

7. GDG Taichung
沒有淚類別，沒有傷害

8. GDG Taichung
一個稍微複雜的Layout長怎樣呢？

9. GDG Taichung
CardView
Linear Layout
ImageView
Text View

10. GDG Taichung
如果需求是：
如果有副標題就顯示，沒有就不顯示。

11. GDG Taichung

12. GDG Taichung
你可能會疑問
難道不需要初始化TextView的Visibility屬性嗎？

13. GDG Taichung
Composable function (UI) 不存在狀態，
而是作為資料的一種變換。
𝒇( )→Data UI

14. GDG Taichung
想像一個沒有狀態的Checkbox

15. GDG Taichung

16. GDG Taichung
但完全沒有狀態，也很不方便。

17. GDG Taichung

18. GDG Taichung
Compose想要解決什麼問題？

19. GDG Taichung
UI Toolkit 應該提供什麼能力？

20. GDG Taichung
根據給定的資料定義畫面該呈現什麼
畫面該如何反應事件改變
根據當前畫面狀態去調整？

21. GDG Taichung
根據給定的資料定義畫面該呈現什麼
畫面該如何反應事件改變
根據當前畫面狀態去調整？

22. GDG Taichung
Compose是一套Declarative UI toolkit

23. GDG Taichung
Declarative vs. Imperative

24. GDG Taichung
告訴Compose希望怎樣的畫面(What)
但交給Compose去決定如何達成(How)

25. GDG Taichung
為何Composable元件沒有狀態？

26. GDG Taichung
如無必要，勿增實體
Entities should not be multiplied unnecessarily
Ockham's Razor

27. GDG Taichung
Single Source of Truth (SSOT)

28. GDG Taichung
當資料來源發生變動時，
調用所有需要更新的Composable來重新建構UI，
此過程稱作Recompose 。

29. GDG Taichung
資料更新
資料 事件
點擊

30. GDG Taichung
資料總是由上而下傳遞，事件總是由下向上委派
(Lambda)

31. GDG Taichung
Compose是一套用Kotlin Code開發UI的工具

32. GDG Taichung
Jetpack Compose & Android
Studio
० 屬於Jetpack的一部分，免除UI元件Patch太慢的問題
० 元件不再具備狀態，可達成Single Source of Truth
० 全部Kotlin，不再使用findViewById，也不需要為Custom widget 設置style.xml
、color.xml和layout.xml，增加元件的內聚性，提高重構的可能性。
० 支援Material Design
० 可即時預覽多種螢幕畫面，還可進行互動(Android Studio 4.2 Canary)

33. GDG Taichung
多種畫面預覽
通過@Preview 標籤即可不同螢幕尺寸、文字尺寸、深色模式即時預覽。

34. GDG Taichung
測試畫面互動
畫面不僅可以預覽，還可以進行一定程度的互動，你可以測試你的動畫效果。

35. GDG Taichung
用Compose建構畫面

36. GDG Taichung

37. GDG Taichung

38. GDG Taichung
新Constraint Layout

39. GDG Taichung

40. GDG Taichung

41. GDG Taichung
重構一下

42. GDG Taichung

43. GDG Taichung
加入style和padding

44. GDG Taichung

45. GDG Taichung
Animation

46. GDG Taichung

47. GDG Taichung

48. GDG Taichung

49. GDG Taichung
新RecyclerView
AdapterList

50. GDG Taichung

51. GDG Taichung

52. GDG Taichung
互動一下

53. GDG Taichung

54. GDG Taichung
測試呢？

55. GDG Taichung

56. GDG Taichung

57. GDG Taichung
之前辛辛苦苦做好的UI都要重來嗎？

58. GDG Taichung

59. GDG Taichung
我想踹踹Compose，要注意什麼？

60. GDG Taichung
注意事項
० 屬於開發階段(0.1.0-dev13)，請勿使用於正式產品
仍然有許多bug，像是preview經常無法正確生成，需要refresh，或是互動點擊
區域跑版。
० Android Studio 4.2+(Canary)
० Android SDK 21+
० Testing only for AndroidTest
https://mvnrepository.com/artifact/androidx.ui/ui-test

61. GDG Taichung
參考資料
० Code Lab
https://codelabs.developers.google.com/codelabs/jetpack-compose-basics/#0
० Tutorial
https://developer.android.com/jetpack/compose/tutorial
० Sample Repo
JetNews
https://github.com/android/compose-samples/tree/master/JetNews
० Speech
Jetpack Compose
https://www.youtube.com/watch?v=U5BwfqBpiWU
Declarative UI patterns (Google I/O'19)
https://www.youtube.com/watch?v=VsStyq4Lzxo
What's New in Jetpack Compose (Android Dev Summit '19)
https://www.youtube.com/watch?v=dtm2h-_sNDQ
Understanding Compose (Android Dev Summit '19)
https://www.youtube.com/watch?v=Q9MtlmmN4Q0

62. GDG Taichung
FAQ