Android 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

边距
  • android:layout_marginStart

  • android:layout_marginEnd

  • android:layout_marginLeft

  • android:layout_marginTop

  • android:layout_marginRight

  • android:layout_marginBottom

被依赖空间GONE之后生效的边距:

- layout_goneMarginStart

- layout_goneMarginEnd

- layout_goneMarginLeft

- layout_goneMarginTop

- layout_goneMarginRight

- layout_goneMarginBottom

水平居中

app:layout_constraintLeft_toRightOf=“parent”

app:layout_constraintRight_toLeftOf="parent

垂直居中

app:layout_constraintTop_toBottompOf=“parent”

app:layout_constraintBottom_toTopOf=“parent”

例子:水平垂直居中:

<?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”

android:layout_width=“match_parent”

android:layout_height=“match_parent”>

<Button

android:id=“@+id/btnA”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:text=“A”

app:layout_constraintBottom_toTopOf=“parent”

app:layout_constraintLeft_toRightOf=“parent”

app:layout_constraintRight_toLeftOf=“parent”

app:layout_constraintTop_toBottomOf=“parent” />

</android.support.constraint.ConstraintLayout>

效果图:

这里写图片描述

偏移

layout_constraintHorizontal_bias // 水平偏移(0-1)

layout_constraintVertical_bias // 垂直偏移(0-1)

例子:按钮B水平偏移50%,相当于居中

<Button

android:id=“@+id/btnB”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:text=“B”

app:layout_constraintHorizontal_bias=“0.5”

app:layout_constraintLeft_toRightOf=“parent”

app:layout_constraintRight_toLeftOf=“parent” />

效果图:

这里写图片描述

可见性

与其他Layout的区别:

-当控件设为GONE时,被认为尺寸为0。可以理解为布局上的一个点。

-若GONE的控件对其它控件有约束,则约束保留并生效,但所有的边距(margin)会清零。

尺寸
MATH_CONSTRAINT
  • layout_constraintWidth_min和layout_constraintHeight_min:设置最小值

  • layout_constraintWidth_max和layout_constraintHeight_max:设置最大值

  • layout_constraintWidth_percent和layout_constraintHeight_percent:

设置控件相对于父容器的百分比大小(1.1.0开始支持)。使用之前需要先设置为百分比模式,然后设置设置宽高值为0~1之间。

设置为百分比模式的属性:

app:layout_constraintWidth_default=“percent”

app:layout_constraintHeight_default=“percent”

强制约束

当一个控件设为wrap_content时,再添加约束尺寸是不起效果的。如需生效,需要设置如下属性为true:

app:layout_constrainedWidth=”true|false”

app:layout_constrainedHeight=”true|false”

比例

控件可以定义两个尺寸之间的比例,目前支持宽高比。前提条件是至少有一个尺寸设置为0dp,然后通过layout_constraintDimentionRatio属性设置宽高比。设置方式有以下几种:

  • 直接设置一个float值,表示宽高比

  • 以” width:height”形式设置

  • 通过设置前缀W或H,指定一边相对于另一边的尺寸,如”H, 16:9”,高比宽为16:9

如果宽高都设置为0dp,也可以用ratio设置。这种情况下控件会在满足比例约束的条件下,尽可能填满父布局。

例子:按钮E宽度设为0dp,高度wrap_content,宽高比设为2:1;按钮F高度设为0dp,宽度设为wrap_content,宽高比设为1:3

<Button

android:id=“@+id/btnE”

android:layout_width=“0dp”

android:layout_height=“wrap_content”

android:text=“E”

app:layout_constraintDimensionRatio=“2:1”

app:layout_constraintLeft_toLeftOf=“parent”

app:layout_constraintTop_toBottomOf=“@id/btnB” />

<Button

android:id=“@+id/btnF”

android:layout_width=“wrap_content”

android:layout_height=“0dp”

android:text=“F”

app:layout_constraintDimensionRatio=“1:3”

app:layout_constraintTop_toBottomOf=“@id/btnE” />

效果图:

这里写图片描述

链这个概念是约束布局新提出的,它提供了在一个维度(水平或者垂直),管理一组控件的方式。

Guideline

可以理解为布局辅助线,用于布局辅助,不在设备上显示。

有垂直和水平两个方向(android:orientation=“vertical/horizontal”)

  • 垂直:宽度为0,高度等于父容器

  • 水平:高度为0,宽度等于父容器

有三种放置Guideline的方式:

  • 给定距离左边或顶部一个固定距离(layout_constraintGuide_begin)

  • 给定距离右边或底部一个固定距离(layout_constraintGuide_end)

  • 给定宽高一个百分比距离(layout_constraintGuide_percent)

例子:Guideline基准线放置到父布局高度10%的底部,按钮C放置到Guideline的上面,按钮D放到Guideline的下面:

<android.support.constraint.Guideline

android:id=“@+id/guideLineBottom”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

app:layout_constraintGuide_percent=“0.9”

android:orientation=“horizontal”

app:layout_constraintBottom_toTopOf=“parent” />

<Button

android:id=“@+id/btnC”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:text=“C”

app:layout_constraintBottom_toTopOf=“@id/guideLineBottom” />

<Button

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:text=“D”

app:layout_constraintTop_toBottomOf=“@id/guideLineBottom” />

效果图:

这里写图片描述

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值