狠狠撸
Submit Search
Android Jetpack Compose 簡介
?
Download as PPTX, PDF
?
0 likes
?
138 views
E
EnPing Eric Hsieh
Follow
新時代的UI開發套件,用Kotlin寫Android UI。
Read less
Read more
1 of 62
Download now
Download to read offline
More Related Content
Android Jetpack Compose 簡介
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
Download