2. 程式人生 > >ContraintLayout的基本屬性與用法

ContraintLayout的基本屬性與用法

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

開局一張圖，部落格全靠編： 在這裡插入圖片描述 該佈局如果以傳統佈局方式來寫的話是這樣的（由於顯示邏輯問題實際情況更復雜，demo略做精簡）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/product_item"
    android:layout_width="match_parent"
    android:layout_height="140dp"
    android:layout_marginBottom="2dp"
    android:layout_marginLeft="7dp"
    android:layout_marginRight="7dp">

    <FrameLayout
        android:id="@+id/product_img_container"
        android:layout_width="117dp"
        android:layout_height="117dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginBottom="7dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="7dp">
        <!-- 商品圖片 -->
        <ImageView
            android:id="@+id/sku_img"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            tools:src="@drawable/ic_launcher_background" />

        <TextView
            android:id="@+id/sku_num"
            android:layout_width="wrap_content"
            android:layout_height="20dp"
            android:layout_gravity="end|right|bottom"
            android:paddingBottom="2dp"
            android:paddingLeft="6dp"
            android:paddingRight="6dp"
            android:paddingTop="2dp"
            android:textColor="#ffffff"
            android:textSize="11dp"
            tools:text="4件" />
    </FrameLayout>


    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="17dp"
        android:layout_marginRight="17dp"
        android:layout_marginTop="15dp"
        android:layout_toRightOf="@id/product_img_container"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:maxLines="2"
        android:textColor="#ff000000"
        android:textSize="16dp"
        android:textStyle="bold"
        tools:text="飛利浦乾溼兩a~須a abc def" />

    <!-- 商品介紹 -->
    <TextView
        android:id="@+id/desc"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/title"
        android:layout_below="@+id/title"
        android:layout_marginRight="17dp"
        android:layout_marginTop="9.5dp"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:lineSpacingMultiplier="1.1"
        android:maxLines="1"
        android:textColor="#818181"
        android:textSize="13dp"
        tools:text="西裝作為職場必備 ITEM其修身線條，挺括的外觀，舒適的穿著西裝作為職場必備 ITEM其修身線條，挺括的外觀" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/title"
        android:layout_marginBottom="12dp">

        <ImageView
            android:id="@+id/author_img"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_alignBottom="@id/author_name"
            android:layout_marginBottom="2dp"
            tools:src="@drawable/ic_launcher_background" />

        <TextView
            android:id="@+id/author_name"
            android:layout_width="wrap_content"
            android:layout_height="25dp"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="5dp"
            android:layout_toRightOf="@+id/author_img"
            android:ellipsize="end"
            android:gravity="center_vertical"
            android:maxLength="6"
            android:textColor="#6A6A6A"
            android:textSize="11sp"
            tools:text="美麗教主" />

        <!--喜歡人數&點贊-->
        <TextView
            android:id="@+id/common_like_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:textSize="13dp"
            android:textColor="@color/colorAccent"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="6dp"
            tools:text="300人喜歡"/>
    </RelativeLayout>
</RelativeLayout>

可以看到，這個簡單的佈局已經做了兩層巢狀 在這裡插入圖片描述 如果我們用ContraintLayout，就一層佈局足以，不用巢狀。之前寫的佈局我們可以以這種方式簡單轉化一下：在desin中右擊 在這裡插入圖片描述 轉化完成後，我們的佈局會亂，因為會把我們所有的巢狀佈局刪掉，如Relativelayout，FrameLayout等。所以我們需要手動調整一下。 當然，你可以直接用contraintLayout佈局編寫，在gradle檔案中新增依賴即可。

implementation 'com.android.support.constraint:constraint-layout:1.1.3'

在編寫XML檔案之前，我們需要了解一下ConstraintLayout的基本屬性：

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

通常情況下，這些屬性足夠讓我們編譯一套複雜的佈局。其實這些屬性很簡單，你完全可以當做加強版本的RelativeLayout來使用，Left_toLeftOf的意思就是我的左邊跟xxid的左邊相鄰，其他意思類推。 例如假設你的textview要在imageView的右邊，那麼程式碼就這麼寫 在textView控制元件中 app:layout_constraintLeft_toRightOf="@圖片控制元件的id" 所以改變完後的程式碼如下：

<?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:id="@+id/product_item"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="2dp"
    android:layout_marginLeft="7dp"
    android:layout_marginRight="7dp">

    <!-- 商品圖片 -->
    <ImageView
        android:id="@+id/sku_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        tools:src="@drawable/ic_launcher_background" />

    <TextView
        android:id="@+id/sku_num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="2dp"
        android:paddingLeft="6dp"
        android:paddingRight="6dp"
        android:paddingTop="2dp"
        android:textColor="#ffffff"
        android:textSize="13dp"
        app:layout_constraintBottom_toBottomOf="@id/sku_img"
        app:layout_constraintRight_toRightOf="@id/sku_img"
        tools:text="4件" />


    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:maxLines="2"
        android:textColor="#ff000000"
        android:textSize="16dp"
        android:textStyle="bold"
        app:layout_constraintLeft_toRightOf="@id/sku_img"
        app:layout_constraintRight_toRightOf="parent"
        tools:text="飛利浦乾溼兩a~須a abc def飛利浦乾溼兩a~須a abc def飛利浦乾溼兩a~須a abc de" />

    <!-- 商品介紹 -->
    <TextView
        android:id="@+id/desc"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:ellipsize="end"
        android:lineSpacingMultiplier="1.1"
        android:maxLines="1"
        android:textColor="#818181"
        android:textSize="13dp"
        app:layout_constraintLeft_toLeftOf="@id/title"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/title"
        tools:text="西裝作為職場必備 ITEM其修身線條，挺括的外觀，舒適的穿著西裝作為職場必備 ITEM其修身線條，挺括的外觀" />


    <ImageView
        android:id="@+id/author_img"
        android:layout_width="30dp"
        android:layout_height="30dp"
        app:layout_constraintBottom_toBottomOf="@id/sku_img"
        app:layout_constraintLeft_toLeftOf="@id/title"
        tools:src="@drawable/ic_launcher_background" />

    <TextView
        android:id="@+id/author_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:maxLength="6"
        android:textColor="#6A6A6A"
        android:textSize="11sp"
        app:layout_constraintBottom_toBottomOf="@id/author_img"
        app:layout_constraintLeft_toRightOf="@id/author_img"
        tools:text="美麗教主" />

    <!--喜歡人數&點贊-->
    <TextView
        android:id="@+id/common_like_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="13dp"
        app:layout_constraintBottom_toBottomOf="@id/sku_img"
        app:layout_constraintRight_toRightOf="parent"
        tools:text="300人喜歡" />

</android.support.constraint.ConstraintLayout>

佈局截圖如下： 在這裡插入圖片描述 可以看到，我們不用巢狀任何一個佈局即可完成該佈局的編碼工作，所以在效能上，尤其是更加複雜的佈局，豈不是很爽。 當然，有可能你在佈局的過程中會遇到以下幾種情況：

  1. 兩個控制元件之間怎麼居中對齊？
  2. 我設定了android:ellipsize="end"為什麼沒生效
  3. 在某些邏輯下我要隱藏很多控制元件，為了方便，我在傳統佈局裡可以將這些控制元件設定在一個ViewGroup裡，就可以達到隱藏ViewGroup來簡化單獨的控制元件隱藏邏輯，現在新佈局不讓用佈局嵌套了，我難道要一個個控制元件單獨隱藏？
  4. 我所依賴的一個控制元件在某些邏輯下setVisibiltyGone後，自身的位置發生了重大偏差，怎麼辦?

這些問題，我們都可以解決，篇幅問題，我們下期會依依解決這些問題，同時引出更多的高階用發，高階屬性。

相關推薦

ContraintLayout的基本屬性與用法

開局一張圖，部落格全靠編： 該佈局如果以傳統佈局方式來寫的話是這樣的（由於顯示邏輯問題實際情況更復雜，demo略做精簡） <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns

C/C++ %s %d %u 基本概念與用法

%d 十進位制有符號整數 %u 十進位制無符號整數 %f 浮點數 %s 字串 %c 單個字元 %

機器學習筆記：Fisher Vector基本原理與用法

近期在看的動作識別相關的工作中fisher vector及其改進版本被廣泛的應用，因此打算從Fisher Vector開始入手整理相關知識。 參考的部落格內容： 完整介紹Fisher Ve

【Objective-C】OC中類別(Category)基本概念與用法

類別（Category）的基本概念      封裝是面向物件的一個特徵,OC也不例外,但是有的時候我們會碰到這樣的一種情況,不如我封裝了一個類， 不想再動它了，可是隨著程式功能的增加,需要在那個

【Objective-C】OC中引用計數和物件所有權的基本概念與用法

cocoa中的記憶體管理機制--引用計數 Cocoa中提供了一個機制來實現上面的邏輯模型,它被稱為“引用計數”或者“保留計數”。引用計數的數值表示物件有幾個“人”在使用它 每一個物件都擁有

Objective-C]OC中類別(Category)基本概念與用法

類別（Category）的基本概念 封裝是面向物件的一個特徵,OC也不例外,但是有的時候我們會碰到這樣的一種情況,不如我封裝了一個類， 不想再動它了，可是隨著程式功能的增加,需要在那個類中增加一個小小的方法，這是我們就不必再那個類中 做修改或者在定義一個子類，只需要

Android學習之shape屬性與用法

經常在專案中使用shape在XML中繪製各種形狀，簡單整理了一下shape的屬性與用法。 shape的圖形選項有四種： rectangle（長方形）預設的形狀，可以畫出直角矩形、圓角矩形、弧形等 oval（橢圓） 用得比較多的是畫正圓 line（線條） 可

Android入門——Fragment詳解之基本概念與用法（一）

引言 Android在3.0中引入了Fragments的概念,其目的是用在大螢幕裝置上–例如平板電腦上,支援更加動態和靈活的UI設計。平板電腦的螢幕要比手機的大得多,有更多的空間來放更多的UI元件,並且這些元件之間會產生更多的互動。Fragment允許這樣的一

02 ndarray的屬性 、ndarray的基本操作（索引、切片、變形、連線、切分、副本）、聚合操作、矩陣操作、排序、Panda資料結構、Series建立、索引與切片、屬性與方法、運算

二、ndarray的屬性 4個必記引數： ndim：維度 shape：形狀（各維度的長度） size：總長度 dtype：元素型別 import matplotlib.pyplot as plt ndarr = plt.imread("./jin.png") plt.

資料探勘中基本概念--資料型別的屬性與度量

當我們在學習資料探勘演算法或者機器學習演算法時，我們都會發現某些演算法只能應用於特定的資料型別，所以在學習資料探勘演算法或者機器學習演算法前我們需要對資料型別的屬性度量有一個很清晰的瞭解，如果在資料型別這一步就出現問題，不管演算法再怎麼優異肯定也是白搭！！ 2.1.1  屬性

爬蟲基本原理與實戰---12、選擇器的用法

Scrapy提取資料有自己的一套機制，被稱作選擇器（selectors）,通過特定的Xpath或者CSS表示式來選擇HTML檔案的某個部分 Xpath是專門在XML檔案中選擇節點的語言，也可以用在HT

Vue- 元件與props屬性的用法

在 Vue 裡，一個元件實質上是一個擁有預定義選項的一個 Vue 例項：(單獨測試的時候記得new Vue()渲染) // Define a new component called todo-itemVue.component('todo-item', { temp

js 的prototype 屬性和用法，外加__proto__ JavaScript中__proto__與prototype的關係

var ob = { };//超級簡單的空物件 alert(JSON.stringify(ob.prototype));// undefined 能夠引用prototype的東西絕對是函式，絕對是函式，絕對是函式，prototype是屬於函式的一個屬性，prototype是屬於函式的一個屬性，prototy

vue基本屬性-條件與迴圈

1、v-if 條件判斷使用 v-if 指令： <span v-if="flag"> 如果flag為true則顯示,false不顯示! </span> 2、v-else <div v-if="Math.random() > 0.5">

Spring裝配基本屬性的原理分析與程式碼實現

<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-ins

android中webView 的基本使用與屬性總彙

為了使APP更加具有靈活性和可控制性，我們通常會在APP中內嵌運營人員可以自由切換的網頁。這時候我們就要用到一個神奇的控制元件webView。本篇文章由淺入深的詳細介紹webView 的使用與各項屬性，從最常用屬性到最不常用屬性依次進行了充分講解。(本文是由易到

[Linux] Linux 中的基本命令與目錄結構（初稿）

展開 src 文件名 auto 使用 bin target editor 提示符 Linux 中的基本命令與目錄結構 目錄 一、Linux 基本目錄結構 二、基本命令 三、瀏覽目錄 四、中間命令 五、更改密碼 六、環境變量和 shell 變量 七、命令路

[Linux] Linux 中的基本命令與目錄結構（待移除）

head 命令 存在 壓縮 下載 創建文件 name 批處理 targe 簡化 Linux 中的基本命令與目錄結構 目錄 一、Linux 基本目錄結構 二、基本命令 三、瀏覽目錄 四、中間命令 五、更改密碼 六、環境變量和 shell 變量 七、命令路徑

CSS Display屬性與盒模型

鏈接 依據 使用 dem align ont 情況 rac rgb 由於HTML流式文檔的特性，頁面布局往往是新手最為頭疼的問題之中的一個。 每一個HTML元素都會渲染為一個Box，可分為inline Box和block Box。 依據display屬性的不同。Box

Docker基本命令與使用 —— Docker容器(一)

使用 -a 基本 com sta start 日誌 靜態頁面 don 一.容器的基本操作 1. 啟動容器 docker run IMAGE [COMMAND] [ARG...] run 在新容器中執行命令 eg: docker run ubuntu echo ‘He