欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解Android ConstraintLayout 約束布局的用法

 更新時間：2018年02月02日 11:10:10   作者：趙彥軍  
本篇文章主要介紹了詳解Android ConstraintLayout 約束布局的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前言

在2016年的Google I/O大會上 , Google 發(fā)布了Android Studio 2.2預(yù)覽版，同時也發(fā)布了Android 新的布局方案 ConstraintLayout ， 但是最近的一年也沒有大規(guī)模的使用。2017年Google發(fā)布了 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'
}

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

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

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

ConstraintLayout向下兼容 API 9

關(guān)于 ConstraintLayout 的基本使用方法請參照郭神的博客：http://www.dbjr.com.cn/article/126440.htm

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

常用方法總結(jié)

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

constraintDimensionRatio

這個屬性就是把一個View的尺寸設(shè)為特定的寬高比，比如設(shè)置一張圖片的寬高比為 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>

效果圖如下：

這里寫圖片描述

偏移比例

當(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"
    />
</android.support.constraint.ConstraintLayout>

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

這里寫圖片描述

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

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

如果在布局文件中沒有明確的寫出偏移比例，那么系統(tǒng)默認偏移比例值為：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% 。

基線約束控鍵

該控鍵幫助你對齊任意兩個widget的文字部分，與widget的大小無關(guān)。例如你有兩個不同尺寸的widget但是你想要他們的文字部分對齊。

layout_constraintBaseline_toBaselineOf

這里寫圖片描述

這里寫圖片描述

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論