阿里大牛又一波骚操作,安卓UI开发新技能-Jetpack Compose,绝了
2020-04-10 14:44
1101 查看
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
约束条件
- Android Studio: 4.0及以上
- 支持安卓版本:Android API 21(即5.0)及以上
- 必须使用kotlin语言
优点
- 代码更少 少了xml,少了activity和xml之间的关联.
- 双向绑定 数据变化了,UI就自动变化.
缺点
- 含有参数的Composable函数不能直接预览.
- Composable函数必须添加@Preview注解才能预览.
- 代码修改后,需要重新编译才能预览.
- 目前还不完善,相比于Flutter,还处于幼儿园水平.
- 相比于xml画页面布局,效率会有降低.
常见控件使用样例
- 文本显示
Text(text = "众鸟高飞尽,孤云独去闲。相看两不厌,只有敬亭山。")
- 文本输入框
val state = +state { "Text Field to input" } TextField( value = state.value, onValueChange = { state.value = it } )
- 按钮
Button(text = "咬我啊", onClick = { Log.v("test", "被咬了") })
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 ) } } }
- 开关
MaterialTheme { val checkedState = +state { true } Switch( checked = checkedState.value, onCheckedChange = { checkedState.value = it } ) }
- 单选框
MaterialTheme { RadioButton(selected = true, onSelect = { } ) }
- 复选框
MaterialTheme { val checkedState = +state { true } Checkbox( checked = checkedState.value, onCheckedChange = { checkedState.value = it } ) }
- 单选框组
MaterialTheme { val radioOptions = listOf("A", "B", "C") val (selectedOption, onOptionSelected) = +state { radioOptions[0] } RadioGroup( options = radioOptions, selectedOption = selectedOption, onSelectedChange = onOptionSelected ) }
9.图片
Container(modifier = Height(300.dp) wraps Expanded) { Clip(shape = RoundedCornerShape(4.dp)) { DrawImage(+imageResource(R.drawable.img_0)) } }
源代码
https://github.com/cxyzy1/Jetpack-Compose-Demos
文章不易,如果大家喜欢这篇文章,或者对你有帮助希望大家多多,点赞,转发,关注 哦。文章会持续更新的。绝对干货!!!
相关文章推荐
- 安卓开发经验分享:资源、UI、函数库、测试、构建一个都不能少
- 利用反射实现对sqlite3数据库的crud(增删改查)操作的一个baseAndroidDao封装,安卓开发中
- 安卓TV开发(五) 移动智能终端UI之实现主流TV焦点可控UI
- 在安卓中提高开发效率的几个插件及技能
- 安卓开发:监听软键盘的显示与隐藏,并作出其他操作
- 安卓开发新技能Get丨常用必备小工具汇总
- 安卓SQLite数据库操作,半小时开发新闻管理系统,纯干货
- 安卓TV开发(三) 移动智能设备之实现主流TV电视盒子焦点可控UI
- iOS开发视频教程 UI部分:7.模拟器常用操作
- 【安卓开发】UI设计基础5:用约束布局 ConstraintLayout实现计算器UI
- Firefox 扩展开发包 Jetpack
- 安卓TV开发(五) 移动智能终端UI之实现主流TV焦点可控UI
- IOS开发-UI学习-沙盒机制&文件操作
- 安卓TV开发(三) 移动智能设备之实现主流TV电视盒子焦点可控UI
- 【小松教你手游开发】【unity实用技能】unity安卓游戏优化ETC压缩及Alpha通道处理
- Android开发之子线程操作UI的几种方法
- iOS开发创建UI的耗时操作处理
- 记录日常用到的安卓开发常用开源UI
- 安卓开发-实现数据库的CRUD操作
- vue + webpack + element-ui 开发项目