【原創】Jetpack Compose學習筆記(一)

Jetpack Compose學習筆記(一)

Jetpack Compose是Google推出的全新的UI框架。很多人都說學不動了，但是作為一個程序員，學不動也要學哦，不然就會被淘汰。

目錄結構

HelloWorld式這里就免了，新建工程的目錄結構就這個樣子，默認新建了一個主題的包，同時在res目錄下也沒有了layout目錄。Compose是響應式UI，不同以往的xml布局，所有頁面都是通過代碼來實現的。

初識

打開MainActivity如下

左邊是編碼，右邊可以實時預覽到效果，預覽主要是通過@Preview注解來展示。

設置界面不再是之前的setContentView而是通過函數setContent，進入setContent方法里面我們也可以看到setContentView的調用，實際上JetpackCompose是在一個ComposeView上構建的UI體系。

預覽工具

具體實現原理后面再學習，所話說工欲善其事,必先利其器，所以先學習下這個@Preview注解

@Preview的作用僅限右側預覽面板的使用，主要參數如下：

• name 預覽面板中該組件顯示的名稱

• group 組名，在預覽面板中以組顯示

• widthDp 預覽面板中渲染的寬

• heightDp 預覽面板中渲染的高

• fontScale 預覽中字體縮放比例

• showSystemUi 是否展示狀態欄和actionbar,預覽效果

• showBackground 是否展示背景

• backgroundColor 背景顏色

• uiMode UI模式，夜間模式等

• device 預覽的設備型號

下面我們分別來看看各個參數的實際效果。

name

預覽面板中該組件顯示的名稱，默認展示名稱為你預覽方法名字這里DefaultPreview。當我們配置以后就會顯示配置的名稱。

@Preview(
    name = "這是展示的名稱",
    showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeHelloTheme {
        Greeting("Android")
    }
}

group

在開發中我們會用很多預覽的組件，為了方便管理，可以通過該屬性將預覽的組件分組，在預覽時候選擇同一組內的顯示

@Preview(
    name = "這是展示的名稱",
    group= "簡單頁面",
    showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeHelloTheme {
        Greeting("Android")
    }
}

widthDp & heightDp

我們可以通過配置widthDp和heightDp屬性來指定預覽界面的寬高。下圖配置了320x200大小的預覽界面，單位是dp。

@Preview(
    name = "這是展示的名稱",
    group= "簡單頁面",
    widthDp = 320,
    heightDp = 200,
    showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeHelloTheme {
        Greeting("Android")
    }
}

fontScale

在預覽中如果你覺得字體顯示太小或太大，你可以通過設置fontScale屬性來設置字體的縮放大小比例，最小0.01。下圖是默認1與2倍縮放的展示。

@Preview(
    fontScale = 2f,
    showBackground = true
)
@Composable
fun FontScalePreview() {
    ComposeHelloTheme {
        Greeting("Android")
    }
}

showSystemUi

如果你看慣了xml配置中那種展示效果，你可以通過配置showSystemUi為true來展示頁面效果。

@Preview(
    showSystemUi = true,
    showBackground = true
)
@Composable
fun ShowSystemUiPreview() {
    ComposeHelloTheme {
        Greeting("Android")
    }
}

showBackground

默認新建的項目預覽showBackground為true，也即展示背景，背景默認白色。如果不想展示去掉該屬性即可，效果如圖中上

@Preview(showBackground = true)
@Composable
fun ShowBackgroundPreview() {
    ComposeHelloTheme {
        Greeting("Android")
    }
}

backgroundColor

為了更好的看到預覽效果，我們可以通過backgroundColor配置預覽頁面的背景色。設置該屬性必須設置showBackground = true否則無效果哦。

@Preview(
    showBackground = true,
    backgroundColor = 0xABCC33
)
@Composable
fun ShowBackgroundPreview() {
    ComposeHelloTheme {
        Greeting("Android")
    }
}

uiMode

如果你想看下夜間模式，可以通過配置uiMode來實現。下面展示了夜間模式效果。

@Preview(
    showBackground = true,
    uiMode = Configuration.UI_MODE_NIGHT_YES,
)
@Composable
fun ShowBackgroundPreview() {
    ComposeHelloTheme {
        Greeting("Android")
    }
}

device

話說這個屬性沒測試出來什么效果。。。其實你都能自定義寬高了，也不需要用這個設備顯示效果了。

@Preview(
    showBackground = true,
    device = Devices.NEXUS_5
)
@Composable
fun BackgroundColorPreview() {
    ComposeHelloTheme {
        Greeting("Android")
    }
}

呃呵🤗🇨🇳，今天到這，下個學學Text