約束佈局ConstraintLayout用起來!!!

Google其實很早就推出了約束佈局,主要是爲了減少佈局嵌套,優化佈局性能和渲染時間,同時又有一些豐富的屬性,如角度定位,那麼我們很有必要了解並去使用它!!!
約束佈局ConstraintLayout 是一個ViewGroup,可以在Api9以上的Android系統使用它,它的出現主要是爲了解決佈局嵌套過多的問題,以靈活的方式定位和調整小部件。從 Android Studio 2.3 起,官方的模板默認使用 ConstraintLayout。

相對定位

常用的一些屬性:
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_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

舉個例子
tv1使用
layout_constraintLeft_toLeftOf=@id/tv2
意思 就是tv1的左邊與tv2左邊對齊
同理
layout_constraintLeft_toRightOf=@id/tv2
tv1的左邊與tv2在的右邊,也就是tv1在tv2的右邊

角度定位

角度定位指的是可以用一個角度和一個距離來約束兩個空間的中心

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintCircle="@+id/TextView1"
        app:layout_constraintCircleAngle="120"
        app:layout_constraintCircleRadius="150dp" />

上面例子中的TextView2用到了3個屬性:
app:layout_constraintCircle="@+id/TextView1"
app:layout_constraintCircleAngle=“120”(角度)
app:layout_constraintCircleRadius=“150dp”(距離)
指的是TextView2的中心在TextView1的中心的120度,距離爲150dp,效果如下:
在這裏插入圖片描述

邊距

  • 常用margin
    ConstraintLayout的邊距常用屬性如下:
    android:layout_marginStart
    android:layout_marginEnd
    android:layout_marginLeft
    android:layout_marginTop
    android:layout_marginRight
    android:layout_marginBottom

使用起來要注意添加約束位置

  • goneMargin
  • goneMargin主要用於約束的控件可見性被設置爲gone的時候使用的margin值,屬性如下:
    layout_goneMarginStart
    layout_goneMarginEnd
    layout_goneMarginLeft
    layout_goneMarginTop
    layout_goneMarginRight
    layout_goneMarginBottom
<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/TextView1"
        .../>

    <TextView
        android:id="@+id/TextView2"
        ...
        app:layout_constraintLeft_toRightOf="@+id/TextView1"
        app:layout_goneMarginLeft="10dp"
        />

</android.support.constraint.ConstraintLayout>

在這裏插入圖片描述
這個時候把TextView1的可見性設爲gone,效果如下
在這裏插入圖片描述
左邊會有一個10dp距離

居中和偏移

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"

ConstraintLayout還提供了另外一種偏移的屬性:
layout_constraintHorizontal_bias 水平偏移
layout_constraintVertical_bias 垂直偏移

<TextView
        android:id="@+id/TextView1"
        ...
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

效果如下:
在這裏插入圖片描述
假如現在要實現水平偏移,給TextView1的layout_constraintHorizontal_bias賦一個範圍爲 0-1 的值,假如賦值爲0,則TextView1在佈局的最左側,假如賦值爲1,則TextView1在佈局的最右側,假如假如賦值爲0.5,則水平居中,假如假如賦值爲0.3,則更傾向於左側。
垂直偏移同理。

尺寸約束

使用wrap_content,讓控件自己計算大小
當控件的高度或寬度爲wrap_content時,可以使用下列屬性來控制最大、最小的高度或寬度:
android:minWidth 最小的寬度
android:minHeight 最小的高度
android:maxWidth 最大的寬度
android:maxHeight 最大的高度
注意!當ConstraintLayout爲1.1版本以下時,使用這些屬性需要加上強制約束,如下所示:
app:constrainedWidth=”true”
app:constrainedHeight=”true”

使用 0dp (MATCH_CONSTRAINT)
官方不推薦在ConstraintLayout中使用match_parent,可以設置 0dp
(MATCH_CONSTRAINT) 配合約束代替match_parent,舉個例子

寬高比

當寬或高至少有一個尺寸被設置爲0dp時,可以通過屬性layout_constraintDimensionRatio設置寬高比,

<TextView
        android:id="@+id/TextView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

正方形如是

除此之外,在設置寬高比的值的時候,還可以在前面加W或H,分別指定寬度或高度限制。 例如:
app:layout_constraintDimensionRatio="H,2:3"指的是 高:寬=2:3
app:layout_constraintDimensionRatio="W,2:3"指的是 寬:高=2:3

如果兩個或以上控件通過下圖的方式約束在一起,就可以認爲是他們是一條鏈(圖爲橫向的鏈,縱向同理)。

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/TextView2" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView1"
        app:layout_constraintRight_toLeftOf="@+id/TextView3"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView2"
        app:layout_constraintRight_toRightOf="parent" />

在這裏插入圖片描述
一條鏈的第一個控件是這條鏈的鏈頭,我們可以在鏈頭中設置 layout_constraintHorizontal_chainStyle來改變整條鏈的樣式。chains提供了3種樣式,分別是:
CHAIN_SPREAD —— 展開元素 (默認);
CHAIN_SPREAD_INSIDE —— 展開元素,但鏈的兩端貼近parent;
CHAIN_PACKED —— 鏈的元素將被打包在一起。

在這裏插入圖片描述
權重鏈:
app:layout_constraintHorizontal_weight

<TextView
    android:id="@+id/TextView2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/TextView1"
    app:layout_constraintRight_toLeftOf="@+id/TextView3"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintHorizontal_weight="3" />

<TextView
    android:id="@+id/TextView3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/TextView2"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintHorizontal_weight="4" />

在這裏插入圖片描述

輔助特性

1 Optimizer
當我們使用 MATCH_CONSTRAINT 時,ConstraintLayout 將對控件進行 2 次測量,ConstraintLayout在1.1中可以通過設置 layout_optimizationLevel 進行優化,可設置的值有:
none:無優化
standard:僅優化直接約束和屏障約束(默認)
direct:優化直接約束
barrier:優化屏障約束
chain:優化鏈約束
dimensions:優化尺寸測量

1 Optimizer

當我們使用 MATCH_CONSTRAINT 時,ConstraintLayout 將對控件進行 2 次測量,ConstraintLayout在1.1中可以通過設置 layout_optimizationLevel 進行優化,可設置的值有:
none:無優化
standard:僅優化直接約束和屏障約束(默認)
direct:優化直接約束
barrier:優化屏障約束
chain:優化鏈約束
dimensions:優化尺寸測量

**

2 Barrier

**

在這裏插入圖片描述
假設有3個控件ABC,C在AB的右邊,但是AB的寬是不固定的,這個時候C無論約束在A的右邊或者B的右邊都不對。當出現這種情況可以用Barrier來解決。Barrier可以在多個控件的一側建立一個屏障,如下所示:

在這裏插入圖片描述

<TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/TextView1" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="TextView1,TextView2" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/barrier" />

app:barrierDirection爲屏障所在的位置,可設置的值有:bottom、end、left、right、start、top
app:constraint_referenced_ids爲屏障引用的控件,可設置多個(用“,”隔開)

3 Group

Group可以把多個控件歸爲一組,方便隱藏或顯示一組控件,舉個例子:

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView1" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@id/TextView2" />
   <android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        app:constraint_referenced_ids="TextView1,TextView3" />

在這裏插入圖片描述
在這裏插入圖片描述

4 Placeholder

<android.support.constraint.Placeholder
        android:id="@+id/placeholder"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:content="@+id/textview"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#cccccc"
        android:padding="16dp"
        android:text="TextView"
        android:textColor="#000000"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

新建一個Placeholder約束在屏幕的左上角,新建一個TextView約束在屏幕的右上角,在Placeholder中設置 app:content="@+id/textview",這時TextView會跑到屏幕的左上角

5 Guideline

Guildline像輔助線一樣,在預覽的時候幫助你完成佈局(不會顯示在界面上)。
Guildline的主要屬性:
android:orientation 垂直vertical,水平horizontal
layout_constraintGuide_begin 開始位置
layout_constraintGuide_end 結束位置
layout_constraintGuide_percent 距離頂部的百分比(orientation = horizontal時則爲距離左邊)
舉個例子

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

<android.support.constraint.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

guideline1爲水平輔助線,開始位置是距離頂部50dp,guideline2位垂直輔助線,開始位置爲屏幕寬的0.5(中點位置),效果如下
在這裏插入圖片描述
參考鏈接:https://www.jianshu.com/p/17ec9bd6ca8a

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章