2. 程式人生 > >Android ConstraintLayout 佈局

Android ConstraintLayout 佈局

阿新 • • 發佈：2018-12-19

AndroidStudio 3.0 預設ConstraintLayout，可以減少佈局層級並提高佈局效能；能夠靈活的定位和調整子View的大小，子View依靠約束關係來確定位置。

一、基本屬性

屬性 作用
layout_constraintLeft_toLeftOf 左邊左對齊
layout_constraintLeft_toRightOf 左邊右對齊
layout_constraintRight_toLeftOf 右邊左對齊
layout_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:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <TextView
            android:id="@+id/tv1"
            android:background="@color/colorPrimary"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="tv1"
            android:gravity="center"
            android:textSize="20pt"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
    <TextView
            android:id="@+id/tv2"
            android:background="@color/colorPrimary"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="tv2"
            android:gravity="center"
            android:textSize="20pt"
            app:layout_constraintBottom_toBottomOf="parent"
			app:layout_constraintLeft_toRightOf="@+id/tv1"
            app:layout_constraintTop_toBottomOf="@+id/tv1"/>
    <TextView
            android:id="@+id/tv3"
            android:background="@color/colorPrimary"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="tv3"
         android:gravity="center"
            android:textSize="20pt"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toRightOf="@+id/tv2"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tv2"/>

</android.support.constraint.ConstraintLayout>

在這裡插入圖片描述

tv1設定了上、左的約束 tv2設定了左、上、下的約束，有上下居中的效果 tv3設定了上、下、左、右的約束，有居中的效果

二、偏移量

屬性 作用
layout_constraintHorizontal_bias 水平方向偏移量
layout_constraintVertical_bias 垂直方向偏移量 
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <TextView
            android:id="@+id/tv1"
            android:background="@color/colorPrimary"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="tv1"
            android:gravity="center"
            android:textSize="20pt"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>


</android.support.constraint.ConstraintLayout>

tv1設定了居中 在這裡插入圖片描述

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <TextView
            android:id="@+id/tv1"
            android:background="@color/colorPrimary"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="tv1"
            android:gravity="center"
            android:textSize="20pt"
            app:layout_constraintVertical_bias="1"
            app:layout_constraintHorizontal_bias="0.8"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>


</android.support.constraint.ConstraintLayout>

設定它的垂直偏移量為1，水平偏移量為0.8 在這裡插入圖片描述

三、Visibility 屬性

如果View的屬性Visibility設定為gone，那麼原本依賴它來參照定位的屬性就會失效，ConstraintLayout佈局會有所不同

layout_goneMarginStart layout_goneMarginEnd layout_goneMarginLeft layout_goneMarginTop layout_goneMarginRight layout_goneMarginBottom

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <TextView
            android:id="@+id/tv1"
            android:background="@color/colorPrimary"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="tv1"
            android:gravity="center"
            android:textSize="20pt"
            app:layout_constraintHorizontal_bias="0.2"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
    <TextView
            android:id="@+id/tv2"
            android:background="@color/colorPrimary"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="tv2"
            android:gravity="center"
            android:textSize="20pt"
            app:layout_goneMarginTop="100dp"
            app:layout_constraintLeft_toRightOf="@+id/tv1"
            app:layout_constraintTop_toBottomOf="@+id/tv1"/>


</android.support.constraint.ConstraintLayout>

在這裡插入圖片描述

當tv1的Visibility 屬性設定為gone時，tv1縮小為一個不可見的點，位於原先位置的左上角，屬性app:layout_goneMarginTop="100dp"就會生效，tv2移到新的位置

在這裡插入圖片描述

四、寬高比

其他佈局中要實現View的寬高比會比較麻煩，ConstraintLayout中可以直接實現：

  • 將View的寬高設定為0dp
  • 設定 app:layout_constraintDimensionRatio屬性
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <ImageView
            android:id="@+id/iv1"
            android:background="@color/colorPrimary"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintDimensionRatio="16:9"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

在這裡插入圖片描述 還支援這樣的寫法 app:layout_constraintDimensionRatio="H,16:9" app:layout_constraintDimensionRatio="W,9:16"

五、控制元件權重

ConstraintLayout 可以像LinearLayout 一樣為之控制元件設定layout_weight屬性，從而控制子控制元件之間的佔比

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <TextView
            android:id="@+id/tv1"
            android:background="@color/colorPrimary"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:text="text1"
            app:layout_constraintHorizontal_weight="2"
            app:layout_constraintRight_toLeftOf="@id/tv2"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
    <TextView
            android:id="@+id/tv2"
            android:background="@color/colorAccent"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:text="text2"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintLeft_toRightOf="@id/tv1"
            app:layout_constraintRight_toLeftOf="@id/tv3"
            app:layout_constraintTop_toTopOf="parent"/>
    <TextView
            android:id="@+id/tv3"
            android:background="@color/colorPrimaryDark"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:text="text3"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintLeft_toRightOf="@id/tv2"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>


</android.support.constraint.ConstraintLayout>

在這裡插入圖片描述 橫向相當於一個鏈(Chains)，在鏈的最左邊的元素成為鏈頭，還可以給它設定一些屬性(layout_constraintHorizontal_chainStyle)，來展示更多的效果

  • 當wight不等於零 app:layout_constraintHorizontal_chainStyle="spread"(預設) 在這裡插入圖片描述 app:layout_constraintHorizontal_chainStyle="packed" 在這裡插入圖片描述 app:layout_constraintHorizontal_chainStyle="spread_inside"在這裡插入圖片描述

六、錨向指示線

其實指示線(Guideline)是來幫助定位的，不會出現在實際介面中，它有幾個特性：

  • 寬度和高度都是0
  • 可見性為View.GONE
  • 通過orientation設定方向
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <android.support.constraint.Guideline
            android:id="@+id/gl1"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    <android.support.constraint.Guideline
            android:id="@+id/gl2"
            app:layout_constraintGuide_begin="100dp"
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    <TextView
            android:id="@+id/tv1"
            android:background="@color/colorPrimary"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="tv1"
            android:gravity="center"
            android:textSize="20pt"
            app:layout_constraintLeft_toLeftOf="@id/gl1"
            app:layout_constraintTop_toTopOf="@id/gl2"/>

</android.support.constraint.ConstraintLayout>

設定橫向指示線距離頂部 100dp 豎向指示線設定其距離百分比為 0.5 在這裡插入圖片描述

相關推薦

Android ConstraintLayout 佈局

AndroidStudio 3.0 預設ConstraintLayout，可以減少佈局層級並提高佈局效能；能夠靈活的定位和調整子View的大小，子View依靠約束關係來確定位置。 一、基本屬性 屬性 作用 layout_constraintLef

Android約束佈局ConstraintLayout示例

ConstraintLayout 約束佈局由 2016 年 Google I/O 推出。扁平式的佈局方式，無任何巢狀，減少佈局的層級，優化渲染效能。從支援力度而言，將成為主流佈局樣式，完全代替其他佈局。 佈局示例： <?xml version="1.0" encoding="utf-8

Android新佈局ConstraintLayout解析

轉載自鴻洋大神的部落格 一、概述 ConstraintLayout出現有一段時間了，不過一直沒有特別去關注，也多多少少看了一些文字介紹，多數都是對使用視覺化佈局拖拽，個人對拖拽一直不看好，直到前段時間看到該文： 解析ConstraintLayout的效能優勢 非常詳盡的介紹

帶你瞭解Android約束佈局ConstraintLayout

ConstraintLayout是Android新推出的一個佈局，其效能更好，連官方的hello world都用ConstraintLayout來寫了。所以極力推薦使用ConstraintLayout來編寫佈局。 本文主要介紹一下如何使用程式碼來編寫Const

Android-0.Android Studio佈局中ConstraintLayout及designer簡介

Design and blueprint：用於選擇在編輯器中檢視佈局的方式。Design 檢視顯示佈局的彩色預覽，而 Blueprint 檢視僅顯示每個檢視的輪廓。或者，您可以並排檢視 Design + Blueprint 。 Screen orientation：用於在橫屏和豎屏方向之間旋轉裝置。 D

Android基礎佈局之ConstraintLayout

Android基礎之佈局ConstraintLayout Google I/O 2016 上釋出了 ConstraintLayout，據說很強大，那就一探究竟吧！ gradle配置       compile 'com.android.support.constra

Android ConstraintLayout 約束佈局詳解

前言 在2016年的Google I/O大會上 , Google 釋出了Android Studio 2.2預覽版，同時也釋出了Android 新的佈局方案 ConstraintLayout ， 但是最近的一年也沒有大規模的使用。2017年Google

Android ConstraintLayout約束佈局

1.簡介： constraintLayout和RelativeLayout類似，但比RelativeLayout要強大多，它可以有效地解決佈局巢狀過多問題，我們平時編寫的介面，複雜的佈局總會伴隨著多層的巢狀，而巢狀越多，程式的效能也就越差；Constraint

Android 新佈局 ConstraintLayout 完全解析

如果要實現控制元件的覆蓋佈局,在下圖的地方移動控制元件的前後順序即可,位置越靠後層級越大(後面的會覆蓋前面) 本篇文章的主題是ConstraintLayout。其實ConstraintLayout是Android Studio 2.2中主要的新增功能之

Android ConstraintLayout 兩控制元件部分相疊相容佈局

ConstraintLayout  佈局時有時候經常會有一些控制元件之間重疊的設計，直接設定距某一位置距離相容性太差 我目前想到的是再重疊控制元件上放一個透明控制元件另一個根據他佈局即可 示例： Li

Android 減少佈局層次—— ConstraintLayout 約束佈局 的使用

一. 背景 當前手機APP專案中，有些介面比較複雜，導致佈局層次很深，View的數量也相當多，對效能產生了一定影響；複雜的佈局，同時也增大了程式碼維護的難度。 ConstraintLayout 正是為了解決這個問題，它支援以下幾類強大的特性： -

Android ConstraintLayout 扁平化佈局入門

在Google IO大會中不僅僅帶來了Android Studio 2.2預覽版，同時帶給我們一個依賴約束的庫。 簡單來說，她是相對佈局的升級版本，但是區別與相對佈局更加強調約束。何為約束，即控制元件之間的關係。 她能讓你的佈局更加扁平化，一般來說一個介面一層就夠了；同時藉助於AS我們能極其簡單的完成

Android ConstraintLayout百分比佈局-適配終結者（基本適配所有機型）

對於Android開發者來講，適配始終是個大問題，在小米手機上面是一個樣，在oppo上面是一個樣，真是讓人惱火。 現在講一下筆者最近遇到的問題，公司專案需求，一顆樹，樹有很有枝椏，枝椏上面要掛紅包，這需求是真坑爹，精度要求特別高，這肯定不能使用DP適配了，最開始想自己根據螢

Android約束佈局ConstraintLayout動態設定Id失效問題解決辦法

      當你需要在程式碼中動態給約束佈局新增約束，而不能在xml檔案中寫約束的時候，你需要用到ConstraintSet這個類，谷歌給我們寫的很清楚。https://developer.android.google.cn/reference/android/support

Android線性佈局和相對佈局的詳解和區別

一、線性佈局（LinearLayout） 線性佈局：線性佈局是我們在開發中最常見的佈局方式之一，線性佈局可以分為水平線性佈局和垂直線性佈局這兩種佈局方式 線性佈局的屬性（決定佈局中元素的位置和佈局）： android:layout_gravity ( 是本元素相對於父元素的

android排版(佈局)

幀佈局 就是覆蓋（覆蓋之前的控制元件） FrameLayout 還有一種方式就是用x y軸去調位置 不過比較麻煩  <TextView         android:id="@

android studio佈局顯示異常

design一直看不了 發現佈局右上角有個感嘆號 點開發現提示failed to instantiate one or more classes，百度一下搜到的csdn一個答案https://blog.csdn.net/newlai913/article/details/68939791&

android LinearLayout佈局巢狀覆蓋問題

在做android  UI佈局時，用了LinearLayout巢狀，發現效果並不如我預料一般 查了下資料，說是要設定layout_weight屬性 資料說得不是很清楚，也沒仔細看，就去弄，結果越弄越混亂。 於是靜下心來，自己寫xml測試，發現如下。 我用eclipse開發，

Android FlexboxLayout佈局屬性詳解

FlexboxLayout是Google I/O 大會上開源的一個佈局控制元件，使得 Android 裡的佈局能像 CSS中的Flexible屬性一樣能擁有同樣強大的功能。FlexboxLayout 可以理解為高階的 LinearLayout ，因為這兩個佈局都將其子檢視按序排列

Android：佈局中的view存成圖片

新浪部落格轉載地址 http://blog.sina.com.cn/s/blog_6854b8350101qila.html android可以將佈局中的view存成圖片。這個問題雖然不常見，但是有還是會應用到。來看下面一段程式碼 View view = getLayoutInfla