Compose Jetpack

Jetpack - Compose

Ellis Wang 2021/12/28 11:16:17

0 2107

簡介

Jetpack Compose 是一個 Android 新的宣告式（Declarative） UI 框架,不需要透過xml拉物件,在class 做view binding,可以直接在class 生成preview 出來不必再切換xml或是build app到測試機或虛擬機做顯示,讓開發者方便快速開發

引用方法

implementation "androidx.compose.ui:ui-tooling:$compose_version"

相關引用

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-beta02"

implementation "androidx.compose.ui:ui:$compose_version"

implementation "androidx.compose.material:material:$compose_version"

implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"

Compose Activity基本框架

project建立完後建立Empty Activity時,點選 File->new->compose->Empty Compose Activity

class XXXActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
       
        }
    }
}

所有view 都須包在setContent裡

Composable Function

跟以往一般function命名不一樣,開頭要大寫,官方說明是增加其可閱讀性。想像一下，如果在一個 Compose UI 的程式碼中，有著各個不同的元件，還有許許多多自己寫的函式，那麼你能夠一眼就能簡單的分辨出來哪些是 UI 組件，那些是計算用的函式嗎？反之，在 xml 中就沒有這個困擾。在做ＵＩ組件時只要在function上加Composable Annotation就完成了。

@Composable
fun NormalTextView(text: String) {
      Text(text = "Hello $text !")
}

預覽功能

當想要在組建上預覽顯示在function上加 Preview Annotation

@Preview
@Composable
fun NormalTextView(text: String) {
      Text(text = "Hello $text !")
}

預覽設定介紹

想要讓ＵＩ改變樣式可在@Preview變更

dark mode ：

@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)

showSystemUi:是否顯示系統介面

@Preview(showSystemUi = true)

name: 預覽名稱

@Preview(name = “Test”)

背景:要設定背景showBackground設true ,default 是fales。 backgroundColor設定背景顏色

這邊要注意是 ARGB Long，而不是 Color 值

@Preview(showBackground = true, backgroundColor = 0xFF00FF00)

語言區域: 專案有多語系可設定

@Preview(locale = "fr-rFR")

尺寸：手動設置尺寸，可以添加heightDp和widthDp

@Preview(widthDp = 50, heightDp = 50)

Layout 組件

Column

它可以讓裡面子項做垂直排序顯示，相當於Vertical LinearLayout ,Column裡面子項目是不會做滾動必須用Modifier.verticalScroll,來實現此行為

Column(
        modifier = Modifier
            .background(Color.LightGray)
            .size(100.dp)
            .verticalScroll(rememberScrollState())
    ) {
        repeat(10) {
            Text("Item $it", modifier = Modifier.padding(2.dp))
        }
    }

它可以讓裡面子項做橫向排序顯示，相當於Horizontal LinearLayout