方法
1.layout_constraintXXX_toXXXOf
前一個xxx是該控件所在邊僧凤,后一個xxx是其他控件的所在邊即后面填寫的id控件
<img src = 'https://upload-images.jianshu.io/upload_images/4987670-665466298d9d46a7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/762/format/webp' width = '300' height = "200" />
2. 在父控件的位置
- 橫向居中用1.6
- 縱向居中用3.8
- 居中用1,3,6,8
- 橫向偏移用1.6.9(1.6必須是使用9才能生效)
- 縱向偏移用3.8.10(3.8必須使用10才能生效)
3.控件的相對位置
利用1.2.3.4.5.6.7.8進(jìn)行混合使用
4. 控件gone
如果該控隱藏了厦章,該參考控件會變成一個錨點(diǎn)幼驶,寬官硝,高,margin會失效侧甫,但是它的constrain等方法仍然有效委煤,別的控件仍然可以以它為錨點(diǎn)。
5.控件的尺寸
- 如果在寬棒卷、高設(shè)置wrap_content或者0dp都是包裹內(nèi)容
- 11.是控制該控件的尺寸,必須使layout_width,layout_height為0dp,并且必須使用1.6或者3.8
- spread:控件所有約束空間
- percent:必須配合12.使用顾孽,控件所在約束空間的大小百分比
- wrap:包裹內(nèi)容
- 13.用于控制控件的寬高比祝钢,但是必須里面首先包含1-10的一個或幾個條件才會生效,同時令其中寬或者高為0dp
1.app:layout_constraintLeft_toLeftOf="parent|控件id"
2.app:layout_constraintLeft_toRightOf="parent|控件id"
3.app:layout_constraintTop_toTopOf="parent|控件id"
4.app:layout_constraintTop_toBottomOf="parent|控件id"
5.app:layout_constraintRight_toLeftOf="parent|控件id"
6.app:layout_constraintRight_toRightOf="parent|控件id"
7.app:layout_constraintBottom_toTopOf="parent|控件id"
8.app:layout_constraintBottom_toBottomOf="parent|控件id"
9. app:layout_constraintHorizontal_bias="0.0~1.0" //橫向偏移量從左到右
10. app:layout_constraintVertical_bias="0.0~1.0" //縱向偏移量從上到下
11.app:layout_constraintWidth_default="spread|percent|wrap" 尺寸
12.app:layout_constraintWidth_percent="0.0-1.0"
13.app:layout_constraintDimensionRatio="1" //寬高比
6. 鏈
- spread: 將剩余空間平均分配為n+2個空間
- spread inside:將剩余空間分配為n-1個空間(即去掉第一和最后一個相對父布局的空間位置)
- packed:將剩余空間分配給第一個和最后一個相對父布局的左右兩邊緣的空間
- 剩余空間左右分配問題:在packed模式若厚,可以通過 app:layout_constraintHorizontal_bias="0.0-1",其他模式下是沒有人任何效果的
- 鏈?zhǔn)角闆r下的控件權(quán)重分配:app:layout_constraintHorizontal_weight=""設(shè)置該方法后鏈的style樣式失效拦英,因為沒有了剩余分配空間,這時候與linearlayout中權(quán)重用法一樣测秸。
//必須一一對應(yīng)關(guān)系疤估,才能形成chain,即A控件必須對父布局和相對B布局霎冯,B控件相對A铃拇、C布局,C控件相對B,父布局沈撞,否則layout_constraintHorizontal_chainStyle="spread"無效
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/a"
android:layout_width="80dp"
android:layout_height="40dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="A"
app:layout_constraintHorizontal_chainStyle="spread|spread_inside|packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/b" />
<TextView
android:id="@+id/b"
android:layout_width="80dp"
android:layout_height="40dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="B"
app:layout_constraintLeft_toRightOf="@+id/a"
app:layout_constraintRight_toLeftOf="@+id/c" />
<TextView
android:id="@+id/c"
android:layout_width="80dp"
android:layout_height="40dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="C"
app:layout_constraintLeft_toRightOf="@+id/b"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
7.圓形布局
從時鐘12點(diǎn)為0慷荔,順時針旋轉(zhuǎn)角度進(jìn)行旋轉(zhuǎn)(可以用來設(shè)置衛(wèi)星菜單布局)
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/a"
android:layout_width="80dp"
android:layout_height="40dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/b"
android:layout_width="80dp"
android:layout_height="40dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="B"
app:layout_constraintCircle="@id/a"
app:layout_constraintCircleAngle="300"
app:layout_constraintCircleRadius="100dp" />
<TextView
android:id="@+id/c"
android:layout_width="80dp"
android:layout_height="40dp"
android:background="@color/colorPrimaryDark"
android:gravity="center"
android:text="C"
app:layout_constraintCircle="@id/a"
app:layout_constraintCircleAngle="80"
app:layout_constraintCircleRadius="100dp" />
</android.support.constraint.ConstraintLayout>
GuidLine(基準(zhǔn)線)
- guidline只是虛擬的線,即使添加了寬高缠俺,背景也不會顯示出來
- 基準(zhǔn)線的位置可以有兩個方式來確定 app:layout_constraintGuide_percent="0.33"显晶、 app:layout_constraintGuide_begin="130dp"
- 控件對在該基準(zhǔn)線上進(jìn)行位置確定
<android.support.constraint.Guideline
android:id="@+id/guideline1"
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.33"
/>
<android.support.constraint.Guideline
android:id="@+id/guideline2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/colorPrimaryDark"
android:orientation="horizontal"
app:layout_constraintGuide_begin="130dp" />
<TextView
android:id="@+id/a"
android:layout_width="80dp"
android:layout_height="40dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="A"
app:layout_constraintLeft_toLeftOf="@id/guideline1"
app:layout_constraintTop_toBottomOf="@id/guideline2" />
group
- 虛擬分組控件,可以指定指引的id,從而對該組控件進(jìn)行操作壹士,從而統(tǒng)一處理磷雇,從而不需要對控件一個個做操作
- 多個group,如果多個group含有相同id,那么以下面為主墓卦。
<android.support.constraint.Group
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="a,c"
android:visibility="gone"/>
<android.support.constraint.Group
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="a,d"
android:visibility="gone"/>
<TextView
android:id="@+id/a"
android:layout_width="80dp"
android:layout_height="40dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="A" />
<TextView
android:id="@+id/b"
android:layout_width="80dp"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="B"
app:layout_constraintTop_toBottomOf="@id/a" />
<TextView
android:id="@+id/c"
android:layout_width="80dp"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="C"
app:layout_constraintTop_toBottomOf="@id/b" />
<TextView
android:id="@+id/d"
android:layout_width="80dp"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="D"
app:layout_constraintTop_toBottomOf="@id/c" />
Placeholder
1.占位布局倦春,本身不繪制任何內(nèi)容,通過設(shè)置app:content="id",將原來id繪制在這個位置上落剪,原來的view被gone掉了睁本。
<TextView
android:id="@+id/a"
android:layout_width="80dp"
android:layout_height="40dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="A" />
<TextView
android:id="@+id/b"
android:layout_width="80dp"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="B"
app:layout_constraintTop_toBottomOf="@id/a" />
<android.support.constraint.Placeholder
android:id="@+id/placeholder"
android:layout_width="80dp"
android:layout_height="40dp"
android:layout_marginTop="40dp"
app:content="@+id/b"
app:layout_constraintTop_toBottomOf="@id/b" />
<TextView
android:id="@+id/c"
android:layout_width="80dp"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="C"
app:layout_constraintLeft_toRightOf="@id/placeholder"
app:layout_constraintTop_toTopOf="@+id/placeholder" />
<TextView
android:id="@+id/d"
android:layout_width="80dp"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="D"
app:layout_constraintTop_toBottomOf="@id/c" />
Barrier
1.其中在a,b上做障礙,c相對barrier位置忠怖,這樣可以解決控件遮蔽問題呢堰,可以用于用戶密碼和用戶姓名輸入框的對齊。
<android.support.constraint.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="a,b" />
<TextView
android:id="@+id/a"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="Abababababababa" />
<TextView
android:id="@+id/b"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="Bfafafafafafafafafafafafafafafafafafaf"
app:layout_constraintTop_toBottomOf="@id/a" />
<TextView
android:id="@+id/c"
android:layout_width="80dp"
android:layout_height="100dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="C"
app:layout_constraintLeft_toLeftOf="@+id/barrier" />