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的更多相关文章

  1. 将Android Studio默认布局ConstraintLayout切换成LinearLayout

    将Android Studio默认布局ConstraintLayout切换成LinearLayout     大部分人初次使用google android 扁平化布局ConstraintLayout都 ...

  2. Android 基础：常用布局 介绍 & 使用（附 属性查询）

    Android 基础:常用布局 介绍 & 使用(附 属性查询)   前言 在 Android开发中,绘制UI时常需各种布局 今天,我将全面介绍Android开发中最常用的五大布局 含 Andr ...

  3. Android 基础 （四大组件，五大存储，六大布局）

    Android四大组件: 参考:https://blog.csdn.net/shenggaofei/article/details/52450668 Android四大组件分别为activity.se ...

  4. 基础4 Android基础

    基础4 Android基础 1. Activity与Fragment的生命周期. Activity生命周期 打开应用 onCreate()->onStart()->onResume 按BA ...

  5. Android中的布局优化方法

    http://blog.csdn.net/rwecho/article/details/8951009 Android开发中的布局很重要吗?那是当然.一切的显示样式都是由这个布局决定的,你说能不重要吗 ...

  6. Android基础总结（8）——服务

    服务(Service)是Android中实现程序后台运行的解决方案,它非常适合用于去执行哪些不需要和用户交互而且还要长期运行的任务.服务的运行不依赖任何用户界面,即使当程序被切换到后台,或者用户打开了 ...

  7. Android基础-系统架构分析，环境搭建，下载Android Studio，AndroidDevTools，Git使用教程，Github入门，界面设计介绍

    系统架构分析 Android体系结构 安卓结构有四大层,五个部分,Android分四层为: 应用层(Applications),应用框架层(Application Framework),系统运行层(L ...

  8. Android基础新手教程——1.10 反编译APK获代替码&amp;资源

    Android基础新手教程--1.10 反编译APK获代替码&资源 标签(空格分隔): Android基础新手教程 本节引言: "反编译Apk".看上去好像好像非常高端的样 ...

  9. Android逆向系列文章— Android基础逆向（6）

    本文作者:HAI_ 0×00 前言 不知所以然,请看 Android逆向-Android基础逆向(1) Android逆向-Android基础逆向(2) Android逆向-Android基础逆向(2 ...

随机推荐

  1. 浅谈Eclipse调用Tomcat服务的原理

    浅谈Eclipse调用Tomcat服务的原理 转:http://www.thinksaas.cn/group/topic/341645/ 转:http://www.173it.cn/Html/?581 ...

  2. AngularX Http服务总结

    自己经常用的方式: 1.首先看httpModule Angular2的http访问经常采用两种方式: 共同点:导入相应的Module import {Http, RequestOptions, Res ...

  3. 使用python处理selenium中的获取元素属性问题

    # 获取我的订单元素class属性值 at = self.driver.find_element_by_link_text('我的订单').get_attribute('class') # 判断cla ...

  4. Byte.parseByte(String s,int radix)的解释

    1. 由 基本数据型态转换成 String String 类别中已经提供了将基本数据型态转换成 String 的 static 方法 也就是 String.valueOf() 这个参数多载的方法 有下 ...

  5. 剑指offer第七章&第八章

    剑指offer第七章&第八章 1.把字符串转换成整数 将一个字符串转换成一个整数,要求不能使用字符串转换整数的库函数. 数值为0或者字符串不是一个合法的数值则返回0 输入描述: 输入一个字符串 ...

  6. 【BZOJ4025】二分图 LCT

    [BZOJ4025]二分图 Description 神犇有一个n个节点的图.因为神犇是神犇,所以在T时间内一些边会出现后消失.神犇要求出每一时间段内这个图是否是二分图.这么简单的问题神犇当然会做了,于 ...

  7. mysql的三种安装方式（详细）

    安装MySQL的方式常见的有三种: rpm包形式 通用二进制形式 源码编译 1,rpm包形式 (1) 操作系统发行商提供的 (2) MySQL官方提供的(版本更新,修复了更多常见BUG)www.mys ...

  8. php 常用方法

    //返回json数据给js function json_output($err_code = 0 , $error_message = '' , $data = [] , $redirect = '' ...

  9. Bash命令查找本机公网IP

    用Bash命令查找本机公网IP wget -qO - http://ipecho.net/plain; echo

  10. php 运行模式

    1.php最常见的五种运行模式. CGI 通用网关接口 FastCGI 常驻内存的CGI CLI 命令行 Web模块  Apache等Web服务器 模块的形式加载php进程 ISAPI 已经不用了 2 ...