安装与配置Flutter开发环境

发表于 2019-03-22 更新于 2020-12-04 分类于 Flutter 阅读次数： Valine：

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

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

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

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

安装Flutter SDK

首先，我们需要首先下载Flutter的SDK，通过官网的这个链接可以找到每个版本的下载链接，找到最新稳定版下载。写这篇文章时的最新版是v1.2.1版本，我们就以这个版本来举例。
下载完成后我们对SDK进行解压，可以解压到任何位置。我们这里解压到用户主目录下的development目录。下面我们打开终端执行以下命令：
1
2
3
mkdir ~/development
cd ~/development
unzip ~/Downloads/flutter_macos_v1.2.1-stable.zip

将解压后的路径加入到环境变量中。

打开用户目录下的.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

从Mac App Store搜索并安装Xcode。
安装完成后在终端里执行以下命令配置最新的命令行工具：
1
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
打开一次Xcode并接受许可协议，或者通过命令行运行下面命令：
1
sudo xcodebuild -license

配置iOS模拟器

通过命令行打开一个模拟器：
1
open -a Simulator
选择模拟器，然后通过Hardware -> Device菜单查看确保当前模拟的是iPhone5s之后的机型。

配置Android开发环境

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

安装Android Studio

从官网下载最新版的Android Studio。
打开Android Studio，根据安装向导提示安装最新版的Android SDK，Android SDK Platform-Tools，Android SDK Build-Tools。

配置Android模拟器

打开Android Studio后选择Tools > Android > AVD Manager，然后选择Create Virtual Device（创建虚拟设备）。
填入设备的信息然后下一步，选择镜像的时候最好选择架构x86或者x86_64，因为和电脑的架构一致，否则如果选择ARM架构的话模拟器运行后会非常卡顿。
(可选)选择Hardware - GLES 2.0来进行硬件加速，以使模拟器获得更好的运行速度。
一切都选好后点击Finish即完成配置。

配置代码编辑器(IDE)

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

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

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

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

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

Flutter初识，第一个应用！

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

然后选择Flutter Application，并点击下一步：

在这个几面填入你的工程名，SDK位置与保存位置等信息：

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

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

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

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

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

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

总结

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

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

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

Spring Boot 2 - 使用CommandLineRunner与ApplicationRunner

发表于 2019-03-21 更新于 2020-12-04 分类于 Spring Boot 阅读次数： Valine：

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

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

Spring Boot 2 - 创建新工程

概述

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

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

CommandLineRunner

使用Application实现

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

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，这个参数是用来接收命令行参数的，我们下面来加入参数来测试一下：

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

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包来演示一下。

进入终端界面，开始打包
打包完成后，执行该jar包，记得先把IDE的服务停掉。

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

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

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

指定执行顺序

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

@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就会按照我们注解指定的顺序从小到大的执行了。很简单，是不是？

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会封装命令行参数，可以很方便地获取到命令行参数和参数值。

@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"));
    }
}

执行结果：

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

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

总结

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

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

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

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

Flutter介绍 - Flutter,H5,React Native之间的对比

发表于 2019-03-20 更新于 2020-12-04 分类于 Flutter 阅读次数： Valine：

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 2 - 初识与新工程的创建

发表于 2019-03-19 更新于 2020-12-04 分类于 Spring Boot 阅读次数： Valine：

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的官网可以下载到（当然如果条件允许推荐购买正版）。

打开Idea选择创建新工程
选择导航栏中的Spring Initializr
然后填入工程信息
注意这里有使用Maven还是Gradle的选择。我们这里既然要零XML配置，这里选择使用Gradle工程，如图。我们使用Sprint Boot的目的也就是简化我们的开发生活，不是吗？

添加第三方依赖
我们这里添加需要的第三方依赖。如果你第一次接触Spring Boot，为了避免复杂性，可以选择添加以下两个依赖。其他的依赖不必担心，你可以在任何时候非常容易地添加依赖。

DevTools：是一系列开发工具配置，比如热部署。
Web: 对Web开发的基础支持。

完成工程创建
填入工程名和保存目录后，点击完成。
创建完工程后，会有一个gradle配置的一个界面，这里我们选择使用默认的wrapper。这个选项会自动为我们下载对应版本的gradle进行配置和编译，无需我们自己安装配置等，非常方便。

点击OK后我们就成功地创建了新工程！恭喜！

方法二：通过Spring Initializr创建

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

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

输入工程信息，并选择Gradle工程

输入工程的信息后，如果需要更详细的信息设置，可以点击下方的”More options”按钮进行设置。
添加依赖
这里我们可以直接搜索需要的依赖进行添加，比如我们添加Web和Devtools库。
生成工程
在我们把所有信息填完后，接下来我们就可以点击页面底部的按钮（Generate Project）开始生成。
生成后会自动把工程下载到本地，我们解压后，将该工程保存到开发目录（你喜欢的任何位置都可以），然后使用IDE打开即可。

比如我这里使用的是IntelliJ IDEA，打开即可。

运行工程！

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

总结

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

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

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

Android开发 - 掌握ConstraintLayout（十一）复杂动画！如此简单！

发表于 2018-12-04 更新于 2020-12-04 分类于 Android开发阅读次数： Valine：

介绍

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

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

传统动画

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

视图动画（View Animation）
帧动画（Drawable Animation）
属性动画（Property Animation）

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

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

ConstraintLayout动画

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

首先，我们创建第一个布局（activity_main.xml），它是是我们的初始布局。

效果：
代码：

<?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>

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

创建动画结束布局（activity_main_detail.xml）。

效果：

代码:

<?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来执行。

使用TransitionManager来执行动画

代码（MainActivity.java）

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中。

接下来我们执行动画：

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

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

最终效果：

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

问题探讨

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

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

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

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

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

系列总结

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

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

谢谢你的支持！

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

Android开发 - 掌握ConstraintLayout（十）按比例设置视图大小

发表于 2018-11-29 更新于 2020-12-04 分类于 Android开发阅读次数： Valine：

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

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

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

首先我们在布局中添加一个View：

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

添加水平方向的约束：

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

将高度设置为match_constraint

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

设置View比例

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

1：1
1：2

这里设置的是宽度：高度的比例，我们查看源码可以看到这个属性：

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

总结

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

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

下一篇：Android开发 - 掌握ConstraintLayout（十一）复杂动画！如此简单！，我们将介绍使用ConstraintLayout创建复杂动画。

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

Android开发 - 掌握ConstraintLayout（九）分组(Group)

发表于 2018-11-07 更新于 2020-12-04 分类于 Android开发阅读次数： Valine：

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

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

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

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

添加分组

首先，我们添加一个Group：

关联元素

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

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

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

显示控制

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

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

总结

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

下一篇：Android开发 - 掌握ConstraintLayout（十）按比例设置视图大小，我们将介绍如何按比例设置View的大小。

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

Android开发 - 掌握ConstraintLayout（八）障碍线(Barrier)

发表于 2018-11-06 更新于 2020-12-04 分类于 Android开发阅读次数： Valine：

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

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

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

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

首先，我们先创建两个元素：
接下来，我们来创建一条垂直的Barrier:

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

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

<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" />