詳解Android ConstraintLayout 約束布局的用法

2019-10-22 18:15:45

字體：大中小

來源：轉載

供稿：網友

前言

在2016年的Google I/O大會上 , Google 發布了android/236449.html">Android Studio 2.2預覽版，同時也發布了Android 新的布局方案 ConstraintLayout ，但是最近的一年也沒有大規模的使用。2017年Google發布了 Android Studio 2.3 正式版，在 Android Studio 2.3 版本中新建的Module中默認的布局就是 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 引入支持庫：

dependencies {  compile 'com.android.support.constraint:constraint-layout:1.0.1'}

傳統的Android開發當中，界面基本都是靠編寫XML代碼完成的，雖然Android Studio也支持可視化的方式來編寫界面，但是操作起來并不方便，我也一直都不推薦使用可視化的方式來編寫Android應用程序的界面。

而ConstraintLayout就是為了解決這一現狀而出現的。它和傳統編寫界面的方式恰恰相反，ConstraintLayout非常適合使用可視化的方式來編寫界面，但并不太適合使用XML的方式來進行編寫。當然，可視化操作的背后仍然還是使用的XML代碼來實現的，只不過這些代碼是由Android Studio根據我們的操作自動生成的。

另外，ConstraintLayout 還有一個優點，它可以有效地解決布局嵌套過多的問題。我們平時編寫界面，復雜的布局總會伴隨著多層的嵌套，而嵌套越多，程序的性能也就越差。ConstraintLayout則是使用約束的方式來指定各個控件的位置和關系的，它有點類似于 RelativeLayout，但遠比RelativeLayout要更強大。

ConstraintLayout向下兼容 API

這篇文章說一些其他的特性。

常用方法總結

layout_constraintTop_toTopOf    // 將所需視圖的頂部與另一個視圖的頂部對齊。 layout_constraintTop_toBottomOf  // 將所需視圖的頂部與另一個視圖的底部對齊。 layout_constraintBottom_toTopOf  // 將所需視圖的底部與另一個視圖的頂部對齊。 layout_constraintBottom_toBottomOf // 將所需視圖的底部與另一個視圖的底部對齊。 layout_constraintLeft_toTopOf   // 將所需視圖的左側與另一個視圖的頂部對齊。 layout_constraintLeft_toBottomOf  // 將所需視圖的左側與另一個視圖的底部對齊。 layout_constraintLeft_toLeftOf   // 將所需視圖的左邊與另一個視圖的左邊對齊。 layout_constraintLeft_toRightOf  // 將所需視圖的左邊與另一個視圖的右邊對齊。 layout_constraintRight_toTopOf   // 將所需視圖的右對齊到另一個視圖的頂部。layout_constraintRight_toBottomOf // 將所需視圖的右對齊到另一個的底部。layout_constraintRight_toLeftOf  // 將所需視圖的右邊與另一個視圖的左邊對齊。layout_constraintRight_toRightOf  // 將所需視圖的右邊與另一個視圖的右邊對齊。

constraintDimensionRatio

這個屬性就是把一個View的尺寸設為特定的寬高比，比如設置一張圖片的寬高比為 1：1，4：3， 16：9 等。通過使用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>

效果圖如下：

Android,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"  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>

我們得到的布局效果如下：

Android,ConstraintLayout,約束布局,約束性布局

那么我們有個疑問，為什么Button 是居中顯示的？因為在上面的布局中有兩個重要的屬性沒有寫出來，但是卻有默認的屬性值，那就是水平、垂直的偏移比例。

layout_constraintHorizontal_bias //控件的水平偏移比例layout_constraintVertical_bias  //控件的垂直偏移比例

如果在布局文件中沒有明確的寫出偏移比例，那么系統默認偏移比例值為：0.5 。

到這里我們已經清楚了，上面的布局文件就相當于：

<?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 ，看看效果：

Android,ConstraintLayout,約束布局,約束性布局