ConstraintLayout基础及动态控件(动画效果)

原创文章，转载请注明出处：http://www.jianshu.com/p/7888cde8292f

ConstraintLayout静态构建方法

ConstraintLayout的静态构建的方法，也就是在布局界面上对其进行处理，网络上已经有很多文章，也可参考

https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout.html

简单而言使用界面对ConstraintLayout内的控件进行修改，就是要将控件上下左右（文字）的四个约束给定义好，直接在布局界面中进行拖拉，并调整好控件的位置即可。

ConstraintLayout.LayoutParams

名字很熟悉，继承自ViewGroup.MarginLayoutParams，而ViewGroup.MarginLayoutParams继承自ViewGroup.LayoutParams。这个就比较熟悉了，在其他的Layout布局也时常使用这个来布局，layoutparams用于在父布局中布局子控件，子控件利用layoutparams告诉父布局它想如何被放置在父布局中，它包含的属性类型会根据需要为视图组的每个子视图定义尺寸和位置。
尺寸的定义可以使用具体值，但常用的是：wrap_content和match_parent ，对于如何使用Constraintlayoutparams中的layoutparams，可以参照其他layout的使用方法，这里没有太多特别的地方。

ConstraintSet 约束集合

官网的定义，这个类允许我们已编程方式定义要与ConstraintLayout一起使用的一组约束，它允许我们创建和保存约束，并将其应用于现有的ConstraintLayout中，ConstraintSet可以通过各种方式创建：

1. 手动创建：
c = new ConstraintSet(); c.connect(...);
2. from a R.layout.*object:
 c.clone(context,R.layout.layout1);
3. from a ConstraintLayout:
c.clone(clayout);

那么我们现在就来创建一个ConstraintSet 来尝试一下（这里出现了问题，后面有解释）：
首先是主布局xml的代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="com.example.zjt.myapplicationfadsgwe.MainActivity"
    android:id="@+id/contentPanel">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="0dp"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginStart="0dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="0dp"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintVertical_bias="0.0" />

</android.support.constraint.ConstraintLayout>

效果如图：

1380880454.jpg

代码的逻辑很简单，就是点击Button生成新的Button并将新的Button添加到主视图中，代码如下（注意看注释）：

public class MainActivity extends AppCompatActivity {
    private Button add;
    private ConstraintLayout constraintLayout;
    private int num;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        add=findViewById(R.id.button);
        constraintLayout=findViewById(R.id.contentPanel);
        num=0;//代表按钮点击的次数
        add.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {//点击事件
                if(num==0){
                    ConstraintSet constraintSet=new ConstraintSet();//新建一个ConstraintSet
                    num++;
                    Button new1=new Button(MainActivity.this);
                    //在其中添加第一个Button
                    new1.setText("第一个BUTTON");
                    constraintLayout.addView(new1);
                    constraintSet.clone(constraintLayout);
                    constraintSet.constrainWidth(new1.getId(), ConstraintLayout.LayoutParams.WRAP_CONTENT);
                    constraintSet.constrainHeight(new1.getId(),ConstraintLayout.LayoutParams.WRAP_CONTENT);
                    constraintSet.connect(new1.getId(),ConstraintSet.END, ConstraintSet.PARENT_ID,ConstraintSet.END);
                    constraintSet.connect(new1.getId(),ConstraintSet.START, ConstraintSet.PARENT_ID,ConstraintSet.START);
                    //这个按钮距离顶部的margin值为1000
                    constraintSet.connect(new1.getId(),ConstraintSet.TOP, ConstraintSet.PARENT_ID,ConstraintSet.TOP,1000);
                    constraintSet.connect(new1.getId(),ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID,ConstraintSet.BOTTOM);
                    constraintSet.applyTo(constraintLayout);
                }else if(num==1){
                    ConstraintSet constraintSet=new ConstraintSet();
                    num++;
                    Button new2=new Button(MainActivity.this);
                    new2.setText("第二个");
                    constraintLayout.addView(new2);
                    constraintSet.clone(constraintLayout);
                    constraintSet.constrainWidth(new2.getId(), ConstraintLayout.LayoutParams.WRAP_CONTENT);
                    constraintSet.constrainHeight(new2.getId(),ConstraintLayout.LayoutParams.WRAP_CONTENT);
                    //这个按钮什么都没有，添加了四个方向的约束后默认居中
                    constraintSet.connect(new2.getId(),ConstraintSet.END,  ConstraintSet.PARENT_ID,ConstraintSet.END);
                    constraintSet.connect(new2.getId(),ConstraintSet.START, ConstraintSet.PARENT_ID,ConstraintSet.START);
                    constraintSet.connect(new2.getId(),ConstraintSet.TOP, ConstraintSet.PARENT_ID,ConstraintSet.TOP);
                    constraintSet.connect(new2.getId(),ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID,ConstraintSet.BOTTOM);
                    constraintSet.applyTo(constraintLayout);
                }else if(num==2){
                    ConstraintSet constraintSet=new ConstraintSet();
                    num++;
                    Button new3=new Button(MainActivity.this);
                    new3.setText("3");
                    constraintLayout.addView(new3);
                    constraintSet.clone(constraintLayout);
                    constraintSet.constrainWidth(new3.getId(), ConstraintLayout.LayoutParams.WRAP_CONTENT);
                    constraintSet.constrainHeight(new3.getId(),ConstraintLayout.LayoutParams.WRAP_CONTENT);
                    constraintSet.connect(new3.getId(),ConstraintSet.END,  ConstraintSet.PARENT_ID,ConstraintSet.END);
                    constraintSet.connect(new3.getId(),ConstraintSet.START, ConstraintSet.PARENT_ID,ConstraintSet.START);
                    constraintSet.connect(new3.getId(),ConstraintSet.TOP, ConstraintSet.PARENT_ID,ConstraintSet.TOP);
                    //这个按钮距离底部的margin值为1000
                    constraintSet.connect(new3.getId(),ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID,ConstraintSet.BOTTOM,1000);
                    constraintSet.applyTo(constraintLayout);
                }
            }
        });
    }
}

动态添加第一个Button，效果如图：

第一个按钮距离顶部1000

动态添加第二个Button，效果如图：

第二个按钮居中

从图上可以看到，第二个按钮添加后，第一个按钮的约束将不起作用？有些疑问，那么再添加第三个按钮尝试，效果如图：

约束也被修改了

这个意思很明显了，在添加了新的按钮以后，原来的约束将不起作用，都会修改为新的约束。那也就是说connect函数在Constraint的LEFT,RIGHT（START,END）,TOP,BOTTOM等4个方向分别只能使用一次，旧的约束会被新的约束覆盖。
PS:经同学提醒，将new的button的id打印出来发现是一样的，如果先给Button使用setId方法设置了不同的Id，结果就没有问题了。
PS：只要传入正确的id，即使是静态的布局中的控件，也可以通过ConstraintSet调整约束
(附加一个：如何优雅的为Java代码中新建的控件添加id：
首先在values文件夹中建立一个xml文件，我们把它命名为m_id.xml:

2017-07-21 08-47-08屏幕截图.png

然后如图添加：

2017-07-21 08-48-46屏幕截图.png

在代码中使用setId(R.id.命名的值)，就可以使用这些id了。）

ConstraintSet动画

动画是最有趣的部分，这里做的很简单，但是也意味着动画的扩展性很高，这个部分值得一学：
首先是布局代码：
主界面的代码，activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="com.example.zjt.constraintsettransition.MainActivity"
    android:id="@+id/contentPanel">


    <Button
        android:id="@+id/start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="动画"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="8dp"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginStart="8dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp"
        app:layout_constraintHorizontal_bias="0.028"
        app:layout_constraintVertical_bias="0.0" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginStart="8dp"
        app:layout_constraintEnd_toStartOf="@+id/button3"
        android:layout_marginEnd="8dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp"
        app:layout_constraintHorizontal_bias="0.261"
        app:layout_constraintVertical_bias="0.498" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        app:layout_constraintEnd_toStartOf="@+id/button4"
        android:layout_marginEnd="52dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp"
        app:layout_constraintVertical_bias="0.498" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="C"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="8dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp" />
</android.support.constraint.ConstraintLayout>

用来替换的界面的代码：activity2.xml，要特别注意的就是这两个布局的对应的id要一致，否则是无法完成动画效果的

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="com.example.zjt.constraintsettransition.MainActivity"
    android:id="@+id/contentPanel">


    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="动画"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="8dp"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginStart="8dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp"
        app:layout_constraintHorizontal_bias="0.028"
        app:layout_constraintVertical_bias="0.0" />

    <Button
        android:id="@+id/button2"
        android:layout_width="87dp"
        android:layout_height="wrap_content"
        android:text="A"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="8dp"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginStart="8dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="80dp"
        app:layout_constraintHorizontal_bias="0.501" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="8dp"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginStart="8dp"
        android:layout_marginTop="80dp"
        app:layout_constraintTop_toBottomOf="@+id/button2" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="C"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="8dp"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginStart="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/button3"
        app:layout_constraintVertical_bias="0.376" />
</android.support.constraint.ConstraintLayout>

主程序代码：MainActivity.java

package com.example.zjt.constraintsettransition;

import android.os.Build;
import android.support.annotation.RequiresApi;
import android.support.constraint.ConstraintLayout;
import android.support.constraint.ConstraintSet;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.TransitionManager;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    private ConstraintSet first,second;
    private ConstraintLayout firstLayout;
    private Button start;
    boolean isFirst=true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        first=new ConstraintSet();
        second=new ConstraintSet();
        firstLayout=findViewById(R.id.contentPanel);
        start=findViewById(R.id.start);

        first.clone(firstLayout);
        second.clone(this,R.layout.activity2);
        start.setOnClickListener(new View.OnClickListener() {
            @RequiresApi(api = Build.VERSION_CODES.KITKAT)
            @Override
            public void onClick(View view) {
                if(isFirst){
                    isFirst=false;
                    TransitionManager.beginDelayedTransition(firstLayout);// 动画效果
                    second.applyTo(firstLayout);
                }else {
                    isFirst=true;
                    TransitionManager.beginDelayedTransition(firstLayout);
                    first.applyTo(firstLayout);
                }
            }
        });
    }
}

效果如图：

index.gif

在整个ConstraintLayout的使用过程中，遇到了很多的问题，问题不在与xml界面的调整，而在于代码中ConstraintSet的使用，最无法理解的地方在上面的例子就有，就是生成了新的Button后原来的Button也会受到影响，这个地方如果有什么想法欢迎与我联系。动画的扩展性就很强了，这里只是做一个简单的动画演示，实际上可以完成更多的效果，这个就需要再研究下了。另外，ConstraintLayout还有一些问题，就是如果使某个控件的一部分处于屏幕内，一部分处于屏幕外，原先使用relativelayout就很好处理了，在代码中的Layoutparams进行位置的处理皆可以，而使用ConstraintLayout这个地方就不好完成，目前我没有解决办法。（解决办法：在使用connect函数时设置好margin即可）总的来说，ConstraintLayout使得我们布局更加灵活，同时也存在一些问题，有待解决。

最后编辑于：2017.12.09 01:23:00

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,684评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,143评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,214评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,788评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,796评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,665评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,027评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,679评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,346评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,664评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,766评论 1赞 331
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,412评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,015评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,974评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,203评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,073评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,501评论 2赞 343

ConstraintLayout基础 及动态控件(动画效果)