ConstraintLayout的大发888网站开发使用介绍，持续更新

1
2
3
4
5

通过constraint_referenced_ids指定统一控制的控件，如果设置group不可见，flow1和flow2也将变为不可见，详情见group.xml。

1. Placeholder

Placeholder就是用来一个占位的东西，它可以把自己的内容设置为ConstraintLayout内的其它view。因此它用来写布局的模版，也可以用来动态修改UI的内容。
首先编写模板placeholder_template.xml，如下：

<android.support.constraint.Placeholder
    android:id="@+id/template_banner"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:content="@+id/banner"
    app:layout_constraintDimensionRatio="w,1:3"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

</merge>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

然后编写真正的布局placeholder.xml，在该布局中include模板布局，注意这里的ImageView没有进行任何约束，由模板来控制。

<?xml version="1.0" encoding="utf-8"?>
<layout>

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include
        android:id="@+id/template"
        layout="@layout/placeholder_template" />

    <ImageView
        android:id="@+id/banner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#1a000000"
        android:text="xxx" />

    <Button
        android:id="@+id/change"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="change"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

</layout>

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

当点击change的时候在代码里面动态修改PlaceHolder的contentId为text，效果如下：
placeholder

1. Circular Positioning

Circular Positioning顾名思义，它可以约束一个view相对于另一个view的弧度和半径。我们直接来看使用方法，如下：

<?xml version="1.0" encoding="utf-8"?>
<layout>

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/center"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:background="#612"
        android:gravity="center"
        android:textColor="@android:color/white"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <ImageView
        android:id="@+id/img"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher_round"
        app:layout_constraintCircle="@+id/center"
        app:layout_constraintCircleAngle="120"
        app:layout_constraintCircleRadius="90dp" />

</android.support.constraint.ConstraintLayout>

</layout>

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

这里定义了一个ImageView，约束为以TextView为圆心，90dp半径，120度角。然后在activity中不停地改变ImageView的角度，就能看到ImageView绕TextView旋转。如果没有ConstraintLayout的这个新功能的话，你可能会用自定义view来实现。效果如下：
circularpositioning

1. ConstraintSet

ConstraintSet能使我们在代码中轻松地改变控件的位置大小，再也不用LayoutParams了。。我们直接来看使用方法，很简单，我们直接看ConstraintSetActivity.java代码，如下：（这里省略布局代码，详情见：constraint_set.xml）

package com.rhino.constraintlayoutdemo;

import android.databinding.DataBindingUtil;
import android.os.Bundle;
import android.support.constraint.ConstraintSet;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

import com.rhino.constraintlayoutdemo.databinding.ConstraintSetBinding;

/**

• @author LuoLin
• @since Create on 2018/7/5.
  */
  public class ConstraintSetActivity extends AppCompatActivity {

  private ConstraintSetBinding binding;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  binding = DataBindingUtil.setContentView(this, R.layout.constraint_set);
  binding.change.setOnClickListener(new View.OnClickListener() {br/>@Override
  public void onClick(View v) {
  change();
  }
  });
  }

  private void change() {
  // 首先，要声明一下ConstraintSet对象
  ConstraintSet constraintSet = new ConstraintSet();
  // 然后clone，会有四个clone方法,可以任选其一
  // constraintSet.clone(ConstraintLayout constraintLayout);
  // constraintSet.clone(ConstraintSet set);
  // constraintSet.clone(Context context, int constraintLayoutId);
  // constraintSet.clone(Constraints constraints);
  constraintSet.clone(binding.constraintLayout);

  // set.connect(int startID, int startSide, int endID, int endSide, int margin);
  // 设置flow1控件的顶边与flow2的底边对齐,且之间margin值是50px:
  constraintSet.connect(binding.flow1.getId(), ConstraintSet.TOP, binding.flow2.getId(), ConstraintSet.BOTTOM, 50);
  
  // set.centerHorizontally(int viewId, int toView)
  // 设置flow2水平剧中于parent
  constraintSet.centerVertically(R.id.flow2, ConstraintSet.PARENT_ID);
  
  // set.constrainHeight(int viewId, int height);
  // 设置flow1的高度为120px
  constraintSet.constrainHeight(R.id.flow1, 300);
  
  // ...还有很多其他方法，可以自行尝试一下
  
  // 最后,apply一下使设置生效
  constraintSet.applyTo(binding.constraintLayout);

  }
  }

  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
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58

接下来我们看下运行效果：
constraintset

原文地址：http://blog.51cto.com/13860262/2139411