Android JetPack Compose 筆記

Jetpack Compose for Android Developers
https://developer.android.com/courses/jetpack-compose/course

Compose
https://developer.android.com/jetpack/androidx/releases/compose

目前 Compose 的版本為  2023 年 06 月 28 日的 1.4.3

compose-samples
https://github.com/android/compose-samples 

本來想照著 course 一步一步學習，但想了一下，先從 Sample 著手，看一下有哪些 UI/UX 可以參考的。

從 GitHub 下載回來的檔名為 compose-samples-main.zip。解開來後的內容如下圖。

README.md 中，JetNews 被放在第一個，所以先從 JetNews 開始。

 

一個專案的了解，一開始會先從 AndroidManifest.xml 看起。

\app\src\main\AndroidManifest.xml

line 17

<application
    android:name=".JetnewsApplication"

\app\src\main\java\com\example\jetnews\JetnewsApplication.kt
line 29

lateinit var container: AppContainer

line 20

import com.example.jetnews.data.AppContainer

 

\app\src\main\java\com\example\jetnews\data\AppContainerImpl.kt

line 20

interface AppContainer {

\app\src\main\java\com\example\jetnews\JetnewsApplication.kt

line 33

container = AppContainerImpl(this)

\app\src\main\java\com\example\jetnews\data\AppContainerImpl.kt 

line 38

class AppContainerImpl(private val applicationContext: Context) : AppContainer {

\app\src\main\AndroidManifest.xml

line 26

<activity
    android:name=".ui.MainActivity"

\app\src\main\java\com\example\jetnews\ui\MainActivity.kt 

line 27

class MainActivity : ComponentActivity() {

line 20

import androidx.activity.ComponentActivity

https://developer.android.com/reference/kotlin/androidx/activity/ComponentActivity

line 29

@OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
override fun onCreate(savedInstanceState: Bundle?) {

https://kotlinlang.org/docs/opt-in-requirements.html

https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-opt-in/

https://developer.android.com/reference/kotlin/androidx/annotation/OptIn

line 22

import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi

https://developer.android.com/reference/kotlin/androidx/compose/material3/windowsizeclass/ExperimentalMaterial3WindowSizeClassApi

 

line 32

WindowCompat.setDecorFitsSystemWindows(window, false)

https://developer.android.com/reference/kotlin/androidx/core/view/WindowCompat

如果將此行註解不執行，則系統狀態列的背景顏色在列表向上推動時就不會與 ActionBar 背景色一樣。

line 36

val widthSizeClass = calculateWindowSizeClass(this).widthSizeClass

https://developer.android.com/reference/kotlin/androidx/compose/material3/windowsizeclass/package-summary#calculateWindowSizeClass(android.app.Activity)

https://developer.android.com/reference/kotlin/androidx/compose/material3/windowsizeclass/WindowSizeClass

 

line 37

JetnewsApp(appContainer, widthSizeClass)

\app\src\main\java\com\example\jetnews\ui\JetnewsApp.kt

line 46

@Composable
fun JetnewsApp(