Compose入门

​ 本篇文章主要是为了对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入门_第1张图片

下面分析一下登录界面的代码,展示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)
    @Composable
    fun 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在输入框变化时候回调赋值给userNameText,modifier可以设置输入框一些属性;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是什么,为什么使用Compose,Compose入门使用基本。后边章节将会介绍Compose中各种布局的使用。以后深入了解Compose各种组件,在开发Compose中遇到的问题一些来分享,感觉您的阅读,希望提出您宝贵的意见。

你可能感兴趣的:(android基础进阶,Compose系列,跨平台进阶,android,Compose,kotlin,移动跨平台,安卓UI组件)