安卓UI开发新技能-Jetpack Compose

栏目: IT技术 · 发布时间: 4年前

内容简介:作者:程序园中猿链接:https://www.jianshu.com/p/4289c2271c95

code小生 一个专注大前端领域的技术平台 公众号回复 Android 加入安卓技术群

作者:程序园中猿

链接:https://www.jianshu.com/p/4289c2271c95

声明:本文已获 程序园中猿 授权发表,转发等请联系原作者授权

Jetpack Compose是什么?

Jetpack Compose 是安卓用于构建UI的一种新方式,采用代码而非xml文件方式,写法与Flutter非常相似。

官方主页: https://developer.android.google.cn/jetpack/compose

官方Demo: https://github.com/android/compose-samples/tree/master/JetNews

官方入门指导: https://developer.android.google.cn/jetpack/compose/tutorial

约束条件

  1. Android Studio: 4.0及以上

  2. 支持安卓版本:Android API 21(即5.0)及以上

  3. 必须使用kotlin语言

优点

  1. 代码更少 少了xml,少了activity和xml之间的关联.

  2. 双向绑定 数据变化了,UI就自动变化.

缺点

  1. 含有参数的Composable函数不能直接预览.

  2. Composable函数必须添加@Preview注解才能预览.

  3. 代码修改后,需要重新编译才能预览.

  4. 目前还不完善,相比于Flutter,还处于幼儿园水平.

  5. 相比于xml画页面布局,效率会有降低.

常见控件使用样例

  1. 文本显示

Text(text = "众鸟高飞尽,孤云独去闲。相看两不厌,只有敬亭山。")
安卓UI开发新技能-Jetpack Compose
image
  1. 文本输入框

val state = +state { "Text Field to input" }
TextField(
        value = state.value,
        onValueChange = { state.value = it }
)
安卓UI开发新技能-Jetpack Compose
image
  1. 按钮

Button(text = "咬我啊", onClick = { Log.v("test", "被咬了") })
安卓UI开发新技能-Jetpack Compose
image

4.弹出框

MaterialTheme {
    Column {
        val openDialog = +state { false }

        Button("Click me", onClick = {
            openDialog.value = true
        })

        if (openDialog.value) {
            AlertDialog(
                    onCloseRequest = {
                        openDialog.value = false
                    },
                    title = {
                        Text(text = "Alert Dialog Title")
                    },
                    text = {
                        Text("Alert Dialog content")
                    },
                    confirmButton = {
                        Button(
                                "Confirm",
                                onClick = {
                                    openDialog.value = false
                                })
                    },
                    dismissButton = {
                        Button(
                                "Cancel",
                                onClick = {
                                    openDialog.value = false
                                })
                    },
                    buttonLayout = AlertDialogButtonLayout.Stacked
            )
        }
    }
}
安卓UI开发新技能-Jetpack Compose
image
  1. 开关

MaterialTheme {
    val checkedState = +state { true }
    Switch(
            checked = checkedState.value,
            onCheckedChange = { checkedState.value = it }
    )
}
安卓UI开发新技能-Jetpack Compose
image
  1. 单选框

MaterialTheme {
    RadioButton(selected = true,
            onSelect = { }
    )
}
安卓UI开发新技能-Jetpack Compose
image
  1. 复选框

MaterialTheme {
    val checkedState = +state { true }
    Checkbox(
            checked = checkedState.value,
            onCheckedChange = { checkedState.value = it }
    )
}
安卓UI开发新技能-Jetpack Compose
image
  1. 单选框组

MaterialTheme {
    val radioOptions = listOf("A", "B", "C")
    val (selectedOption, onOptionSelected) = +state { radioOptions[0] }
    RadioGroup(
            options = radioOptions,
            selectedOption = selectedOption,
            onSelectedChange = onOptionSelected
    )
}
安卓UI开发新技能-Jetpack Compose
image

9.图片

Container(modifier = Height(300.dp) wraps Expanded) {
    Clip(shape = RoundedCornerShape(4.dp)) {
        DrawImage(+imageResource(R.drawable.img_0))
    }
}
安卓UI开发新技能-Jetpack Compose
image}

源代码

https://github.com/cxyzy1/Jetpack-Compose-Demos


以上所述就是小编给大家介绍的《安卓UI开发新技能-Jetpack Compose》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

安全之美

安全之美

Andy Oram、John Viega / 徐 波、沈晓斌 / 机械工业出版社华章公司 / 2011-4-28 / 65.00元

“这本深思熟虑的论文集(《安全之美》)帮助读者摆脱安全领域闪烁着欺骗光芒的心理恐惧,转而欣赏安全的微妙美感。本书描述了安全的阴和阳,以及引人注目的破坏性和闪亮光辉的建设者之间剑拔弩张的气氛。” ——Gary McGraw,Cigital公司CTO,《Software Security》及其他9本书的作者 大多数人不会太关注安全问题,直到他们的个人或商业系统受到攻击。这种发人深省的现象证......一起来看看 《安全之美》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试