代码编织梦想

【2020年的第一篇JB】 Jetpack Compose 完全解析(持续更新)

虽然工作了5,6年了,一直也有做笔记的习惯,但是从来没写过什么博客,最近开通了CSDN,打算将自己多年所学,通过博客展现出来,希望能使得自己的基础更加夯实,技术能力更进一步,思维更加缜密,同时能帮助到真正需要帮助的人。(JB :我对技术博客的简称)

1、什么是Compose?

在2019年5月份的 Google I/O 大会上面,Jetpack 团队首次为大家介绍了 Jetpack Compose, Jetpack Compose 是一个用于构建原生Android UI 的现代化工具包。

Compose的特点和优势:

  1. 更少的代码
    用更少的代码做更多的事情,并避免整个类的错误,因此代码简单易维护。
  2. 声明式UI
    只需描述您的UI,然后Compose会处理其余的工作。随着应用状态的更改,您的用户界面会自动更新。
  3. 加速开发
    与所有现有代码兼容,因此您可以随时随地采用。通过实时预览和完整的Android Studio支持快速进行迭代。
  4. 强大
    通过直接访问Android平台API以及对Material Design,Dark主题,动画等的内置支持,创建美观的应用程序。
    详细的了解可以查看官方文档:
    Jetpack Compose官方介绍:https://developer.android.com/jetpack/compose

2、发展到什么程度了?

经过半年多的完善,现在的Compose 究竟完善到什么程度了呢?截止本篇文章2020年1月4日,Compose发展到了 0.1.0-dev03,随着新版本的更新,本篇文章也会持续进行跟进。

3、快速上手

  1. 下载最新金丝雀(Canary)版本的Android Studo
    目前最新版是android studio Canary 7
    下载地址:android studio4.0 canary 7下载地址:https://developer.android.com/studio/preview
    下载完成后,解压缩后直接运行即可打开
    在这里插入图片描述
    打开后可以出现如下启动页:
    在这里插入图片描述

  2. 创建一个支持Compose的demo

    1. 新建一个项目,直接选择Empty Compose Activity模版,android studio就会自动把Compose 相关的依赖引入
      在这里插入图片描述
  3. 项目结构
    创建项目后,Project 对应的build.gradle文件如下所示:

// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    ext.kotlin_version = "1.3.61"
    repositories {
        google()
        jcenter()

    }
    dependencies {
        classpath "com.android.tools.build:gradle:4.0.0-alpha07"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        jcenter()

    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

同时,app的build.gradle的如下所示:

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 29

    defaultConfig {
        applicationId "com.nyc.mycompose"
        minSdkVersion 21
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        compose true
    }

}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'androidx.core:core-ktx:1.1.0'
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.ui:ui-framework:0.1.0-dev03'
    implementation 'androidx.ui:ui-layout:0.1.0-dev03'
    implementation 'androidx.ui:ui-material:0.1.0-dev03'
    implementation 'androidx.ui:ui-tooling:0.1.0-dev03'
}
  1. MainActivity文件
    在这里插入图片描述
    可以看到,直接通过使用Composable来生成一个UI组建,还可以通过Preview注解来再右侧实时预览

  2. Composable注解的使用

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

@Preview
@Composable
fun DefaultPreview() {
    MaterialTheme {
        Greeting("NYC Jetpack Compose")
    }
}

我们可以看到,通过Composable注解一个函数,可以生成一个UI组件,一个Composable函数只能在另一个Composable函数的作用域里被调用,要使一个函数变为Composable函数,只需在函数名前加上@Composable注解,这里在DefaultPreview函数中调用了Greeting函数

  1. Preview注解
    通过Preview注解的Composable函数,可以再右侧进行实时预览(其实现在要按下左上的刷新键刷新),Preview有一些使用注意事项
    1. @Preview只能使用在已经添加了@Composable函数上
    2. @Preview 只能使用在无参的 Composable函数上
    3. @Preview 注解可以带一些参数(name,group等)
    4. @Preview 可以注解在多个Composable函数上,这样,右侧会同时生成多个预览,如下图所示:这里给每一个Preview添加了name和group,这样当我们一个界面中组件较多的时候,就可以根据group分组显示了
    在这里插入图片描述

3、常用UI组件使用

这一部分,我们看一些常用组件的使用,学习一门新东西,怎么快速入门呢?那当然是官方的sample啊,以下内容可以参考官方的sample:JetNews
github上的地址:https://github.com/android/compose-samples/tree/master/JetNews

  • Text组件的使用详解
    在这里插入图片描述
    Text小结:和我们XML写UI稍有一些不同的地方,字体、字号、颜色等谁能够通过TextStyle样式进行设置,可以自定义样式,也可以使用系统内置的一些样式,通过copy可以复用系统样式并修改部分样式;行高等属性通过段落样式:ParagraphStyle进行设置;边距等可以通过modifier进行设置,modifier直译过来就是修饰符的意思,赋予modifier的修饰属性可以有多个,通过wraps进行组合:
    modifier = Spacing(6.dp) wraps Flexible(flex = 1f)(Flexible属性后面会讲到)

  • DrawImage、Container、Clip组件的使用详解
    下面我们来显示一个圆角图片,RoundedCornerShape和DrawImage都是在foundation库里面的,如果没有自动导入,需要手动导入:

    implementation 'androidx.ui:ui-foundation:0.1.0-dev03'

加载图片如下图所示:Image的使用

  • Container: 一个通用的内容对象,用于保存和安排其他UI元素。然后,你可以将大小和位置的设置应用于容器。
    expanded : 指定Container的大小,默认是false(Container的大小是子组件的大小,相当于wrap_content),如果将它设置为true,就指定Container的大小为父控件所允许的最大size, 相当于match_parent(包括宽和高两个属性)。
    height : 设置Container容器的高度,height属性的优先级高于expanded,因此会覆盖expanded,如上面的例子,设置height为100dp,也就是容器宽为父控件宽度,高为100dp
    在图片的上面,使用了HeightSpacer添加了垂直的间距,同样,如果是行布局,添加水平间距可以使用 WidthSpacer
  • Clip:Clip用于对元素进行裁切,它需要一个shape的参数,这里使用了一个RoundedCornerShape,表示裁切一个圆角矩形
  • DrawImage:DrawImage组件直接传入一个Image对象即可
  • 小结:以上就是我们显示一个圆角图片所用到的组件,在原生Android开发中,很多组件都是作为属性存在,而在Compose中,它们被抽象成了组件,这样通过组件的组合,搭建UI更加方便和灵活,这点感觉和Flutter很像。万物皆组件的思想,以后搭建UI是不是首先想想:这种效果是不是可以通过组件的组合实现?

时间关系,还有其他一些Compose组件,这里先列出来,后面会在本篇一个个把详细的使用补全

  • TopAppBar:顶部工具栏
  • TabRow:表格组件
  • Row:行控件,和Column控件相对应
  • VerticalScroller:垂直滚动组件,相当于原生的ScrollView
  • HorizontalScroller:水平滚动组件,相当于原生HorizontalScrollView
  • == Divider==:分割线组件,可与设置四周间距、颜色、宽度
  • Ripple:水波纹效果
  • Toggleable:状态切换组件
  • DrawShape:绘制一个Shape
  • DrawVector:绘制一个矢量图片
  • Clickable:点击事件组件,赋予组件被点击的功能
  • Opacity:透明度组件,包在组件外层,即可赋予组件透明效果
  • Surface:有待研究
    详情也可以参考官方sample:
    Compose官方Sample
    Compose官方Sample
    Compose官方Sample
    首页:
    在这里插入图片描述
    Interests页面:
    在这里插入图片描述

4、END 哪些常用组件的缺失

  1. 目前还没有看到ListView和RecycleView相关的组件
  2. Image如何直接显示网络图片?

More 现在毕竟才到0.1.0-dev03版本,现在是尝尝鲜,距离商用还有一段距离的,不过,潘朵拉的魔盒已经打开了,相信在2020年,Android开发还是会迎来不少的变革

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/weixin_46055193/article/details/103821956

Android 设置 recyclerview的item之间间距的简单方式-爱代码爱编程

1. public class SpacesItemDecoration extends RecyclerView.ItemDecoration { private int space; public SpacesItemDecoration(int space) { this.space = space; }

如何在单击按钮时启动新活动-爱代码爱编程

在Android应用程序中,如何在单击另一个活动中的按钮时如何启动新活动(GUI),以及如何在这两个活动之间传递数据? #1楼 伊曼纽尔 我认为应该在开始活动之前放置额外的信息,否则,如果您正在NextActivity的onCreate方法中访问数据,则数据将不可用。 Intent myIntent = new Intent(Curren

用DrawerLayout实现侧滑菜单以及其子项的点击事件-爱代码爱编程

这天在写项目的时候,师傅说我的主页左上可以加一个侧滑菜单,因为之前写过,虽然是很久之前,所以还有遇到了一丢丢小问题。 首先是,原本的主界面是LinearLayout,在其之上再包含一层DrawerLayout,然后再加上侧面菜单的页面布局,记得侧滑菜单的布局中的layout_gravity为left/start,即为左侧菜单,若为right/end,则为

Xfermode-爱代码爱编程

Xfermode Xfermode是对象的基类,在绘制管道中这些对象被调用来实现自定义的“传输模式”。 可以调用静态方法Create(Modes)来返回(在Modes枚举中指定的)任何预定义子类的实例。 当Xfermode指定给Paint时,使用该Paint绘制的对象将应用Xfermode。 public class Xfermode { st

android WIFI相关问题集合-爱代码爱编程

1.Wi-Fi hotspot cannot be used normally 问题描述: android P - Settings - Network & internet - Hotspot & tethering - Wi-Fi hotspot - turn on the switch. it will switch off au

如何测试基于Unity3D引擎的游戏-爱代码爱编程

版权声明:允许转载,但转载必须保留原链接;请勿用作商业或者非法用途 此文章来源于项目官方公众号:“AirtestProject” 由于游戏的界面是通过游戏引擎渲染出来的,游戏界面没有系统原生的控件信息,所以对于游戏,我们需要接入 poco-sdk 才能获取到游戏界面中的控件信息。下面以Unity开发的手游为例,介绍如何在Android和iOS平

(08)【Docker学习笔记】之 使用Docker Compose构建应用程序-爱代码爱编程

Compose简介: Compose 是用于定义和运行多容器Docker应用程序的工具。可以使用YML文件配置应用程序所需要的所有服务,通过执行一个命令,就可以从YML文件配置中创建并启动所有服务。 使用Compose的步骤: 1.用Dockerfile定义应用程序的运行环境。 2.用docker-compose.yml 定义构成应用程序的服务,这

torchvision.transforms.Compose之二-爱代码爱编程

鉴于上一篇反响不错,寡人决定将其中的transform都拿出来搞搞,依旧以我哥为例说明, 【哈喽,各位小粉丝好,我是你们深爱的小明哥GBM,Great Boss Man,一个当大老板的男人,哈哈】 够了,Compose中套Compose,这个东西还能玩一年啊????!! 1-我不知道这个堆叠是怎么产生的,因为是顺序执行transform,所以只有一个

Docker Compose-爱代码爱编程

Compose负责实现对Docker容器集群的快速编排。定位是 定义和运行多个Docker容器的应用,前身是Fig。 Compose允许用户通过单一docker-compose.yml模板文件(YAML格式)来定义一组相关的应用容器为一个项目。通过子命令对项目中的一组容器进行生命周期管理。 Compose中两个重要概念: 服务(service):

node+vue项目docker、docker compose及docker swarm集群模式启动-爱代码爱编程

 一下介绍基于node独立运行的vue前段项目Dockerfile 配置及启动 模式一、docker直接启动 项目根目录下创建Dockerfile文件。 #指定依赖镜像为node并制定版本,2020-1-7最新未定版本为12.13.1 FROM docker.io/node:12.13.1 # Create app directory WORKDI

Docker Compose简介-爱代码爱编程

1、docker compose概念   文档  https://docs.docker.com/compose/compose-file/compose-versioning 一个基于 docker 的工具可以通过一个 yml 文件定义多容器的 docker 应用通过一条命令就可以根据 yml 文件的定义去创建或者管理这多个容器 2、docker

【1.9】docker compose-爱代码爱编程

【1.9】docker compose 25.17 用docker compose部署服务25.18 docker compose示例 25.17 用docker compose部署服务 docker compose可以方便我们快捷高效地管理容器的启动、停止、重启等操作,它类似于linux下的shell脚本,基于yaml语法,在该文件里我们可