Android基础之布局ConstraintLayout

Posted 挣脱生命的束缚...

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android基础之布局ConstraintLayout相关的知识，希望对你有一定的参考价值。

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的主要内容，如果未能解决你的问题，请参考以下文章

Android基础之布局ConstraintLayout

Android UI基础知识之四种常用布局

Android开发基础之布局管理器RelativeLayout

零基础学Android之常用控件

Android UI 基础知识之布局的声明和结构等

Android Studio基础ListView之SimpleAdapter