topo pla width 邊界 升級 ole 生效 eof -a

一、概述大發888網站開發 haozbbs.com Q1446595067

ConstraintLayout，即約束布局, 已經推出很久了。布局方式與RelativeLayout有點類似，但可以說是RelativeLayout的升級版，ConstraintLayout可以完全代替其他布局, 減少布局的層級, 優化渲染性能。在新版Android Studio中, ConstraintLayout已替代RelativeLayout, 成為HelloWorld項目的默認布局。
二、添加依賴

新版本的Android studio新建工程的時候，默認會添加依賴，並且默認的布局activity_main.xml中的根布局RelativeLayout已被替換為ConstraintLayout。如果沒有依賴ConstraintLayout，就需要手動引入ConstraintLayout，在build.gradle中加入：

dependencies {
...
implementation ‘com.android.support.constraint:constraint-layout:1.1.2‘
}

1
2
3
4

三、屬性介紹

1. 常用屬性

下面是常用屬性介紹，更多參見：values.xml，使用栗子見：normal.xml

layout_constraintLeft_toLeftOf // 左邊左對齊
layout_constraintLeft_toRightOf // 左邊右對齊
layout_constraintRight_toLeftOf // 右邊左對齊
layout_constraintRight_toRightOf // 右邊右對齊

layout_constraintTop_toTopOf // 上邊頂部對齊
layout_constraintTop_toBottomOf // 上邊底部對齊
layout_constraintBottom_toTopOf // 下邊頂部對齊
layout_constraintBottom_toBottomOf // 下邊底部對齊
layout_constraintStart_toEndOf // 起始邊向尾部對齊
layout_constraintStart_toStartOf // 起始邊向起始邊對齊
layout_constraintEnd_toStartOf // 尾部向起始邊對齊
layout_constraintEnd_toEndOf // 尾部向尾部對齊
layout_constraintBaseline_toBaselineOf // 文字的底部線對齊，用於含文本的控件對齊基線
layout_constraintDimensionRatio // 寬高比"2:1"、"H,2:1"或"W,2:1"

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

2. Barrier

Barrier是一個看不見的視圖，如果其引用形成Barrier的視圖的大小或位置發生變化，則Barrier將其大小調整為所引用視圖的最大高度或寬度。就像一個屏障一樣，阻止一個或者多個控件越過自己，當某個控件要越過自己的時候，Barrier會自動移動，避免自己被覆蓋。Barrier可以是垂直或水平的，並且可以創建到引用視圖的頂部、底部、左側或右側。以下示例可以看出，當調整控件flow1和flow2的大小或位置時，左側Barrier（豎線陰影）調整其位置。這裏的控件see約束在一左一右兩個Barrier的正中，為了更好地體現Barrier的位置變化。
barrier

android:id="@+id/id_barrier1"
android.support.constraint.Barrier
android:id="@+id/id_barrier1"
android:layout_height="wrap_content"
app:barrierAllowsGoneWidgets="true"
app:barrierDirection="right"
app:constraint_referenced_ids="flow1,flow2" />

1
2
3
4
5
6
7

這是Barrier的用法，這裏就不貼詳細代碼了，詳細代碼見barrier.xml。下面是這裏用到的attr介紹：

<attr format="boolean" name="barrierAllowsGoneWidgets"/> <!-- 定義在引用形成Barrier的視圖gone時是否仍然有效 -->
<attr format="enum" name="barrierDirection"> <!-- 定義在引用形成Barrier的視圖相對位置 -->
<enum name="left" value="0"/>
<enum name="right" value="1"/>
<enum name="top" value="2"/>
<enum name="bottom" value="3"/>
<enum name="start" value="5"/>
<enum name="end" value="6"/>
</attr>
<attr format="string" name="constraint_referenced_ids"/> <!-- 是用來包含形成Barrier的視圖ID列表 -->

1
2
3
4
5
6
7
8
9
10

3. Guideline

Guidelines可以簡化視圖布局的對齊方式，特別是如果您在許多元素上重復使用了相同的邊界值。Guidelines可以是垂直或水平的，可以指定一個開始的dp值和結束的dp值或者可以相對於屏幕的百分比。使用方法見下面的栗子：
guideline

android:id="@+id/guideline1"
android.support.constraint.Guideline
android:id="@+id/guideline1"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="150dp"/>

1
2
3
4
5
6

這裏用了4個GuideLine，詳細代碼見guideline.xml。下面是這裏用到的attr介紹：

<attr format="dimension" name="layout_constraintGuide_begin"/> <!-- 距離屏幕開始尺寸，如：100dp -->
<attr format="dimension" name="layout_constraintGuide_end"/> <!-- 距離屏幕結束尺寸，如：100dp -->
<attr format="float" name="layout_constraintGuide_percent"/> <!-- 距離屏幕開始比例，如：0.85 -->

1
2
3

4. Chains

Chains 鏈是一種特殊的約束讓多個 chains 鏈連接的 Views 能夠平分剩余空間位置。在 Android 傳統布局特性裏面最相似的應該是 LinearLayout 中的權重比 weight ，但 Chains 鏈能做到的遠遠不止權重比 weight 的功能。使用方法見下面的栗子：
chains
這裏體現了Chains的常規用法，詳情見chains.xml。下面是這裏用到的attr介紹：

<attr format="enum" name="layout_constraintHorizontal_chainStyle"> <!-- 橫向，默認spread -->
<enum name="spread" value="0"/>
<enum name="spread_inside" value="1"/>
<enum name="packed" value="2"/>
</attr>
<attr format="enum" name="layout_constraintVertical_chainStyle"> <!-- 縱向，默認spread -->
<enum name="spread" value="0"/>
<enum name="spread_inside" value="1"/>
<enum name="packed" value="2"/>
</attr>

1
2
3
4
5
6
7
8
9
10

5. Group

Group幫助你對一組控件進行設置。最常見的情況是控制一組控件的visibility。你只需把控件的id添加到Group，就能同時對裏面的所有控件進行操作。使用方法見下面的栗子：

android:id="@+id/group"
android.support.constraint.Group
android:id="@+id/group"
android:layout_height="wrap_content"
app:constraint_referenced_ids="flow1,flow2" />

1
2
3
4
5

通過constraint_referenced_ids指定統一控制的控件，如果設置group不可見，flow1和flow2也將變為不可見，詳情見group.xml。

6. Placeholder

Placeholder就是用來一個占位的東西，它可以把自己的內容設置為ConstraintLayout內的其它view。因此它用來寫布局的模版，也可以用來動態修改UI的內容。
首先編寫模板placeholder_template.xml，如下：

<?xml version="1.0" encoding="utf-8"?>
<merge 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">

<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

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

8. 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() {@Override
  br/>@Override
  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

ConstraintLayout的大發888網站開發使用介紹，持續更新