Android Material Design控件使用（一）——ConstraintLayout 約束佈局

時間 2019-12-04

標籤 android material design 控件使用 constraintlayout 約束佈局欄目 Android 简体版

原文原文鏈接

本章節將分爲兩個模塊給你們推送，以爲不錯的能夠關注下哦php

介紹

Android ConstraintLayout是谷歌推出替代PrecentLayout的組件。android

支持相對佈局、線性佈局、幀佈局，看來更像是FrameLayout 、LinearLayout、`RelativeLayout·三者的結合體，而且比這三者更強大的是實現了百分比佈局。bash

你們都知道安卓碎片嚴重，使用百分比適配，那麼將完全解決適配問題app

總結：我最近也是剛學，學完以後，發現這個佈局已經將上述的全部佈局的特色所有融合在一塊兒了，使用起來簡單方便的不要不要的，就是學習的屬性有點多啊。ide

不過，多也是正常的，畢竟融合了五大布局的全部特色，學完這個佈局，各類界面UI都難不倒咱們了佈局

添加依賴

implementation 'com.android.support.constraint:constraint-layout:1.1.3'
複製代碼

我使用的是Android Studio3.0.1版本，已經自動導入了，默認使用的就是這個佈局學習

屬性及對應的方法

咱們先了解一下一些基本的概念ui

這裏提一下，start和left其實都是指控件的左邊，end和right都事指控件的右邊

基本屬性

注意，這裏的屬性都得使用命名空間來才能使用
複製代碼

寬高屬性與以前的layout相同，wrap_content和match_parent，但除此以外，還多出了一種，名爲match contraintspa

實際上，這個多出來的至關於0dp，若是以前使用過LinearLayout的權重的話，應該對0dp有印象.3d

這裏，約束佈局應該是繼承了Linearlayout的特性，以後咱們設置權重與Linearlayout的操做也是相似，具體的請日後面看，這但是實現了百分比佈局的強大布局。

屬性值爲控件id

layout_constraintLeft_toLeftOf 當前控件的左邊依賴於屬性控件的左邊
layout_constraintLeft_toRightOf 當前控件的左邊依賴於屬性控件的右邊
layout_constraintRight_toLeftOf
ayout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf 當前的控件基線與屬性控件的基線對齊
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

示例：

<?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">
    <Button android:id="@+id/btnA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="A" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"/>
    <Button android:id="@+id/btnB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="B" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toEndOf="@id/btnA"/>
</android.support.constraint.ConstraintLayout>
複製代碼

A左邊依賴總佈局的左邊，頂部則是依賴總佈局的頂部，B則是左邊依賴於A的右邊，頂部依賴父佈局的頂部

其餘的就不一一列舉了，觸類旁通，挺容易的

mragin 邊距

只有在設置了依賴，以後設置邊距纔會效果

這個屬性不須要使用app開頭，屬於本來的屬性

android:layout_marginStart 設置左邊的邊距
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

例如：

<?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">

<Button android:id="@+id/btnA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="A" android:layout_marginLeft="30dp" android:layout_marginTop="50dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"/>
<Button android:id="@+id/btnB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="60dp" android:text="B" app:layout_constraintStart_toEndOf="@id/btnA"/>
</android.support.constraint.ConstraintLayout>
複製代碼

示例：

使控件B與A垂直對齊

B的左邊依賴A的左邊，B的右邊依賴A的右邊便可

<?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">
    
        <Button android:id="@+id/btnA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="124dp" android:layout_marginTop="16dp" android:text="A" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"/>
    
        <Button android:id="@+id/btnB" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginEnd="8dp" android:layout_marginTop="8dp" android:text="B" app:layout_constraintEnd_toEndOf="@+id/btnA" app:layout_constraintStart_toStartOf="@+id/btnA" app:layout_constraintTop_toBottomOf="@+id/btnA"/>
             </android.support.constraint.ConstraintLayout>
複製代碼

輔助類或屬性使用

1. Barrier 屏障控件

<android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="TextView1,TextView2" />
        
複製代碼

app:barrierDirection爲屏障所在的位置，可設置的值有：bottom、end、left、right、start、top

app:constraint_referenced_ids爲屏障引用的控件，可設置多個(用「,」隔開)

2. Gruop 組控件

Group能夠把多個控件歸爲一組，方便隱藏或顯示一組控件，舉個例子：

<android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        app:constraint_referenced_ids="TextView1,TextView3" />
複製代碼

3. Placeholder 佔位符控件

設置好佔位符控件的位置，以後調用setContent，把指定id的控件放在佔位符的位置

app:content=

4. Guideline 輔助線控件

可使用這個控件達到百分比佈局的效果,或者是當前的控件沒有符合條件的參照物的狀況使用

Guideline還有三個重要的屬性，每一個Guideline只能指定其中一個：

layout_constraintGuide_begin，指定左側或頂部的固定距離，如100dp，在距離左側或者頂部100dp的位置會出現一條輔助線
layout_constraintGuide_end，指定右側或底部的固定距離，如30dp，在距離右側或底部30dp的位置會出現一條輔助線
layout_constraintGuide_percent，指定在父控件中的寬度或高度的百分比，如0.8，表示距離頂部或者左側的80%的距離。
android:orientation 設置垂直或者是水平

Guideline是隱藏的，不用咱們進行多餘的設置，雖然外面在預覽面板能夠死看到它的存在

例子：使一個按鈕的長度佔滿屏幕一半

<android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guidelineBegin"
        app:layout_constraintGuide_percent="0.5"
        android:orientation="vertical"/>

    <Button
        android:text="Button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/button"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/guidelineBegin"
        app:layout_constraintTop_toTopOf="parent" />
複製代碼

Radio 比例屬性

方便快捷調整控件的寬高比，結合Guideline使用更佳

例子：

app:layout_constraintDimensionRatio

想要寬度與總佈局同樣，但高度是寬度的三分之一

寬高比爲3:1

<Button android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintDimensionRatio="3:1"/>
        
        
複製代碼

Chain 鏈屬性

能夠把這個當作成一個增強版的LinearLayout

由上圖，很好的知道了A與B的約束，A的左邊是父控件的左邊，右邊則是B，B的左邊是A，B的右邊的是父控件的右邊

chainstyle有三種屬性，分別是spread,spread_inside,pack，效果以下圖

spread 元素將展開（默認）
spread_inside 元素展開，但鏈的端點不會展開
pack 鏈中的元素將包裹在一塊兒。子控件的水平或垂直方向的偏置bias屬性會影響包裹中元素的位置

剩下的兩種則是經過添加屬性實現的

weighted chain是在spread chain的基礎上，而packed chain with bias則是在weight chain的基礎上

style爲spread的，使用layout_constraintHorizontal_weight或layout_constraintVertical_weight來設置weigh權重

style爲pack的，使用layout_constraintHorizontal_bias或layout_constraintVertical_bias進行偏移設置，屬性值0-1，也是百分比，改第一個元素

這裏須要說明的是，除了水平，還能夠是垂直排列，不過，不能經過屬性來更改，而是經過約束來更改,把左邊改成頂端，右邊改成底部

若是是水平的，使用屬性layout_constraintHorizontal_chainStyle進行chainstyle屬性的更改

垂直的則是使用layout_constraintVertical_chainStyle

例子：

三個按鈕平分寬度（只須要將寬度設置爲0dp就能夠達到目的）

<Button
        android:id="@+id/btn"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toStartOf="@id/btn1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>
    <Button
        android:id="@+id/btn1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintStart_toEndOf="@id/btn"
        app:layout_constraintEnd_toStartOf="@id/btn2"/>
    <Button
        android:id="@+id/btn2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintStart_toEndOf="@id/btn1"
        app:layout_constraintEnd_toEndOf="parent"/>
複製代碼