前言
在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開(kāi)發(fā)當(dāng)中，界面基本都是靠編寫(xiě)XML代碼完成的，雖然Android Studio也支持可視化的方式來(lái)編寫(xiě)界面，但是操作起來(lái)并不方便，我也一直都不推薦使用可視化的方式來(lái)編寫(xiě)Android應(yīng)用程序的界面。
而ConstraintLayout就是為了解決這一現(xiàn)狀而出現(xiàn)的。它和傳統(tǒng)編寫(xiě)界面的方式恰恰相反，ConstraintLayout非常適合使用可視化的方式來(lái)編寫(xiě)界面，但并不太適合使用XML的方式來(lái)進(jìn)行編寫(xiě)。當(dāng)然，可視化操作的背后仍然還是使用的XML代碼來(lái)實(shí)現(xiàn)的，只不過(guò)這些代碼是由Android Studio根據(jù)我們的操作自動(dòng)生成的。
另外，ConstraintLayout 還有一個(gè)優(yōu)點(diǎn)，它可以有效地解決布局嵌套過(guò)多的問(wèn)題。我們平時(shí)編寫(xiě)界面，復(fù)雜的布局總會(huì)伴隨著多層的嵌套，而嵌套越多，程序的性能也就越差。ConstraintLayout則是使用約束的方式來(lái)指定各個(gè)控件的位置和關(guān)系的，它有點(diǎn)類(lèi)似于 RelativeLayout，但遠(yuǎn)比RelativeLayout要更強(qiáng)大。
ConstraintLayout向下兼容 API 9
關(guān)于 ConstraintLayout 的基本使用方法請(qǐng)參照郭神的博客：//m.survivalescaperooms.com/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)有寫(xiě)出來(lái)，但是卻有默認(rèn)的屬性值，那就是水平、垂直的偏移比例。
layout_constraintHorizontal_bias //控件的水平偏移比例layout_constraintVertical_bias //控件的垂直偏移比例
如果在布局文件中沒(méi)有明確的寫(xiě)出偏移比例，那么系統(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í)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
