關於ConstraintLayout的文章網上一抓一大把,並且ConstraintLayout在16年就已經出來了,可是我一直沒有試着去使用(別問我爲何不去使用,固然是由於懶啊)。畢竟前面的LinearLayout搭配RelativeLayout用習慣了,可是畢竟能減小布局的嵌套。仍是要抱着多學習的方式去接觸。因此寫下文章做爲總結。html
你們都知道AS在寫相關佈局的時候,有二種方式:android
就是在這裏進行拖控件,各類操做,由於在之前RelativeLayout和LinearLayout的年代,本身拖會自動幫咱們添加各類屬性值不說,並且還很不方便,可是對於ConstraintLayout來講添加各類約束在這裏操做反而很方便,並且這裏的功能面板也增長了不少新功能,方便了不少。git
固然我也很少說,貼上郭霖大神寫得在這裏功能面板裏面對ConstraintLayout 各類操做方式: 操做面板拖拽方式來使用ConstraintLayoutgithub
這種更爲你們使用,而我這裏也更多的是直接寫代碼的方式。bash
在約束佈局中,一個控件如何來肯定本身的位置呢,有人可能說直接寫死讓它在界面的(XXX,XXX)位置不就行了麼。app
好比在拖拽界面,咱們把一個TextView拖到了界面中間。less
咱們發現這個TextView的確在中間了,這時候咱們看下它的代碼:ide
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我在哪裏"
tools:layout_editor_absoluteX="164dp"
tools:layout_editor_absoluteY="263dp" />
</android.support.constraint.ConstraintLayout>
複製代碼
咱們發現了:函數
tools:layout_editor_absoluteX="164dp"
tools:layout_editor_absoluteY="263dp"
複製代碼
的確咱們告訴了TextView的左上角的座標,這個TextView的確能夠肯定了位置,可是這二個屬性只是單純的進行演示,在真機操做的時候是無效的,就像"tools:text"同樣,能夠在寫佈局的時候方便查看TextView顯示的文字,可是實際運行app的時候不會有相應內容。佈局
並且咱們也能夠看到佈局文件中有錯誤提示,也告訴咱們在真實運行時候會跳到(0,0)位置:
This view is not constrained, it only has designtime positions, so it will jump to (0,0) unless you add constraints less...
以下圖所示:
咱們怎麼來肯定它們的位置?好比咱們紅色的矩形A,咱們是否是告訴它:你的左邊靠着外面界面的左邊,你的頂邊靠着外面界面的頂邊(而後是否是A就處在如今這個位置了)。綠色的矩形B咱們能夠告訴它:你的右邊靠着外面界面的右邊,你的底邊靠着外面界面的底邊(而後B就處在瞭如今這個位置)。
因此基本操做就是:肯定某個控件二個邊的位置(好比靠在哪一個控件旁邊)。
咱們來看最簡單的基本操做: layout_constraint[本身位置]_[目標位置]="[目標ID]"
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
複製代碼
舉個例子:
好比咱們A按鈕已經肯定好位置了。咱們如今要放B按鈕,就像咱們上面說的,咱們B按鈕的二個邊的位置,咱們能夠設置讓B按鈕的左邊靠着A按鈕的右邊(至關於B按鈕的左邊與A按鈕的右邊處於同一位置)。
<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
app:layout_constraintLeft_toRightOf="@+id/buttonA" />
複製代碼
咱們能夠看到app:layout_constraintLeft_toRightOf="@+id/buttonA"
,B的left
與id
爲buttonA
的控件的right
相同位置。因此B的左側就和A的右側貼在了一塊兒。
咱們發現上面還有一個layout_constraintBaseline_toBaselineOf
,直接看下圖就能夠理解全部相關的屬性:
若是是相對於父佈局,咱們也能夠不寫入另一個控件的id值,直接填parent值就能夠了
<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/button" ...
app:layout_constraintLeft_toLeftOf="parent"
/>
<android.support.constraint.ConstraintLayout/>
複製代碼
因此以上就是基本的操做。咱們接下來看下其餘的特殊屬性。
好比咱們上面的A和B按鈕經過了app:layout_constraintLeft_toRightOf
拼接在一塊兒了,可是我同時但願A和B按鈕中間能空一些距離,以下圖所示:
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
複製代碼
這時候就又會有一個問題,若是這時候A的visible
爲gone
,這時候B的位置就會自動往左邊了。由於A的所佔的寬度沒有了(可是A在裏面對於其餘控件的約束性都是仍是存在的)
gone
的時候,咱們可讓B的margin值是根據如下的屬性值:
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
複製代碼
咱們上面提過,二個邊的位置肯定好了(也能夠說二個邊的位置被約束了),咱們就能夠肯定這個控件的相應位置,並且還能夠經過margin的改變,來繼續調節控件的位置。那若是我這時候是三個邊約束或者四個邊都約束了呢,好比:
<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/button" ...
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent/> <android.support.constraint.ConstraintLayout/> 複製代碼
咱們讓按鈕的左邊與父佈局的左邊對齊,讓按鈕的右邊與父佈局的右邊對齊。這時候由於不是單純的一邊對齊,而是相同直線上的二個邊都被約束了。因此按鈕沒法緊靠着左邊的或者右邊的其中一個邊界,因此這時候,這個按鈕就會居於二個約束邊界的中間位置。以下圖所示:
layout_constraintHorizontal_bias
layout_constraintVertical_bias
複製代碼
分別是水平和垂直方向上的所佔比例。
<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/button" ...
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent/> </android.support.constraint.ConstraintLayout> 複製代碼
有些需求咱們可能須要讓控件以某個控件爲中心,繞着進行佈局,以下圖所示:
layout_constraintCircle : 引用另外一個控件的id
layout_constraintCircleRadius : 距離另一個控件中心的距離
layout_constraintCircleAngle : 應該在哪一個角度(從0到360度)
複製代碼
<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
app:layout_constraintCircle="@+id/buttonA"
app:layout_constraintCircleRadius="100dp"
app:layout_constraintCircleAngle="45" />
複製代碼
您能夠爲ConstraintLayout自己定義最小和最大尺寸:
android:minWidth設置佈局的最小寬度
android:minHeight設置佈局的最小高度
android:maxWidth設置佈局的最大寬度
android:maxHeight設置佈局的最大高度
複製代碼
這些最小和最大尺寸將在ConstraintLayout使用
能夠經過以3種不一樣方式設置android:layout_width
和android:layout_height
屬性來指定控件的尺寸:
WRAP_CONTENT(在1.1中添加)
若是設置爲WRAP_CONTENT,則在1.1以前的版本中, 約束不會限制生成的尺寸值。可是在某些狀況下,您可能須要使用WRAP_CONTENT,但仍然執行約束來限制生成的尺寸值。在這種狀況下,你能夠添加一個相應的屬性:
應用:layout_constrainedWidth =」真|假」
應用:layout_constrainedHeight =」真|假」
複製代碼
MATCH_CONSTRAINT尺寸(也就是0dp)(在1.1中添加)
設置爲MATCH_CONSTRAINT時,默認是大小是佔用全部可用空間。有幾個額外的修飾符可用:
layout_constraintWidth_min和layout_constraintHeight_min:將設置此維度的最小尺寸
layout_constraintWidth_max和layout_constraintHeight_max:將設置此維度的最大尺寸
layout_constraintWidth_percent和layout_constraintHeight_percent:將設置此維度的大小爲父級的百分比
複製代碼
說到Percent Dimensions就不得不說ConstraintLayout中的0dp問題,當控件設置爲0dp的時候(0dp的稱呼又叫match_constraint),默認的行爲是撐開(spread),佔滿可用空間,可是這個行爲是能夠用layout_constraintWidth_default 屬性來設置的。在 ConstraintLayout 1.0.x中,這個屬性還能夠把它設置爲wrap。而到了1.1.x,它又有了一個新的值:percent,容許咱們設置控件佔據可用空間的百分比。
(注意:這在1.1-beta1和1.1-beta2中layout_constraintWidth_default是必須的,可是若是percent屬性被定義,則在如下版本中不須要,而後將layout_constraintWidth_percent或layout_constraintHeight_percent屬性設置爲介於0和1之間的值)
下面的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" />
複製代碼
您還能夠控制控件的height或者width這二個值,讓其中一個值與另一個值的成特定的比例。爲此,須要至少將一個值設置爲0dp(即,MATCH_CONSTRAINT),並將屬性layout_constraintDimensionRatio設置爲給定比率。例如:
<Button android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1" />
複製代碼
這樣這個按鈕的寬和高是同樣大小的。
Ratio能夠設置爲:
若是兩個維都設置爲MATCH_CONSTRAINT(0dp),則也可使用比率: 在這種狀況下,系統設置知足全部約束條件的最大尺寸並保持指定的寬高比。
爲了約束一個特定的邊,能夠根據另外一個邊的大小來限定寬度或高度: 能夠經過在比率前面添加字母W(用於限制寬度)或H(用於限制高度),用逗號分隔來指示哪一邊應該受到約束:
<Button android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
複製代碼
將按照16:9的比例設置按鈕的高度,而按鈕的寬度將匹配父佈局的約束。
鏈在單個軸(水平或垂直)中提供相似組的行爲。
layout_constraintHorizontal_chainStyle
或layout_constraintVertical_chainStyle
時,鏈的行爲將根據指定的樣式進行更改(默認爲CHAIN_SPREAD)。
<?xml version="1.0" encoding="utf-8"?>
<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">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AAAA"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/textView3"
/>
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BBBB"
app:layout_constraintEnd_toStartOf="@id/textView4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/textView2" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CCCC"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/textView3" />
</android.support.constraint.ConstraintLayout>
複製代碼
效果以下:
Barrier是一個虛擬的輔助控件,它能夠阻止一個或者多個控件越過本身,就像一個屏障同樣。當某個控件要越過本身的時候,Barrier會自動移動,避免本身被覆蓋。
關於這個控件其餘文章有詳細的介紹,我直接附上地址: ConstraintLayout之Barrier。
Group幫助你對一組控件進行設置。最多見的狀況是控制一組控件的visibility。你只需把控件的id添加到Group,就能同時對裏面的全部控件進行操做。
<android.support.constraint.ConstraintLayout ...>
<TextView
android:id=」@+id/text1" ... /> <TextView android:id=」@+id/text2" ... />
<android.support.constraint.Group
android:id=」@+id/group」
...
app:constraint_referenced_ids=」text1,text2" /> </android.support.constraint.ConstraintLayout> 複製代碼
此時若是咱們調用group.setVisibility(View.GONE);
那麼text1 和 text2 都將不可見。
ConstraintLayout的輔助對象的實用程序類。Guideline不會顯示在設備上(它們被標記爲View.GONE),僅用於佈局。他們只能在ConstraintLayout中工做。
指引能夠是水平的也能夠是垂直的: 垂直指南的寬度爲零,它們的ConstraintLayout父項的高度爲零 水平指南的高度爲零,其ConstraintLayout父項的寬度爲零 定位準則有三種不一樣的方式:
相應的代碼爲setGuidelineBegin(int,int),setGuidelineEnd(int,int)和setGuidelinePercent(int,float)函數。
而後控件就能夠被Guideline來約束。(換句話就是說弄了一個隱藏的View,來約束咱們的控件,咱們的控件相對的就更容易進行位置定位)。
限制於垂直Guideline的按鈕示例:
<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">
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline"
app:layout_constraintGuide_begin="100dp"
android:orientation="vertical"/>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button"
app:layout_constraintLeft_toLeftOf="@+id/guideline"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
複製代碼
你們具體使用能夠看這篇文章: New features in ConstraintLayout 1.1.x。 我如下Placeholder內容也就轉載這個文章裏面的例子:
Placeholder顧名思義,就是用來一個佔位的東西,它能夠把本身的內容設置爲ConstraintLayout內的其它view。所以它用來寫佈局的模版,也能夠用來動態修改UI的內容。
用做模版: 咱們用Placeholder建立一個名爲template.xml的模版:
咱們把剛纔定義的模版include到真正的佈局文件中,而且在這個佈局文件中添加真實的控件,注意這裏的控件無需添加任何約束,由於它們的位置是由Placeholder決定的。
還有一點就是模版要放在被引用的全部控件以前:
<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.app.androidkt.constraintlayoutb.MainActivity"
tools:showIn="@layout/activity_main">
<include layout="@layout/template" />
<ImageView
android:id="@+id/top_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="@drawable/place_holder_demo" />
<ImageButton
android:id="@+id/save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:srcCompat="@drawable/ic_save_black_24dp" />
<ImageButton
android:id="@+id/edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_edit_black_24dp" />
<ImageButton
android:id="@+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
app:srcCompat="@drawable/ic_cancel_black_24dp" />
<ImageButton
android:id="@+id/delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
app:srcCompat="@drawable/ic_delete_black_24dp" />
</android.support.constraint.ConstraintLayout>
複製代碼
動態替換: PlaceHolder還能夠在Java代碼中動態替換本身的內容:
public class MainActivity extends AppCompatActivity {
private Placeholder placeholder;
private ConstraintLayout root;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
...
}
public void onClick(View view) {
placeholder.setContentId(view.getId());
}
}
複製代碼
若是結合過渡動畫的話,就能夠實現一些比較有趣的效果:
public class MainActivity extends AppCompatActivity {
private Placeholder placeholder;
private ConstraintLayout root;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
...
}
public void onClick(View view) {
TransitionManager.beginDelayedTransition(root);
placeholder.setContentId(view.getId());
}
}
複製代碼
下面是使用PlaceHolder結合過渡動畫實現的效果:
仍是老話,哪裏不對。能夠在留言處寫出來。我會進行更正,哈哈。