Android ConstraintLayout 使用

最新推荐文章于 2024-05-11 14:53:45 发布
最新推荐文章于 2024-05-11 14:53:45 发布
阅读量219 收藏
点赞数
分类专栏： Android 文章标签： android layout
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxy1740/article/details/108469550
版权

目录

ConstraintLayout 是什么？

ConstraintLayout 能够灵活地定位和调整子View的大小，子 View 依靠约束关系来确定位置。

在一个约束关系中，需要有一个 Source（源）以及一个 Target（目标），Source 的位置依赖于 Target，可以理解为“通过约束关系，Source 与 Target链接在了一起，Source 相对于 Target 的位置便是固定的了。

约束属性

layout_constraintXXX_toYYYOf 格式的属性，即将“View A”的方向 XXX 置于 “View B”的方向 YYY 。

XXX YYY分别指什么？
XX代表是这个子控件自身的哪条边(Left、Right、Top、Bottom、Baseline)，
toYYYOf里的YYY代表的是和约束控件的哪条边发生约束 (取值同样是 Left、Right、Top、Bottom、Baseline)。

XXX和YYY相反
当XXX和YYY相反时，表示控件自身的XXX在约束控件的YYY的一侧，
例如app:layout_constraintLeft_toRightOf="@id/button1" ，表示的是控件自身的左侧在button1的右侧。

XXX和YYY相同
当XXX和YYY相同时，表示控件自身的XXX和约束控件的YYY的一侧 对齐，
例如：app:layout_constraintBottom_toBottomOf=“parent”，表示控件自身底端和父控件底端对齐。

约束属性

  • layout_constraintBaseline_toBaselineOf （View A 内部文字与 View B 内部文字对齐）
  • layout_constraintLeft_toLeftOf （View A 与 View B 左对齐）
  • layout_constraintLeft_toRightOf （View A 的左边置于 View B 的右边）
  • layout_constraintRight_toLeftOf （View A 的右边置于 View B 的左边）
  • layout_constraintRight_toRightOf
  • layout_constraintTop_toTopOf
  • layout_constraintTop_toBottomOf
  • layout_constraintBottom_toTopOf
  • layout_constraintBottom_toBottomOf
  • layout_constraintStart_toEndOf
  • layout_constraintStart_toStartOf
  • layout_constraintEnd_toStartOf
  • layout_constraintEnd_toEndOf
    在这里插入图片描述

倾向（Bias）

搭配bias，能使约束偏向某一边，默认是0.5，有以下属性：
layout_constraintHorizontal_bias (0最左边 1最右边)
layout_constraintVertical_bias (0最上边 1 最底边)

垂直方向偏移

layout_constraintVertical_bias="0.1"即是向上偏移到10%的位置

<?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:context="com.czy.constraintlayoutdemo.MainActivity">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#f5ec7e"
        android:gravity="center"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.1" />

</android.support.constraint.ConstraintLayout>

没有设置layout_constraintHorizontal_bias，layout_constraintVertical_bias属性值时的效果图如下
没有设置layout_constraintHorizontal_bias，layout_constraintVertical_bias属性值
黄色方块左侧所占的剩余空间从50%变成了100%，上侧所占的剩余空间从50%变成了10%，具体效果如下图所示。
黄色方块左侧所占的剩余空间从50%变成了100%，上侧所占的剩余空间从50%变成了10%

Visibility 属性

定位失效
在以前的布局中，如果 View 的 visibility 属性设置为 gone，那么其他原本依赖该 View 来参照定位的属性都会失效。

控件GONE的margin

当A控件约束在B控件的左边，B控件GONE了，此时A会额外拥有一个margin的能力，来“补充”B消失的导致的“位移”。

基本属性如下
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

注意事项
app: layout_goneMarginRight要配合android: layout_marginRight一起使用。
如果只设置了app: layout_goneMarginRight没有设置android: layout_marginRight，则无效。（alpha版本的bug，1.0.1版本已经修复）

在约束的布局gone时，控件自身的marginXXX会被goneMarginXXX替换掉，以本文Demo为例，原本button4宽度是100，button5的marginRight是10， 加起来是110，如果想让button4隐藏之后，button5仍然纹丝不动，则需要设置goneMarginRight为10+100 = 110。

示例代码

    <Button
        android:id="@+id/button4"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="button4"
        app:layout_constraintRight_toRightOf="parent"
        />

    <!-- android:layout_marginRight="10dp" 
    配合 app:layout_goneMarginRight="110dp"一起使用，
    在约束的布局gone时，起用goneMargin，
    但是一定要预先设置对应方向上的margin -->
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:text="button5"
        app:layout_constraintRight_toLeftOf="@id/button4"
        app:layout_goneMarginRight="110dp"/>

此时效果图：
在这里插入图片描述
当给button4 隐藏GONE掉以后：
在这里插入图片描述

尺寸约束

可以为ConstraintLayout 自身定义最小的尺寸，他会在 ConstraintLayout为WRAP_CONTENT时起作用。
● android:minWidth
● android:minHeight

控件尺寸约束

控件的宽高有三种方式为其设置：
确定尺寸
WRAP_CONTENT
0dp，就等于MATCH_CONSTRAINT

注意：约束要和 0dp 的 方向一致。否则无效。

代码示例

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    ...
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:id="@+id/button10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="@+id/button"
        app:layout_constraintRight_toRightOf="@+id/button"
        app:layout_constraintTop_toBottomOf="@+id/button"/>

    <Button
        android:id="@+id/button11"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="@+id/button10"
        app:layout_constraintRight_toRightOf="@+id/button10"
        app:layout_constraintTop_toBottomOf="@+id/button10"/>

</android.support.constraint.ConstraintLayout>

第三个按钮的约束是第二个按钮，所以它的宽度设置为MATCH_CONSTRAINT 时，是和它的约束按钮，即第二个按钮一样宽。
注意，此时，竖直方向上没有约束，所以不能使用MATCH_CONSTRAINT属性。
在这里插入图片描述
第三个按钮的属性修改为

        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"

则它宽度会撑满屏幕：
在这里插入图片描述

比例

layout_constraintDimentionRatio
可以以比例去定义View的宽高，只有一个方向的约束。
为了做到这一点，需要将至少一个约束维度设置为0dp（即MATCH_CONSTRAINT）
并将属性layout_constraintDimentionRatio设置为给定的比例。

比例值的取值：
浮点值，表示宽度和高度之间的比率 （2,0.5）
“width：height”形式的比例 （5:1,1:5）

代码示例

    <Button
        android:layout_width="200dp"
        android:layout_height="0dp"
        android:text="Ratio"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="2:1"
        app:layout_constraintTop_toTopOf="parent"/>

在这里插入图片描述

宽高都被约束

如果两个维度均设置为MATCH_CONSTRAINT（0dp），也可以使用比例。 在这种情况下，系统会使用满足所有约束条件和比率的最大尺寸。
如果需要根据一个维度的尺寸去约束另一个维度的尺寸。
则可以在比率值的前面添加 W 或者 H 来分别约束宽度或者高度。

代码示例
这里用“H”表示以高度为约束，高度的最大尺寸就是父控件的高度，“2:1”表示高：宽 = 2 : 1.
则宽度为高度的一半。

    <Button
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="H,2:1"
        app:layout_constraintTop_toTopOf="parent"/>

在这里插入图片描述

链条样式

当在链的第一个元素上设置属性 layout_constraintHorizontal_chainStyle 或layout_constraintVertical_chainStyle 时，链的行为将根据指定的样式（默认为CHAIN_SPREAD）而更改。

属性
spread - 元素将被展开（默认样式）
加权链 - 在spread模式下，如果某些小部件设置为MATCH_CONSTRAINT，则它们将拆分可用空间
spread_inside - 类似，但链的端点将不会扩展
packed - 链的元素将被打包在一起。 孩子的水平或垂直偏差属性将影响包装元素的定位。

在这里插入图片描述
示例代码

<?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:context="com.czy.constraintlayoutdemo.MainActivity">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="#f5ec7e"
        android:gravity="center"
        android:text="Hello World!"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintHorizontal_weight="1.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv2"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="#55e4f4"
        android:gravity="center"
        android:text="Hello World!"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/tv1"
        app:layout_constraintRight_toLeftOf="@+id/tv3"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv3"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="#f186ad"
        android:gravity="center"
        android:text="Hello World!"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/tv2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

在这里插入图片描述

Guideline

Guideline是什么？
Guideline只能用于ConstraintLayout中，是一个工具类，不会被显示，仅仅用于辅助布局。
它可以是horizontal或者 vertical的。（例如：android:orientation=“vertical”）

vertical / horizontal
vertical的Guideline宽度为零，高度为ConstraintLayout的高度
horizontal的Guideline高度为零，宽度为ConstraintLayout的高度

定位Guideline
指定距离左侧或顶部的固定距离（layout_constraintGuide_begin）
指定距离右侧或底部的固定距离（layout_constraintGuide_end）
指定在父控件中的宽度或高度的百分比（layout_constraintGuide_percent）

示例代码

<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">

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

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

在这里插入图片描述

参考文章：
ConstraintLayout 属性详解 和Chain的使用
ConstraintLayout中Chains和Guideline的使用
Android ConstraintLayout 使用详解

安歌_claire
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android约束布局ConstraintLayout使用完全解析
11-21
Android约束布局ConstraintLayout使用完全解析 Android约束布局ConstraintLayout使用完全解析
Android ConstraintLayout 使用详解
Java徐师兄的博客
05-11 2578
Android ConstraintLayout 使用详解
你不知道的ConstraintLayout高级用法
最新发布
fxjzzyo的博客
05-11 482
ConstraintLayout的高级用法，Chain，Guideline，Barrier，Group，Layer等。
Android-ConstraintLayout用法
hxuan198的博客
07-11 896
Android使用ConstraintLayout布局解决复杂布局
Android ConstraintLayout 使用实例
meixi_android的博客
10-14 332
ConstraintLayout Android开发约束布局ConstraintLayout
Android ConstraintLayout 约束布局的使用
weixin_42604414的博客
10-18 2661
目前Android的默认布局早已改成ConstraintLayout，但是很多小伙伴还是使用过去的相对布局，觉得老的布局用起来熟悉，新布局使用复杂，从而失去了探索新大陆的机会，今天就让我们一起揭开ConstraintLayout的面纱，掌握Android新布局的使用方法。传统的布局容易在版本迭代过程中，造成页面层级过多的问题（俄罗斯套娃），一是对页面渲染有影响，二是不利于开发者的后期维护。
android,demo,Android ConstraintLayout 使用详解
05-28
**Android ConstraintLayout 使用详解** 在Android开发中，`ConstraintLayout`是Google推出的一种布局管理器，旨在简化复杂的界面设计，并提高布局性能。本教程将深入探讨`ConstraintLayout`的使用，包括其主要特点...
android 布局之ConstraintLayout的使用
08-27
android 布局之ConstraintLayout的使用 ConstraintLayout是Android Studio 2.2中主要的新增功能之一，也是Google在2016年的I/O大会上重点宣传的一个功能。ConstraintLayout是Android Studio中的可视化编辑工具，...
Android ConstraintLayout的使用
12-22
**Android ConstraintLayout详解** 在Android应用开发中，布局管理器起着至关重要的作用，它们决定了UI元素在屏幕上的排列方式。`ConstraintLayout`是Google推出的一种先进的布局工具，旨在简化复杂的用户界面设计...
androidx-constraintlayout-2.0.4.aar
05-30
androidx-constraintlayout-2.0.4.aar
android constraintlayout constraintset demo
05-22
超级简单的简单案例，附上官方地址方便理解。https://developer.android.google.cn/reference/android/support/constraint/ConstraintSet
详解Android ConstraintLayout 约束布局的用法
01-04
前言 在2016年的Google I/O大会上 , Google 发布了Android Studio 2.2预览版，同时也发布了Android 新的布局方案 ConstraintLayout ， 但是最近的一年也没有大规模的使用。2017年Google发布了 Android Studio 2.3 正式版，在 Android Studio 2.3 版本中新建的Module中默认的布局就是 ConstraintLayout 。如下所示： <?xml version=1.0 encoding=utf-8?> <android.support.constraint.ConstraintLay
Android ConstraintLayout
maxiaoyin111111的博客
07-11 706
ConstraintLayoutpublic class ConstraintLayout extends ViewGroup java.lang.Object继承   ↳android.view.View    ↳android.view.ViewGroup     ↳android.support.constraint.ConstraintLayout已知的直接子类MotionLayoutA ...
Android 约束布局（ConstraintLayout）详解
热门推荐
Airsaid
01-13 4万+
前言 约束概述 转换布局 开始 创建布局 添加约束 基线约束 Chains Properties 设置宽高比例 Guidelines 自动添加约束 参考 本篇 ConstraintLayout 讲解版本：1.0.2，1.1.x 版本开始新增功能在下篇进行讲解。 前言 ConstraintLayout 是一个 ViewGroup，它的出现是为了解决复杂布局时，布局嵌套（
Android ConstraintLayout 简介
WillScorpio
04-15 694
ConstraintLayout 简介
ConstraintLayout（约束布局）使用详解
一个IT人的技术成长历程。创造未来的行为就发生在今天，没有明天的目标，今天的行动就是重复昨天的事情。
10-01 6048
ConstraintLayout 是一个使用“相对定位”灵活地确定微件的位置和大小的一个布局，在 2016 年 Google I/O 中面世，它的出现是为了解决开发中过于复杂的页面层级嵌套过多的问题——层级过深会增加绘制界面需要的时间，影响用户体验，以灵活的方式定位和调整小部件。从 Android Studio 2.3起，创建layout文件就已经是默认ConstraintLayout了，但是尽管Google如此大力推这项技术，但在当时很少有人使用，近些年逐渐被大家拿起来，啊真香！（此处无图胜有图）。
【安卓】ConstraintLayout相对定位
fanqi987的专栏
01-25 251
start和end分别对应的是当地语言的起始结束方向。 left和right分别对应的是固定的方向。 看这组约束属性 layout_constraintStart_toStartOf layout_constraintEnd_toStartOf layout_constraintEnd_toEndOf 这样的对的。 layout_constraintStart_toStartOf l...
Android ConstraintLayout 约束布局，Android开发还不会这些
m0_64382743的博客
11-30 282
layout_constraintLeft_toLeftOf layout_constraintLeft_toRightOf layout_constraintRight_toLeftOf layout_constraintRight_toRightOf layout_constraintTop_toTopOf layout_constraintTop_toBottomOf layout_constraintBottom_toTopOf layout_constraintBo..
android中ConstraintLayout使用权重
06-09
在 ConstraintLayout 中使用权重可以通过设置一个 View 的宽度或高度为 0dp，然后再设置该 View 的 layout_constraintWidth_percent 或 layout_constraintHeight_percent 属性来实现。 例如，假设有两个水平方向的 View，我们想让它们平分父布局的宽度，可以按照以下方式设置： ``` <View android:id="@+id/view1" android:layout_width="0dp" android:layout_height="match_parent" app:layout_constraintWidth_percent="0.5" /> <View android:id="@+id/view2" android:layout_width="0dp" android:layout_height="match_parent" app:layout_constraintWidth_percent="0.5" app:layout_constraintStart_toEndOf="@+id/view1" /> ``` 其中，view1 和 view2 的宽度都被设置为 0dp，然后通过设置 layout_constraintWidth_percent 属性为 0.5，让它们各占父布局宽度的一半。同样，垂直方向的布局也可以使用相同的方式设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值