以下内容来自公众号code小生,关注每日干货及时送达173118a66f6378596526e819de1ff2f2.png

作者:韩超杰(产品技术中心-移动端研发部)

1.什么是Compose

Compose是Google官方推出的一种全新的用户界面框架。

在过去的几年中,整个行业已开始转向声明性界面模型,该模型大大简化了与构建和更新界面关联的工程任务。该技术的工作原理是在概念上从头开始重新生成整个屏幕,然后仅执行必要的更改。此方法可避免手动更新有状态视图层次结构的复杂性。Compose 是一个声明性界面框架

声明性界面框架概述

  • 声明性编程范式:声明性的函数构建一个简单的界面组件,无需修改任何 XML 布局,也不需要使用布局编辑器,只需要调用 Jetpack Compose 函数来声明想要的元素,Compose 编译器即会完成后面的所有工作。

  • 简单的组合函数

@Composable 
fun Greeting(name: String) { 
 Text(text = "Hello $name!") 
}

声明性范式转变:在 Compose 的声明性方法中,微件相对无状态,并且不提供 setter 或 getter 函数。实际上,微件不会以对象形式提供。您可以通过调用带有不同参数的同一可组合函数来更新界面。这使得向架构模式(如 ViewModel)提供状态变得很容易,如应用架构指南中所述。然后,可组合项负责在每次可观察数据更新时将当前应用状态转换为界面。

动态 :组合函数是用 Kotlin 而不是 XML 编写

重组:在 Compose 中,您可以使用新数据再次调用可组合函数。这样做会导致函数进行重组 – 系统会根据需要使用新数据重新绘制函数发出的微件。Compose 框架可以智能地仅重组已更改的组件。

  • 可组合函数可以按任何顺序执行

  • 可组合函数可以并行运行

  • 重组会跳过尽可能多的内容

  • 重组是乐观的操作

  • 可组合函数可能会非常频繁地运行

引入配置Compose

  • ComposeApp仅支持Kotlin 最低sdk 版本为21,Android 5.0

  • 需要安装最新Java11

  • Gradle Compose相关依赖

 
 
plugins {
    id 'com.android.application'
    id 'kotlin-android'
}
dependencies {
   androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
   debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
}
  • @Preview生效,则环境正常

f0c7ba3571b0bd14ae7a3dd9a2e3557a.png

小结

Compose为移动开发者提供了更快、更直观的UI制作方式:通过使用简单的Kotlin代码而不是XML编写UI界面,Composable函数随着参数的变化动态地构建UI,从而提高了UI开发和改进的速度和效率。Compose还可以提高应用程序的性能和可维护性,并提供了丰富的可扩展性和 从而支持应用程序的更多自定义界面定制需求。

2.为什么要在android中使用Compose,有什么优点

更少的代码

编写更少的代码会影响到所有开发阶段:

1.作为代码撰写者,需要测试和调试的代码会更少,出现 bug 的可能性也更小,开发中可以专注于解决手头的问题;

2.作为维护人员,需要阅读、理解、审核和维护的代码就更少。

与使用 Android View 系统(按钮、列表或动画)相比,Compose 可让您使用更少的代码实现更多的功能。无论需要构建什么内容,现在需要编写的代码都更少了,例如下面示例。

kotlin代码:

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

Compose代码:

 
 
@Composable
fun HomePage(Status status) {
    when (status.current) {
        Status.SUCCESS -> {
            HomePageContent()
            }
        Status.LOADING -> {
            LoadingContent()
            }
        Status.ERROR -> {
            ErrorContent()
            }
      }
 }

使用Composable之后,当HomePage()函数传入的参数发生变化时,这个函数就会触发重组,从而对界面内容进行刷新。那么界面都刷新了,首页内容、加载等待框和错误页面的可见性自然都会调整为正确的状态,所以不需要我们再去手动设置visibility属性了。最好用的 Android 模拟器推荐

更直观

   Compose能够在单个 Kotlin 文件中完成之前需要在多个 XML 文件中完成的任务,这些 XML 文件负责通过多个分层主题叠加层定义和分配属性。

在 Compose 中,状态是显式的,并且会传递给相应的可组合项。这样一来,状态便具有单一可信来源,因而是封装和分离的。然后,应用状态变化时,界面会自动更新。“在对某些内容进行推断时,不必处理太多信息,并且无法控制或难以理解的行为也更少,例如下面的加载网络图片示例。

//图片加载库
implementation("io.coil-kt:coil:2.0.0")
implementation("io.coil-kt:coil-compose:2.0.0")

@Composable
@Preview
fun Image() {
    AsyncImage(
        model = "https://img0.baidu.com/it/u=3147375221,1813079756&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=836",
        contentDescription = "无障碍提示",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .width(100.dp)
            .height(100.dp)
            .clip(shape = CircleShape)
            .border(2.dp, color = Color.Red, shape = CircleShape)
    )
}

相比之前的命令式编程开发,在xml页面进行view的编写,然后找到对应的控件id,进行逻辑界面的编写,现在统一在一个页面进行页面编写和逻辑处理,代码更加直观和简洁。

加速开发

可以从 View 调用 Compose 代码,也可以从 Compose 调用 View。大多数常用库(如 Navigation、ViewModel 和 Kotlin 协程)都适用于 Compose。

借助全面的 Android Studio 支持以及实时预览等功能,可以更快地迭代和交付代码。

  • Navigation:

https://developer.android.google.cn/guide/navigation?hl=zh-cn

  • ViewModel:

https://developer.android.google.cn/topic/libraries/architecture/viewmodel?hl=zh_cn

  • Kotlin 协程

https://developer.android.google.cn/kotlin/coroutines-pathway?hl=zh_cn

功能强大

  • Compose 不仅解决了声明性界面的问题,还改进了无障碍功能 API、布局等各种内容;

  • Compose 中添加动画效果非常简单,可以很简单的为颜色/大小/高度变化添加动画效果;

  • Compose 都可以灵活地实现所需的设计:从基础上将 Material Design 分离出来;

3.引用Compose进项目后的成本

Compose 可与 Android 的视图系统完全互操作,所以在现有项目中引入Compse成本很低,以下几种方式可以快速的使用Compose。

使用 Compose 编写新功能。

直接使用 Compose 编写新功能。这种方法极具灵活性,可以使用 Compose 来制作全新的画面,一直到界面的各个部件。

混合 Compose/View 界面

class MyActivityTest {
    @Rule
    @JvmField
    val composeTestRule = createAndroidComposeRule<MyActivity>()

    @Test
    fun testGreeting() {
        val greeting = InstrumentationRegistry.getInstrumentation()
            .targetContext.resources.getString(R.string.greeting)

        composeTestRule.onNodeWithText(greeting).assertIsDisplayed()
    }
}

使用替换简单的页面。

从应用中确定一些较为简单的屏幕作为迁移的起点,即可轻松开始充分利用 Compose 的优势。

重新设计界面。

对应用进行重大界面重新设计,Compose 中执行完整的界面更新。

4.总结

Compose为Android开发者提供了许多新增和优化的功能,它可以更好地支持现代Android开发和设计趋势,同时还可以提高UI的开发速度和效率,并支持更多的自定义选项。在未来,随着更多的开发者越来越多地采用Compose,它将成为Android移动开发中不可或缺的必备工具之一。

Soul Android 端稳定性背后的事

CSDN免费代下 需要的来!

a07ce58d7cda628fccd313775c8adf26.png

GitHub 加速计划 / compose / compose
33.28 K
5.15 K
下载
compose - Docker Compose是一个用于定义和运行多容器Docker应用程序的工具,通过Compose文件格式简化应用部署过程。
最近提交(Master分支:3 个月前 )
5e3a0953 full diff: https://github.com/docker/cli/compare/v27.4.0-rc.1...8d1bacae3e49ed1d096eede8eef4ae851d7f2eae Signed-off-by: Sebastiaan van Stijn <github@gone.nl> 6 天前
a2a3eb72 - full diff: https://github.com/docker/cli/compare/cb3048fbebb1...v27.4.0-rc.1 Signed-off-by: Sebastiaan van Stijn <github@gone.nl> 6 天前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐