iOS开发之一行有多个Lable时的约束设置

急性子,我们直接进入主题吧
1、先看看xib(storyboard)上的设置:
对于前端开发来说,经常会使用到label这种控件,而且也不少的,会遇到一行中存在两个或者两个以上label的情况,这种情况下的label约束会变得很微妙,因为多数情况下,我们不会设置label的固定高宽,我们会直接设置label的约束,因为UILabel开启了intrinsicContentSize,可以让其根据文字的多少来自适应大小。假如一行中有两个label,而这两个label的文字都是动态的,那么在设置他们的文字之前,他们都无法确定自己的宽度,而此时如果两个label相对对方有约束,那么就会造成约束冲突。如下图:

约束冲突.jpg

这里的label1距屏幕左边有一个约束,label2距屏幕右边有约束,他们之间也有一个约束,设置的10pt。
那么问题来了,这种情况下,label1和label2的宽度都可能根据自己的文字发生改变,他们中间的10pt的约束就会变得模棱两可,也就造成看约束冲突。
要解决这种冲突,首先我们要确定一个label 显示的优先级,怎么说呢,就是你觉得哪个label的显示优先级要高于其他的label,不能被压缩或者拉伸,需要完全显示其中的内容。
确定了之后,我们会用到autolayout中的算是比较高级一点的东西——“Content Hugging”和“Content Compression Resistance”。关于这两个东西,不是很清楚的可以自行百度,这里不做赘述。懒得去搜的,这里介绍的比较详细了:Autolayout中关于intrinsic content、相关优先级及其应用
简单的说,就是设置label的显示优先级,抗压缩和抗拉伸。抗压缩优先级低的label会被挤压,留出更多的空间给需要完全展示的label。
那么来看一下上方图示有约束的两个label的content Hugging/content Compression Resistance :
label1:
content Hugging/content Compression Resistance - 1.png

label2:
content Hugging/content Compression Resistance - 2.png

可以看到,两个labe的默认值一样(默认是250)。现在我们来修改一下label1的content Hugging:
content Hugging1.png

修改content Hugging之前.png

可以看到,label1将content Hugging修改大了一些之后,约束冲突没有了,并且label1自动压缩到了和文字相同的宽度。当然这还可能会有问题,我们把label2的文本增加一些再看看:
label2文本增长.png

发现label2文本增长之后,约束冲突又来了。我们已经设置了label1的抗拉伸,但是label2的文本也可能会发生改变,超出现在的长度,那么label2距屏幕右侧的约束就会和label本身的intrinsicContentSize产生冲突,intrinsicContentSize属性想要让label根据文字长度来自适应宽度,但是约束告诉它你不能再变宽了。
取舍的时候到了,我们将用到content Compression Resistance 来限制label的抗压缩,如果我们需要将label1的内容显示完,那么我们将label1的content Compression Resistance 设置大一些:
content Compression Resistance 1.png

label2多出的文本将会以省略号显示,而保证了label1的完全显示。
那如果我们设置的label2的content Compression Resistance 呢?
content Compression Resistance 2.png

可以看到,label2被完全显示出来,而label1会被压缩。
我们上面演示的都是解决的横向的约束冲突,竖直方向的冲突方法是一样的,只是我们调整的是下面的vertical的值。

2、上面介绍了xib(storyboard)的解决方法,那么如果使用纯代码布局呢?
很多时候我们使用代码添加约束来进行UI的布局,在使用纯代码约束的时候,遇到这种多个动态label的情况,通过下面这两行代码就可以轻松搞定:

[self.label1 setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
[self.label1 setContentCompressionResistancePriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];

这两个方法分别设置了抗压缩和抗拉伸,第一个参数UILayoutPriority,系统给了4个默认值,一般来说是满足我们的需求的:

static const UILayoutPriority UILayoutPriorityRequired NS_AVAILABLE_IOS(6_0) = 1000; 
static const UILayoutPriority UILayoutPriorityDefaultHigh NS_AVAILABLE_IOS(6_0) = 750;
static const UILayoutPriority UILayoutPriorityDefaultLow NS_AVAILABLE_IOS(6_0) = 250; 
static const UILayoutPriority UILayoutPriorityFittingSizeLevel NS_AVAILABLE_IOS(6_0) = 50

当然我们也可以自定义,就像这样

[self.label1 setContentHuggingPriority:1 forAxis:UILayoutConstraintAxisHorizontal];
[self.label1 setContentCompressionResistancePriority:2 forAxis:UILayoutConstraintAxisHorizontal];

第二个参数UILayoutConstraintAxis,表示你的约束方向。
这样就已经解决了两个动态label约束问题,当然,三个、四个甚至更多的label都可以用这个方法来解决,也就是设置不同的优先级罢了。

那么最后,还是继续鞭策我吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,463评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,868评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,213评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,666评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,759评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,725评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,716评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,484评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,928评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,233评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,393评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,073评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,718评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,308评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,538评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,338评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,260评论 2 352