Jetpack Compose 不止是一个UI框架~

这篇具有很好参考价值的文章主要介绍了Jetpack Compose 不止是一个UI框架~。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Jetpack Compose 不止是一个UI框架~

Jetpack Compose是用于构建原生Android UI的现代工具包。 Jetpack Compose使用更少的代码,强大的工具和直观的Kotlin API,简化并加速了Android上的UI开发。这是Android Developers 官网对它的描述。

本文不是教你Jetpack Compose 的一些基本使用方法,而是为啥我们需要Jetpack Compose 的一些简洁,让我们对Jetpack Compose 有更深层次的了解。

1. 为什么我们需要一个新的UI 工具?

在Android中,UI工具包的历史可追溯到至少10年前。自那时以来,情况发生了很大变化,例如我们使用的设备,用户的期望,以及开发人员对他们所使用的开发工具和语言的期望。

以上只是我们需要新UI工具的一个原因,另外一个重要的原因是View.java这个类实在是太大了,有太多的代码,它大到你甚至无法在Githubs上查看该文件,因为它实际上包含了30000行代码,这很疯狂,而我们所使用的几乎每一个Android UI 组件都需要继承于View。

GogleAndroid团队的Anna-Chiara表示,他们对已经实现的一些API感到遗憾,因为他们也无法在不破坏功能的情况下收回、修复或扩展这些API,因此现在是一个崭新起点的好时机。

这就是为什么Jetpack Compose 让我们看到了曙光。

2. Jetpack Compose的着重点

包括一下几个方面:

  • 加速开发
  • 强大的UI工具
  • 直观的Kotlin API
2.1 加速开发

如果你是一个初级开发工程师,你总是希望有更多的时间来写业务逻辑,而不是花时间在一些如:动画、颜色变化等事情上,看看下面这个View:

Jetpack Compose 不止是一个UI框架~

这个Material Edit-text 似乎看起来很简单,但是其实背后有许多东西需要关注,比如:动画、颜色改变、状态管理等等。

而Jetpack Compose 为我们提供了很多开箱即用的Material 组件,如果的APP是使用的material设计的话,那么使用Jetpack Compose 能让你节省不少精力。

2.2 强大的UI工具

没有正确工具的UI工具包是无用的,因此从过去10年的经验中能学到不少,Jetpack Compose 团队开始和JetBrains 合作,以提供开发者强大的工具包,在Android Studio 上大规模的支持Compose 能力。

看一看在Android Studio上的表现:Jetpack Compose 不止是一个UI框架~

上图是使用Jetpack Compose 开发UI时,在Android Studio 上的预览,你可以看到,在左边编码时,右边你能同时展现UI即时预览,比如在明/暗模式下的状态切换,都能在右边及时展示出来。

它与我们现在使用的Android Studio 中的text/Design 相似,但是它更加先进,使用很简单,这个功能只能在Android Studio4.0以上预览版,开发compose 时使用。Jetpack Compose 不止是一个UI框架~

2.3 直观的Kotlin API

对于开发者而言,Jetpack Compose 的用途不仅仅是Android UI,因此用Kotlin来编写他们并开源。当然,所有Android代码都是开源的,但特别强调的是Compose代码。因此,您可以查看和使用代码,同时也可以在此处提供反馈。

由于Compose仍在开发之中,因此每个开发人员的反馈都很重要。

3. API 设计

十多年来,Android团队在创建API和审查API方面拥有丰富的经验,但有一个收获-他们使用Java作为编程语言。但有一个问题-他们使用的是Java作为开发语言。Jetpack Compose 不止是一个UI框架~

Jetpack Compose是第一个使用Kotlin正在开发中的大型项目,因此Android团队正在探索Kotlin API指南的新世界,以创建一组特定于Compose API的指南,该工作仍在进行中,仍然有很长的路要走。

4. Compose API 的原则

4.1 一切都是函数

正如我前面的文章所说,Compose是一个声明式UI系统,其中,我们用一组函数来声明UI,并且一个Compose函数可以嵌套另一个Compose函数,并以树的结构来构造所需要的UI。

在Compose中,我们称该树为UI 图,当UI需要改变的时候会刷新此UI图,比如Compose函数中有if语句,那么Kotlin编译器就需要注意了。

4.2 顶层函数(Top-level function)

在Compose的世界中,没有类的概念,全都是函数,并且都是顶层函数,因此不会有任何继承和层次机构问题。

@Composable
fun checkbox ( ... )

@Composable
fun TextView ( ... )

@Composable
fun Edittext ( ... )

@Composable
fun Image ( ... )

在此过程中,Compose函数始终根据接收到的输入生成相同的UI,因此,放弃类结构不会有任何害处。从类结构构建UI过渡到顶层函数构建UI对开发者和Android 团队都是一个巨大的转变,顶层函数还在讨论之中,还没有发布release 版。

4.3 组合优于继承

Jetpack Compose首选组合而不是继承。 Compose会基于其他部分构建UI,但不会继承行为。

如果你经常关注Android或者对Android有所了解,你就会知道,Android中的几乎所有组件都继承于View类(直接或间接继承)。比如EidtText 继承于TextView,而同时TextView又继承于其他一些View,这样的继承机构最终会指向跟View即View.java。并且View.java又非常多的功能。Jetpack Compose 不止是一个UI框架~

而Compose团队则将整个系统从继承转移到了顶层函数。TextviewEditText复选框和所有UI组件都是它们自己的Compose函数,而它们构成了要创建UI的其他函数,代替了从另一个类继承。Jetpack Compose 不止是一个UI框架~

4.4. 信任单一来源

信任单一来源是构建整个Jetpack Compose 一项非常重要的特性。如果您习惯了现有的UI工具包,那么您可能会知道执行点击的工作原理。如下代码所示:

@Override
public boolean performClick(){
  setChecked(!mChecked);
  final boolean handled = super.performClick();
  ...
}

首先,它改变view的状态,然后执行动作,这会导致许多bug,例如复选框,因为它首先从已选中状态变为未选中,反之亦然,然后由于某种原因,如果操作失败,开发人员必须手动分配先前的状态。

而在Compose中呢,功能正好相反。在此,复选框等功能具有两个参数。一个是在UI中显示状态,另一个是lambda函数,用于观察UI应相应更改的状态变化。

@Composable
fun Checkbox(checked : Boolean,
            onCheckedChange : ((Boolean) -> Unit)),
            ....)

5. 深入了解Compose

Jetpack Compose 不止是一个UI框架~

如上图所示,Compose在运行时分为四个部分。让我们一一看一下。

5.1 Core

顾名思义,这是Compose的核心,如果您不想深入学习,可以跳过它。

基本上,核心包含四个构建模块:

  • 绘制(Draw)
  • 布局(Layout)
  • 输入(Input)
  • 语义(Semantics)

Jetpack Compose 不止是一个UI框架~

1、Draw — Draw 给了你访问Canvas的能力,因此你可以绘制你要的任何自定义View
2、Layout — 通过布局,我们可以测量事物并相应地放置视图。
3、Input — 开发人员可以通过输入访问事件并执行手势
4、Semantics — 我们可以提供有关树的语义信息。

5.2. Foundation

Foundation的核心是收集上面提到的所有内容,并共同创建一个抽象层,以使开发人员更轻松调用。

5.3 Material

在这一层,所有的Material组件将会被提供,并且我们可以通过提供的这些组件来构建复杂的UI。

这是Compose团队所做的出色工作中最精彩的部分,在这里,所有提供的View都有Material支持,因此,使用Compose来构建APP, 默认就Material风格的,这使得开发者少了很多工作。

6. 插槽API

插槽API的出现是为了给开发人员留出了很多空间,以便他们可以执行所需的任何自定义操作,Android团队试图猜测开发人员可能会想到的许多自定义设置,但他们无法一直想象开发人员的想法,例如使用带drawable的TextView。

因此,Compose团队为组件留出了空间,以便开发人员可以执行所需的任何操作,例如使用按钮。你可以保留文本带有图标的文本所需的任何内容,如下所示
Jetpack Compose 不止是一个UI框架~文章来源地址https://www.toymoban.com/news/detail-436923.html

到了这里,关于Jetpack Compose 不止是一个UI框架~的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Jetpack Compose -> 声明式UI & Modifier

    本章主要介绍下 Compose 的声明式 UI 以及初级写法; 传统UI 传统 UI 方式来声明UI 是通过 xml 来进行显示的,显示文字的方式是使用 TextView,它内部显示文字的方式有两种,一种是在 xml 中直接设置,通过下面这种方式设置 这种方式是通过初始值在 xml 中进行预设置的; 还有一

    2024年02月02日
    浏览(53)
  • Jetpack Compose UI 底部弹窗实现

    使用Compose Ui的Dialog 默认是居中显示屏幕中间。 实现思路: 1.弹窗完全自定义一个全屏弹窗; 2.显示内容显示在底部区域。 3.点击其他空白区域关闭弹窗。

    2024年02月11日
    浏览(54)
  • Android笔记(六):JetPack Compose常见的UI组件

    Text显示的文本来源可以引用res-values-strings.xml中的资源,如第一个显示文本所示。 点击按钮前: 点击按钮后: 点击第一个圆角按钮不放时,显示为按钮:true Button有两方面需要注意: (1) Buttton有一个参数interactionSource,用来监听组件状态的事件源,通过它获取组件的状态来

    2024年02月04日
    浏览(55)
  • Android Jetpack Compose之UI的重组和自动刷新

    我们都知道,在传统的View中,若要改变UI,需要我们修改View的私有属性,比如要修改一个TextView的文字,我们需要通过它的setText(“xxx”)方法去修改。而Compose 则是通过重组来刷新UI。在之前的状态管理的文章中也提到过重组的概念。本章主要就是介绍Compose的重组和刷新相关

    2024年02月07日
    浏览(49)
  • 《Jetpack Compose从入门到实战》第三章 定制 UI 视图

    -ui.theme.Color.kt ui.theme.Type.kt 先将Nunito Sans字体家族放入 res/font,再根据设计稿写代码 ui.theme/Shape.kt CompositionLocal 是 Jetpack Compose 中的一种数据传递方式。它可以在组合组件之间传递可变数据,而无需通过 props 或 state 管理器来传递数据。这个特性比传统的数据传递方式更为高效

    2024年02月07日
    浏览(48)
  • Jetpack 之Glance+Compose实现一个小组件

    Glance,官方对其解释是使用 Jetpack Compose 样式的 API 构建远程 Surface 的布局,通俗的讲就是使用Compose风格的API来搭建 小插件 布局,其最新版本是2022年2月23日更新的1.0.0-alpha03。众所周知,Compose样式的API与原生差别不小,至于widget这块改动如何,接下来让我们来一探究竟。 第

    2024年02月20日
    浏览(34)
  • Android Jetpack组件库(第七部分)---UI工具包 Compose

    Android Jetpack 是 Google 推出的一整套帮助 Android 应用程序开发的库、工具包和架构指南,旨在为 Android 应用程序提供更快,更轻松,更稳定的开发体验。自推出以来已经发展成了一个庞大的技术生态系统,包括了许多使用方便、功能强大的库,以下是其中一些新特性、新组件:

    2024年01月16日
    浏览(52)
  • 《Jetpack Compose从入门到实战》 第二章 了解常用UI组件

    书附代码 Google的图标库 ConstraintLayout约束布局需要依赖:implementation “androidx.constraintlayout:constraintlayout-compose: $constraintlayout _version” 《Jetpack Compose从入门到实战》第一章 全新的 Android UI 框架 《Jetpack Compose从入门到实战》 第二章 了解常用UI组件 《Jetpack Compose从入门到实战》

    2024年02月07日
    浏览(49)
  • 使用 Jetpack Compose 实现一个计算器APP

    在上一篇文章中,我们说到打算使用 compose 实现一个计算器 APP,最开始打算做一个经典的 LCD 基础计算器,后来觉得好像没啥特色,最终决定还是改成仿微软计算器。 不过,微软计算器的功能太多了,仿制的工程量不小,所以我打算只仿我认为最核心的两个模式:标准模式和

    2024年02月05日
    浏览(64)
  • Jetpack Compose UI创建布局绘制流程+原理 —— 内含概念详解(手撕源码)

    本文是我去年首发于稀土掘金平台的文章 全文较长 : 共1万5千字 ,适合有耐心❤️的人学习 有些概念不懂的可以去 4.部分概念详解 这个目录先稍微学习一下 Compose源码 基于最新的 Compose 版本: 1.0.1 系统源码 基于最新的 Android11 版本 注意: 后续Compose版本升级之后,有可能

    2023年04月11日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包