使用约束布局该如何设置哪个视图(UILabel)的内容优先被压缩?

引言

在实际项目开发中,约束布局给我们带来了很大的便利,可以帮助我们创建灵活且响应迅速的用户界面。通常情况下,它都能很好地工作,但在一些包含许多UILabel的场景中,比如会话列表的UI,哪个视图会被优先压缩可能变得有些不可控。

在这篇博客中,我们将探讨如何使用内容压缩阻力优先级(Content Compression Resistance Priority)来解决这个问题,从而使我们的页面元素更加可控、更美观。

遇到问题

在开发会话列表UI时,我们经常会遇到多个UILabel排布在一起的情况。默认情况下,系统会根据内容大小自动决定哪个UILabel的内容会被压缩。

然而,在某些场景下,我们希望某些UILabel的内容能够优先显示完全,而另一些UILabel的内容可以被压缩。比如上面的例子,我们希望用户的性别,消息的时间,还有用户的等级和其它的小标签都能显示全,然后压缩用户昵称。

上面单个列表中的所有子控件都被添加到contentView上,控件的布局代码如下:

        // 头像avatarImageView.snp.makeConstraints { make inmake.leading.equalToSuperview().offset(16.0)make.centerY.equalToSuperview()make.width.height.equalTo(52.0)}// 昵称nameLabel.snp.makeConstraints { make inmake.leading.equalTo(avatarImageView.snp.trailing).offset(12.0)make.top.equalTo(avatarImageView).offset(5.7)make.height.equalTo(19.0)}// 内容contentLabel.snp.makeConstraints { make inmake.leading.equalTo(nameLabel)make.trailing.equalToSuperview().offset(-36.0)make.top.equalTo(nameLabel.snp.bottom).offset(4.0)make.height.equalTo(17.0)}// 性别sexAgeView.snp.makeConstraints { make inmake.leading.equalTo(nameLabel.snp.trailing).offset(4.0)make.centerY.equalTo(nameLabel)make.width.equalTo(18.0)make.height.equalTo(15.0)}// 等级levelView.snp.makeConstraints { make inmake.leading.equalTo(sexAgeView.snp.trailing).offset(4.0)make.centerY.equalTo(sexAgeView)make.height.equalTo(15.0)}// 时间conversationTimeLabel.snp.makeConstraints { make inmake.leading.greaterThanOrEqualTo(levelView.snp.trailing).offset(4.0)make.trailing.equalToSuperview().offset(-16.0)make.centerY.equalTo(nameLabel)make.height.equalTo(17.0)}

如果我们什么都不设置,在iOS 17.5.1上显示如下:

细心一点的话会发现,消息的时间不见了,应该是宽度被压缩成了0,等级标签倒是良好。性别由于这里面没有年龄数据将宽度设为固定值,所以倒不存在压缩的问题了。

这样随机的压缩视图,让我们感到不太妙,那有没有什么方案可以设置谁来优先压缩呢?

压缩阻力优先级的基本概念

当然是有的,为了解决这个问题我们先来了解一下压缩阻力优先级的基本概念,内容压缩阻力优先级(Content Compression Resistance Priority)它决定了一个视图在受到压缩时的优先级。优先级越高,视图越不容易被压缩。每个视图都有一个水平和垂直方向的内容压缩阻力优先级,默认值为750。

视图提供了一个个方法可以修改它的压缩阻力优先级:

open func setContentCompressionResistancePriority(_ priority: UILayoutPriority, for axis: NSLayoutConstraint.Axis)

该方法设置视图在收到压缩时压缩阻力的优先级(Content Compression Resistance Priority),优先级越高视图越不容易被压缩。

相对应的还有一个内容拥抱优先级(Content Hugging Priority),我们将在下篇博客来介绍它。

如何设置内容压缩阻力优先级

还以上面的布局为例,我们需要考虑的视图应该有三个:

  • nameLabel
  • levelView
  • conversationTimeLabel

在没有进行任何设置之前,先来看一下它们的优先级:

18:56:07.987 💚 DEBUG CSNormalConversationListCell.setupView():44 - nameLabel -  UILayoutPriority(rawValue: 750.0)
18:56:07.988 💚 DEBUG CSNormalConversationListCell.setupView():57 - levelView -  UILayoutPriority(rawValue: 750.0)
18:56:07.988 💚 DEBUG CSNormalConversationListCell.setupView():63 - conversationTimeLabel -  UILayoutPriority(rawValue: 750.0)

可以看见在没有修改之前,优先级都是750,我们希望的是优先压缩nameLabel,使得另外两个组件保持完整。那我们就降低nameLabel的压缩阻力优先级,比如设置为.defaultLow另外两个组件保持不变,代码如下:

        // 昵称contentView.addSubview(nameLabel)nameLabel.font = CSFontDefine.pingFang(weight: .medium, size: 16.0)nameLabel.textColor = .blacknameLabel.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)CSLog.debug(module: "nameLabel - ", nameLabel.contentCompressionResistancePriority(for: .horizontal))

控制台打印结果如下:

18:59:01.330 💚 DEBUG CSNormalConversationListCell.setupView():44 - nameLabel -  UILayoutPriority(rawValue: 250.0)

已经降低了nameLabel压缩阻力值,我们来看下效果:

现在就已经得到了我们想要的结果。

结语

压缩阻力优先级的概念至关重要,通过使用内容压缩阻力优先级,我们可以更好地控制UI中各个UILabel的显示效果,确保重要信息能够优先显示完全。希望这篇博客能帮助你更好地理解和应用这个重要的概念,使你的界面更加灵活和美观。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/49154.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《0基础》学习Python——第二十讲__网络爬虫/<3>

一、用post请求爬取网页 同样与上一节课的get强求的内容差不多,即将requests.get(url,headershead)代码更换成requests.post(url,headershead),其余的即打印获取的内容,如果content-typejson类型的,打印上述代码的请求,则用一个命…

2024论文精读:利用大语言模型(GPT)增强上下文学习去做关系抽取任务

文章目录 1. 前置知识2. 文章通过什么来引出他要解决的问题3. 作者通过什么提出RE任务存在上面所提出的那几个问题3.1 问题一:ICL检索到的**示范**中实体个关系的相关性很低。3.2 问题二:示范中缺乏解释输入-标签映射导致ICL效果不佳。 4. 作者为了解决上…

【Git】(基础篇七)—— IntelliJIDEA集成Git

InteliJ IDEA集成Git 现在有很多的集成工具帮助我们写代码,使用这些工具可以帮助我们加速写代码,很多工具也可以集成git,使用图形工具管理git,相信了解了底层运行逻辑的你能够很快地上手使用这些工具,本文以InteliJ I…

7 Vue3

相比 Vue2 1. 优点 vue3支持vue2的大多数特性,实现对vue2的兼容vue3对比vue2具有明显的性能提升 打包大小减少41%初次渲染快55%,更新快133%内存使用减少54% 更好的支持TypeScript使用Proxy代替defineProperty实现响应式数据 2. 性能提升的原因 静态标…

jmeter-beanshell学习11-从文件获取指定数据

参数文件里的参数可能过段时间就不能用了,需要用新的参数。如果有多个交易,读不同的参数文件,但是数据还是一套,就要改多个参数文件。或者只想执行参数文件的某一行数据,又不想调整参数文件顺序。 第一个问题目前想到…

Ant Design Vue中日期选择器快捷选择 presets 用法

ant写文档的纯懒狗 返回的是一个day.js对象 范围选择时可接受一个数组 具体参考 操作 Day.js 话不多说 直接上代码 <a-range-pickerv-model:value"formData.datePick"valueFormat"YYYY-MM-DD HH:mm:ss"showTime:presets"presets"change&quo…

(前缀和) LeetCode 238. 除自身以外数组的乘积

一. 题目描述 原题链接 给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&…

WebRTC通话原理(SDP、STUN、 TURN、 信令服务器)

文章目录 1.媒体协商SDP简介 2.网络协商STUN的工作原理TURN工作原理 3.信令服务器信令服务器的主要功能信令服务器的实现方式 1.媒体协商 比如下面这个例子 A端与B端要想通信 A端视频采用VP8做解码&#xff0c;然后发送给B端&#xff0c;B端怎么解码&#xff1f; B端视频采用…

【论文共读】【翻译】ShuffleNet v1:一种用于移动设备的极其高效的卷积神经网络

[原文地址] https://arxiv.org/pdf/1707.01083 [翻译] 0. 摘要 我们介绍了一种计算效率极高的CNN架构&#xff0c;称为ShuffleNet&#xff0c;该架构专为计算能力非常有限的移动设备&#xff08;例如&#xff0c;10-150 MFLOPs&#xff09;而设计。新架构利用了两个新操作&am…

Ubuntu 22.04.4 LTS (linux) Tomcat 下载 安装配置详细教程

1 官网下载 下载链接 2 ubuntu 服务器安装 #下载 wget https://dlcdn.apache.org/tomcat/tomcat-9/v9.0.91/bin/apache-tomcat-9.0.91.tar.gz #解压 tar zxvf apache-tomcat-9.0.91.tar.gz sudo mv apache-tomcat-9.0.91/ /data/tomcat #配置环境变量 sudo vi /etc/profil…

WebGoC题解(13) 狐猬编程:GoC L4 结业测试 第4题 找木柴

题目描述 小明今天找了n跟木柴&#xff0c;但是木柴太多了&#xff0c;小明只能拿走m根木柴&#xff0c;小明希望拿走的木柴都是剩下的木柴中最长的&#xff0c;小明还画出以下图形 例如 输入 5 3 10 20 30 40 50 小明要拿走30 40 50 这3根木柴 从大到小画出以下图形 矩形的宽…

linux cpu 占用超100% 分析。

感谢: https://www.cnblogs.com/wolfstark/p/16450131.html 总结&#xff1a; 查看进程中各个线程占用百分比 top -H -p <pid> 某线程100%了 说明 任务处理不过来 会卡 但是永远不可能超100% 系统监视器里面看到的是 所有线程占用的 总和会超100%。 所以最好的情况是&…

MATLAB基础:字符串、元胞数组

今天我们继续学习MATLAB中的字符串、元胞和结构 字符串 由于MATLAB是面向矩阵的&#xff0c;所以字符串的处理可以用矩阵的形式实现 字符串的赋值与引用 假设变量a&#xff0c;将用单引号引起来的字符串赋值给它&#xff0c; a清心明目, b(a[4;-1;1]) 在这里&#xff0c;…

如何检查我的网站是否支持HTTPS

HTTPS是一种用于安全通信的协议&#xff0c;是HTTP的安全版本。HTTPS的主要作用在于为互联网上的数据传输提供安全性和隐私保护。通常是需要在网站安装部署SSL证书来实现网络数据加密传输&#xff0c;安全加密功能。 那么如果要检查你的网站是否支持HTTPS&#xff0c;可以看下…

云计算实训11——web服务器的搭建、nfs服务器的搭建、备份静态文件、基于linux和windows实现文件共享

一、搭建web服务器 1.关闭firewall和selinux 关闭防火墙 systemctl stop firewalld systemctl disable firewalld 停用selinux setenforce 0 配置文件中让sellinux不再启动 vim /etc/selinux/config SELINUXpermissive 2.编辑dns配置文件 vim /etc/resolv.conf nameserver 114.…

Go基础编程 - 11 - 函数(func)

接口&#xff08;interface&#xff09; 函数1. 函数定义1.1. 函数名1.2. 参数列表1.3. 返回值列表 2. 匿名函数3. 闭包、递归3.1 闭包3.1.1 函数、引用环境3.1.2 闭包的延迟绑定3.1.3 goroutine 的延迟绑定 3.2 递归函数 4. 延迟调用&#xff08;defer&#xff09;4.1 defer特…

2024-07-22 Unity AI行为树1 —— 框架介绍

文章目录 1 行为树2 行为树驱动方式3 行为树结点分类3.1 控制节点3.2 执行节点 4 行为树与状态机比较 本文章参考 B 站唐老狮 2023年直播内容。 点击前往唐老狮 B 站主页。 1 行为树 ​ 行为树&#xff08;Behavior Tree&#xff0c;BT&#xff09;在游戏 AI 中是一种用于控制…

微软蓝屏事件:网络安全与系统稳定性的反思与前瞻

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

javascript 的执行上下文与作用域

目录 1. 初步了解 上下文&#xff08;context&#xff09;2. 全局上下文(global context)3. 上下文栈 (context stack)4. 作用域链( scope chain)5. 作用域(scope)6. 作用域链增强7. 变量声明7.1 var 声明变量7.2 let 声明变量7.3 const 常量声明 1. 初步了解 上下文&#xff0…

轨迹优化 | 基于ESDF的共轭梯度优化算法(附ROS C++/Python仿真)

目录 0 专栏介绍1 数值优化&#xff1a;共轭梯度法2 基于共轭梯度法的轨迹优化2.1 障碍约束函数2.2 曲率约束函数2.3 平滑约束函数 3 算法仿真3.1 ROS C实现3.2 Python实现 0 专栏介绍 &#x1f525;课程设计、毕业设计、创新竞赛、学术研究必备&#xff01;本专栏涉及更高阶的…