Android修行手冊之ConstraintLayout布局使用詳解
更新時間：2022年09月21日 09:49:43 作者：芝麻粒兒
這篇文章主要為大家介紹了Android修行手冊之ConstraintLayout使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
??實踐過程
近期創(chuàng)建的項目默認(rèn)是帶有的，如果沒有去build.gradle文件中查看有沒有引入
implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
截止2022年8月最新版是2.1.4
??示例一
想要實現(xiàn)這個效果：
使用RelativeLayout無法實現(xiàn)，更不要說其他的了。哪怕紅塊底部對齊利用margin負(fù)數(shù)的形式做出來了，但是這就得是提前固定寬高，可固定高度又得考慮適配的事，或者干脆這個效果寬高要求是自適應(yīng)，就挺難辦的。而ConstraintLayout能輕松實現(xiàn)。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent">
<TextView
android:id="@+id/idTxtA"
android:layout_width="100dp"
android:layout_height="60dp"
android:background="@color/color_00ff00"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="@+id/idTxtB"
android:layout_width="40dp"
android:layout_height="20dp"
android:background="@color/color_ff0000"
app:layout_constraintBottom_toBottomOf="@+id/idTxtA"
app:layout_constraintLeft_toLeftOf="@+id/idTxtA"
app:layout_constraintRight_toRightOf="@+id/idTxtA"
app:layout_constraintTop_toBottomOf="@+id/idTxtA" />
</androidx.constraintlayout.widget.ConstraintLayout>
題外話：
ConstraintLayout的渲染耗時是隨著進(jìn)入的頁面次數(shù)而不斷減少直到穩(wěn)定的。那這是為啥？
其實是Android機(jī)制，Android 5.0到Anroid 7.0 是預(yù)編譯成機(jī)器碼直接使用所以最快，但是7.0以上是即時編譯，會在手機(jī)空閑的時候才漸漸轉(zhuǎn)為機(jī)器碼，耗時才會逐漸減少。
??示例二
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/black">
<TextView
android:id="@+id/idTxtA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/color_00ff00"
android:gravity="center"
android:text="居中對齊"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/color_00ff00"
android:gravity="center"
android:text="左上角"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/color_00ff00"
android:gravity="center"
android:text="右上角"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/color_00ff00"
android:gravity="center"
android:text="左下角"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/color_00ff00"
android:gravity="center"
android:text="右下角"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:layout_width="100dp"
android:layout_height="60dp"
android:background="@color/color_00ff00"
android:gravity="center"
android:text="底部居中對齊"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/idTxtB"
android:layout_width="30dp"
android:layout_height="10dp"
android:background="@color/color_ff0000"
app:layout_constraintBottom_toBottomOf="@+id/idTxtA"
app:layout_constraintLeft_toLeftOf="@+id/idTxtA"
app:layout_constraintRight_toRightOf="@+id/idTxtA"
app:layout_constraintTop_toBottomOf="@+id/idTxtA" />
<TextView
android:id="@+id/idTxtC"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="@color/color_00ff00"
android:gravity="center"
android:text="A：左側(cè)居中"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!--使用B的上邊和A的上邊對齊，B的下邊和A的下邊對齊，B的左邊和A的右邊對齊，B的右邊和父右邊對齊 來實現(xiàn)-->
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@color/color_ff0000"
android:gravity="center"
android:text="B：在【左側(cè)居中】的右側(cè)居中且填充滿父寬度"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="@id/idTxtC"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/idTxtC"
app:layout_constraintTop_toTopOf="@id/idTxtC" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:layout_weight="1">
<!--實現(xiàn)一個左側(cè)圖片，右側(cè)兩個文本的效果：E和F文本需要左側(cè)位于D的右側(cè)，E需要頂部位于D的頂部，底部位于F的上部（很重要）
F底部位于D的底部，F(xiàn)頂部位于E的底部。雖然其他方式也能實現(xiàn)效果，但是當(dāng)修改D圖片高度的時候，其他布局實現(xiàn)的就可能需要調(diào)整，而這個不需要，還是會對齊-->
<ImageView
android:id="@+id/idTxtD"
android:layout_width="140dp"
android:layout_height="160dp"
android:background="@mipmap/study_five"
android:contentDescription="左上角"
android:gravity="center"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/idTxtE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/color_0000ff"
android:gravity="center"
android:text="E:標(biāo)題，在D的右上側(cè)"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="@id/idTxtF"
app:layout_constraintStart_toEndOf="@id/idTxtD"
app:layout_constraintTop_toTopOf="@id/idTxtD" />
<TextView
android:id="@+id/idTxtF"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/color_0000ff"
android:gravity="center"
android:text="F:說明，在D的右下邊，\nE的下面"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="@id/idTxtD"
app:layout_constraintStart_toEndOf="@id/idTxtD"
app:layout_constraintTop_toBottomOf="@id/idTxtE" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@color/color_0000ff"
android:gravity="center"
android:text="實現(xiàn)寬度鋪滿match_parent效果"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="@color/color_ff0000"
android:gravity="center"
android:text="實\n現(xiàn)\n寬\n度\n鋪\n滿\nmatch\n_\nparent\n效\n果"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:layout_weight="1">
<TextView
android:id="@+id/idTxtG"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@color/color_0000ff"
android:gravity="center"
android:text="G:實現(xiàn)角度定位"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@color/color_0000ff"
android:gravity="center"
android:text="在右上角"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintCircle="@id/idTxtG"
app:layout_constraintCircleAngle="45"
app:layout_constraintCircleRadius="84dp" />
<TextView
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@color/color_0000ff"
android:gravity="center"
android:text="在左下角"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintCircle="@id/idTxtG"
app:layout_constraintCircleAngle="225"
app:layout_constraintCircleRadius="84dp" />
<TextView
android:id="@+id/idTxtH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/color_0000ff"
android:gravity="center"
android:text="H:測試隱藏"
android:textColor="@color/white"
android:textSize="18sp"
android:visibility="gone"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!--要想實現(xiàn)該控件指定就需要使用layout_goneMarginTop屬性，表示目標(biāo)控件gone的時候該控件外邊距是多少-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="@color/color_0000ff"
android:gravity="center"
android:text="假設(shè)H隱藏，該控件要制定"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/idTxtH"
app:layout_goneMarginTop="0dp" />
<!--如果layout_constraintWidth_max和layout_constraintWidth_percent結(jié)合使用 則對應(yīng)的layout_width或layout_height為0dp-->
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="@color/color_0000ff"
android:gravity="center"
android:text="實現(xiàn)最大寬度限制大寬度限制大寬度限制大寬度限制"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_max="wrap"
app:layout_constraintWidth_percent="0.8"
app:layout_goneMarginTop="0dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:layout_weight="1">
<TextView
android:layout_width="0dp"
android:layout_height="100dp"
android:background="@color/color_0000ff"
android:gravity="center"
android:text="寬高比"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!--下方是試驗鏈約束,layout_constraintHorizontal_chainStyle有三個值：spread是默認(rèn)，spread_inside是攤開，packed是緊挨著，試驗下就知道了-->
<TextView
android:id="@+id/idTxtI"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="@color/color_0000ff"
android:gravity="center"
android:text="I"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/idTxtJ" />
<TextView
android:id="@+id/idTxtJ"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="@color/color_0000ff"
android:gravity="center"
android:text="J"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/idTxtI"
app:layout_constraintRight_toLeftOf="@id/idTxtK" />
<TextView
android:id="@+id/idTxtK"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="@color/color_0000ff"
android:gravity="center"
android:text="K"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/idTxtJ"
app:layout_constraintRight_toRightOf="parent" />
<!--下方幾個是測試權(quán)重-->
<TextView
android:id="@+id/idTxtL"
android:layout_width="40dp"
android:layout_height="0dp"
android:background="@color/color_0000ff"
android:gravity="center"
android:text="測"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="@id/idTxtM"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="1" />
<TextView
android:id="@+id/idTxtM"
android:layout_width="40dp"
android:layout_height="0dp"
android:background="@color/color_0000ff"
android:gravity="center"
android:text="權(quán)"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="@id/idTxtN"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/idTxtL"
app:layout_constraintVertical_weight="1" />
<TextView
android:id="@+id/idTxtN"
android:layout_width="40dp"
android:layout_height="0dp"
android:background="@color/color_0000ff"
android:gravity="center"
android:text="重"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/idTxtM"
app:layout_constraintVertical_weight="1" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
實現(xiàn)效果
以上就是Android修行手冊之ConstraintLayout使用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Android手冊ConstraintLayout的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本文為大家詳細(xì)介紹下android是怎樣獲取屏幕像素的，感興趣的各位可以參考下哈，希望對你學(xué)習(xí)android有所幫助2013-04-04
Android自定View流式布局根據(jù)文字?jǐn)?shù)量換行
這篇文章主要為大家詳細(xì)介紹了Android自定View流式布局，根據(jù)文字?jǐn)?shù)量換行，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
Android自定義ViewGroup實現(xiàn)九宮格布局
這篇文章主要為大家詳細(xì)介紹了Android如何通過自定義ViewGroup實現(xiàn)九宮格布局，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2022-12-12
這篇文章主要介紹了Android activity和view判斷滑動的相關(guān)資料,需要的朋友可以參考下2017-06-06
Android開發(fā)AsmClassVisitorFactory使用詳解
這篇文章主要為大家介紹了Android開發(fā)AsmClassVisitorFactory使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
安卓(Android)聊天機(jī)器人實現(xiàn)代碼分享
這是一個安卓智能聊天機(jī)器人的源碼，采用了仿微信的風(fēng)格設(shè)計，調(diào)用的是圖靈機(jī)器人的API，能夠?qū)崿F(xiàn)智能聊天、講故事、講笑話、查天氣、查公交等豐富的功能2015-11-11
深入理解Android中的Window和WindowManager
這篇文章給大家介紹了Window和WindowManager知識，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-02-02
Android 提供三種動畫：幀動畫、補(bǔ)間動畫和屬性動畫，本篇文章介紹幀動畫以及補(bǔ)間動畫的使用，屬性動畫的使用將在后面的文章中分享，那就來復(fù)習(xí)一下這兩種動畫的使用吧2020-09-09
Android Studio快捷鍵生成TAG、Log.x日志輸出介紹
這篇文章主要介紹了Android Studio快捷鍵生成TAG、Log.x日志輸出介紹，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-04-04
Android之PreferenceActivity應(yīng)用詳解
為了引入這個概率 首先從需求說起 即：現(xiàn)有某Activity專門用于手機(jī)屬性設(shè)置 那么應(yīng)該如何做呢2012-11-11