ConstraintLayout

官方文档介绍

A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way.

简要介绍

ConstraintLayout是一个AS2.2加入的新的约束布局,更可以说是进阶版的RelativeLayout,它包含了RelativeLayout一部分的属性,但有其他的更加强大的功能。而此时新增的可视化的编程界面使我们能够更加方便地使用ConstraintLayout。Google官方推荐对于其所有的操作都在可视化编程的Design模式下完成。
约束总共分为三种:子控件互相之间的约束、子控件和父控件的约束、子控件和Guideline之间的约束。

基本演示

首先,先创建一个新的项目。按照图示的方法打开至Design模式,并将一个ConstraintLayout拖动到可视化界面中。




观察界面中的蓝色框以及最右的"Properties"那一栏,以后对于ConstraintLayout的操作基本上都在这两个地方完成即可。

注:以下的演示都是先演示图形化编程界面再演示xml代码变动(包括新增的内容和变动的内容)

1)Relative Positioning

这个属性是用来实现有约束的组件之间的相对定位的。

有以下的属性
  • 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代码:

<android.support.constraint.ConstraintLayout
        android:layout_width="138dp"
        android:layout_height="495dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp"
        app:layout_constraintVertical_bias="0.0"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent">

    </android.support.constraint.ConstraintLayout>

所以说,约束可以分为垂直方向上的和水平方向上的。

如果在某一个方向上,比如在水平方向上,左右两边都设置了约束,则组件为了同时满足两个约束会居中显示。

2)Margins

这个属性是用来设置有约束的组件之间的最小的间隙的。

有以下的属性:
  • android:layout_marginStart
  • android:layout_marginEnd
  • android:layout_marginLeft
  • android:layout_marginTop
  • android:layout_marginRight
  • android:layout_marginBottom


在之前演示代码中已经可以看到有margin。

试着按照如图修改:



图中的properties红框处就是专门用于设置margin值的。

<android.support.constraint.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="107dp"
        android:layout_height="300dp"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="116dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5">

    </android.support.constraint.ConstraintLayout>

3)Bias

这个属性,顾名思义便是偏移,也就是当前组件偏移了约束它的组件的距离,可用于将约束偏向一边。其支持浮点数,默认值是0.5即无偏移。

有以下的属性
  • layout_constraintHorizontal_bias
  • layout_constraintVertical_bias

在之前的例子中偏移值都为默认的0.5,也就是没有偏移,现在来修改修改,如图:



框住的两个地方分别用于修改横向和纵向的两个方向的偏移。

<android.support.constraint.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="107dp"
        android:layout_height="300dp"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="116dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.8"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.00999999">

    </android.support.constraint.ConstraintLayout>

4)尺寸约束

指定组件的大小可以有以下的三种方式:用具体数值指定、WRAP_CONTENT(自动根据内容计算出合适的大小)、0dp(即MATCH_CONSTRAINT,由约束该组件的组件来决定)

1)第一种方式


<android.support.constraint.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="116dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:2"
        app:layout_constraintHorizontal_bias="0.597"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.05">

2)第二种方式



为了方便演示,新建了一个button。

如图,计算机会根据内容“button"的大小自动计算出最优的高度

<Button
            android:id="@+id/button"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:text="Button"
            tools:layout_editor_absoluteX="89dp"
            tools:layout_editor_absoluteY="184dp" />

3)第三种方式



如图,将height改为0dp也就是match_parent之后,他会自动变换为父组件的高度的大小。

此时可以用之前提到的margin来进行调整



<Button
            android:id="@+id/button"
            android:layout_width="150dp"
            android:layout_height="match_parent"
            android:layout_marginBottom="50dp"
            android:layout_marginTop="50dp"
            android:text="Button"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.333"
            tools:layout_editor_absoluteX="75dp" />

4)
此外,控制组件的大小还可以使用引导线guideline,它可以用于屏幕的划分,将屏幕划分为几块,和它约束的组件只能出现在该guideline划分的区域内,最常用于等分屏幕。

添加步骤如下



如图,guideline将屏幕划分为两部分,两个按钮各自约束在自己的区域内,可根据该区域来约束其中的组件的大小。

<Button
            android:id="@+id/button"
            android:layout_width="150dp"
            android:layout_height="0dp"
            android:layout_marginBottom="50dp"
            android:layout_marginTop="50dp"
            android:text="Button"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0"
            android:layout_marginLeft="8dp"
            app:layout_constraintLeft_toLeftOf="@+id/guideline"
            android:layout_marginRight="8dp"
            app:layout_constraintRight_toRightOf="parent" />

        <android.support.constraint.Guideline
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/guideline"
            app:layout_constraintGuide_begin="117dp"
            android:orientation="vertical" />


后记

ConstraintLayout还有很多我还未能熟练的掌握的功能,待我以后多加练习之后在进行分享

参考官方文档:https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#DimensionConstraints

版权声明:本文为qq_34788095原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_34788095/article/details/75579290

智能推荐

【Spark 内核】 Spark 内核解析-下

Spark内核泛指Spark的核心运行机制,包括Spark核心组件的运行机制、Spark任务调度机制、Spark内存管理机制、Spark核心功能的运行原理等,熟练掌握Spark内核原理,能够帮助我们更好地完成Spark代码设计,并能够帮助我们准确锁定项目运行过程中出现的问题的症结所在。 Spark Shuffle 解析 Shuffle 的核心要点 ShuffleMapStage与ResultSta...

Reflect反射的基础知识

写个父类: 写个子类: 利用反射获得该子类中的属性,方法,构造,父类及接口: 运行结果:...

spring cloud netflix (07) 服务的消费者(feign)

前言 完整知识点:spring cloud netflix 系列技术栈 Feign (同步通信 HTTP通信) feign是基于接口完成服务与服务之间的通信的 搭建Feign服务 项目结构 项目搭建 pom.xml application类 application.yml 使用feign完成服务与服务之间的通信 feign是基于接口完成服务与服务之间的通信的...

AtCoder Beginner Contest 174 E.Logs

AtCoder Beginner Contest 174 E.Logs 题目链接 到最后才发现是二分,菜菜的我/(ㄒoㄒ)/~~ 我们直接二分 [1,max{a[i]}][1,max\lbrace a[i]\rbrace][1,max{a[i]}] 即可,对每一个 midmidmid,每个数 a[i]a[i]a[i] 只需要切 a[i]−1mid\frac{a[i]-1}{mid}mi...

小程序基础与实战案例

小程序开发工具与基础 小程序开发准备: 申请小程序账号( appid ) 下载并安装微信开发者工具 具体步骤如下: 先进入 微信公众平台 ,下拉页面,把鼠标悬浮在小程序图标上 然后点击 小程序开发文档 照着里面给的步骤,就可以申请到小程序账号了。 然后就可以下载 开发者工具 了 下载完打开后的界面就是这个样子 下面让我们来新建一个小程序开发项目: 在AppID输入自己刚刚注册的AppID就可以,或...

猜你喜欢

VMware centOS7 下通过minikube部署Kubernetes

1、环境准备: VMware CentOS-7-x86_64 CPU:2*2core 内存:8G 宿主机和虚拟机需网络互通,虚拟机外网访问正常 Centos发行版版本查看:cat /etc/centos-release root用户操作 2、禁用swap分区 Kubernetes 1.8开始要求关闭系统的Swap,可暂时关闭或永久禁用, 使用 $ free -m 确认swap是否为开启状态 $ s...

逻辑回归与scikit-learn

欢迎关注本人的微信公众号AI_Engine LogisticRegression 算法原理 一句话概括:逻辑回归假设数据服从伯努利分布,通过极大化似然函数(损失函数)的方法,运用梯度下降或其他优化算法来求解参数,来达到将数据二分类的目的。 定义:逻辑回归(Logistic Regression)是一种用于解决二分类(0 or 1)问题的机器学习方法,用于估计某种事物的可能性(不是概率)。比如某用户...

指针OR数组?用他们来表达字符串又有何不同?

cocowy的编程之旅 在学习C语言的过程中我们经常可以看到或者听到这样一句话:数组其实等价于指针,例如: 在这里可以轻松的看出输出后他们的值相等,其实在计算机内存里面,p为本地变量,有着他自己的作用域。而指针变量q保存着这个数组的首地址,通过*号指向这个地址保存的变量值。 然而我们再看一个例子: 这个时候计算机报错,这是为什么呢? 其实原因很简单,指针说指向的这个字符串的地址是位于计算机代码段地...

广度搜索

广度搜索的基本使用方法 广度搜索不同于深度搜索,是一种一步一步进行的过程,每一个点只记录一遍。需要用到队列记录每一步可以走到的位置,找到目标位置输出步数即可。 用到的知识:结构体、队列 如图 首先我们需要定义一个结构体来存储每个遍历到的点和步数 广搜不会用到递归,所以可以直接在主函数里写,这里需要定义一个结构体队列 初始化队列并将起始点入列 遍历 完整代码...

NIO Socket 编程实现tcp通信入门(二)

1、NIO简介 NIO面向通道和缓冲区进行工作,数据总是从通道读取到缓冲区中,或者从缓冲区写入到通道中。可以双向传输数据,是同步非阻塞式IO。NIO还引入了选择器机制,从而实现了一个选择器监听多个底层通道,减少了线程并发数。用NIO实现socket的Tcp通信需要掌握下面三个知识点: Buffer 缓冲区 Channel 通道 Selector 选择器   2、java.nio.Buff...