android 约束布局容器ConstraintLayout的初探

2024-05-04 12:38

本文主要是介绍android 约束布局容器ConstraintLayout的初探,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

约束布局容器声明

<android.support.constraint.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="qssq666.cn.constraintlayout.MainActivity"></android.support.constraint.ConstraintLayout>

注意

  • 容器里面的控件如果设置了左右约束,将不支持设置match_parent 改用0dp代替
  • 代替属性Important: MATCH_PARENT is not supported for widgets contained in a ConstraintLayout, though similar behavior can be defined by using MATCH_CONSTRAINT with the corresponding left/right or top/bottom constraints being set to “parent”.`
  • Guideline控件在容器里面可以设置wrap_content

容器里面的控件位置摆放介绍

左上对齐 让容器里面的某控件相对于约束布局容器
实际上做上不需要加上属性默认就是,哈哈哈

app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintTop_toTopOf="parent"

f和它左边对齐 比如parent是整个屏幕,就需要设置这个,如果设置的是lefttoright parent那么肯定是看不到了因为parent是整个屏幕。

layout_constraintLeft_toLeftOf

右下对齐 前提是别再设置toLeftOf和 toTopOf了

app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintRight_toRightOf="parent"

居中对齐 所有属性 上下左右 都使用上即可.

app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintTop_toTopOf="parent"

手动操作实现上面效果,无图无真相..文字介绍太枯燥了,
选择控件将弹出4个圆圈 选择每一个圆圈往它那方靠近屏幕的方向拉去,如果没拉到屏幕变上 开发工具是不会产生控件的偏移动画的,而且松手又回来了, 那么全部拉好之后就是上面的代码效果,上下左右居中。

下一步学习 让一个控件和之前那个居中的控件的右边对齐

<TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="我是居中的!"android:id="@+id/center_view"app:layout_constraintRight_toRightOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintTop_toTopOf="parent"/><TextViewandroid:text="我不跟随父亲我长度够长,我右边始终和中间view右边对齐"android:layout_width="wrap_content"android:layout_height="wrap_content"app:layout_constraintRight_toRightOf="@+id/center_view"/>//看到的效果就是  第二个控件在顶部,但是始终右边和中间的右边对齐。
手动拉如何产生这个效果呢?选择第二个控件的右边方向的圆圈连接到中间view的右边的圆圈。

找规律

app:layout_constraintRight_toRightOf 也就是 我的右边和哪个空间的右边对齐呢?如果填写为parent那就是和父容器的右边对齐,因此这里懂了吧。

仿RelativeLayout的属性用法

@id代表某控件
让当前控件在某控件右边layout_toRightOf=@idlayout_constraintLeft_toRightOf=@id

让当前控件在某控件之下layout_below =@idapp:layout_constraintTop_toBottomOf= =@id手动拖控件方法 就是选择上面的某控件的底部圆圈连接 需要在他下面控件的上边圆圈

让当前控件和某控件底部对齐layout_alignBottom =@idlayout_constraintBottom_toBottomOf=@id

手动拖控件方法 就是选择参考物的某控件的底部圆圈连接和另外一个想和他底部对齐的view底部圆圈进行连接

让当前控件和父控件右边对齐layout_alignParentRight="true"layout_constraintRight_toRightOf="parent"

举一反三,不再多介绍了。

仿LinearLayout权重

<Buttonandroid:id="@+id/btn_0"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="#ff0"android:text="Btn01"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintTop_toTopOf="parent"tools:layout_editor_absoluteX="0dp"tools:layout_editor_absoluteY="0dp" /><Buttonandroid:id="@+id/btn_1"android:layout_width="0dp"android:layout_height="wrap_content"android:background="#f00"android:text="Btn02"app:layout_constraintLeft_toRightOf="@+id/btn_0"app:layout_constraintRight_toRightOf="parent" />

右边占据剩余的宽度。左边宽度就是包裹内容了, 需要右边父容器对齐又需要在左边容器的右边。 有时候只能用代码写,因为鼠标操作的话拦住了。

让空间水平铺满屏幕的属性

android:layout_width="0dp"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"

保持宽高比 16:9

*这里宽度是16高度9 也代表 H,16:9为何英文意思是相反的我就不知道了。

app:layout_constraintDimensionRatio="16:9"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"

和下面这个一样

app:layout_constraintDimensionRatio="H,16:9"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"

如果改成W

app:layout_constraintDimensionRatio="W,16:9"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"

那么高度尺寸比宽度尺寸大。另外上面的left_toleft right_toright 都必须填写,否则就没法做到宽高比了,否则你写死高宽。另外务必把宽度和高度设置成这样android:layout_width="0dp" android:layout_height="0dp" 否则不会生效。
而我们的PercentFrameLayout在26已经不再推荐使用了.如果使用26的buildtool工具会提出现删除线。
那么让我们来怀恋一下百分比布局的16:9

app:layout_aspectRatio="177%"
app:layout_widthPercent="100%"
android:layout_height="0dp"
android:layout_width="match_parent"

多按钮等分权重

  • app:layout_constraintHorizontal_weight="1" 是控制权重比例的不填写此参数的时候权重就是1
  • 每一个控件的左边右边都要约束好,否则宽度还是原来自身的宽度,不会起作用
<Buttonandroid:id="@+id/btn_0"android:layout_width="0dp"android:layout_height="wrap_content"android:background="#f00"android:text="Btn01"app:layout_constraintHorizontal_weight="1"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toLeftOf="@id/btn_1" /><Buttonandroid:id="@+id/btn_1"android:layout_width="0dp"android:layout_height="wrap_content"android:background="#0f0"android:text="Btn01"app:layout_constraintHorizontal_weight="1"app:layout_constraintLeft_toRightOf="@id/btn_0"app:layout_constraintRight_toLeftOf="@+id/btn_2" /><Buttonandroid:id="@+id/btn_2"android:layout_width="0dp"android:layout_height="wrap_content"android:background="#00f"android:text="Btn01"app:layout_constraintHorizontal_weight="1"app:layout_constraintLeft_toRightOf="@id/btn_1"app:layout_constraintRight_toRightOf="parent" />

加上margin不受影响

<Buttonandroid:id="@+id/btn_0"android:layout_width="0dp"android:layout_height="wrap_content"android:background="#f00"android:text="Btn01"android:layout_margin="10dp"app:layout_constraintHorizontal_weight="1"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toLeftOf="@id/btn_1" /><Buttonandroid:id="@+id/btn_1"android:layout_width="0dp"android:layout_margin="10dp"android:layout_height="wrap_content"android:background="#0f0"android:text="Btn01"app:layout_constraintHorizontal_weight="1"app:layout_constraintLeft_toRightOf="@id/btn_0"app:layout_constraintRight_toLeftOf="@+id/btn_2" /><Buttonandroid:id="@+id/btn_2"android:layout_width="0dp"android:layout_margin="10dp"android:layout_height="wrap_content"android:background="#00f"android:text="Btn01"app:layout_constraintHorizontal_weight="1"app:layout_constraintLeft_toRightOf="@id/btn_1"app:layout_constraintRight_toRightOf="parent" />

写死宽度调试权重样式
app:layout_constraintHorizontal_chainStyle|layout_constraintVertical_chainStyle="spread|spread_inside|packed"

  • spread 必须配合width=0使用
  • spread_inside packed 是必须配合width height不等于0的时候使用
  • spread和不填写一样,因此意义不大
  • spread_inside 和英文意思一样 非写死宽度的剩余宽度分配中,平均分配左右两边 是靠边的,而packed是紧靠在一起,剩余的在整个控件之外,紧靠在一起。
  • 我以为可以做到相交和不相交处的权重等分,结果然并卵,也没啥用哈。
    参考代码
<Buttonandroid:id="@+id/btn_0"android:layout_width="50dp"android:layout_height="wrap_content"android:background="#f00"android:text="Btn01"app:layout_constraintHorizontal_chainStyle="packed"app:layout_constraintHorizontal_weight="1"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toLeftOf="@id/btn_1" /><Buttonandroid:id="@+id/btn_1"android:layout_width="50dp"android:layout_height="wrap_content"android:background="#0f0"android:text="Btn01"app:layout_constraintHorizontal_chainStyle="packed"app:layout_constraintHorizontal_weight="1"app:layout_constraintLeft_toRightOf="@id/btn_0"app:layout_constraintRight_toLeftOf="@+id/btn_2" /><Buttonandroid:id="@+id/btn_2"android:layout_width="50dp"android:layout_height="wrap_content"android:background="#00f"android:text="Btn01"app:layout_constraintHorizontal_chainStyle="packed"app:layout_constraintHorizontal_weight="1"app:layout_constraintLeft_toRightOf="@id/btn_1"app:layout_constraintRight_toRightOf="parent" />

约束 _bias的作用

这里注意把约束容器的高度设置为patch_parent不然app:layout_constraintVertical_bias就测试不出来了

app:layout_constraintVertical_bias="0.9"app:layout_constraintHorizontal_bias="0.9"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"
  • 0 -1距离是控制x或者y方向的 的右边(Horizontal)或者底边(Vertical)的百分比距离,1则是完全到右边了。
  • 如果不配合layout_constraintBottom_toBottomOf righttoright left toleft bottomtoleft就没法测试效果了哈。上面的东西如果没设置bias是居中的,设置之后就开始被拉扯。
  • bias的意思是偏向于

辅助线控件的用法

`android.support.constraint.Guideline

<android.support.constraint.Guidelineandroid:id="@+id/guideline_w"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horzontal"app:layout_constraintGuide_begin="50dp"app:layout_constraintGuide_end="50dp"app:layout_constraintGuide_percent="0.5"/>

主要属性有3个

android:orientation="horzontal"app:layout_constraintGuide_begin="50dp"app:layout_constraintGuide_end="50dp"app:layout_constraintGuide_percent="0.5"
  • 如果设置了百分比那么begin end都没卵用了, 百分比在哪里 begin在哪里由方向控制,不再多叙述。
  • 辅助线和我们安卓开发平时应到的隐藏控件做辅助完全雷同啊,我也是这么玩的有时候需求没法解决就弄一个隐藏的view,然后below它的下面。
  • 辅助线控件不可见

还有一些属性没有使用介绍,本人边写边学了一个下午...眼睛都花了

杂项学习

tools:layout_editor_absoluteY 是干啥的? 它只是用来开发工具显示控制偏移用的,下面这个代码得意思是让当前控件距离上边51dp但是实际上运行就不是你看到的开发工具看到的预览效果了。

tools:layout_editor_absoluteY="51dp"

实际上什么约束都没有用上就会出现下面的提示 但是运行是正常的。 是因为垂直或者水平方向没有添加约束

This view is not constrained vertically: at runtime it will jump to the left unless you add a vertical constraint less... (Ctrl+F1)The layout editor allows you to place widgets anywhere on the canvas, and it records the current position with designtime attributes (such aslayout_editor_absoluteX
.) These attributes are **not** applied at runtime, so if you push your layout on a device, the widgets may appear in a different location than shown in the editor. To fix this, make sure a widget has both horizontal and vertical constraints by dragging from the edge connections.此视图不受垂直约束:在运行时它将跳转到
向左,除非您添加了一个垂直约束…
(Ctrl + F1)
布局编辑器允许您将小部件放置在画布上的任何位置,
它记录当前位置和设计时间的属性(如aslayout_editor_absolutex
。)
这些属性在运行时不***,所以如果你推你的
布局在设备上,小部件可能出现在不同的位置。
在编辑器中显示。要解决此问题,请确保小部件具有两个水平。
和从边缘连接拖动的垂直约束。

本人写布局发现存在的问题和无法实现的方案记录

  • 水平排列布局 左边是头像 中间是 纵向的3行文字, 右边是一个关注按钮 ,左中右都是应该居中的。

左边头像 ,中间2 到3个 上下垂直排列 view 居中。右边按钮居中的结构, 上下view无法控制居中,有知道的大神求指导 。约束的情况无法控制

  • 中间垂直排列的某个view 隐藏了也就无法做到类似自动堆在一起。所以线性布局等布局还是有很多存在的意义的。

约束布局无法完美解决所有布局,必要的时候还是要借助其他布局特别是线性布局。

对比

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"><data /><androidx.constraintlayout.widget.ConstraintLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="2dp"android:orientation="horizontal"><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/recyclerview_menu"android:layout_width="100dp"app:layout_constraintLeft_toLeftOf="parent"android:layout_height="match_parent"app:layout_constraintTop_toTopOf="parent"app:layout_constraintWidth_percent="0.3"/><FrameLayoutandroid:id="@+id/fragment_space_inner"android:layout_width="0dp"android:layout_height="match_parent"android:="@+id/recyclerview_menu"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toRightOf="@+id/recyclerview_menu"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"></FrameLayout></androidx.constraintlayout.widget.ConstraintLayout>
</layout><!--<?xml version="1.0" encoding="utf-8"?><androidx.core.widget.NestedScrollView 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=".uipage.my.MyFragment"><androidx.appcompat.widget.LinearLayoutCompatandroid:layout_width="match_parent"android:layout_height="match_parent"app:divider="@drawable/divider"android:orientation="vertical"app:dividerPadding="1dp"app:showDividers="middle|beginning|end"><LinearLayoutandroid:id="@+id/btn_print_test"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:paddingBottom="10dip"android:paddingLeft="5dip"android:paddingTop="10dip" ><ImageViewandroid:layout_width="35dp"android:layout_height="35dp"android:scaleType="fitCenter"android:src="@drawable/ic_launcher_foreground" /><TextViewandroid:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_marginLeft="10dp"android:gravity="center"android:text="打印测试"android:textColor="@color/black"android:textSize="15dip" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:id="@+id/ll_devanning_box"android:orientation="horizontal"android:paddingBottom="10dip"android:paddingLeft="5dip"android:paddingTop="10dip" ><ImageViewandroid:layout_width="35dp"android:layout_height="35dp"android:scaleType="fitCenter"android:src="@drawable/ic_launcher_foreground" /><TextViewandroid:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_marginLeft="10dp"android:gravity="center"android:text="拆箱"android:textColor="@color/black"android:textSize="15dip" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:paddingBottom="10dip"android:paddingLeft="5dip"android:paddingTop="10dip" ><ImageViewandroid:layout_width="35dp"android:layout_height="35dp"android:scaleType="fitCenter"android:src="@drawable/ic_launcher_foreground" /><TextViewandroid:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_marginLeft="10dp"android:gravity="center"android:text="Test"android:textColor="@color/black"android:textSize="15dip" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:paddingBottom="10dip"android:paddingLeft="5dip"android:paddingTop="10dip" ><ImageViewandroid:layout_width="35dp"android:layout_height="35dp"android:scaleType="fitCenter"android:src="@drawable/ic_launcher_foreground" /><TextViewandroid:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_marginLeft="10dp"android:gravity="center"android:text="Test"android:textColor="@color/black"android:textSize="15dip" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:paddingBottom="10dip"android:paddingLeft="5dip"android:paddingTop="10dip" ><ImageViewandroid:layout_width="35dp"android:layout_height="35dp"android:scaleType="fitCenter"android:src="@drawable/ic_launcher_foreground" /><TextViewandroid:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_marginLeft="10dp"android:gravity="center"android:text="Test"android:textColor="@color/black"android:textSize="15dip" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:paddingBottom="10dip"android:paddingLeft="5dip"android:paddingTop="10dip" ><ImageViewandroid:layout_width="35dp"android:layout_height="35dp"android:scaleType="fitCenter"android:src="@drawable/ic_launcher_foreground" /><TextViewandroid:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_marginLeft="10dp"android:gravity="center"android:text="Test"android:textColor="@color/black"android:textSize="15dip" /></LinearLayout></androidx.appcompat.widget.LinearLayoutCompat></androidx.core.widget.NestedScrollView>-->

和百分比

<?xml version="1.0" encoding="utf-8"?>
<layout><data /><android.support.percent.PercentRelativeLayout 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"android:layout_marginTop="2dp"android:orientation="horizontal"><android.support.v7.widget.RecyclerViewandroid:id="@+id/recyclerview_menu"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_alignParentLeft="true"app:layout_widthPercent="30%" /><FrameLayoutandroid:id="@+id/fragment_space_inner"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_toRightOf="@+id/recyclerview_menu"></FrameLayout></android.support.percent.PercentRelativeLayout>
</layout>

参考链接

http://blog.csdn.net/lmj623565791/article/details/78011599http://www.jianshu.com/p/111b2fbd333e

这篇关于android 约束布局容器ConstraintLayout的初探的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/959212

相关文章

Python容器转换与共有函数举例详解

《Python容器转换与共有函数举例详解》Python容器是Python编程语言中非常基础且重要的概念,它们提供了数据的存储和组织方式,下面:本文主要介绍Python容器转换与共有函数的相关资料,... 目录python容器转换与共有函数详解一、容器类型概览二、容器类型转换1. 基本容器转换2. 高级转换示

详解C++ 存储二进制数据容器的几种方法

《详解C++存储二进制数据容器的几种方法》本文主要介绍了详解C++存储二进制数据容器,包括std::vector、std::array、std::string、std::bitset和std::ve... 目录1.std::vector<uint8_t>(最常用)特点:适用场景:示例:2.std::arra

Android使用java实现网络连通性检查详解

《Android使用java实现网络连通性检查详解》这篇文章主要为大家详细介绍了Android使用java实现网络连通性检查的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录NetCheck.Java(可直接拷贝)使用示例(Activity/Fragment 内)权限要求

python项目打包成docker容器镜像的两种方法实现

《python项目打包成docker容器镜像的两种方法实现》本文介绍两种将Python项目打包为Docker镜像的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 目录简单版:(一次成功,后续下载对应的软件依赖)第一步:肯定是构建dockerfile,如下:第二步

2025最新版Android Studio安装及组件配置教程(SDK、JDK、Gradle)

《2025最新版AndroidStudio安装及组件配置教程(SDK、JDK、Gradle)》:本文主要介绍2025最新版AndroidStudio安装及组件配置(SDK、JDK、Gradle... 目录原生 android 简介Android Studio必备组件一、Android Studio安装二、A

Qt实现删除布局与布局切换功能

《Qt实现删除布局与布局切换功能》在Qt应用开发中,动态管理布局是一个常见需求,比如根据用户操作动态删除某个布局,或在不同布局间进行切换,本文将详细介绍如何实现这些功能,并通过完整示例展示具体操作,需... 目录一、Qt动态删除布局1. 布局删除的注意事项2. 动态删除布局的实现步骤示例:删除vboxLay

Java JUC并发集合详解之线程安全容器完全攻略

《JavaJUC并发集合详解之线程安全容器完全攻略》Java通过java.util.concurrent(JUC)包提供了一整套线程安全的并发容器,它们不仅是简单的同步包装,更是基于精妙并发算法构建... 目录一、为什么需要JUC并发集合?二、核心并发集合分类与详解三、选型指南:如何选择合适的并发容器?在多

python语言中的常用容器(集合)示例详解

《python语言中的常用容器(集合)示例详解》Python集合是一种无序且不重复的数据容器,它可以存储任意类型的对象,包括数字、字符串、元组等,下面:本文主要介绍python语言中常用容器(集合... 目录1.核心内置容器1. 列表2. 元组3. 集合4. 冻结集合5. 字典2.collections模块

Spring Boot中获取IOC容器的多种方式

《SpringBoot中获取IOC容器的多种方式》本文主要介绍了SpringBoot中获取IOC容器的多种方式,包括直接注入、实现ApplicationContextAware接口、通过Spring... 目录1. 直接注入ApplicationContext2. 实现ApplicationContextA

linux配置podman阿里云容器镜像加速器详解

《linux配置podman阿里云容器镜像加速器详解》本文指导如何配置Podman使用阿里云容器镜像加速器:登录阿里云获取专属加速地址,修改Podman配置文件并移除https://前缀,最后拉取镜像... 目录1.下载podman2.获取阿里云个人容器镜像加速器地址3.更改podman配置文件4.使用po