2. 程式人生 > >Android基礎之布局ConstraintLayout

Android基礎之布局ConstraintLayout

阿新 • • 發佈：2017-08-15
工具類 disable star next 出版 vertica 基本用法 特性 box

Google I/O 2016 上發布了 ConstraintLayout，據說很強大，那就一探究竟吧！

gradle配置

      compile ‘com.android.support.constraint:constraint-layout:1.0.0-beta2‘
  • 1
  • 1

閱讀前提：熟悉四大基礎布局

一、位置控制

  • 8個邊界控制屬性
    註：最左邊表示可移動的最左邊，左邊表示View的左邊邊界
    app:layout_constraintLeft_toLeftOf 
    app:layout_constraintLeft_toRightOf 我最左邊的位置 在別人的右邊 下面的意思類似
    app:layout_constraintRight_toRightOf 
    app:layout_constraintRight_toLeftOf
    app:layout_constraintTop_toTopOf 
    app:layout_constraintTop_toBottomOf
    app:layout_constraintBottom_toBottomOf
    app:layout_constraintBottom_toTopOf
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

不明白沒關系，看例子。

* 例如：

技術分享

    <!--如圖，左邊一個A，右邊一個C，我如果想新建一個B在A C之間，如下-->
     <Button
        app:layout_constraintLeft_toRightOf="@+id/bt_a"
        app:layout_constraintRight_toLeftOf="@+id/bt_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"/>
    <!--字面理解：1.我最左邊的位置，在button A的右邊-->
    <!--字面理解：1.我最右邊的位置，在button C的左邊-->
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

如上圖中，最左邊和最右邊的位置已經確定，B出現在A和C中間，但是如果我不想在中間怎麽辦（比如說我想靠右一點）

  • 這裏引入2個偏移屬性
    layout_constraintHorizontal_bias（水平方向偏移）（範圍0-1）
    layout_constraintVertical_bias（垂直方向偏移）（範圍0-1）
  • 1
  • 2
  • 1
  • 2

怎麽理解？我只發圖不說話，看圖
如圖：B的水平偏移為0
技術分享

    app:layout_constraintHorizontal_bias="0"
  • 1
  • 1

如圖：B的水平偏移為0.5
技術分享

    app:layout_constraintHorizontal_bias="0.5"
  • 1
  • 1

如圖：B的水平偏移為0.7
技術分享

    app:layout_constraintHorizontal_bias="0.7"
  • 1
  • 1

如圖：B的水平偏移為1
技術分享

    app:layout_constraintHorizontal_bias="1"
  • 1
  • 1

總結：（明白了嗎？不明白請繼續看圖），
1.通過8個邊界約束屬性可以固定View的最左邊、最右邊、最上面、最下面的位置
2.通過設置偏移屬性，可以控制View在邊界範圍移動，最左邊是0，最右邊是1，中間是0.5
3.當設置了邊界約束屬性後，View會自動出現在中間，也就是說，默認的偏移屬性是0.5

二、大小控制

  • 先介紹兩個布局大小控制屬性
    layout_constraintHorizontal_weight //水平方向上比重，類似線性布局
    layout_constraintVertical_weight  //垂直方向上比重，類似線性布局
  • 1
  • 2
  • 1
  • 2

下面我將用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:ignore="MissingConstraints">
        <!--A邊界控制屬性 有 左 和 右-->
        <Button
            android:id="@+id/bt_a"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="A"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/bt_b"/>
        <!--B邊界控制屬性 也有 左 和 右-->
        <Button
            android:id="@+id/bt_b"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="B"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintLeft_toRightOf="@id/bt_a"
            app:layout_constraintRight_toLeftOf="@id/bt_c"/>
        <!--C邊界控制屬性 只有右-->
        <Button
            android:id="@+id/bt_c"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="C"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintRight_toRightOf="parent"/>
    </android.support.constraint.ConstraintLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

效果如下(效果圖中C明顯比較小，說明C 比重設置沒有效果)
技術分享

結論：
1.實現水平方向線性布局，所有的View都必須設置左右邊界控制屬性，而且相互控制
2.實現比重大小控制，必須設置layout_width=”0dp”

如圖布局（能看懂基本上說明你已經掌握了比重控制）

    <?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:ignore="MissingConstraints">
        <TextView
            android:background="#0f0"
            android:id="@+id/bt_a"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="A"
            app:layout_constraintBottom_toTopOf="@id/bt_b"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/bt_b"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_weight="1"/>
        <TextView
            android:background="#0f0"
            android:id="@+id/bt_b"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="B"
            app:layout_constraintBottom_toTopOf="@id/bt_c"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintLeft_toRightOf="@id/bt_a"
            app:layout_constraintRight_toLeftOf="@id/bt_c"
            app:layout_constraintTop_toBottomOf="@id/bt_a"
            app:layout_constraintVertical_weight="1"/>
        <TextView
            android:background="#0f0"
            android:id="@+id/bt_c"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="C"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintLeft_toRightOf="@id/bt_b"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/bt_b"
            app:layout_constraintVertical_weight="1"/>
    </android.support.constraint.ConstraintLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

效果圖如下：
技術分享

三、位置控制補充

絕對坐標：父布局左上角默認為（0，0），這個坐標是是相對於父布局左上角的坐標

    layout_editor_absoluteX 絕對坐標x
    layout_editor_absoluteY 絕對坐標y
  • 1
  • 2
  • 1
  • 2

當設置了左邊界控制屬性，x絕對坐標失效，請使用基礎布局的（layout_marginLeft替代）
當設置了上邊界控制屬性，y絕對坐標失效，請使用基礎布局的（layout_marginTop替代）

因此，，絕對坐標。。不好適配，也不好控制。差評。

另外附上一張
Android Studio 超智能的控制設置圖，如下

技術分享

頂
4
踩
0

相關文章推薦
  • • Android新特性介紹，ConstraintLayout完全解析
  • • 有關Activity樣式 、狀態欄透明、屏幕亮度問題應用場景及其總結
  • • ConstraintLayout 的入門用法
  • • Android ConstraintLayout 約束布局詳解
  • • 歷久而新，我的新書《第二行代碼》已出版！
  • • Android圖片加載框架最全解析（一），Glide的基本用法
  • • android網絡編程--從網絡下載圖片，並保存到內存卡
  • • 了解使用Android ConstraintLayout
  • • Android ConstraintLayout詳解
  • • 探索Android ConstraintLayout布局
猜你在找

Android基礎之布局ConstraintLayout

相關推薦

Android基礎之布局ConstraintLayout

工具類 disable star next 出版 vertica 基本用法 特性 box Google I/O 2016 上發布了 ConstraintLayout，據說很強大，那就一探究竟吧！ gradle配置 compile ‘com.and

Android開發之布局文件裏實現OnClick事件關聯處理方法

intent dsm nbsp ext 關聯 you vertica findview 時間 一般監聽OnClickListener事件，我們都是通過Button button = (Button)findViewById(....); button.se

android基礎--五大布局

<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_widt

android界面設計之布局管理

tla 元素 utf mage 布局管理 上一個 兩種 abs htm 談到android界面設計，各種布局樣式不得不提！傳統的布局方式有6種，我們會一一介紹。 在android studio2.2版本之後出現了一款超棒的布局方式，真正意義上的所見即所得，後面我們也會講到！

蝸牛—Android基礎之button監聽器

自適應 ack cti tool stat action per onclick nts XML文件中有一個textView 和 一個button。 <LinearLayout xmlns:android="http://schemas.android.com/a

Android 編譯錯誤——布局 Error parsing XML: not well-formed (invalid token)

XML width 文件 format source 註意 for 編碼 invalid 在修改了Android布局文件後，編譯出現Error parsing XML: not well-formed (invalid token)。 首先先排查xml文件的編碼格式是否

iOS中xib與storyboard原理，與Android界面布局的異同

ast int mvc color ron rect sdn -m control 用文本標記語言來進行布局，用的最多的應該是HTML語言。HTML能夠理解為有一組特殊標記的XML語言。 一、iOS中xib與storyboard顯示原理 在iOS中基

Android ListView多布局講解

androidListview優化是一個老生常談的事情了，其優化的方面也有很多種，例如，布局重用、在getView()中減少邏輯計算、減少在頁面滑動的時候加在圖片，而是在頁面停止滾動的時候再加在圖片。而今天要介紹的是另一種方式，那就是多布局。一般使用的場景有一下兩種情況：① 當一個item有多重布局的情況下，

aNDROID基礎之INTENT(二)

5% hao123 androi music android基礎 lis .com key 基礎 %E8%BD%AC%E8%BD%BDaNDROIDkEY%E5%A4%84%E7%90%86%E6%B5%81%E7%A8%8B http://music.hao123.co

aNDROID控件布局常用屬性

roi aid 布局 5% 控件 and andro 常用屬性 http %E8%A7%A3%E5%8E%8BJDkDOCs%E9%81%87%E5%88%B0%E7%9A%84%E9%94%99%E8%AF%AF http://music.hao123.com/song

20170830 wxPython的簡單使用之布局

width erl val tor div extc min ati hide 20170830 wxPython的簡單使用 .wiz-code-container { position: relative; padding: 8px 0; margin: 5px 25px

css布局之布局

冰箱 移動端 前端開發 編寫 發的 ive 前端 max 正常 一、流式布局（Liquid Layout） 流式布局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕分辨率進行適配調整，但整體布局不變。代表作柵欄系統（網格系統）。 網頁中主要的劃分區域的

【Android】Android六種布局詳解

spec rec 默認 bottom ron ado 居中 右下角 控制 這篇就對LinearLayout、RelativeLayout、自定義ViewGroup、FrameLayout、TableLayout、AbsoluteLayout六種布局進行詳細的講解。 1

Android基礎之自定義Application

ase man googl extends == attach 做到 不知道 ces Application Android提供了一個Application類，每當應用程序啟動時，系統會自動將這個類進行初始化。在項目中，我們在一些工具類采用了單例模式，其生命周期和整個應用程

QT之布局管理器（十九）

QT 布局管理器 水平 垂直 我們在之前的 GUI 開發中都是使用的是絕對定位，何謂絕對定位呢？就是我們直接在像素級指定各個組件的位置和大小。比如我們之前使用的 void QWidget::move(int x, int y)；void QWidget::resize(int

Android studio中布局文件出現render problem問題

api版本 問題 -s 版本 andro style render pro and 當做layout時，可能會出現render problem的情況。意思就是無法預覽當前布局頁面，這種情況是因為API版本太高造成的。只需要修改API為更低版本即可。 Android stu

[譯]Android view 測量布局和繪制的流程

註意 images draw can www -i str 中一 opengl-es 原文鏈接 創造優秀的用戶體驗是我們開發者的主要目標之一.為此, 我們首先要了解系統是如何工作的, 這樣我們才可以更好的與系統配合, 從它的優點中獲益, 規避它的缺陷.

Android入門——六大布局詳解

本博文對LinearLayout、RelativeLayout、自定義ViewGroup、FrameLayout、TableLayout、AbsoluteLayout六種佈局進行詳細的講解。 一.LinearLayout佈局 <?xml version="1.0" encodin

Android基礎之佈局篇

工作之餘，整理一下自己所掌握的Android知識，希望能對學習Android開發的小夥伴有所幫助： android  有五種佈局:     >Linearlayout  線性佈局     >RelativeLayout  相對佈局          >Fra

Android基礎之資料儲存（SharedPreference）

Android資料持久化是說在斷電後資料不會丟失，而根據儲存位置和實現方式一般有3種方式,這裡說sharedpreferences： 一，sharedpreferences儲存 該種方式是在應用獨有目錄data/data/[packgename]/shared_prefs/下