詳解Android ConstraintLayout 約束布局的用法
前言
在2016年的Google I/O大會(huì)上 , Google 發(fā)布了Android Studio 2.2預(yù)覽版,同時(shí)也發(fā)布了Android 新的布局方案 ConstraintLayout , 但是最近的一年也沒(méi)有大規(guī)模的使用。2017年Google發(fā)布了 Android Studio 2.3 正式版,在 Android Studio 2.3 版本中新建的Module中默認(rèn)的布局就是 ConstraintLayout 。如下所示:
<?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" tools:context="com.constraintlayout.app.Main2Activity"> </android.support.constraint.ConstraintLayout>
在使用 ConstraintLayout 的布局方案,需要在 build.gradle 引入支持庫(kù):
dependencies { compile 'com.android.support.constraint:constraint-layout:1.0.1' }
傳統(tǒng)的Android開發(fā)當(dāng)中,界面基本都是靠編寫XML代碼完成的,雖然Android Studio也支持可視化的方式來(lái)編寫界面,但是操作起來(lái)并不方便,我也一直都不推薦使用可視化的方式來(lái)編寫Android應(yīng)用程序的界面。
而ConstraintLayout就是為了解決這一現(xiàn)狀而出現(xiàn)的。它和傳統(tǒng)編寫界面的方式恰恰相反,ConstraintLayout非常適合使用可視化的方式來(lái)編寫界面,但并不太適合使用XML的方式來(lái)進(jìn)行編寫。當(dāng)然,可視化操作的背后仍然還是使用的XML代碼來(lái)實(shí)現(xiàn)的,只不過(guò)這些代碼是由Android Studio根據(jù)我們的操作自動(dòng)生成的。
另外,ConstraintLayout 還有一個(gè)優(yōu)點(diǎn),它可以有效地解決布局嵌套過(guò)多的問(wèn)題。我們平時(shí)編寫界面,復(fù)雜的布局總會(huì)伴隨著多層的嵌套,而嵌套越多,程序的性能也就越差。ConstraintLayout則是使用約束的方式來(lái)指定各個(gè)控件的位置和關(guān)系的,它有點(diǎn)類似于 RelativeLayout,但遠(yuǎn)比RelativeLayout要更強(qiáng)大。
ConstraintLayout向下兼容 API 9
關(guān)于 ConstraintLayout 的基本使用方法請(qǐng)參照郭神的博客:http://www.dbjr.com.cn/article/126440.htm
這篇文章說(shuō)一些其他的特性。
常用方法總結(jié)
layout_constraintTop_toTopOf // 將所需視圖的頂部與另一個(gè)視圖的頂部對(duì)齊。 layout_constraintTop_toBottomOf // 將所需視圖的頂部與另一個(gè)視圖的底部對(duì)齊。 layout_constraintBottom_toTopOf // 將所需視圖的底部與另一個(gè)視圖的頂部對(duì)齊。 layout_constraintBottom_toBottomOf // 將所需視圖的底部與另一個(gè)視圖的底部對(duì)齊。 layout_constraintLeft_toTopOf // 將所需視圖的左側(cè)與另一個(gè)視圖的頂部對(duì)齊。 layout_constraintLeft_toBottomOf // 將所需視圖的左側(cè)與另一個(gè)視圖的底部對(duì)齊。 layout_constraintLeft_toLeftOf // 將所需視圖的左邊與另一個(gè)視圖的左邊對(duì)齊。 layout_constraintLeft_toRightOf // 將所需視圖的左邊與另一個(gè)視圖的右邊對(duì)齊。 layout_constraintRight_toTopOf // 將所需視圖的右對(duì)齊到另一個(gè)視圖的頂部。 layout_constraintRight_toBottomOf // 將所需視圖的右對(duì)齊到另一個(gè)的底部。 layout_constraintRight_toLeftOf // 將所需視圖的右邊與另一個(gè)視圖的左邊對(duì)齊。 layout_constraintRight_toRightOf // 將所需視圖的右邊與另一個(gè)視圖的右邊對(duì)齊。
constraintDimensionRatio
這個(gè)屬性就是把一個(gè)View的尺寸設(shè)為特定的寬高比,比如設(shè)置一張圖片的寬高比為 1:1,4:3, 16:9 等。通過(guò)使用ConstraintLayout,只需使用layout_constraintDimensionRatio屬性即可。
<?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" android:id="@+id/constraintLayout" tools:context="com.constraintlayout.app.MainActivity" > <ImageView android:id="@+id/cat_image" android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintDimensionRatio="4:3" app:layout_constraintRight_toRightOf="parent" app:layout_constraintHorizontal_bias="0" android:src="@mipmap/cat" /> <ImageView android:layout_width="0dp" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher" app:layout_constraintDimensionRatio="4:3" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toBottomOf="@+id/cat_image" app:layout_constraintVertical_bias="0.0" app:layout_constraintRight_toRightOf="parent" /> </android.support.constraint.ConstraintLayout>
效果圖如下:
偏移比例
當(dāng)我們的布局文件是下面這樣的時(shí)候:
<?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" android:id="@+id/constraintLayout" tools:context="com.constraintlayout.app.MainActivity" > <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>
我們得到的布局效果如下:
那么我們有個(gè)疑問(wèn),為什么Button 是居中顯示的?因?yàn)樵谏厦娴牟季种杏袃蓚€(gè)重要的屬性沒(méi)有寫出來(lái),但是卻有默認(rèn)的屬性值,那就是水平、垂直的偏移比例。
layout_constraintHorizontal_bias //控件的水平偏移比例 layout_constraintVertical_bias //控件的垂直偏移比例
如果在布局文件中沒(méi)有明確的寫出偏移比例,那么系統(tǒng)默認(rèn)偏移比例值為:0.5 。
到這里我們已經(jīng)清楚了,上面的布局文件就相當(dāng)于:
<?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" android:id="@+id/constraintLayout" tools:context="com.constraintlayout.app.MainActivity" > <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintVertical_bias="0.5" /> </android.support.constraint.ConstraintLayout>
我們可以試試,更改Button 的偏移值試試看,比如,水平偏移0.3 , 垂直偏移0.7 , 看看效果:
可以看到很明顯,Button 在水平方向向右偏移比例為 30% , 在垂直方向向下偏移比例為 70% 。
基線約束控鍵
該控鍵幫助你對(duì)齊任意兩個(gè)widget的文字部分,與widget的大小無(wú)關(guān)。例如你有兩個(gè)不同尺寸的widget但是你想要他們的文字部分對(duì)齊。
layout_constraintBaseline_toBaselineOf
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解Android系統(tǒng)中跨應(yīng)用數(shù)據(jù)分享功能的實(shí)現(xiàn)
這篇文章主要介紹了Android系統(tǒng)中跨應(yīng)用數(shù)據(jù)分享功能的實(shí)現(xiàn),文中分為發(fā)送文字、二進(jìn)制內(nèi)容和圖片三種情況來(lái)講,需要的朋友可以參考下2016-04-04Android 啟動(dòng)模式FLAG_ACTIVITY_CLEAR_TOP案例詳解
這篇文章主要介紹了Android 啟動(dòng)模式FLAG_ACTIVITY_CLEAR_TOP案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08Android 抽屜效果的導(dǎo)航菜單實(shí)現(xiàn)代碼實(shí)例
本篇文章主要介紹了Android 抽屜效果的導(dǎo)航菜單實(shí)現(xiàn)代碼實(shí)例,這種側(cè)滑的抽屜效果的菜單很好,有興趣的可以了解一下。2016-12-12Android實(shí)現(xiàn)按鈕點(diǎn)擊事件的三種方法總結(jié)
Button是程序用于和用戶進(jìn)行交互的一個(gè)重要控件。既然有Button,那肯定有onClick方法,下面就教大家三種實(shí)現(xiàn)點(diǎn)擊事件的方法,感興趣的可以了解一下2022-04-04ContentProvider客戶端處理provider邏輯分析
這篇文章主要為大家介紹了ContentProvider客戶端處理provider邏輯分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10Android編程實(shí)現(xiàn)播放MP3功能示例
這篇文章主要介紹了Android編程實(shí)現(xiàn)播放MP3功能,結(jié)合實(shí)例形式分析了Android播放MP3功能的界面布局與功能實(shí)現(xiàn)相關(guān)操作技巧,需要的朋友可以參考下2017-02-02Android基于OpenGL在GLSurfaceView上繪制三角形及使用投影和相機(jī)視圖方法示例
這篇文章主要介紹了Android基于OpenGL在GLSurfaceView上繪制三角形及使用投影和相機(jī)視圖方法,結(jié)合實(shí)例形式分析了Android基于OpenGL的圖形繪制技巧,需要的朋友可以參考下2016-10-10Android實(shí)現(xiàn)拍照截取和相冊(cè)圖片截取
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)拍照截取和相冊(cè)獲取圖片截取,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12Android實(shí)現(xiàn)zip文件壓縮及解壓縮的方法
這篇文章主要介紹了Android實(shí)現(xiàn)zip文件壓縮及解壓縮的方法,涉及Android針對(duì)文件的遍歷及zip壓縮與解壓縮的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07