好久沒有更新博客了，主要是最近太忙了。其實(shí)ConstraintLayout這個(gè)布局早都有了，一直沒有使用過，所以看到有很多網(wǎng)站都有介紹。但是，感覺很多都是寫的很亂或者寫的很模糊讓人看的好像使用起來很麻煩的樣子。所以自己想寫一篇博客介紹一下它的使用方法，其實(shí)真的好用又簡(jiǎn)單。
- 使用之前你的Android studio 的版本必須是2.3以上的才可以使用這個(gè)布局控件，否則你發(fā)現(xiàn)你無論怎么在build.gradle文件中添加官方依賴
compile 'com.android.support.constraint:constraint-layout:1.0.2'
都是沒有什么用的。so,如果你想體驗(yàn)這個(gè)控件那么就先升級(jí)一下你的Android studio吧。（現(xiàn)在的最高版本好像是3.0的） - 好了，就像我剛才說的如果你的AS是2.3版本以上的話，你新創(chuàng)建一個(gè)項(xiàng)目的時(shí)候AS就會(huì)自動(dòng)幫你引入這個(gè)依賴。并且如果你是從項(xiàng)目中直接創(chuàng)建一個(gè)Activity的話，默認(rèn)的根部局就是這個(gè)ConstraintLayout。廢話不多說，接下來就具體說一下怎么使用：
- 你跟這個(gè)我看這個(gè)布局就可以很快的入門這個(gè)布局的時(shí)候。感覺這個(gè)布局最重要的一點(diǎn)就是你一定要懂得約束力這個(gè)詞?！?strong>約束力”是這篇博客也是這個(gè)布局最重要的點(diǎn)。
- 先讓我們看一個(gè)布局：
-
這里寫圖片描述
當(dāng)我們看到這個(gè)布局的時(shí)候一般都會(huì)想到這里面肯定用布局嵌套。如果你使用ConstraintLayout布局的話就不需要布局嵌套，只用一個(gè)父布局就可以了。
- Ok,ConstraintLayout這個(gè)布局的重點(diǎn)就是約束力，首先如果你想讓最左邊的頭像（ImageView）放到中間的時(shí)候。那么約束它的就是它父布局的上面和下面。所以你需要在ImageView的屬性里面添加這兩行代碼，它的含義就是自己的頂部依賴父布局的頂部，自己的底部依賴父布局的底部。這樣剛好就能夠是ImageView在父布局的中間了。
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
然而你心中會(huì)有疑問了，這樣這個(gè)頭像只是在父布局的上下約束，但是它卻在布局的左邊。很好，這個(gè)時(shí)候要給ImageView的左邊一個(gè)約束，也是相對(duì)于父布局的。這句代碼的意思就是ImageView的左邊和父布局的左邊有一個(gè)約束。這樣ImagView就在父布局的左邊了。
app:layout_constraintLeft_toLeftOf="parent"
此時(shí)你還會(huì)有疑問，我是把ImageView的左邊依賴父布局，但是為什么會(huì)左邊的間距。因?yàn)榇藭r(shí)，ImageView左邊有父布局的約束，所以給ImageView設(shè)置android:layout_marginLeft這個(gè)屬性是起作用的。我們?cè)O(shè)置ImageView距離左邊距為10dp。新手剛使用ConstraintLayout的時(shí)候設(shè)置這個(gè)margin屬性會(huì)不起作用，那是因?yàn)槟銢]有給他margin方向的約束，只有先有了約束margin才會(huì)起作用。
android:layout_marginLeft="@dimen/dp_10"
<ImageView
android:id="@+id/iv_mine_friend_avatar"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="@dimen/dp_10"
android:src="@mipmap/img1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="@dimen/dp_10"/>
接下來就是顯示用戶的名字了，它需要在頭像的上面（ImageView）的右邊，并且要在ImageView的頭部的上面，所以只用給它兩個(gè)約束就可以了。名字的左邊需要在頭像的右邊
app:layout_constraintLeft_toRightOf="@+id/iv_mine_friend_avatar"
名字的上面需要和頭像的上面齊app:layout_constraintTop_toTopOf="@+id/iv_mine_friend_avatar"
因?yàn)橛辛俗筮叺募s束所以可以設(shè)置左邊的margin值android:layout_marginLeft="@dimen/dp_10"
也可以設(shè)置上面的margin值android:layout_marginTop="@dimen/content_small"其他的布局基本上都是一樣的，下面重點(diǎn)說一下下面item的那一條黑的線。如果你想在ConstraintLayout設(shè)置一個(gè)控件的寬度match_parent那是不允許這樣寫的。你只能這樣寫：
app:layout_constraintLeft_toLeftOf="parent"
android:layout_width="0dp"
你首先要設(shè)置layout_width="0dp"，這個(gè)是必須的，然后你要讓這個(gè)控件左邊或者右邊要約束到父布局里面。就像這條線一樣，我想讓它margin左邊，我就只用設(shè)置這個(gè)屬性就可以。app:layout_constraintLeft_toLeftOf="parent"
如果你不這樣設(shè)置話，那么總是會(huì)報(bào)錯(cuò)。
上面的布局代碼
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:tools="http://schemas.android.com/tools"
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="@dimen/dp_60"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_mine_friend_avatar"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="@dimen/dp_10"
android:src="@mipmap/img1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="@dimen/dp_10"/>
<TextView
android:id="@+id/tv_mine_friend_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_10"
android:layout_marginTop="@dimen/content_small"
tools:text="共享對(duì)象"
android:textColor="#404040"
android:textSize="@dimen/myedit_right_textsize"
app:layout_constraintLeft_toRightOf="@+id/iv_mine_friend_avatar"
app:layout_constraintTop_toTopOf="@+id/iv_mine_friend_avatar"
android:layout_marginStart="@dimen/dp_10"/>
<TextView
android:id="@+id/tv_mine_friend_motto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_10"
tools:text="我有句mmp一定要講"
android:textColor="#404040"
android:textSize="@dimen/myedit_right_textsize"
app:layout_constraintBottom_toBottomOf="@+id/iv_mine_friend_avatar"
app:layout_constraintLeft_toRightOf="@+id/iv_mine_friend_avatar"
android:layout_marginStart="@dimen/dp_10"/>
<TextView
android:id="@+id/tv_mine_friend_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="@dimen/dp_10"
tools:text="剛剛"
android:textSize="@dimen/myedit_right_textsize"
app:layout_constraintBottom_toBottomOf="@+id/tv_mine_friend_name"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/tv_mine_friend_name"
android:layout_marginEnd="@dimen/dp_10"/>
<View
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_width="0dp"
android:layout_height="0.5dp"
android:layout_marginLeft="@dimen/dp_10"
android:background="#404040"/>
</android.support.constraint.ConstraintLayout>
