Compose Jetpack

Jetpack - Compose

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

簡介

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 中就沒有這個困擾。在做UI組件時只要在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 !")
}

 

 

預覽設定介紹

想要讓UI改變樣式可在@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))
        }
    }

 

  • Row

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

 

  • Spacer

能夠提供一个空白的布局,可以使用 Modifier.width, Modifier.height 和 Modifier.size 来填充

 

  • ConstraintLayout

在對齊要求比較複雜的佈局時,ConstraintLayout 很有用。

 

由於範例太多就不在此敘述,請點選連結看Sample

Demo

 

 

 

Ellis Wang