【原创】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