Android Jetpack Compose 基本應用教學

在2021/7/28的時候
google官方終於發佈了Jetpack Compose 穩定版1.0了
有興趣看官網發布文的可以看 這裡

那今天這篇我打算來分享一些基本的如何用jetpack compose來做一些元件用在android app上面

Jetpack Compose是一種完全用kotlin程式碼
去取代原本用.xml檔寫的view或layout
寫出來只會有.kt檔案
減少了大部分的xml檔。

所以如果先前對上述kotlin概念已經很熟悉了
對學習Jetpack Compose就有很大優勢
估計可以快速上手。

像是這是使用 xml 寫一個簡單toolbar的方式：

而這則是用jetpack compose來寫toolbar

這樣的改變使得我們能夠完全用程式碼來控制視圖（view）。
同時，
也讓使用一些函式型別（function type）的變數更加方便，
以便控制視圖實現所需的功能。
由於使用純Kotlin程式碼來實作，
我們能夠更靈活地使用判斷式來控制視圖的顯示與否。
這使得我們在設計應用程式時具有更大的彈性。

在此，
我建立了一些基礎的小部件（widget）。
當你實際上要在 Activity 或 Fragment 中使用時，
你可以根據需求進行重複使用，
這樣能更有效地開發和管理你的應用程式。
這種模組化的設計方式讓你能夠快速構建功能豐富且可重複使用的界面元素，
大大節省開發時間並提高代碼的可維護性。

最後做出來在IDE預覽可能會長成這樣
左邊寫code右邊是預覽畫面

必需更新android studio到Arctic Fox版本
才能透過IDE預覽Composable元件

官方下載位置： 下载 Android Studio Arctic Fox

先加入相關lib 至 gradle dependencies內 :

加入@Composable用以來說明你的這個fun是jetpack compose的元件



那這裡的

Modifier

這是一個在 Jetpack Compose 中常常使用的介面，
用於擴充元件的屬性。
在這裡，
使用變數作為函式參數的形式，
意味著當你呼叫 AppBar 元件時，
你可以自定義 Modifier，
設定該元件的背景色、動畫、字體等等屬性。

(根據你所使用的官方元件的不同，依照該元件的 Modifier 實現方式來設定不同的內容。)

你可以使用 Column 來對你使用 Jetpack Compose 建立的視圖進行排序。
Column 提供了一種類似於 LinearLayout 的垂直排列方式，
當你需要添加多個元件時非常實用。
通過使用 Column，你可以輕鬆將多個元件垂直排列在一起，
使你的界面佈局更加結構化和易於管理。
—

開始加入官方lib內建的funtion 直接快速做出一個toolbar
例如 TopAppBar

那這邊你會看到一些

modifier = ... ,
backgroundColor = ...,
elevation = ...,
contentColor = ...,

其實就是利用 kt內特性 Named argument 跟 function type 等
讓你在用fun時更能有效的去擴充程式碼

另外，這邊我們就可以利用funtion type變數 content: @Composable RowScope.() -> Unit 去加入一個Image 在TopAppBar左邊：

(這邊你可以按cmd+左鍵 去看TopAppBar的源碼知道RowScope在幹嘛)

到這邊就快速完成一個易擴充、能重複用的簡單widget了..

那要開始預覽的話要怎麼用呢？ 你只要再寫一個fun並加入 @Preview 再按下refresh就能看到IDE右邊會顯示你剛剛做的view了 (如果沒看到可以點 右邊Design 或 split來打開預覽畫面)

那實際應用上
你可以再包成一個content讓你去呼叫
這樣你的畫面就能分得很細
未來再維護上會更有效率

像是這樣來包一個完整邏輯的layout
這樣你未來要改layout長相就能從這裡改
你的基本元件有的一些功能就不用特別修改

實際做出來：

完成上面的步驟
你就可以在fragment或activity裡設定你的layout了
相當簡潔