传统方式布局的弊端

两个label同一行布局的时候,传统做法是将其中的一个label的宽度固定;另外一个label设置左右约束,让它跟随屏幕宽度拉伸压缩。如下的例子,我给商品数量Label加了一个60宽度约束。然后,我们先来看看这样做的问题

  • 极端情况,当商品数量很大时就显示不下了。

  • 商品名称很长时,商品数量的剩余宽度显得有些浪费空间(浪费的程度要看具体的商品数量最大与最小的差值)

如何解决

要解决这两个问题就需要让两个Label的宽度在一定程度上自动调整。那这个调整到底是怎样一个程度呢?

首先,肯定跟业务有关。在两个文本的宽度与间距之和大于屏幕的时候至少是有一个无法完全显示的。一般情况下不会让两个文本都显示不全(这样也太秀了),那么如何做取舍就看业务了。在本文的例子中,商品名称与数量,肯定是要先保证数量可以看得到。

在两个文本宽度与间距之和小于屏幕的时候,毫无悬念,就是两个文本都显示。都显示的时候,是拉伸其中一个Label还是不拉伸任何Label?这个不重要,重要的是加约束方便就好。

把商品数量Label的宽度去掉就出现了一个错误(注意此时总体宽度不足屏幕宽度),因为此时系统不知道如何拉伸或者压缩以满足整体约束。

查看约束错误的快捷修复信息,大概意思是把 商品数量Label的 horizontal hugging 从251降低到250以达到比其它View低的目的。

那么 horizontal hugging 又是什么鬼?我们回头看一下AutoLayout文档基础的东西

[AutoLayout Guide:Anatomy of a Constraint](https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/AnatomyofaConstraint.html#//apple_ref/doc/uid/TP40010853-CH9-SW1)

用到的基础知识

在 Intrinsic Content Size 这一节有这样一张图:

Content huggingContent compression Resistance 简称为CHCR

对应的解释比较冗长,直接看等价的约束来的实在点

// Compression Resistance
View.height >= 0.0 * NotAnAttribute + IntrinsicHeight
View.width >= 0.0 * NotAnAttribute + IntrinsicWidth// Content Hugging
View.height <= 0.0 * NotAnAttribute + IntrinsicHeight
View.width <= 0.0 * NotAnAttribute + IntrinsicWidth

在每一个视图中这两种约束时同时存在的,为了避免冲突,AutoLayout设计者给了一个默认的
优先级。By default, views use a 250 priority for their content hugging, and a 750 priority for their compression resistance.
这个默认值在Interface Builder 的 size inspector 中能看得到。

Compression Resistance Priority 高于 Content Hugging Priority 就导致了一个控件更容易被拉伸而不是被压缩。因为压缩可能导致显示不全,所以更容易拉伸是比较合理的。

了解完这两个属性,我们回头看一下这个错误。应该就是商品名称和商品数量两个Label的Compression Resistance PriorityContent Hugging 都相同,AutoLayout 不知道拉伸或者压缩哪一个Label造成的。

那么,为何Interface Builder提示我们修改Content Hugging而不是Compression Resistance Priority呢?文档中没有找到相关的说明与解释。不过我试了一下,当文字长度与间距之和超过屏幕宽度的时候,Interface Builder的提示就变成了修改Compression Resistance Priority。那么对应的情况下生效的是哪一个属性,大家用脚趾头想一下就知道了。

结论

最后我们回到需求:商品数量维持全部显示,商品名称最大化显示。
结论就是把商品数量Label的Compression Resistance PriorityContent Hugging 都设置成比商品名称高。效果如图:

本文以横向的两个Label为例,纵向、多个或者过个其它有内容不定宽高的控件都可以通过这样的方式去做约束。具体如何,就留给大家自己推导。

补充一个意外情况,怎样的情况可以给商品数量加一个宽度上限。

####完了?
###代码呢?
##代码呢?
#代码呢?

Show the code

有一句话是怎么说的:
nib能实现的,代码都能实现
如果不是,尽管过来找我。
我~

代码实现也很简单,UIView的几个方法

- (UILayoutPriority)contentHuggingPriorityForAxis:(UILayoutConstraintAxis)axis NS_AVAILABLE_IOS(6_0);
- (void)setContentHuggingPriority:(UILayoutPriority)priority forAxis:(UILayoutConstraintAxis)axis NS_AVAILABLE_IOS(6_0);- (UILayoutPriority)contentCompressionResistancePriorityForAxis:(UILayoutConstraintAxis)axis NS_AVAILABLE_IOS(6_0);
- (void)setContentCompressionResistancePriority:(UILayoutPriority)priority forAxis:(UILayoutConstraintAxis)axis NS_AVAILABLE_IOS(6_0);

以及参数对应的两个枚举

typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) {UILayoutConstraintAxisHorizontal = 0,UILayoutConstraintAxisVertical = 1
};
typedef float UILayoutPriority NS_TYPED_EXTENSIBLE_ENUM;
static const UILayoutPriority UILayoutPriorityRequired NS_AVAILABLE_IOS(6_0) = 1000; // A required constraint.  Do not exceed this.
static const UILayoutPriority UILayoutPriorityDefaultHigh NS_AVAILABLE_IOS(6_0) = 750; // This is the priority level with which a button resists compressing its content.
static const UILayoutPriority UILayoutPriorityDefaultLow NS_AVAILABLE_IOS(6_0) = 250; // This is the priority level at which a button hugs its contents horizontally.
static const UILayoutPriority UILayoutPriorityFittingSizeLevel NS_AVAILABLE_IOS(6_0) = 50; // When you send -[UIView systemLayoutSizeFittingSize:], the size fitting most closely to the target size (the argument) is computed.  UILayoutPriorityFittingSizeLevel is the priority level with which the view wants to conform to the target size in that computation.  It's quite low.  It is generally not appropriate to make a constraint at exactly this priority.  You want to be higher or lower.

CHCR让iOS布局更婀娜相关推荐

  1. iOS布局-autoresizingMask

    iOS布局-AutoresizingMask 前端的主要任务简单来看,就是绘制界面,绑定数据.在iOS绘制界面的布局方式主要有以下三种: frame autoresizingMask AutoLayo ...

  2. 交换机软件IOS升级更简化了

    交换机软件IOS升级更简化了 6500 交换机升级软件的步骤更简单了,可以不用重启动设备. 对于6500Native IOS双引擎交换机的升级: 1,核实现在的引擎备份方式,如RPR, RPR+,SS ...

  3. 自适应xib比代码frame布局更优秀

    2019独角兽企业重金招聘Python工程师标准>>> 自适应xib比代码frame布局更优秀 转载于:https://my.oschina.net/u/2457458/blog/7 ...

  4. 第2章第20节:使用项目编号让文字内容的布局更有条理 [PowerPoint精美幻灯片实战教程]

    当幻灯片中的文字内容拥有顺序关系时,可以使用项目编号,使文字内容的布局更有条理. 点击此处的编号图标,给所选文字添加编号. 此时每个段落的开头,都增加了一个数字序号.编号的类型有很多种,点击此处的下拉 ...

  5. 栅格布局一般怎么用_合理设置栅格化与比例 让版式布局更友好

    合理设置栅格化与比例 让版式布局更友好 十二月 31, 2015 评论 (3) Sponsor 本文不适合采用天才设计(Genius Design)方法的人士. 有一种"奇怪的"现 ...

  6. ios布局 分为左右两块_安卓手机一年后卡顿,原因是安卓系统太开放了,改走iOS封闭之路...

    全球手机市场分为两大阵营,一个是安卓,一个是苹果.具体的说应该是安卓系统和苹果的iOS系统,不过我们国产手机大多数是使用的安卓系统,各家手机品牌的系统都是基于安卓架构优化布局而形成,然而苹果的iOS系 ...

  7. 苹果 WWDC21 发布会全汇总,iOS 15更个性化,全家桶协作更有生产力

    2021-06-08 06:32·爱范儿 经过 31 年的发展,如今的 WWDC 早已不是晦涩.深奥的纯技术大会,而是普通消费者也能听得懂,并为之期待的科技春晚.对,苹果春晚有两个. 今年 WWDC ...

  8. ios布局 分为左右两块_iOS 13 隐秘的细节④:系统组件·下

    新出的IOS13系统应该让非常多的设计师非常头疼,对比之前的系统存在哪些改变,设计师应该如何调整?本文从IOS13系统的隐秘细节出发,讲解了该系统的不一样,更好的帮助设计师快速了解新系统的调整,从而更 ...

  9. 网站关键词如何布局更有利于关键词排名提升?

    在网站SEO优化中,关键词分布的是否合理也影响着关键词的排名高低.众所周知,网站的关键词是贯穿整个网站发展的重要元素,那么对于网站关键词该如何合理的布局,才能更利于排名提升呢?下面就带大家一起了解一下 ...

最新文章

  1. 【Sql Server】DateBase-高级查询
  2. win7 安装好redis 如何安装扩展
  3. URL去重的几种方法
  4. k近邻算法C++二维情况下的实现
  5. matlab cell转数组_MATLAB批量修改文件名
  6. electron 桌面程序_如何使用Electron使用JavaScript构建您的第一个桌面应用程序
  7. 深入理解PHP+Mysql分布式事务与解决方案
  8. iPhone和Android的区别,从警示框看iPhone与Android的区别
  9. 95-110-040-源码-Env-StreamTableEnvironment
  10. oracle number +1,number number(1)
  11. 数学建模时序数据分析——趋势性检验和平稳性检验
  12. 【javaIO流】--->IO流解析
  13. 学妹哭着问我:测试工程师应掌握什么?不知道自己是否适合做这个?
  14. 【英语】为什么老外说的我们听不懂?
  15. Pytorch里addmm()和addmm_()的用法详解
  16. 标量、向量、矩阵求导
  17. 计算机科学与技术专业发展问题,解析计算机科学与技术专业发展存在的问题.doc...
  18. 关于ASCII()函数
  19. MYSQL数据库的实验总结_MySQL数据库基础总结
  20. [转载]java抽取word,pdf的四种武器

热门文章

  1. mPEG-Phosphate,甲氧基聚乙二醇磷酸盐,mPEG-PHOS
  2. Programming: Principles and Practice Using C++
  3. chatGPT 与文言一心的对比
  4. 美团CAT客户端(windows版)接入指南
  5. Unity 调用Android手机触屏事件
  6. 求两个数的最小公倍数; 两种方法
  7. 阿里云建站产品有哪些?如何选择?
  8. C/C++知识总结 四 循环与分支语句
  9. nodejs npm报错 重装 解决方法
  10. 微信实时给服务器发送gps位置,你知道吗?微信聊天发原图暴露你的位置信息