约束布局属性学习

devtools/2025/2/8 1:45:31/

1、layout_constraintHorizontal_bias

layout_constraintHorizontal_bias 是 ConstraintLayout 中的一个重要属性,用于控制一个视图在父视图或相关视图中水平位置的偏移。这种偏移通过在0到1之间的浮点值来设置,0代表完全靠近左边或起始位置,1代表完全靠近右边或结束位置,0.5则居中。

属性解释
layout_constraintHorizontal_bias=“0.0” : 视图完全靠到父布局的左边界。
layout_constraintHorizontal_bias=“0.5” : 视图在左右边界之间完全居中。
layout_constraintHorizontal_bias=“1.0” : 视图完全靠到父布局的右边界。

注意事项

  • 使用 layout_constraintHorizontal_bias 时,需要同时设置视图的两侧约束(例如Start_toStartOf和End_toEndOf)。
  • 属性值不必是刚好0.0、0.5或1.0,您可以使用任何0到1之间的浮点数来实现不同程度的偏移。
    通过调整 layout_constraintHorizontal_bias,您可以灵活地控制视图在水平空间中的位置,以适应各种UI布局设计需求。

2、Guideline

Guideline 本身是不可见的,只作为一种虚拟边界来帮助对齐和定位其他视图。
可以为 Guideline 设置固定偏移(相对于父布局的起始或结束百分比)或者绝对偏移。

举例如下:
在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayoutxmlns: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"><!-- 垂直 Guideline,位置为布局宽度的25% --><androidx.constraintlayout.widget.Guidelineandroid:id="@+id/verticalGuideline"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"app:layout_constraintGuide_percent="0.25" /><!-- 水平 Guideline,距离顶部100dp --><androidx.constraintlayout.widget.Guidelineandroid:id="@+id/horizontalGuideline"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"app:layout_constraintGuide_begin="100dp" /><!-- 使用 Guideline 对齐的视图 --><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Aligned with Vertical Guideline"android:background="#FF5722"app:layout_constraintStart_toStartOf="@id/verticalGuideline"app:layout_constraintTop_toTopOf="parent" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Aligned with Horizontal Guideline"android:background="#3F51B5"app:layout_constraintTop_toTopOf="@id/horizontalGuideline"app:layout_constraintStart_toStartOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>

属性解释
垂直 Guideline:
android:orientation=“vertical”:设置为垂直指导线。
app:layout_constraintGuide_percent=“0.25”:位置占父布局宽度的25%。
水平 Guideline:
android:orientation=“horizontal”:设置为水平指导线。
app:layout_constraintGuide_begin=“100dp”:距离父布局顶部100dp的位置。

使用 Guideline 的好处
灵活性:可以通过调整 Guideline 的位置来全局修改多个元素的对齐。
可维护性:简化视图之间的约束定义,减少重复代码。
响应性:可以基于父容器的尺寸自动调整视图位置,增强布局的适配能力。

3、layout_constraintHorizontal_chainStyle

用于指定水平链样式的属性,主要的链样式包括:

spread(默认):视图之间均匀分布。
spread_inside: 视图之间保持大小和均匀分布,两端不等距。
packed: 视图集中在一起,可以通过设置偏移来调整链的位置。

1)、spread

在这里插入图片描述

2)、spread_inside

在这里插入图片描述

3)、packed

在这里插入图片描述

4)、代码:
<?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"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"tools:layout_editor_absoluteY="25dp"><!-- 链头 控件 中设置 Chain 风格 spread --><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"app:layout_constraintEnd_toStartOf="@+id/button2"app:layout_constraintHorizontal_chainStyle="spread_inside"app:layout_constraintStart_toStartOf="parent" /><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"app:layout_constraintEnd_toStartOf="@+id/button3"app:layout_constraintStart_toEndOf="@+id/button1" /><Buttonandroid:id="@+id/button3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toEndOf="@+id/button2" /></androidx.constraintlayout.widget.ConstraintLayout>

4、layout_constraintHorizontal_weight

举例:

0dp 布局宽度:
在 ConstraintLayout 中,要启用权重,需要将 layout_width 设置为 0dp。这表示视图的宽度将由权重和约束确定,而不是自身内容或父布局。
权重的分配:
Button 1 和 Button 2 设置了权重为 1,因此它们将占据相同的宽度。
Button 3 设置了权重为 2,因此它将占用两个单位宽度,相较于其他按钮更宽。
注意事项:
1、链的创建: 确保视图之间通过合适的约束(如 Start_toEndOf 和 End_toStartOf)链接成链。这是使用 layout_constraintHorizontal_weight 的前提条件。
2、效果影响: 权重的实际大小并不重要,重要的是他们之间比例。例如,权重为 1:2:3 与 2:4:6 执行效果相同,因为比例一致。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayoutxmlns: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"><Buttonandroid:id="@+id/button1"android:layout_width="0dp" <!-- 使用 0dp 来启用权重 -->android:layout_height="wrap_content"android:text="Button 1"app:layout_constraintStart_toStartOf="parent"app:layout_constraintEnd_toStartOf="@id/button2"app:layout_constraintHorizontal_weight="1" /><Buttonandroid:id="@+id/button2"android:layout_width="0dp" <!-- 使用 0dp 来启用权重 -->android:layout_height="wrap_content"android:text="Button 2"app:layout_constraintStart_toEndOf="@id/button1"app:layout_constraintEnd_toStartOf="@id/button3"app:layout_constraintHorizontal_weight="1" /><Buttonandroid:id="@+id/button3"android:layout_width="0dp" <!-- 使用 0dp 来启用权重 -->android:layout_height="wrap_content"android:text="Button 3"app:layout_constraintStart_toEndOf="@id/button2"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_weight="2" /></androidx.constraintlayout.widget.ConstraintLayout>

5、layout_constrainedWidth

可以参考学习
app:layout_constrainedWidth=“true” 属性,是按约束去限制宽度,如下图:
在这里插入图片描述
app:layout_constrainedWidth=“false”, 如下图:
在这里插入图片描述

举例:

<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"><TextViewandroid:id="@+id/textView1"android:layout_width="wrap_content"android:layout_height="40dp"android:background="#fafa"android:singleLine="true"android:text="Hello, World!"app:layout_constrainedWidth="true"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="50dp"android:background="#deedfd"android:singleLine="true"android:text="textviewtextviewtexiview"app:layout_constrainedWidth="true"app:layout_constraintEnd_toEndOf="@id/textView1"app:layout_constraintStart_toStartOf="@id/textView1"app:layout_constraintTop_toBottomOf="@id/textView1" />
</androidx.constraintlayout.widget.ConstraintLayout>

http://www.ppmy.cn/devtools/156991.html

相关文章

docker单机运行环境的zabbix升级实战(从6.2.6升级到7.2.3)

本文为单机docker运行环境下的zabbix升级实战&#xff0c;从6.2.6升级到7.2.3的详细过程记录。 一、当前环境 测试环境为单机环境&#xff0c;操作系统为openEuler 22.03 LTS&#xff0c;软件环境如下&#xff1a; 1、zabbix版本&#xff1a;6.2.6 2、当前容器镜像 # docker…

关于系统重构实践的一些思考与总结

文章目录 一、前言二、系统重构的范式1.明确目标和背景2.兼容屏蔽对上层的影响3.设计灰度迁移方案3.1 灰度策略3.2 灰度过程设计3.2.1 case1 业务逻辑变更3.2.2 case2 底层数据变更&#xff08;数据平滑迁移&#xff09;3.2.3 case3 在途新旧流程兼容3.2.4 case4 接口变更3.2.5…

X Window System 架构概述

X Window System 架构概述 1. X Server 与 X Client ​ 这里引入一张维基百科的图&#xff0c;在Linux系统中&#xff0c;若用户需要图形化界面&#xff0c;则可以使用X Window System&#xff0c;其使用**Client-Server**架构&#xff0c;并通过网络传输相关信息。 ​ ​ X…

一款适用于工程项目投标、进度及成本管理的开源系统

开源地址&#xff1a;ry-vue-flowable-xg: 工程项目管理系统适用于工程项目的投标管理及项目进度及成本控制用户的OA办公系统&#xff1b;功能不限于项目管理、任务进度管理、合同管理、事件提醒、财务管理、投标管理、工作流等&#xff1b;基于若依管理系统 ruoyi-flowable-pl…

101,【1】buuctf web BUU XSS COURSE 1

进入靶场 随便提交看看 访问此路径 知道这是存储型xss注入 开始xss注入 试试<script>alert(1)</script> <script>alert(xss)</script> 都不行&#xff0c;应该是把script过滤了 试试双写 <scriscriptpt>alert(xss)</scricriptpt> 双写…

责任链模式(Chain Responsibility)

一、定义&#xff1a;属于行为型设计模式&#xff0c;包含传递的数据、创建处理的抽象和实现、创建链条、将数据传递给顶端节点&#xff1b; 二、UML图 三、实现 1、需要传递处理的数据类 import java.util.Date;/*** 需要处理的数据信息*/ public class RequestData {priva…

在C#中,Array,List,ArrayList,Dictionary,Hashtable,SortList,Stack的区别

Array Array你可以理解为是所有数组的大哥 普通数组 : 特点是长度固定, 只能存储相同类型的数据 static void Main(string[] args){//声明int[] ints;string[] strings;People[] peoples;//默认值 //int 类型是 0//string 类型是 nullint[] ints1 { 1, 2, 3 };string[] …

Chapter2 Amplifiers, Source followers Cascodes

Chapter2 Amplifiers, Source followers & Cascodes MOS单管根据输入输出, 可分为CS放大器, source follower和cascode 三种结构. Single-transistor amplifiers 这一章学习模拟电路基本单元-单管放大器 单管运放由Common-Source加上DC电流源组成. Avgm*Rds, gm和rds和…