哈尔滨网站域名归那里管,网站底部背景,国外做问卷网站好,制作网站要钱吗 本篇文章主要是为了对Compose有一个初步了解。知道Compose是做什么的#xff0c;用Compose能干什么#xff0c;在目前的各种UI框架下面有些优势#xff0c;参考Google官网的解释加上一些自己的理解生成的一篇文章。本人也是Compose初学者#xff0c;通过每一步学习遇到哪… 本篇文章主要是为了对Compose有一个初步了解。知道Compose是做什么的用Compose能干什么在目前的各种UI框架下面有些优势参考Google官网的解释加上一些自己的理解生成的一篇文章。本人也是Compose初学者通过每一步学习遇到哪些坑来一起探讨Compose的学习使用。 后续会根据Compose学习从简单布局、控件使用到各种高级动画的渲染再到实现原理不断输出Compose相关的系列文章。带你一起从初步认知Compose到撸出一个使用Compose完成的安卓APP。
目前google已经把compose作为默认的UI开发框架无论是多年开发经验的安卓老司机还是刚入门的安卓开发人员学习使用compose已经是大势所趋。多学习一项技能对自己没什么坏处。自从2017年Compose被提出到2021年7月 Jetpack Compose 1.0 正式版发布已经有很长时间已经满足我们的基本开发需求而且还在继续完善中。
一、什么是Compose
**官方解释**Jetpack Compose是用于构建原生Android界面的新款工具包。它可简化并加快Android上的界面开发使用更少的代码、强大的工具和直观的Kotlin API快速打造生动而精彩的应用。
**个人理解**为了解决安卓原始xml构建UI的弊端对照IOS的swift、Web的Vue等声明式编程的产物。
二、为什么使用Compose
1、更少的代码实现相同的功能使用compose代码量更少
使用更少的代码实现更多的功能并且可以避免各种Bug从而使代码简洁且易维护。
2、直观
您只需要描述界面Compose会负责处理剩余的工作。应用状态变化时界面会自动更新。
3、加速开发
兼容现有的所有代码方便您随时随地采用。借助实时预览和全面的Android Studio支持实现快速迭代。
4、功能强大
直接访问Android平台API内置对Material Design深色主题、动画等支持帮助您创建精美的应用。
三、Compose入门
这里将通过一个简单的登录页面展示Compose的使用。首先看一下下图。一个登录界面包括标题输入账号、输入密码、登录按钮点击登录即可拿到输入的账号密码然后进行调取接口登录。这里使用toast展示用户输入的内容真是项目可以直接去调用服务器接口了。
下面分析一下登录界面的代码展示Compose的基本使用。
class LoginComposeUI : ComponentActivity() {companion object {fun startActivity(context: Context) {val intent Intent(context, LoginComposeUI::class.java)context.startActivity(intent)}}override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {LoginLayoutCompose()}}OptIn(ExperimentalMaterial3Api::class)Composablefun LoginLayoutCompose() {Box(modifier Modifier.fillMaxWidth().fillMaxHeight()) {Text(text Login,modifier Modifier.height(44.dp).background(Color(0xFFef5a54)).fillMaxWidth().wrapContentSize(Alignment.Center).align(Alignment.TopCenter),color Color(0xffffffff))var userNameText by remember {mutableStateOf()}var passwordText by remember {mutableStateOf()}Column(modifier Modifier.fillMaxWidth().padding(0.dp, 100.dp, 0.dp, 0.dp)) {OutlinedTextField(value userNameText,onValueChange {userNameText it},modifier Modifier.padding(20.dp, 20.dp, 20.dp, 0.dp).fillMaxWidth(),placeholder { Text(text 请输入账号) })OutlinedTextField(value passwordText,onValueChange {passwordText it},modifier Modifier.padding(20.dp, 20.dp, 20.dp, 0.dp).fillMaxWidth(),placeholder { Text(text 请输入密码) })Divider(modifier Modifier.height(30.dp), color Color(0xffffffff))Button(onClick {val tips 账号$userNameText 密码$passwordText 登录了ToastUtil.toastShort(AppUtils.getContext(), tips)},modifier Modifier.height(80.dp).fillMaxWidth().wrapContentSize(Alignment.TopCenter)) {Text(text Login, modifier Modifier.wrapContentSize(Alignment.Center))}}}}}首先这里没有原来安卓的xml文件直接写的Compose布局来定义UI界面
1、设置Activity的Content
原来的setContent一般是通过设置view或者设置View的xml布局来实现然后通过FindviewById方式拿到View实例
setContentView(view)看上面的代码Compse实现的UI直接设置给setContent即可无需在使用Xml定义布局 setContent {LoginLayoutCompose()}2、可组合函数
给LoginLayoutCompose设置Composable注解代表此方法是可组合函数可以被其他可以组合函数调用。
3、熟悉Compose中简单的布局
LoginLayoutCompose函数中第一个就box函数布局设置 modifier中fillMaxWidth和fillMaxHeight表示匹配父窗体撑满整个屏幕。
modifier Modifier.fillMaxWidth().fillMaxHeight()里面首先是顶部的Login标题部分Text函数可以设置标题内容字体颜色、字体大小、背景颜色。
Text(text Login,modifier Modifier.height(44.dp).background(Color(0xFFef5a54)).fillMaxWidth().wrapContentSize(Alignment.Center).align(Alignment.TopCenter),color Color(0xffffffff)
)接下来是Column布局函数设置padding表示距离顶部100dp。宽度匹配父窗体。该布局户主要是竖向一个一个排列布局中的组合函数。类似LinearLayout设置成 android:orientation“vertical” 的效果。
Column(modifier Modifier.fillMaxWidth().padding(0.dp, 100.dp, 0.dp, 0.dp)
)Column布局中通过OutlinedTextField函数添加二个输入框输入账号和密码其中value设置初始值onValueChange在输入框变化时候回调赋值给userNameTextmodifier可以设置输入框一些属性placeholder设置没有输入时候占位置展示内容。这几个属性是OutlinedTextField函数的基本使用。
OutlinedTextField(value userNameText,onValueChange {userNameText it},modifier Modifier.padding(20.dp, 20.dp, 20.dp, 0.dp).fillMaxWidth(),placeholder { Text(text 请输入账号) })可组合函数Button是界面中login按钮的UI布局在Column函数布局中以此排列。onClick方法在用户点击按钮时候回调。
Button(onClick {val tips 账号$userNameText 密码$passwordText 登录了ToastUtil.toastShort(AppUtils.getContext(), tips)},modifier Modifier.height(80.dp).fillMaxWidth().wrapContentSize(Alignment.TopCenter)) {Text(text Login, modifier Modifier.wrapContentSize(Alignment.Center))
}每个可组合函数中都有modifier参数供可组合函数设置里面主要包括布局的一些基本属性这里只是简单的描述一下暂时知道他是干什么的就可以后边章节将会重点描述modifier怎么使用里面的每个属性是用来什么的。modifier也是compose中重要组成部分所有的可组合函数都包括这个属性。
本章到这里基本结束了主要介绍Compose是什么为什么使用ComposeCompose入门使用基本。后边章节将会介绍Compose中各种布局的使用。以后深入了解Compose各种组件在开发Compose中遇到的问题一些来分享感觉您的阅读希望提出您宝贵的意见。
