使用约束布局该如何设置哪个视图(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类型的,打印上述代码的请求,则用一个命…

二叉树---二叉搜索树的最小绝对差

题目: 给你一个二叉搜索树的根节点 root ,返回 树中任意两不同节点值之间的最小差值 。 差值是一个正数,其数值等于两值之差的绝对值。 思路:中序遍历二叉搜索树的顺序是递增序列,将该序列中的相邻值两两比较找到最…

约定(模拟赛2 T3)

题目描述 小A在你的帮助下成功打开了山洞中的机关,虽然他并没有找到五维空间,但他在山洞中发现了无尽的宝藏,这个消息很快就传了出去。人们为了争夺洞中的宝藏相互陷害,甚至引发了战争,世界都快要毁灭了。小A非常地难…

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-从文件获取指定数据

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

数学基础 -- 泰勒展开式

泰勒展开 泰勒展开是将一个函数在某点附近展开成幂级数的工具。具体来说,对于一个在某点 a a a处具有 n n n阶导数的函数 f ( x ) f(x) f(x),其泰勒展开式为: f ( x ) f ( a ) f ′ ( a ) ( x − a ) f ′ ′ ( a ) 2 ! ( x − a ) 2 f …

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…

Linux命令更新-文本处理sed

简介 sed&#xff08;Stream Editor&#xff09;是一种功能强大的文本处理工具&#xff0c;用于非交互式编辑文本文件。它可以对输入流进行一系列文本处理操作&#xff0c;例如查找、替换、删除、添加等&#xff0c;是运维人员和开发人员必备的利器。相比于其他文本编辑工具&a…

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

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

敏捷开发适用于哪些项目?你用对了吗?

敏捷项目管理是一种适用于快速变化和不确定性高的项目环境的项目管理方法。因此&#xff0c;敏捷项目管理在软件开发、信息技术、互联网、市场营销、教育培训等领域得到了广泛的应用。 一、敏捷开发适合哪些项目&#xff1f; 1、需求频繁变化的项目 在传统的瀑布模型中&#…

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

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

缓存技术:提升性能与效率的利器

在当今数字化时代&#xff0c;软件应用的性能与响应速度成为了衡量其成功与否的重要标准之一。随着数据量的爆炸性增长和用户需求的日益多样化&#xff0c;如何高效地处理这些数据并快速响应用户请求成为了软件开发中亟待解决的问题。缓存技术&#xff0c;作为提升系统性能、优…

【JavaScript】延迟加载 js 脚本

defer 属性&#xff1a;在 HTML 中通过设置 script 标签的 defer 属性来实现脚本的延迟加载&#xff0c;即脚本的下载与 HTML 的解析不会阻塞彼此&#xff0c;脚本会在 HTML 解析完成后才执⾏。async 属性&#xff1a;在 HTML 中通过设置 script 标签的 async 属性来实现脚本的…

【论文共读】【翻译】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%。 所以最好的情况是&…

Android DataBinding从入门到精通

DataBinding可以更加方便的编写与视图交互的代码。即系统会为模块中的每个xml文件生成一个绑定类&#xff0c;其实例包含指向相应布局中具有ID的所有视图的直接引用。大多数情况下&#xff0c;DataBinding会代替findMyId。 启动DataBinding 在Android SDK 32及后续版本中&…