这篇博客我们介绍了Flutter,并且对比了H5,React Native,Flutter。

由于Flutter是跨平台的开发框架,开发一次可以同时运行在Android和iOS上面,所以我们开发时最好使用Mac系统,这样我们可以同时测试两个平台的运行效果。

本文我们就来介绍在Mac系统下安装与配置Flutter开发环境,并且运行我们的第一个Flutter应用!

为了Flutter的安装配置顺利,请保持网(Ke)络(Xue)畅(Shang)通(Wang)。

安装Flutter SDK

  1. 首先,我们需要首先下载Flutter的SDK,通过官网的这个链接可以找到每个版本的下载链接,找到最新稳定版下载。写这篇文章时的最新版是v1.2.1版本,我们就以这个版本来举例。

  2. 下载完成后我们对SDK进行解压,可以解压到任何位置。我们这里解压到用户主目录下的development目录。下面我们打开终端执行以下命令:

    1
    2
    3
    mkdir ~/development
    cd ~/development
    unzip ~/Downloads/flutter_macos_v1.2.1-stable.zip
  3. 将解压后的路径加入到环境变量中。

    打开用户目录下的.bash_profile文件,如果没有则新建这个文件:

    1
    > ~/.bash_profile

    在这个文件的最后添加SDK的路径到PATH中:

    1
    export PATH="用户路径/development/flutter/bin:$PATH"

    然后执行source让配置生效:

    1
    source ~/.bash_profile

检查Flutter安装状态

配置好后,Flutter提供了一个检查安装状态的命令:

1
flutter doctor

运行以终端会输出当前的Flutter环境是否正确,还需要安装什么等等,比如Android SDK,iOS的开发环境等等。

配置iOS开发环境

如果在Mac系统上开发Flutter应用,笔者推荐使用iOS模拟器进行开发调试,因为iOS模拟器相比Android模拟器要更加快速与流畅。

安装Xcode

  1. 从Mac App Store搜索并安装Xcode。

  2. 安装完成后在终端里执行以下命令配置最新的命令行工具:

    1
    sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
  3. 打开一次Xcode并接受许可协议,或者通过命令行运行下面命令:

    1
    sudo xcodebuild -license

配置iOS模拟器

  1. 通过命令行打开一个模拟器:

    1
    open -a Simulator
  2. 选择模拟器,然后通过Hardware -> Device菜单查看确保当前模拟的是iPhone5s之后的机型。

配置Android开发环境

下面我们来介绍安装Android的开发环境。

安装Android Studio

  1. 官网下载最新版的Android Studio。

  2. 打开Android Studio,根据安装向导提示安装最新版的Android SDK,Android SDK Platform-Tools,Android SDK Build-Tools。

配置Android模拟器

  1. 打开Android Studio后选择Tools > Android > AVD Manager,然后选择Create Virtual Device(创建虚拟设备)。

  2. 填入设备的信息然后下一步,选择镜像的时候最好选择架构x86或者x86_64,因为和电脑的架构一致,否则如果选择ARM架构的话模拟器运行后会非常卡顿。

  3. (可选)选择Hardware - GLES 2.0来进行硬件加速,以使模拟器获得更好的运行速度。

  4. 一切都选好后点击Finish即完成配置。

配置代码编辑器(IDE)

虽然Flutter开发可以使用很多IDE,比如Android Studio,IntelliJ IDEA,VS Code等等,你可以根据喜好进行选择。

但是笔者建议使用Android Studio,因为它对Flutter开发支持的最好,并且谷歌官方也是推荐使用它。

下面我们就来介绍Android Studio的配置。

  1. 打开Android Studio。
  2. 安装Flutter插件。选择菜单Preferences > Plugins 然后点击Browse repositories搜索Flutter,找到后开始安装。
  3. 当跳出安装Dart插件的界面时,也点击Yes进行安装。
  4. 安装完成后重启Android Studio。

上面我们已经完成了Flutter开发环境的配置,下面我们就开始创建我们的第一个应用吧!

Flutter初识,第一个应用!

我们打开Android Studio,然后选择开始创建Flutter工程:

然后选择Flutter Application,并点击下一步:
-w795

在这个几面填入你的工程名,SDK位置与保存位置等信息:
-w798

点击下一步后,需要输入你的包名,也就是你的域名,没有域名的话输入自己的名字一类的域名,目的就是为了保证你的应用的唯一性。
-w799

信息输入完成后我们点击”Finish”按钮即可完成工程的创建。

当我们的工程编译完成后,可以选择不同的平台运行,如图所示:
-w416

默认的工程是一个简单的计数器,选择不同的平台运行后可以看到运行后的界面:

恭喜!第一个程序运行成功地运行起来了!

接下来我们就可以深入研究Flutter的强大特性了!

总结

本篇文章-Flutter的安装配置并不复杂。另外还需要安装配置iOS开发环境和Android开发环境。当然如果只是学习的话安装iOS即可,如果你的电脑是Windows或者Linux的话,此时只能安装配置Android开发环境了,因为iOS的开发环境只能在Mac上配置。还有Flutter的热部署也会使开发效率提升很多,大家可以试着改一些代码体验一下。

本文原创地址为:https://www.examplecode.cn/2019/03/22/flutter-setup/
转载请注明出处。

我的博客中关于Flutter的所有文章可以点击这里找到,欢迎关注!

本篇文章我们将探讨CommandLineRunner和ApplicationRunner的使用。

在阅读本篇文章之前,你可以新建一个工程,写一些关于本篇内容代码,这样会加深你对本文内容的理解,关于如何快速创建新工程,可以参考我的这篇博客:

Spring Boot 2 - 创建新工程

概述

CommandLineRunner和ApplicationRunner是Spring Boot所提供的接口,他们都有一个run()方法。所有实现他们的Bean都会在Spring Boot服务启动之后自动地被调用。

由于这个特性,它们是一个理想地方去做一些初始化的工作,或者写一些测试代码。

CommandLineRunner

使用Application实现

在我们新建好工程后,为了简单我们直接使用Application类实现CommandLineRunner接口,这个类的注解@SpringBootApplication会为我们自动配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
package cn.examplecode.sb2runner;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Sb2runnerApplication implements CommandLineRunner {

private static Logger logger = LoggerFactory.getLogger(Sb2runnerApplication.class);

public static void main(String[] args) {
SpringApplication.run(Sb2runnerApplication.class, args);
}

@Override
public void run(String... args) throws Exception {
logger.info("服务已启动,执行command line runner。");

for (int i = 0; i < args.length; ++i) {
logger.info("args[{}]: {}", i, args[i]);
}
}
}

接下来我们直接启动服务,查看日志如下,发现run()方法被正常地执行了:

1
2
3
Tomcat started on port(s): 8080 (http) with context path ''
Started Sb2runnerApplication in 2.204 seconds (JVM running for 3.161)
服务已启动,执行command line runner。

参数传递

run()方法有个可变参数args,这个参数是用来接收命令行参数的,我们下面来加入参数来测试一下:
-w1070

然后重启服务,观察日志,可以看到参数被正常地接收到了:

1
2
3
4
Tomcat started on port(s): 8080 (http) with context path ''
Started Sb2runnerApplication in 1.888 seconds (JVM running for 2.41)
服务已启动,执行command line runner。
args[0]: --param=sth

命令行参数传递

之前我们说过使用Spring Boot的一大优势就是可以将工程直接打包成一个jar包而不需要单独部署。打包成jar包后可以直接执行该jar包进行服务的启动,这样在执行jar包时我们就可以传入命令行参数,让CommandLineRunner接收参数。

这种场景在服务器上特别常用。比如我们想执行某个操作,又不想对外部暴露,此时可以使用CommandLineRunner作为该操作的入口。

下面我们就打成jar包来演示一下。

  1. 进入终端界面,开始打包
    -w430

  2. 打包完成后,执行该jar包,记得先把IDE的服务停掉。
    -w1217

可以从日志中看到我们也正常地获取到了参数。通过传递参数,在业务逻辑上我们可以根据不同的参数而执行不同的操作。

上面我们提到的只是一个CommandLineRunner,如果我们有多个CommandLineRunner怎么办呢?怎么控制它们执行的顺序呢?

下面我们就来介绍如何指定执行的顺序。

指定执行顺序

Spring Boot为我们提供了一个注解”@Order”,可以用来指定执行的顺序,比如我们工程里面有三个CommandLineRunner:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
@Component
@Order(1)
public class CommandRunner1 implements CommandLineRunner {

private static Logger logger = LoggerFactory.getLogger(CommandRunner1.class);

@Override
public void run(String... args) throws Exception {
logger.info("执行第一个command line runner...");
}

}


@Component
@Order(2)
public class CommandRunner2 implements CommandLineRunner {

private static Logger logger = LoggerFactory.getLogger(CommandRunner2.class);

@Override
public void run(String... args) throws Exception {
logger.info("执行第二个command line runner...");
}

}

@Component
@Order(3)
public class CommandRunner3 implements CommandLineRunner {

private static Logger logger = LoggerFactory.getLogger(CommandRunner3.class);

@Override
public void run(String... args) throws Exception {
logger.info("执行第三个command line runner...");
}

}

我们可以在该类的上面直接加入@Order注解,然后Spring Boot就会按照我们注解指定的顺序从小到大的执行了。很简单,是不是?

1
2
3
4
5
Tomcat started on port(s): 8080 (http) with context path ''
Started Sb2runnerApplication in 1.764 seconds (JVM running for 2.292)
执行第一个command line runner...
执行第二个command line runner...
执行第三个command line runner...

ApplicationRunner

ApplicationRunner与CommandLineRunner做的事情是一样的,也是在服务启动之后其run()方法会被自动地调用,唯一不同的是ApplicationRunner会封装命令行参数,可以很方便地获取到命令行参数和参数值。

1
2
3
4
5
6
7
8
9
10
11
@Component
public class ApplicationRunner1 implements ApplicationRunner {

private static Logger logger = LoggerFactory.getLogger(ApplicationRunner1.class);

@Override
public void run(ApplicationArguments args) throws Exception {
logger.info("执行application runner...");
logger.info("获取到参数: " + args.getOptionValues("param"));
}
}

执行结果:
-w533

我们可以发现,通过run()方法的参数ApplicationArguments可以很方便地获取到命令行参数的值。

所以如果你的工程需要获取命令行参数的话,建议你使用ApplicationRunner。

总结

无论是CommandLineRunner还是ApplicationRunner,它们的目的都是在服务启动之后执行一些操作。如果需要获取命令行参数时则建议使用ApplicationRunner。

另一种场景是我们在服务器上需要执行某个操作,比如修正数据库用户的数据,而又找不到合适的执行入口,那么这就是它们理想的使用场景了。

本文原创地址为:https://www.examplecode.cn/2019/03/21/spring-boot-2-runner/
转载请注明出处。

我的博客中其他关于Spring Boot的所有文章可以点击这里找到,欢迎关注!

Flutter介绍

Flutter是Google推出的开源移动应用开发框架。开发者可以通过开发一套代码同时运行在iOS和Android平台。

它使用Dart语言进行开发,并且最终编译成各个平台的Native代码,这样既保证了开发效率,也保证了各个平台的运行效率。其相当于从头到尾重写了一套UI框架,不依赖具体平台的组件。其所有的组件都是”Widget”。渲染引擎则依靠高效渲染库Skia实现。

下面我们对比一下H5、React Native、Flutter这些跨平台的解决方案。

移动端的跨平台技术

H5技术

常被人提起的H5技术,其实就是网页+JavaScript。比如目前的一些流行的JS框架Vue,React,AngularJS等都是为了构建网页。针对移动端构建出来的网页可以实现在跨平台的功能,但是其缺点也很明显:

  • 渲染效率低下,用户体验差。很多H5在iOS平台表现尚可,但是在Android上特别是一些低端机上的表现确实让人不敢恭维。
  • 网页调用设备硬件相关API比较困难,而且支持的功能较少,实现此类需求是H5的短板。

React Native

React Native(RN)发布于2015年,也是使用JavaScript语言进行跨平台APP的开发。与H5开发不同的是,它使用JS桥接技术在运行时编译成各个平台的Native代码,其使用的技术Facebook的Flux技术。
其优点是目前的生态比较成熟,目前也有很多跨平台应用使用React Native。它也是跟Flutter对比的主要对象。
其特点是:

  • 使用JavaScript语言,由于JS被广泛地使用,所以RN也很容易被接受。
  • RN依赖JS的运行时环境,也就是JS桥接技术。其使用Facebook的Flux架构。
  • RN仅提供了UI渲染和设备访问的API,很多功能必须依赖第三方库来实现对本地组件的使用。
  • 生态目前比较完善,使用的公司也比较多,特别是对JS比较熟悉的同学容易上手。
  • 支持热部署,开发过程中可以节约很多时间。

但是它也并不是完美的:

  • 它的渲染方式还是调用各个平台的原生控件,有时需要针对不同的平台做不同的优化。
  • 其性能相对于H5有很大的提高,但是并没有完美解决,白屏,丢帧问题依然存在。

Flutter

Flutter也看到了目前的跨平台解决方案并不完美,所以它借鉴了React Native的一些思想,做出了很大的优化。它将代码编译成原生代码,并且直接在各个平台中使用其高效渲染引擎Skia进行渲染,没有桥接,不调用平台相关控件。

这种设计思想完美解决了不同平台的性能问题。

归功于其设计思想,我们可以真正实现一套代码,运行不同的平台。在其推出之后,关注的开发者数量和相关的教程的增长速度远超当时的React Native。

其特点包括:

  • 使用Google自主开发的Dart语言。Dart语言是一个强类型的语言,很好地支持面向对象,并且易于学习和使用。
  • 使用谷歌自己的Skia渲染引擎,Android自带Skia引擎,iOS平台上Flutter也会把Skia引擎打包到APP中,实现高效渲染。
  • 目前有非常丰富的视图组件,可以点击这里查看其组件目录,包括Android上常用的材料设计(Material Design)的UI风格,和iOS风格(Cupertino)。由于其渲染不依赖各平台相关组件,所以运行在不同平台上的效果是一致的。
  • 同样支持热部署,开发时可以像网页开发一样实时看到效果。

目前它存在的一些问题是:

  • 国内学习资源目前并不丰富,使用Flutter的公司也比较少。
  • 相关的生态还没有React Native那样丰富,但是其发展速度大大超过了React Native。

总结

虽然Flutter目前并不是非常流行,但是笔者相信它是跨平台解决方案的未来。
如果谷歌的新系统Fuchsia OS能像当今的Android这样如日中天,甚至替代掉Android的话,Flutter的发展也会迎来它的顶峰。

本系列博客我们就来深入学习和探讨使用Flutter。

后面的文章我们会逐步深入学习Flutter的功能与实战。

本文原创地址为:https://www.examplecode.cn/2019/03/20/flutter-introduce/
转载请注明出处。

我的博客中关于Flutter的所有文章可以点击这里找到,欢迎关注!

Spring Boot的由来

相信大家都听说过Spring框架。

Spring从诞生到现在一直是流行的J2EE开发框架。
随着Spring的发展,它的功能越来越强大,随之而来的缺点也越来越明显,以至于发展到后来变得越来越臃肿,使用起来也非常的麻烦。
到后来由于过于强调配置的灵活性,有时即使只为了加入一个简单的特性,而需要相当多的XML配置,从而被人们诟病为”配置地狱”!

后来许多优秀的服务端框架涌现出来,比如基于JavaScript的nodeJS,基于Python的Django,Flask,Tornado框架。都由于其使用简单的特性被越来越多的开发者采用。

Sprint Boot就是为了应对这些框架的挑战而出现的,它彻底改变了Spring框架臃肿的现状。使得J2EE的框架变得简单起来,目前越来越多的公司和项目选择了它。

Spring Boot最新的版本是2.x,本文我们就来介绍它的安装与配置,快速创建你的第一个Spring Boot工程,享受她的优雅与强大。

Spring Boot的特性

Spring Boot的主要有以下几个杀手级特性,可以大大减少学习与使用的复杂性,让我们更多地关注业务,提升开发效率:

  • 可创建独立可运行的应用程序,打包后仅一个jar包,运行即可。
  • 内置应用服务器Tomcat,Jetty等,无需部署。
  • 零XML配置,彻底摆脱”配置地狱”。
  • 自动配置各种第三方库,常用的第三方库引入即可用。
  • 内置各种服务监控系统,实时观察服务运行状态。

创建Spring Boot工程

我们废话不多说,现在就开始介绍创建Spring Boot 2工程的方法,这是进行Spring Boot学习与开发的第一步。

方法一:通过Idea内置工具创建

如果你使用IntelliJ IDEA作为你的开发IDE的话,这种方式最为方便,不过前提是使用Ultimate版(最终版),在IntelliJ的官网可以下载到(当然如果条件允许推荐购买正版)。

  1. 打开Idea选择创建新工程
    -w476

  2. 选择导航栏中的Spring Initializr
    -w833

  3. 然后填入工程信息
    注意这里有使用Maven还是Gradle的选择。我们这里既然要零XML配置,这里选择使用Gradle工程,如图。我们使用Sprint Boot的目的也就是简化我们的开发生活,不是吗?
    -w848

  1. 添加第三方依赖
    我们这里添加需要的第三方依赖。如果你第一次接触Spring Boot,为了避免复杂性,可以选择添加以下两个依赖。其他的依赖不必担心,你可以在任何时候非常容易地添加依赖。
  • DevTools:是一系列开发工具配置,比如热部署。
    -w848

  • Web: 对Web开发的基础支持。
    -w841

  1. 完成工程创建
    填入工程名和保存目录后,点击完成。
    -w845

  2. 创建完工程后,会有一个gradle配置的一个界面,这里我们选择使用默认的wrapper。这个选项会自动为我们下载对应版本的gradle进行配置和编译,无需我们自己安装配置等,非常方便。
    -w947
    点击OK后我们就成功地创建了新工程!恭喜!

方法二:通过Spring Initializr创建

这种方式适用于不使用IntelliJ IDEA和使用免费版Idea的同学,通过官方创建Spring Boot工程的网站直接创建。
方法一其实也是使用这个网站作为模板来集成到Idea中的。

点击这里进入到这个网站(https://start.spring.io/)

  1. 输入工程信息,并选择Gradle工程

    输入工程的信息后,如果需要更详细的信息设置,可以点击下方的”More options”按钮进行设置。

  2. 添加依赖
    这里我们可以直接搜索需要的依赖进行添加,比如我们添加Web和Devtools库。

  3. 生成工程
    在我们把所有信息填完后,接下来我们就可以点击页面底部的按钮(Generate Project)开始生成。

  4. 生成后会自动把工程下载到本地,我们解压后,将该工程保存到开发目录(你喜欢的任何位置都可以),然后使用IDE打开即可。
    -w477
    比如我这里使用的是IntelliJ IDEA,打开即可。

运行工程!

至此我们的工程已经创建完毕,下面就是运行它了。
我们观察工程源码包的结构,发现有一个Hellospringboot2Application的类,这个类就是我们服务的运行入口。运行它后,我们的服务就可以正常启动了!

-w1324

总结

通过创建Spring Boot新工程的过程,我们就会发现它的简洁之处,不会像以前使用Spring那样要花费很多时间和精力去创建和配置,我们现在甚至可以在短短的两分钟之内创建好工程!
后面的文章我们会深入讨论Spring Boot的方方面面。

本文原创地址为:https://www.examplecode.cn/2019/03/19/spring-boot-2-setup/
转载请注明出处。

我的博客中其他关于Spring Boot的所有文章可以点击这里找到,欢迎关注!

介绍

本系列我们已经介绍了ConstraintLayout的基本用法。学习到这里,相信你已经熟悉ConstraintLayout的基本使用了,如果你对它的用法还不了解,建议您先阅读我之前的文章

使用ConstraintLayout创建动画的基本思想是我们创建两个不同的布局,每个布局有其不同的约束,从而我们使用其动画框架来进行两种约束之间的切换。

传统动画

以往在我们创建简单动画时,通常我们会使用

  • 视图动画(View Animation)
  • 帧动画(Drawable Animation)
  • 属性动画(Property Animation)

这三种在我们制作简单动画时非常简单和方便,特别是当我们只对某个特定的View制作动画时。但是当我们需要制作复杂动画时,特别是整个页面多个View同时执行动画时,这几种方式就显得力不从心了,需要大量的工作。

当然还有一种方式就是使用转场动画框架(Transition Framework),通过共享元素(Shared Element)制作动画,这个后面我们也会提到。

ConstraintLayout动画

我们这里通过一个示例来说明ConstraintLayout动画的创建。

  1. 首先,我们创建第一个布局(activity_main.xml),它是是我们的初始布局。
  • 效果:
    -w290

  • 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
android:id="@+id/cl_root"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<TextView
android:id="@+id/tv_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="评分:8.3分"
app:layout_constraintStart_toStartOf="@+id/tv_name"
app:layout_constraintTop_toBottomOf="@+id/tv_name" />

<TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="8dp"
android:text="无敌破坏王2"
android:textColor="#282828"
android:textSize="20sp"
app:layout_constraintStart_toEndOf="@+id/iv_poster"
app:layout_constraintTop_toTopOf="@+id/iv_poster" />

<ImageView
android:id="@+id/iv_poster"
android:layout_width="120dp"
android:layout_height="160dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:scaleType="centerCrop"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@mipmap/wreck_it_ralph" />

</android.support.constraint.ConstraintLayout>

我们的初始布局创建完毕后,我们需要创建一个动画结束布局,让动画框架知道执行完动画后布局是什么样的。

  1. 创建动画结束布局(activity_main_detail.xml)。
  • 效果:

-w289

  • 代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
android:id="@+id/cl_root"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<TextView
android:id="@+id/tv_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="52dp"
android:text="评分:8.3分"
app:layout_constraintBottom_toBottomOf="@+id/tv_name"
app:layout_constraintStart_toEndOf="@+id/tv_name"
app:layout_constraintTop_toTopOf="@+id/tv_name"/>

<TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:text="无敌破坏王2"
android:textColor="#282828"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<ImageView
android:id="@+id/iv_poster"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="65dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@mipmap/wreck_it_ralph" />

</android.support.constraint.ConstraintLayout>

这个页面是我们执行动画结束后的样子。那么开始和结束的布局我们都有了,我们怎样执行动画,让两个布局之间进行过渡呢?

答案是通过Android的TransitionManager来执行。

  1. 使用TransitionManager来执行动画
  • 代码(MainActivity.java)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
package cn.examplecode.constraintlayoutdemo;

import android.support.constraint.ConstraintLayout;
import android.support.constraint.ConstraintSet;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.TransitionManager;

public class MainActivity extends AppCompatActivity {

private ConstraintLayout mConstraintLayout;
private boolean mIsDetail;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mConstraintLayout = findViewById(R.id.cl_root);

ConstraintSet constraintSet1 = new ConstraintSet();
ConstraintSet constraintSet2 = new ConstraintSet();

constraintSet2.clone(this, R.layout.activity_main_detail);
constraintSet1.clone(mConstraintLayout);

findViewById(R.id.iv_poster).setOnClickListener(v -> {
TransitionManager.beginDelayedTransition(mConstraintLayout);
if (!mIsDetail) {
constraintSet2.applyTo(mConstraintLayout);
mIsDetail = true;
} else {
constraintSet1.applyTo(mConstraintLayout);
mIsDetail = false;
}
});
}
}

我们来解释以上代码。
首先我们发现使用了这个类ConstraintSet,它是一个约束集合,保存了布局上所有元素的约束,因为我们需要在两个布局之间执行动画,所以我们需要创建两个约束集合的对象。

1
2
ConstraintSet constraintSet1 = new ConstraintSet();
ConstraintSet constraintSet2 = new ConstraintSet();

创建完约束集对象后,我们需要设置每个约束集对应的约束:

1
2
constraintSet2.clone(this, R.layout.activity_main_detail);
constraintSet1.clone(mConstraintLayout);

这里我们将当前布局的约束应用到constraintSet1中,将目标布局的约束应用到constraintSet2中。

接下来我们执行动画:

1
2
3
4
5
6
TransitionManager.beginDelayedTransition(mConstraintLayout);
# 从constraintSet1过渡到constraintSet2
constraintSet2.applyTo(mConstraintLayout);

# 从constraintSet2过渡到constraintSet1
constraintSet1.applyTo(mConstraintLayout);

最终效果:

ezgif-5-34173ef48cf2

只需简单的几行代码,就可以实现复杂的动画了!当然本示例为了说明ConstraintLayout动画的创建方法,布局比较简单。
如果需要复杂布局的动画切换,这种方式的优势就非常明显。如果使用传统创建动画方法,则有可能需要大量的时间和代码来实现。

问题探讨

为什么需要创建两个布局文件?

可能有人认为创建两个布局文件不是一个好的方式,两个布局中存在重复的代码,这样好吗?

实际上可能并没有你想象的那么不好,创建两个布局文件的目的只是让动画框架知道不同的约束而已,然后将不同的约束应用在过渡动画中,你可以在布局中把与约束无关的属性去掉。
如果你实在不喜欢创建两个布局文件的话,当然也可以在代码中来描述不同的约束。显然这样会大大增加复杂度和代码量。

与使用共享元素动画(Shared Element)有什么区别?

使用共享元素动画当然也可以实现这样的效果,但是使用共享元素动画你也需要创建两个布局,而且关键的不同是:
使用ConstraintLayout执行动画时,动画前后的View是同一个View对象。
而使用共享元素动画时动画前后的View是两个不同的View对象!

系列总结

本篇是本系列博客《掌握ConstraintLayout》的最后一篇。通过本系列的学习,相信你已经掌握了使用ConstraintLayout的大部分功能。

在实际开发的过程中,使用ConstraintLayout会使开发速度有不少的提升,再结合我的另一个系列《使用Data Binding》,会大大减少开发Android时的工作量,达到事半功倍的效果,提升生产力!

谢谢你的支持!

如有更多疑问,请参考我的其它Android相关博客:我的博客地址

有时候在布局界面的时候,UI要求某个View或者某张图片按比例显示,以适应不同的屏幕分辨率。

通常我们时通过自定义View或者引入第三方的库来解决。现在我们既然已经使用了ConstraintLayout,它本身就支持这样的按比例设置View大小的功能。

下面我们来介绍如何使用:

  1. 首先我们在布局中添加一个View:

-w532

此时,没有添加任何约束,显示的比例就是原始图片的比例。

  1. 添加水平方向的约束:

-w868

添加完水平方向的约束后,注意此时默认的宽高为wrap_content。

  1. 将高度设置为match_constraint

-w874

如上图:这里我们将高度设置为match_constraint,然后发现下面出现了一个三角,这个就是设置View比例的地方。

  1. 设置View比例

下面我们点击这个三角形,并设置宽高的比例:

  • 1:1
    -w855

  • 1:2
    -w871

这里设置的是宽度:高度的比例,我们查看源码可以看到这个属性:
-w360

此时我们改变View的宽度,就会发现其高度也会保持这个比例而相应地变化了:

-w868

总结

本文我们是以宽度:高度进行View比例的设置,当然我们也可以以高度:宽度进行设置,道理都是一样的。

设置View的比例也是ConstraintLayout相对于传统的布局容器一个强大的功能,它使得布局更加灵活,更加容易得进行屏幕适配。

下一篇:Android开发 - 掌握ConstraintLayout(十一)复杂动画!如此简单!,我们将介绍使用ConstraintLayout创建复杂动画。

如有更多疑问,请参考我的其它Android相关博客:我的博客地址

使用ConstraintLayout后我们的布局是没有层级关系的,各个View之间都是平级关系,但是如果根据某个业务条件来控制多个View的显示与否,我们需要分别对每个View进行控制,需要调用多次setVisibility()。这样就显得非常不方便。

本文所介绍的Group就是解决这个问题的。

Group就是一个分组,可以关联多个View,从而只需要对这个分组进行控制就可以实现这样的场景。

我们下面来介绍它的使用。

添加分组

首先,我们添加一个Group:
-w468

关联元素

然后将页面上的元素拖动到这个分组中:
-w231

注意这里将View拖动到这个Group中,并不是创建了一个层级关系,而是Group关联了这些View,同上一篇:Barrier的使用一样,可以查看代码:
-w469

这样我们就构成了一个分组,然后我们只需要控制这个分组的显示与否就可以同时控制其关联的View的显示与否了。

显示控制

我们选中这个Group,然后在右侧的属性栏可以改变其显示属性。当然也可以通过代码来控制:

-w288

1
findViewById(R.id.group).setVisibility(View.GONE);

总结

因为传统布局存在View的层级关系,所以通过控制父View的显示即可。使用ConstraintLayout后则可以通过使用分组可以解决这样的问题。

下一篇:Android开发 - 掌握ConstraintLayout(十)按比例设置视图大小,我们将介绍如何按比例设置View的大小。

如有更多疑问,请参考我的其它Android相关博客:我的博客地址

本文我们来介绍障碍线(Barrier)的使用,平常在开发中用的相对要少一些,但是在需要时会非常方便。

它的作用是将多个元素放到这个障碍线里面使时,其中的任何元素的大小或位置变化时都会使它的位置进行改变。

可以理解成一面墙,”墙”里面任何元素的位置或大小改变时都会导致它的改变,从而保证所有的元素都在”墙”里面。

下面我们来举例进行说明,会更加直观。

  1. 首先,我们先创建两个元素:
    -w536

  2. 接下来,我们来创建一条垂直的Barrier:
    -w540

  3. 创建后,我们把这两个View拖到这个Barrier里面:
    -w765

    注意:这里将View拖进去并不是真正创建了层级关系,我们看代码可以知道,仅仅这个Barrier引用了两个View的ID:

    1
    2
    3
    4
    5
    6
    7
    <android.support.constraint.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="left"
    app:constraint_referenced_ids="button,textView"
    tools:layout_editor_absoluteX="104dp" />
  4. 默认的Barrier是在所有元素的左面,我们选中它后可以选择靠右对齐:
    -w254

    创建完成后我们来调整其里面的各个View的大小和位置就可以理解它的作用了:

    -w539
    -w541

总结

Barrier特别在复杂的页面布局的时候非常有用,不需要创建一个容器来放置这些子View来实现这样的功能了,这也是我们使用ConstraintLayout的初衷,保证层级的简单和高效。

下一篇:Android开发 - 掌握ConstraintLayout(九)分组(Group),我们将介绍分组(Group)的使用。

如有更多疑问,请参考我的其它Android相关博客:我的博客地址

了解过UI设计的同学都知道,在设计的时候,我们经常在界面上拖进一些辅助线来帮我们对齐UI元素,或者方便我们统一的页边距。

在ConstraintLayout的编辑器中,同样也支持这样的功能,我们可以创建一些横向的或者纵向的Guideline,在布局界面的时候可以充分利用这些辅助线,对齐我们的View,避免重复写一些marginXXX。

创建Guideline

打开编辑器,选择Helpers -> Add Vertical Guideline
-w534

创建后,默认的Guideline是靠左的:

-w539

我们可以拖动来调整这个Guideline的边距,也可以通过右侧的属性栏直接输入边距的大小:

-w497

细心的同学可能发现,这里除了设置左边局,还有一个layout_constraintGuide_end,这个是做什么用的呢?没错,如果设置这个值,那么这条Guideline就是靠右的!

还有layout_constraintGuide_percent,从名字就可以看出,这个是按宽度的百分比设置边距,这个值的范围是0-1。(0% - 100%)

设置好辅助线后,我们就可以将View约束到这条辅助线上了。

-w530

当调整这条Guideline的边距时,约束对应的所有View也会做相应地改变,非常方便。

我们这里以靠左垂直的Guideline进行举例,读者可以创建一个右边的Guideline或者水平方向的Guideline进行尝试。

总结

Guideline可以帮助我们更方便地进行布局,尤其是当我们的页面左右边距都是一个固定值的时候,还有在设计师调整UI的左右边距的时候,我们也可以非常迅速地做出调整。

下一篇:Android开发 - 掌握ConstraintLayout(八)障碍线(Barrier),我们将介绍Barrier的使用。

如有更多疑问,请参考我的其它Android相关博客:我的博客地址

本文我们介绍链条(Chains),使用它可以将多个View连接起来,互相约束。

可以创建横向的链条,也可以创建纵向的链条,我们以横向的链条举例:

  1. 我们先创建三个按钮:

-w546

  1. 我们选中三个按钮后在上面点右键创建链条:

-w520

  1. 创建后我们发现这三个View平均分布地排列了:

-w544

最简单的使用是平均分布,当然也可以不平均分布,具体看约束的具体设置,比如将第一个Button的marginEnd设置成10后链条会自动地分布每个View的位置。

这使得分布View变得非常灵活,并且从某种程度上可以取代LinearLayout的功能。

除了如上图的平均分布外,链条一共有三种模式可以切换,注意上图中的链条图标:
-w270

点击这里可以循环切换不同的分布模式:

  • spread(平均分布)

-w268

  • spread_inside(中间平均分布)

-w272

  • packed

-w266

总结

本文以横向的链条进行举例,纵向链条的使用与横向同样,读者可以结合起来使用,会发现很多有趣的使用方式。

链条在我们实际开发的过程中非常常用,配合使用这几种分布模式可以灵活方便地进行布局。

下一篇:Android开发 - 掌握ConstraintLayout(七)辅助线(GuideLine),我们将介绍Guideline的使用。

如有更多疑问,请参考我的其它Android相关博客:我的博客地址