ConstraintLayout 1.1.1 最詳細使用

劉強東發表於2017-11-09

譯為"約束佈局", 是Google在AndroidStudio2.2引入的佈局. 在AndroidStudio 2.3直接替代了之前的Activity建立的預設佈局RelativeLayout. 可以看到Google對其重視性.

特點

配合佈局編輯器,提升效率(滑鼠建立佈局, 不過由於卡頓/bug/多餘屬性等問題我還是建議程式碼)
更好的螢幕適配
1. 百分比
2. 輔助線
3. 分組顯示隱藏
4. 共同約束
5. 隱藏狀態邊距
解決佈局巢狀過多引起的效能問題(大多數時候只需要一個根佈局就能解決, 因為他擁有其他佈局的特性)

本文實時更新測試版最新特性

官方文件

佈局編輯器

ConstraintLayout是至今對AndroidStudio的佈局編輯器支援最好的佈局.

佈局編輯器皮膚

佈局編輯器左邊有個皮膚, 用於拖控制元件到佈局編輯器中

控制元件列表

在佈局編輯器的左邊就是全部的控制元件列表. 可以通過直接拖動到佈局預覽介面來建立檢視控制元件. 並且不需要你手動匯入依賴包.

佈局編輯器設定

依次介紹:

只顯示預覽
只顯示藍圖
藍圖和預覽都顯示
預覽介面顯示方向
手機螢幕型號
系統API版本
預覽介面主題
預覽介面語言
佈局變形(即詳細定製一個預覽佈局)

預覽圖和藍圖

順序依次

預覽圖主要顯示手機的實際效果(ConstraintLayout擁有佈局編輯器屬性, 所以存在預覽介面和實際應用不同的情況), 藍圖主要清晰顯示佈局的資訊

兩者都可以直接編輯佈局, 看你的喜好.

預覽介面控制

縮小
縮放百分比
放大
適應螢幕
開啟一個縮圖(可以控制預覽介面顯示範圍)
錯誤和警告提示數量

ConstraintLayout佈局屬性

這一欄是根據你選擇的ViewGroup變化的佈局屬性欄, 這裡我只介紹ConstraintLayout的佈局屬性欄, 其他的沒什麼好介紹的一看就知道了.

依次功能:

是否顯示全部約束(不管是否開啟都會顯示你選擇控制元件的約束的)
自動連線約束(AutoConnect)
刪除所有約束
推論約束(infer Constraint)
預設邊距
對齊方式
排列方式
輔助線(GuideLine)

自動連線約束

這個類似磁鐵的圖示如果處於開啟狀態. 控制元件只要一拖到佈局編輯器中就會自動建立水平和垂直方向各一條約束.

推論約束

該功能屬於一次性功能, 點選一次就會自動計算並且給當前佈局編輯器中所有沒有進行約束處理的控制元件進行水平和垂直方向各一條約束.

輔助工具

ConstraintLayout可以配合一些"輔助控制元件"使用

GuidLine

輔助線使用者是不可見的, 也沒有寬高引數(你給他設定也無效). 只是在約束佈局中做一個相對基準線而已.

<android.support.constraint.Guideline
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/guideline2"
      android:orientation="vertical"
      app:layout_constraintGuide_percent="0.41"
      />
複製程式碼

輔助線有三種屬性

begin 相對父佈局左邊邊距
end 相對父佈局右邊邊距
percent 相對父佈局百分比

app:layout_constraintGuide_begin="20dp"

app:layout_constraintGuide_end="340dp"

app:layout_constraintGuide_percent="0.055555556"
複製程式碼

輔助線有水平和垂直兩種:

Barriers

障礙物, 分為垂直和水平(類似GuidLine).

使用場景:當兩個文字並排時右側有一個按鈕, 但是兩個文字可能長度都是不確定的包裹型別. 把任何一個文字作為按鈕的約束都可能導致按鈕覆蓋住另一個文字內容. 這個時候就需要Barriers.

Barrier控制元件可以使用屬性來同時約束多個控制元件

app:constraint_referenced_ids="tv_1,tv_2"
複製程式碼

然後通過屬性指定在控制元件的方向

app:barrierDirection="right"
複製程式碼

right和left等於垂直

bottom和top等於水平

int[]	getReferencedIds()

int	getType()

void	setReferencedIds(int[] ids)

void	setType(int type)
複製程式碼

Group

組是Constraintlayout 1.1x版本增加的輔助工具, 目的在於同時分組控制多個控制元件的Visibility屬性.

xml屬性

app:constraint_referenced_ids="tv_1,tv_2"
複製程式碼

java方法

int[]	getReferencedIds()

void	setReferencedIds(int[] ids)
複製程式碼

通過以上屬性將多個控制元件的id填入, 就可以同時控制多個控制元件的隱藏和顯示

示例:

<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.jiuxing.constraintlayout.MainActivity">

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="64dp"
        android:layout_marginEnd="60dp"
        android:text="TextView"
        app:layout_constraintBottom_toTopOf="@+id/tv_1"
        app:layout_constraintEnd_toEndOf="parent" />

    <android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="151dp"
        android:layout_height="126dp"
        android:layout_marginEnd="192dp"
        android:visibility="gone"
        android:layout_marginTop="24dp"
        android:background="@color/colorAccent"
        app:constraint_referenced_ids="tv_1,tv_2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>
複製程式碼

Tip: 設定背景顏色並不影響Group組內控制元件顏色. 只單單是Visibility屬性.

使用場景: 某些情況你可能需要控制多個控制元件同步顯示或者隱藏, 在資料未載入成功時很多檢視不應該顯示給使用者(載入中佈局)

Placeholder

佔位控制元件; 通過不斷地setContent來替換檢視內容;

示例:

<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.jiuxing.constraintlayout.MainActivity">



    <android.support.constraint.Placeholder
        android:id="@+id/placeholder"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginStart="64dp"
        android:layout_marginTop="48dp"
        app:content="@+id/iv"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/iv"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:src="@color/colorAccent"
         />

</android.support.constraint.ConstraintLayout>
複製程式碼

控制元件iv和Placeholder都需要設定寬高尺寸(否者Crash), 但是具體以iv尺寸為準.
位置座標由Placeholder決定, iv可以不用設定

PlaceHolder之所以強大在於同時也提供程式碼設定內容id

// 設定內容檢視
View	getContent() 
void	setContentId(int id) 
複製程式碼

如果PlaceHolder沒有設定內容那麼同樣想顯示怎麼辦

// 設定空
void	setEmptyVisibility(int visibility) 
int	getEmptyVisibility() 
複製程式碼

示例:

要求在建立檢視的時候就設定好, 否則後面設定無效(例如在onCreate方法中就設定)

place.setEmptyVisibility(View.VISIBLE);
複製程式碼

Circular Position

涉及到三個屬性

app:layout_constraintCircle="@id/btn_invoke"
<!--圓心控制元件-->
app:layout_constraintCircleRadius="100dp"
<!--圓形半徑大小-->
app:layout_constraintCircleAngle="80"
<!--圓形的角度-->
複製程式碼

示例:

<Button
        android:id="@+id/btn_invoke"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        android:onClick="invoke"
        android:text="執行"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        />  

<Button
        android:id="@+id/btn_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="51dp"
        android:layout_marginTop="31dp"
        android:text="2"
        app:layout_constraintCircle="@id/btn_invoke"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintCircleAngle="80"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />
複製程式碼

效果圖:

使用環形定位會導致之前的約束座標失效
角度和半徑預設為零, 所以不設定角度和半徑只指定圓形就會完全重疊

強制約束

在1.1之前如果佈局屬性是wrap_content將無法遵守約束, 這一問題現在可以通過以下屬性修復了;

app:layout_constrainedWidth=”true”
複製程式碼

Percent Dimensions

說到Percent Dimensions就不得不說ConstraintLayout中的0dp問題，當控制元件設定為0dp的時候（0dp的稱呼又叫match_constraint），預設的行為是撐開（spread），佔滿可用空間，但是這個行為是可以用layout_constraintWidth_default 屬性來設定的。在 ConstraintLayout 1.0.x中，這個屬性還可以把它設定為wrap。而到了1.1.x，它又有了一個新的值：percent，允許我們設定控制元件佔據可用空間的百分比。

下面的TextView控制元件將佔據剩餘寬度的50%和剩餘高度的50%。

    <TextView
        android:id="@+id/textView6"
        android:layout_width="0dp"
        android:layout_height="0dp"
        
        app:layout_constraintHeight_default="percent"
        app:layout_constraintHeight_percent="0.5"
        
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.5" />
複製程式碼

佈局屬性

除了佈局編輯器寫佈局也應該要了解佈局的屬性, 不然有些問題你看不出來的.

編輯器屬性

該屬性並不會在Android上有任何影響, 只會影響AS的佈局編輯器座標

tools:layout_editor_absoluteY="246dp"
tools:layout_editor_absoluteX="36dp"
複製程式碼

佈局編輯器

真機上

約束

一個控制元件有四個約束點/ 十二個約束屬性(左和右有各有兩個屬性start和end以及right和left)

約束只能是同一水平下才能相互約束, 例如左和右之間能約束, 左不能和上下約束點關聯.

約束並不是相互關聯的關係. 而是

// 和父佈局關聯約束
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"

// 和其他控制元件關聯約束
app:layout_constraintLeft_toRightOf="@+id/button3"
app:layout_constraintRight_toLeftOf="@+id/button3"
app:layout_constraintTop_toBottomOf="@id/button3"
app:layout_constraintBottom_toTopOf="@id/button3"


layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
複製程式碼

文字基準線

有些控制元件是包含文字內容的, 所以約束佈局的控制元件有一個文字基準線約束. 預設是隱藏,需要點選開關顯示.

layout_constraintBaseline_toBaselineOf
複製程式碼

注意: 使用了文字基準線對齊就不需要使用上下約束了

百分比偏移

通過小數點(百分比)控制控制元件在螢幕垂直/水平的百分比位置.

注意: 只有水平位置(上下/左右約束點都新增了約束)都新增約束, 該控制元件才支援百分比偏移

app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintVertical_bias="0.69"
複製程式碼

注意: 如果是約束的ConstraintLayout, 不需要這兩個屬性也可以設定百分比偏移

邊距

一般的邊距沒什麼好講的. 和以前一樣.

android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
複製程式碼

因為約束佈局控制元件之前的關聯性太強, 如果一個佈局隱藏(gone)就可能導致整個佈局的位置移動. 所以ConstraintLayout擁有隱藏邊距屬性

ConstraintLayout中使用Gone屬性值

根據官方圖可以看出Constraintlayout如果控制元件被隱藏並不會像其他佈局一樣座標變成0,0點. 只是margin和寬高變成0.

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
複製程式碼

以上邊距屬性會根據其約束的控制元件是否是隱藏(invisible不算)來生效, 同時margin失效.

寬高比

通過設定寬或者高中的一個為match_constraint(0dp), 就可以設定控制元件的寬高比

matc_constraint的寬或高會根據另一邊的尺寸變化來符合比例

寬高比分兩種:

寬:高

app:layout_constraintDimensionRatio="2:1"
複製程式碼

很簡單就是寬比高, 預設受約束的就是match_constraint(0dp)的一邊.

受約束的會根據另一邊發生尺寸比例的變化(如果是match_constraint和wrap_content時1:1比例會發生尺寸變化成正方形)

自定義

app:layout_constraintDimensionRatio="w,2:1"
複製程式碼

我理解為顛倒了比例. w即設定比例為高比寬, h為寬比高. 實際操作體驗吧

寬高

寬高屬性值

Fixed 固定值
Wrap_Content 包裹值
Match_Constraint "0dp"

Match_Constraint

理論上ConstraintLayout的寬高不再使用match_parent這一屬性值. 取而代之的是0dp(稱為match_constraint).

**Important: **MATCH_PARENT is not supported for widgets contained in a ConstraintLayout, though similar behavior can be defined by using MATCH_CONSTRAINT with the corresponding left/right or top/bottom constraints being set to "parent".

官方說明match_parent在ConstraintLayout中不被支援

match_constraint只有在水平或者垂直擁有兩條方向的約束時才有效, 即匹配剩餘全部空間. 如果只有水平只存在一條或者沒有約束相當於wrap_content.

示例圖:

如果你強行使用編輯器會自動幫你轉換成固定dp值, 不過如果你僅僅是約束ConstraintLayout佈局並沒有問題.不能理解我說的什麼自己動手試試.

鏈模式

兩個空間相互約束就會產生一個鎖鏈. (注意佈局編輯器中是無法通過拖動約束點相互約束, 我認為是bug)

只能通過多選居中的方式或者直接XML編輯.

app:layout_constraintHorizontal_chainStyle="packed"
複製程式碼

連結在一起主要是可以設定不同的樣式達到適配父容器寬度或者高度的效果. 注: 一個鏈還有第一個控制元件才需要設定(chainStyle)樣式.

根據樣式有三種引數值:

Spread 均布(預設樣式)
Spread inside 頭尾靠邊, 其他中間均布
Packed 居中靠齊

官方有一張介紹圖

雖然看著有五個,實際上屬性還是那三個. 不過有加入權重和百分比偏移. Bias是偏移, weighted是權重.

權重

和LinearLayout的wight屬性一樣. 不過只支援spread和spread_inside有效.

layout_constraintHorizontal_weight
複製程式碼

同樣可以編輯屬性也可以滑鼠修改

寬高約束

wrap_content不受約束的限制 (這一問題在ConstraintLayout1.1被解決)

app:layout_constrainedWidth=”true|false”
app:layout_constrainedHeight=”true|false”
複製程式碼

Optimizer

需要知道的是，當我們使用 MATCH_CONSTRAINT 時，ConstraintLayout 將不得不對控制元件進行 2 次測量，而測量的操作是昂貴的。

而優化器（Optimizer）的作用就是對 ConstraintLayout 進行優化，對應設定給 ConstraintLauyout 的屬性是：

layout_optimizationLevel。

可設定的值有：

none：不應用優化。
standard：僅優化直接約束和屏障約束（預設的）。
direct：優化直接約束。
barrier：優化屏障約束。
chain：優化鏈約束（實驗）。
dimensions：優化尺寸測量（實驗）。

在設定值時，可以設定多個，如：

app:layout_optimizationLevel="direct|barrier|dimensions"
複製程式碼

ConstraintSet

修改ConstraintLayout官方不推薦使用ConstraintLayout.LayoutParams而是推薦使用ConstraintSet

ConstraintSet可以直接通過程式碼建立或改變約束/改變Margin等操作, 並且都提供方法而非成員變數.

如果你想修改ConstraintLayout中任意一個控制元件的屬性都需要進行以下三個步驟.

步驟:

克隆或者載入XMl佈局
修改屬性
應用到新的佈局上

示例:

public class MainActivity extends AppCompatActivity {
    ConstraintSet mConstraintSet = new ConstraintSet(); // create a Constraint Set
    ConstraintLayout mConstraintLayout; // cache the ConstraintLayout


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.state1);
        Context context = this;
        
        mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main);
        mConstraintSet.clone(mConstraintLayout); // 克隆一個佈局到ConstraintSet
    }

    public void onClick(View view) {
        TransitionManager.beginDelayedTransition(mConstraintLayout); // 一行程式碼新增動畫	
        mConstraintSet1.applyTo(mConstraintLayout); // 應用到新的佈局
    }
}
複製程式碼

官方示例, 但是我發現我是無效.

克隆

複製一個ConstraintLayout佈局到ConstraintSet中. 後面可以對ConstraintSet進行修改(即對複製的佈局修改).

void clone (ConstraintSet set)

void clone (ConstraintLayout constraintLayout)

void clone (Context context, 
                int constraintLayoutId)
複製程式碼

建立約束

這僅僅指的是建立一條約束, 一個控制元件可以存在n條約束. 最少兩條才能確定位置.

需要注意的是START和LEFT本身是可以並存的. 不要混用

void connect(int startID, int startSide, int endID, int endSide)

void connect(int startID, int startSide, int endID, int endSide, int margin)
複製程式碼

示例:

// 克隆佈局
mConstraintSet = new ConstraintSet();
mConstraintSet.clone(mBinding.root); 


// 用三條約束連線兩個控制元件
mConstraintSet.connect(R.id.btn_3, ConstraintSet.LEFT, R.id.btn, ConstraintSet.RIGHT, 100);
mConstraintSet.connect(R.id.btn_3, ConstraintSet.TOP, R.id.btn, ConstraintSet.TOP);
mConstraintSet.connect(R.id.btn_3, ConstraintSet.BOTTOM, R.id.btn, ConstraintSet.BOTTOM);

// 應用佈局
mConstraintSet.applyTo(mBinding.root);
複製程式碼

垂直居中

void	centerVertically(int viewId, int toView)

void	centerVertically(int centerID, 
                         int topId,  
                         int topSide,  
                         int topMargin,
                         int bottomId, 
                         int bottomSide, 
                         int bottomMargin,
                         float bias)
複製程式碼

示例: 相對父佈局垂直居中

mConstraintSet.centerVertically(R.id.btn_3, ConstraintSet.PARENT_ID);
複製程式碼

相對其他控制元件垂直居中

mConstraintSet.centerVertically(R.id.btn_3, R.id.btn);
複製程式碼

錯誤示例: 如果你使用TOP或者BOTTOM之類的屬性, 只會貼靠頂部.. 並不會居中

mConstraintSet.centerVertically(R.id.btn_3, ConstraintSet.TOP);
複製程式碼

注意如果你在第二種方法垂直居中使用了LEFT或RIGHT會導致程式停止

水平居中

水平居中同樣不能使用TOP或者BOTTOM, 並且Rtl和不包含Rtl有使用上的區別

void	centerHorizontally(int centerID, 
                           int leftId, 
                           int leftSide, 
                           int leftMargin, 
                           int rightId, 
                           int rightSide, 
                           int rightMargin,
                           float bias)

void	centerHorizontally(int viewId, 
                           int toView)
// 只能使用LEFT/RIGHT 否者Crash

void	centerHorizontallyRtl(int viewId,
                              int toView)


void	centerHorizontallyRtl(int centerID, 
                              int startId, 
                              int startSide, 
                              int startMargin, 
                              int endId, 
                              int endSide, 
                              int endMargin, 
                              float bias)
// 只能使用START/END
複製程式碼

示例:

// 居中父佈局
mConstraintSet.centerHorizontallyRtl(R.id.btn_3, ConstraintSet.PARENT_ID);

mConstraintSet.centerHorizontallyRtl(R.id.btn_3, R.id.btn, ConstraintSet.START, 0, R.id.btn_2, ConstraintSet.END, 0, 0.5f);
複製程式碼

居中

該方法不僅支援水平居中還支援垂直居中.

void center (int centerID, 
                int firstID, 
                int firstSide, 
                int firstMargin, 
                int secondId, 
                int secondSide, 
                int secondMargin, 
                float bias)
複製程式碼

寬高

可以是一個畫素值尺寸或者 WRAP_CONTENT或MATCH_CONSTRAINT

void constrainHeight (int viewId, 
                int height) // 畫素單位

void constrainWidth (int viewId, 
                int width)
複製程式碼

最大和最小寬高只在MATCH_CONSTRAINT情況下才有效果

void constrainMaxHeight (int viewId, 
                int height)


void constrainMinHeight (int viewId, 
                int height)



void constrainMaxWidth (int viewId, 
                int width)

void constrainMinWidth (int viewId, 
                int width)
複製程式碼

預設寬高: 即均布排列的時候寬度(例如weight模式下)

void constrainDefaultWidth (int viewId, 
                int width)

void constrainDefaultWidth (int viewId, 
                int width)
複製程式碼

GuidLine

建立Guideline

void create (int guidelineID,  // 給建立的guideline指定id
                int orientation) // guidline方向
複製程式碼

設定Guideline邊距

void setGuidelineEnd (int guidelineID, 
                int margin)

void setGuidelineBegin (int guidelineID, 
                int margin)

void setGuidelinePercent (int guidelineID, 
                float ratio)
複製程式碼

Barrier

void createBarrier (int id,  // id
                int direction,  // 方向
                int... referenced) // 組id
複製程式碼

設定型別

void setBarrierType (int id, 
                int type)
複製程式碼

刪除約束

void clear (int viewId, 
                int anchor)
// 刪除該空間某一約束

void clear (int viewId)
// 刪除該控制元件全部約束
複製程式碼

示例: 刪除頂部約束

mConstraintSet.clear(R.id.btn, ConstraintSet.TOP);
複製程式碼

透明度

void setAlpha (int viewId, 
                float alpha)
複製程式碼

旋轉

旋轉中心是控制元件的中心

void setRotation (int viewId, 
                float rotation)
// 以控制元件的左上角為中心旋轉

void setRotationX (int viewId, 
                float rotationX)

// 以控制元件的x軸翻轉

void setRotationY (int viewId, 
                float rotationY)
// 以控制元件的y軸翻轉
複製程式碼

縮放

以控制元件為中心, 百分比浮點數

void setScaleX (int viewId, 
                float scaleX) // 倍數關係

void setScaleY (int viewId, 
                float scaleY)
複製程式碼

偏移

以控制元件中心偏移

void setTranslation (int viewId, 
                float translationX, 
                float translationY)

void setTranslationX (int viewId, 
                float translationX)

void setTranslationY (int viewId, 
                float translationY)

void setTranslationZ (int viewId, 
                float translationZ)
// z軸偏移必須在大於21才有效
複製程式碼

設定邊距

void setMargin (int viewId, 
                int anchor, 
                int value)
複製程式碼

示例:

mConstraintSet.setMargin(R.id.btn, ConstraintSet.TOP, 200);
複製程式碼

百分比

如果想要百分比生效必須同時設定兩邊約束(例如左右或者上下)

void setHorizontalBias (int viewId, 
                float bias)

void setVerticalBias (int viewId, 
                float bias)
複製程式碼

應用

將當前ConstraintSet例項中Clone的ConstraintLayout應用到一個ConstraintLayout佈局中. 由於你是通過clone()方法來建立的ConstraintSet所以如果不使用apply()並不會改變clone的ConstraintLayout.

void applyTo (ConstraintLayout constraintLayout)
複製程式碼

載入XML

不用Clone直接載入一個XML佈局檔案.

void load (Context context, 
                int resourceId)
複製程式碼

Issues

主要介紹一些可能是Bug或者是我知識層面不夠的問題

tools命名

如果你使用了infer Constraint會發現自動生成了很多以tools開頭的屬性, 這些屬性不用去管, 不對應用有任何影響.

tools:layout_constraintTop_creator="1"
複製程式碼

控制元件無法拖動

主要是因為控制元件存在兩個左右邊距屬性(start和left或者right和end)

刪除start或者end即可. 個人認為是bug, 已經提交給Google.(我的推薦是全部都是用START和END)

佈局編輯器中相互約束

要想使用Chain兩個控制元件必須相互約束, 但是佈局編輯器中無法相互約束

但是XML直接編輯或者以下方法還是可以相互約束的, 所以個人認為是bug

控制元件消失

如果出現控制元件不在編輯器內顯示, 請檢查編輯器屬性座標.

tools:layout_editor_absoluteX="137dp"
tools:layout_editor_absoluteY="-118dp"
複製程式碼

專案需求討論 — ConstraintLayout 詳細使用教程
2019-03-04
AI
使用廣播-BroadcastReceiver最詳細解析
2018-07-31
AST
Semaphore最詳細解析
2020-10-12
史上最詳細的JavaScript事件使用指南
2015-05-19
JavaScript事件
最詳細的Log4j使用教程
2015-05-18
最詳細的 Vi 編輯器使用指南
2015-10-27
Git使用教程：最詳細、最傻瓜、最淺顯、真正手把手教！
2018-10-11
Git
openstack完整的部署（最詳細）
2024-05-04
ConstraintLayout 屬性詳解和Chain的使用
2017-05-24
AI
ChatGPT最詳細註冊教程+不註冊直接使用教程
2023-02-09
ChatGPT
圖片載入框架－Picasso最詳細的使用指南
2017-02-26
框架
Java-全網最詳細反射
2023-10-28
Java反射
JavaScript 的 Date 最詳細解讀
2016-05-06
JavaScript
全網最清晰的ConstraintLayout教程
2018-09-10
AI
史上最為詳細的javascript繼承
2019-05-16
JavaScript繼承
最詳細的spring（IOC、AOP）教程
2020-12-14
Spring
最詳細的JVM&GC講解
2017-04-12
JVMGC
最詳細的JavaScript和事件解讀
2015-03-20
JavaScript事件
可能是最詳細的字元編碼詳解
2019-04-03
字元
SourceTree詳細使用教程
2018-06-14
Git使用詳細教程
2014-10-28
Git
ConstraintLayout的使用教程
2019-01-20
AI
ConstraintLayout使用指南
2018-05-01
AI
樂Max 2詳細全面評測：最發燒！最娛樂！
2016-05-18
別找了，這是 Pandas 最詳細教程了
2020-04-06
史上最詳細的Hadoop環境搭建
2018-08-15
Hadoop
vue的事件冒泡最詳細解釋版本
2020-09-30
Vue事件
mysql 5.7配置項最詳細的解釋
2018-06-01
MySql
最全最強SpringMVC詳細示例實戰
2016-11-25
SpringMVC
最詳細的 JavaScript 開發者調查報告
2015-12-20
JavaScript
星球上最詳細的AWR解析報告
2014-08-27
Linux ls命令最詳細用法介紹
2014-07-29
Linux
最詳細的 HTTPS 科普掃盲帖
2016-03-04
HTTP
史上最詳細的一線大廠Mysql面試題詳解
2019-03-30
MySql面試題
轉 Git使用詳細教程
2019-03-20
Git
ORACLE EXPDP命令使用詳細
2012-12-26
Oracle
最詳細版圖解優先佇列（堆）
2019-04-19
圖解佇列
dubbo整合springboot最詳細入門教程
2021-09-09
Spring Boot

ConstraintLayout 1.1.1 最詳細使用

佈局編輯器

佈局編輯器皮膚

控制元件列表

佈局編輯器設定

預覽圖和藍圖

預覽介面控制

自動連線約束

推論約束

輔助工具

GuidLine

Barriers

Group

Placeholder

Circular Position

強制約束

Percent Dimensions

佈局屬性

編輯器屬性

約束

文字基準線

百分比偏移

邊距

寬高比

寬高

Match_Constraint

鏈模式

權重

寬高約束

Optimizer

ConstraintSet

克隆

建立約束

垂直居中

水平居中

居中

寬高

GuidLine

Barrier

刪除約束

透明度

旋轉

縮放

偏移

設定邊距

百分比

應用

載入XML

Issues

tools命名

控制元件無法拖動

佈局編輯器中相互約束

控制元件消失

相關文章