其他分享
首页 > 其他分享> > 【原创】Jetpack Compose学习笔记(一)

【原创】Jetpack Compose学习笔记(一)

作者:互联网

Jetpack Compose学习笔记(一)

Jetpack Compose是Google推出的全新的UI框架。很多人都说学不动了,但是作为一个程序员,学不动也要学哦,不然就会被淘汰。

目录结构

HelloWorld式这里就免了,新建工程的目录结构就这个样子,默认新建了一个主题的包,同时在res目录下也没有了layout目录。Compose是响应式UI,不同以往的xml布局,所有页面都是通过代码来实现的。

初识

打开MainActivity如下

image.png

左边是编码,右边可以实时预览到效果,预览主要是通过@Preview注解来展示。

设置界面不再是之前的setContentView而是通过函数setContent,进入setContent方法里面我们也可以看到setContentView的调用,实际上JetpackCompose是在一个ComposeView上构建的UI体系。

预览工具

具体实现原理后面再学习,所话说工欲善其事,必先利其器,所以先学习下这个@Preview注解

@Preview的作用仅限右侧预览面板的使用,主要参数如下:

下面我们分别来看看各个参数的实际效果。

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

我们可以通过配置widthDpheightDp属性来指定预览界面的宽高。下图配置了320x200大小的预览界面,单位是dp。

@Preview(
    name = "这是展示的名称",
    group= "简单页面",
    widthDp = 320,
    heightDp = 200,
    showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeHelloTheme {
        Greeting("Android")
    }
}

fontScale

在预览中如果你觉得字体显示太小或太大,你可以通过设置fontScale属性来设置字体的缩放大小比例,最小0.01。下图是默认12倍缩放的展示。

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

showSystemUi

如果你看惯了xml配置中那种展示效果,你可以通过配置showSystemUitrue来展示页面效果。

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

showBackground

默认新建的项目预览showBackgroundtrue,也即展示背景,背景默认白色。如果不想展示去掉该属性即可,效果如图中上

@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")
    }
}

呃呵

标签:Compose,预览,Jetpack,showBackground,笔记,Composable,Android,Preview,true
来源: https://www.cnblogs.com/baiyuas/p/14988885.html