Android-ConstraintLayout用法

已于 2022-07-11 22:31:30 修改
阅读量877 收藏 5
点赞数 3
分类专栏： android开发 文章标签： android jetpack android
于 2022-07-11 21:29:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hxuan198/article/details/125729517
版权

一、简介

ConstraintLayout具有很好的性能优势，可以绘制扁平化界面，减少复杂界面造成的布局嵌入过深的问题，经常使用一层嵌套便可以实现界面。

ConstraintLayout是使用比例方式进行的排版布局，所以可以很好的适配各种大小和分辨率的手机屏幕。

二、使用

1.如何在代码中引入ConstraintLayout

新建一个布局文件可以看到，Google已经默认帮我们选择好了父布局为ConstraintLayout。

 2.ConstraintLayout布局的约束属性

ConstraintLayout共给我们提供了13种属性，通过属性的意思便能知道属性的具体含义。

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 version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout ...>

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        ...
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintBottom_toTopOf="@id/tv_4"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/tv_2"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        ...
        app:layout_constraintBottom_toTopOf="@id/tv_5"
        app:layout_constraintLeft_toRightOf="@id/tv_1"
        app:layout_constraintRight_toLeftOf="@id/tv_3"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        ...
        app:layout_constraintBottom_toTopOf="@id/tv_6"
        app:layout_constraintLeft_toRightOf="@id/tv_2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        ...
        app:layout_constraintBottom_toTopOf="@id/tv_7"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/tv_5"
        app:layout_constraintTop_toBottomOf="@id/tv_1" />

    <TextView
        android:id="@+id/tv_5"
        android:layout_width="0dp"
        android:layout_height="0dp"
        ...
        app:layout_constraintBottom_toTopOf="@id/tv_8"
        app:layout_constraintLeft_toRightOf="@id/tv_4"
        app:layout_constraintRight_toLeftOf="@id/tv_6"
        app:layout_constraintTop_toBottomOf="@id/tv_2" />

    <TextView
        android:id="@+id/tv_6"
        android:layout_width="0dp"
        android:layout_height="0dp"
        ...
        app:layout_constraintBottom_toTopOf="@id/tv_9"
        app:layout_constraintLeft_toRightOf="@id/tv_5"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_3" />

    <TextView
        android:id="@+id/tv_7"
        android:layout_width="0dp"
        android:layout_height="0dp"
        ...
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/tv_8"
        app:layout_constraintTop_toBottomOf="@id/tv_4" />

    <TextView
        android:id="@+id/tv_8"
        android:layout_width="0dp"
        android:layout_height="0dp"
        ...
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/tv_7"
        app:layout_constraintRight_toLeftOf="@id/tv_9"
        app:layout_constraintTop_toBottomOf="@id/tv_5" />

    <TextView
        android:id="@+id/tv_9"
        android:layout_width="0dp"
        android:layout_height="0dp"
        ...
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/tv_8"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_6" />


</androidx.constraintlayout.widget.ConstraintLayout>

上述约束实现的布局效果如下：

3.ConstraintLayout布局居中

ConstraintLayout可以根据比例进行页面的调整，用到的属性有以下几个：

layout_constraintHorizontal_bias //水平方向居中时左右边距的比例
layout_constraintVertical_bias //垂直方向居中时上下边距的比例

通过一个例子可以很直观的看到： 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout ...    >

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        ...
        app:layout_constraintBottom_toTopOf="@id/tv_2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/tv_2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        ...
        app:layout_constraintHorizontal_bias="0.25"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_1"
        app:layout_goneMarginBottom="20dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

运行结果：

4.角度定位

 ConstraintLayout可以通过三个属性，实现按照中心点控件进行的角度定位。

app:layout_constraintCircle //约束以谁为圆点
app:layout_constraintCircleRadius //约束角度的距离
app:layout_constraintCircleAngle //约束的角度

 以下代码为让蓝色圆圈围绕红色圆点顺时针旋转123度：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout ...>

    <TextView
        android:id="@+id/tv_center"
        android:layout_width="100dp"
        android:layout_height="100dp"
        ...
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="150dp"
        android:layout_height="150dp"
        ...
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintCircle="@id/tv_center"
        app:layout_constraintCircleAngle="123"
        app:layout_constraintCircleRadius="200dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

运行结果：

 

青岛老渔民
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Android利用ConstraintLayout实现漂亮的动画详解
08-30
最近在无意中看到一篇关于ConstraintLayout的文章，ConstraintLayout是Android Studio 2.2中主要的新增功能之一，下面这篇文章主要给大家介绍了关于Android利用ConstraintLayout实现漂亮的动画的相关资料，需要的朋友可以参考下。
详解Android ConstraintLayout 约束布局的用法
08-28
本篇文章主要介绍了详解Android ConstraintLayout 约束布局的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Android 约束布局（ConstraintLayout）详解
最新发布
罗斯洛夫韩
03-15 1095
找到一套好的视频资料，紧跟大牛梳理好的知识框架进行学习。多练。（视频优势是互动感强，容易集中注意力）你不需要是天才，也不需要具备强悍的天赋，只要做到这两点，短期内成功的概率是非常高的。对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。以上就是总结的关于在面试的一些总结，希望对大家能有些帮助，除了这些面试中需要注意的问题，当然最重要的就是刷题了，这里放上我之前整理的一份超全的面试专题PDF，大家有兴趣的可以自行领取或者私信我：还有。
Android ConstraintLayout
zenmela2011的专栏
08-25 3193
1.ConstraintLayout ConstraintLayout指约束布局，目的是为了解决复杂的页面层级嵌套过多的问题。使用该布局，需要引入依赖implementation ‘androidx.constraintlayout:constraintlayout:2.1.2’ 2.属性用法 ①位置约束layout_constraintXXX_toYYYOf ConstraintLayout的位置约束属性如下，属性值可以是parent或者@+id/兄弟组件的id： layout_const.
了解使用Android ConstraintLayout
热门推荐
Dream It Possible
05-20 4万+
说明Google I/O 2016 上发布了 ConstraintLayout, 简直是要变革 Android 写界面方式. 于是第二天我立即找到相关文档尝试, 这是官方提供的 Codelab 项目. 手把手教你探索 ConstraintLayout. 英文原文: https://codelabs.developers.google.com/codelabs/constraint-layout/in
Android studio之ConstraintLayout使用
weixin_74239923的博客
12-11 190
边缘约束：将控件的上下左右边缘绑定到父控件的相应边缘。
Android ConstraintLayout约束布局的使用
https://juejin.cn/user/1654096907477549/posts
12-03 5911
前言：回廊一寸相思地，落月成孤，背灯和月花阴，已是十年踪迹十年心。 ——虞美人 一、概述 AndroidStudio3.0之前默认的根布局是RelativeLayout，但是3.0之后默认的根布局是ConstraintLayout(约束布局)，它作为一款强大的调整View位置和大小的ViewGroup被Google所推荐，ConstraintLayout能够以支持库的形式支持到最小的API 9，同时也在不断丰富API和功能，它能在复杂布局中有效降低布局层级，提高
Android中的ConstraintLayout约束布局
ChenYiRan123456的博客
09-28 5408
Android中的ConstraintLayout约束布局
Android ConstraintLayout 使用详解
Java徐师兄的博客
05-11 2442
Android ConstraintLayout 使用详解
Android ConstraintLayout 约束布局的使用
weixin_42604414的博客
10-18 1783
目前Android的默认布局早已改成ConstraintLayout，但是很多小伙伴还是使用过去的相对布局，觉得老的布局用起来熟悉，新布局使用复杂，从而失去了探索新大陆的机会，今天就让我们一起揭开ConstraintLayout的面纱，掌握Android新布局的使用方法。传统的布局容易在版本迭代过程中，造成页面层级过多的问题（俄罗斯套娃），一是对页面渲染有影响，二是不利于开发者的后期维护。
Android ConstraintLayout 使用入门
IT徐师兄
05-13 1069
ConstraintLayout是Android中一个非常强大的布局管理器，可以帮助我们快速创建复杂的布局，并且具有很好的性能和可扩展性。在使用ConstraintLayout时，我们需要学习如何添加约束关系，使用链式布局和辅助工具来提高效率。通过合理的约束关系，我们可以轻松创建复杂的布局结构，并提高布局的可读性和可维护性。
Android新布局方式ConstraintLayout快速入门教程
08-30
谷歌在2016年的IO大会上推出的一种新的布局方式—-ConstraintLayout，这局是一种约束型的布局方式，下面这篇文章主要给大家介绍了Android中新布局方式ConstraintLayout的相关资料，需要的朋友可以参考借鉴，下面来...
android-ConstraintLayoutExamples
05-18
约束布局样本该存储库包含布局列表，展示了的各种功能和用法先决条件Android Studio 2.3 Constaint Layout库1.0.1入门使用Android Studio导入项目。 导航到app> res> layout>，然后在布局编辑器中打开其中一个布局。...
Infer Constraints，Autoconnect，ConstraintLayout拖拽使用教程
ZJQ的博客
03-27 1560
参考：https://developer.android.google.cn/training/constraint-layout/index.html 一、ConstraintLayout及其特性 和 LinearLayout、RelativeLayout等一样，都是继承自ViewGroup,是view容器 能够用较少的视图层级创建出复杂的视图。 与RelativeLayout 类...
【约束布局】ConstraintLayout 约束布局 ( 简介 | 引入依赖 | 基本操作 | 垂直定位约束 | 角度定位约束 | 基线约束 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
06-28 4783
一. ConstraintLayout 简介 1. 引入 约束 布局 ( 1 ) 约束性布局 作用 和 简介 2. 约束 简介 ( 1 ) 约束个数要求 ( 2 ) 约束设置 与 显示位置 3. ConstraintLayout 引入 ( 1 ) ConstraintLayout 依赖添加 ( 2 ) ConstraintLayout 转换 与 添加 二. ConstraintLayout 约束 的 基本操作 1. 约束基本操作 ( 1 ) Design ( 设计 ) 和 Bluepr
Android入门教程 | 使用 ConstraintLayout 构建自适应界面
Android23333的博客
09-30 649
ConstraintLayout 可使用扁平视图层次结构（无嵌套视图组）创建复杂的大型布局。它与 RelativeLayout 相似，其中所有的视图均根据同级视图与父布局之间的关系进行布局，但其灵活性要高于 RelativeLayout，并且更易于与 Android Studio 的布局编辑器配合使用。
Android ConstraintLayout用法全解析
weixin_43864176的博客
08-02 4062
ConstraintLayout 用法全解析 文章目录ConstraintLayout 用法全解析前言一、 什么是ConstraintLayout？二、 ConstraintLayout的优缺点？2.1 优点2.1 缺点三、 基本使用方法3.1 最基础使用 --- 位置约束3.2 文字基线对齐3.3 居中和bias百分比偏移3.4 角度约束3.5 margin 和 goneMargin3.6 0dp(MATCH_CONSTRAINT)与组件大小3.7 0dp与宽高比例3. 8 Chains(约束链)3.9
Android——ConstraintLayout(约束布局)
The_onion的博客
11-03 1万+
约束布局ConstraintLayout 是一个ViewGroup，可以在Api9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。从 Android Studio 2.3 起，官方的模板默认使用 ConstraintLayout。
Android开发 ConstraintLayout布局的详解
Dream It Possible
10-28 3372
这里的定位属性指的是 layout_constraintTop_toTopOf 、layout_constraintTop_toBottomOf 、 layout_constraintStart_toEndOf 等等此类属性。 为了方便后续理解，这里说明下此类定位属性的意思。此类定位属性在文本上想表达的是 当前View 在 定位View 什么位置上。 这里举几个例子，例如： layout_constraintTop_toBottomOf 这个属性的意思是 当前View的上边（Top）在 目标Vi
android开发，讲解一下constraintLayout用法
06-13
当我们在进行Android布局时，经常会遇到复杂的UI界面，这时候使用ConstraintLayout就可以很好地解决这个问题，因为它是最灵活的布局方式。下面我为您详细讲解一下ConstraintLayout的用法。 首先，我们需要在build.gradle文件中添加依赖项： ``` implementation 'com.android.support.constraint:constraint-layout:1.1.3' ``` 然后，在XML布局文件中，我们需要将根布局更改为ConstraintLayout，如下所示： ``` <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.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"> ... </androidx.constraintlayout.widget.ConstraintLayout> ``` 接下来，我们可以使用以下属性来设置视图的位置和大小： - layout_constraintLeft_toLeftOf：将视图的左边缘与另一个视图的左边缘对齐。 - layout_constraintRight_toRightOf：将视图的右边缘与另一个视图的右边缘对齐。 - layout_constraintTop_toTopOf：将视图的顶部边缘与另一个视图的顶部边缘对齐。 - layout_constraintBottom_toBottomOf：将视图的底部边缘与另一个视图的底部边缘对齐。 - layout_constraintStart_toStartOf：将视图的开始边缘与另一个视图的开始边缘对齐。 - layout_constraintEnd_toEndOf：将视图的结束边缘与另一个视图的结束边缘对齐。 - layout_constraintBaseline_toBaselineOf：将视图的基线与另一个视图的基线对齐。 - layout_constraintWidth_percent：将视图的宽度设置为父视图宽度的百分比。 - layout_constraintHeight_percent：将视图的高度设置为父视图高度的百分比。 除此之外，还有一些其他的属性，例如layout_constraintHorizontal_bias、layout_constraintVertical_bias、layout_constraintDimensionRatio等。 最后，我们需要使用以下属性来设置视图的约束： - layout_constraintLeft_creator - layout_constraintTop_creator - layout_constraintRight_creator - layout_constraintBottom_creator - layout_constraintStart_creator - layout_constraintEnd_creator 总的来说，使用ConstraintLayout可以让我们更轻松地创建复杂的UI布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值