640.png

一 Compose 概述

本文不会介绍 compose 运用细节，要点在于宏观介绍 compose，将 compose 开始带入我们视界。相当于一个系列的序文吧，后续会再持续更新解析 compose 的运用&规划理念等。

Compose 能够分红两部分看待，Jetpack Compose 和 Compose Multiplatform：

  • Jetpack compose，Android 原生的新 ui 开发工具包，也是本系列解说的内容。
  • 由 JetBrains 维护的 compose-jb 完结的跨平台 ui 开发工具 Compose Multiplatform。「这不又多了个学习理由：无成本跨平台」

Jetpack Compose 最早是在2019年的 Google I/O 大会上就推出了的首个alpha版本，并于2021年发布了1.0正式版。

经过这几年的更新迭代，Jetpack compose现已相当安稳和成熟了，根本上原生能完结的常用作用，compose 官方或第三方都供给了支撑。并且 compose 规划上极容易完结定制化，即使有些作用没支撑也能够很便利的开发出来。当然，也能够直接和原生 view 混合运用的。

从官网也能够看到现已有挺多 app 现已逐步搬迁到 compose。生态逐渐扩大。信任未来会像 kotlin 相同，全面推广转型。

Clipboard_2023-08-16-17-05-02.png

二 为何学习/搬迁 Compose?

一项新技术能得以推广和完结生态化必定是因为其本身具有突破性的优势，仅仅是强行施压，开发者们并不会买单。那么 compose 是有哪些优点能让搬迁者痴迷？

2.1 快人一步：更少代码

与传统 view 相对，compose能用更少的代码完结相同的作用。代码少就意味着开发快，更容易维护！

Zepeto的搬迁中，在多功用列表界面，代码量减少了 60%

Clipboard_2023-08-17-10-53-04.png

以列表为例，完结简单的作用。

Clipboard_2023-08-17-14-55-49.png

按传统 view 的方法，item.xml 以及为了 10dp 的圆角和 circleImage 得声明xml，总共就三个 xml 文件，然后还得在代码上声明DiffUtil.ItemCallback，Recycelerview.Adapter,RecyclerView.ViewHolder等一套重复化代码。

到了 compose 中，所有的功用就以下代码量


    LazyColumn(modifier = Modifier.background(color = Color.Black)) {
        items(items = fakeData, key = { it.id }) {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(80.dp)
                    .padding(horizontal = 20.dp)
                    .clip(RoundedCornerShape(10.dp))
                    .background(color = Color.White)
                    .padding(10.dp),
                verticalAlignment = Alignment.CenterVertically
                ) {
                Image(
                    painter = painterResource(id = R.drawable.compose),
                    contentDescription = "",
                    modifier = Modifier.size(60.dp).border(width = 2.dp, color = Color.Black, shape = CircleShape)
                )
                Spacer(modifier = Modifier.width(10.dp))
                Text(text = it.content, color = Color.Black)
            }
            Spacer(modifier = Modifier.height(10.dp))
        }
    }

这也是我个人觉得 compose 会得以推广的重要原因，什么功用什么声明 ui，写起来快就完事了，大堆需求等着呢

2.2 易用&丰厚的 api

compose api 规划上以简单运用/定制为宗旨，一起具有丰厚的内置功用，能大大满意咱们日常开发上的需求。

2.2.1 布局简单

与传统 View 比较，Compose的布局要相对简单得多。核心常用的只要三个，column、Row ，Box

Clipboard_2023-08-17-15-33-18.png

Column便是让控件纵向排列，Row便是让控件横向排列。Column和Row对应的其实便是View当中的LinearLayout。

而Box对应的是View当中的FrameLayout。

ok，没有了，这就满意咱们开发需求了，没有RelativeLayout和ConstraintLayout了。回想下，运用ConstraintLayout是为了处理嵌套布局功用问题，否则linearLayout 和 framelayout 根本就满意各种杂乱 ui 了。

由于 Compose 能够防止屡次测量，因此能够根据需求进行深层次嵌套，而不会影响功用！！！
所以column、Row ，Box根本就能满意咱们的杂乱界面了。

当然，考虑到用户习惯，Google 也供给了ConstraintLayout compose 版

2.2.2 功用丰厚

compose 内置了很多有用的功用，比方拖拽，滚动，手势处理,SwipeToDismiss和动画作用等

以倒计时UI为例

Screen_recording_20230817_155818.gif

代码量只要以下：

AnimatedContent(
targetState = count,
transitionSpec = {
    if (targetState > initialState) {
        slideInVertically { height -> height } + fadeIn() togetherWith
                slideOutVertically { height -> -height } + fadeOut()
    } else {
        slideInVertically { height -> -height } + fadeIn() togetherWith
                slideOutVertically { height -> height } + fadeOut()
    }.using(SizeTransform(clip = false))
}
) { targetCount ->
    Text(text = "$targetCount")
}

各种定制化作用，都能够很容易的完结

2.3 声明式 UI 结构

一种编程思想吧，个人了解是界面由 state 控制，state 改动界面自动改写。
也便是说不必像曾经相同 setText，setVisibility。
这个概念言语上比较难以表达，按这种方法写的 ui 呢，就比较容易自测并且难出错，当然，代码量也会低很多。
还是以常见的界面 error 状况，loading 状况，success 状况切换为例
曾经的写法是

when (status) {
        Status.SUCCESS -> {
            contentView.visibility = View.VISIBLE
            loadingView.visibility = View.GONG
            errorView.visibility = View.GONG
        }
        Status.LOADING -> {
            loadingView.visibility = View.VISIBLE
            contentView.visibility = View.GONG
            errorView.visibility = View.GONG
        }
        Status.ERROR -> {
            errorView.visibility = View.VISIBLE
						contentView.visibility = View.GONG
            loadingView.visibility = View.GONG
        }
    }

在 compose 世界里，

when (status) {
        Status.SUCCESS -> {
            ContentView()
        }
        Status.LOADING -> {
            LoadingView()
        }
        Status.ERROR -> {
            ErrorView()
        }
    }

不再需求关怀如何躲藏不同的 view，只需求声明，哪个状况下界面长什么样即可。当状况改动时，compose 会自动重组改写界面。也便是会自动帮咱们完结一系列 findview& setVisibility。

2.4 无需App Building的预览 &交互 &动画

Android studio 直接预览 ui，模仿手势交互以及按帧检查动画&调试动画值，不再需求build &run 整个 app 项目

2.4.1 无需运转，直接模仿手势交互

1_loC7Y0RrCVAbSC48mGzETA.gif

1_NqVwAaURsVNLBEcCeIlwYQ.gif

2.4.2 无需运转，按帧检查动画作用 &调试动画值

1_wnS1lPqy8XEo5TmzGCh6xg.gif

Clipboard_2023-08-17-16-49-51.png

2.4.3 Live Edit

Live Edit，实时编辑：界面修改无需重新rebuild&run，会自动改写到真机或模仿机上

LiveEditShortVideo.gif

三 后续

本文只是作为一个系列的序文吧，后续会出更多教程渐渐上手，如布局、modifier、size，生命周期，side-effect，windowInset 等等。
我也是个初学者，有什么过错和遗失我们帮助补补哈。

一键三连

如果觉得这篇内容对你有所帮助，一键三连支撑下（👍）

关于纠错和主张：欢迎直接在留言分享记录（🌹）