iOS-XIB多控件自动收缩显示

如何让两个甚至多个UI控件自动收缩以及设置它的拉伸优先级呢?

这就是我们经常遇到多个Label并排一起,由于数据未知,导致哪个Label该显示,哪个Label显示为"XXXX..."呢?

首先这里我们需要基本的AutoLayout在XIB里运用

比如:设置单个控件随着屏幕大小自动拉伸。以及设置单个控件的固定宽高和各个方向的间距。

我们以两个Label为例:暂且我把它叫做:One、Two,如图1所示


图1

无论数据有多少,根据屏幕大小自动收缩,两个Label就显示一行。

正常情况下,如果需求不是特别要求,我们可以直接添加两个Label的距左、距上的约束就可以了,当有数据后,两个Label都会自动拉伸且并排显示,如图2所示


图2

这个需要事先知道两个Label显示的数据加起来的长度不会超过屏幕宽度,但是实际上我们往往不会知道,而且数据不确定性,于是乎就造成了这样的现象,如图3所示


图3

很明显第一个Label的数据太多了,直接把第二个Label的数据给“顶”出去了。

那么问题就来了,如何同时把两个Label的内容都显示呢

首先我们需要知道Content Compression Resistance Priority属性。个人理解就是压缩优先级,谁高就往低的一方挤。

具体操作:

我们需要为第二个Label添加距离右边的约束,我这里设置的是距离右边框>=10。至于为啥是>=,那不就是强制第二个Label不被挤出界面 最小间隔10嘛。

设置完你会发现约束报错!!!我擦~就是这样 如图4所示


图4

我们点击进入 错误约束 里去看看:如图5所示


图5

错误的意思是你添加的约束无法确定两个Label的位置,需要给某一个Label添加一个水平方向压缩优先级(我个人理解)你想让哪边显示全你就选择哪个,我们暂且让第一个Label显示全,选择One,点击“Change Priority”(上面写着750 to 751,默认是750级别,变成751之后会优先显示自己,压缩旁边低于750的)。当然你也可以主动在到界面去设置,如图6所示


图6

设置完你会发现,第二个Label还是会被挤,但是不会被挤出界了。

那问题又来了,我怎么让第一个Label少挤一点,留点空间给第二个Label显示呢?

这是我们没有设置第二个Label的最小显示宽度,也就是Width的最小值。

好,我们再为第二个Label添加一个Width >= 50 的约束 如图7所示


图7


这样即使第一个Label的内容再多,也会留 50的距离 给第二个显示了。

这时候会思考的小伙伴 就会想了,那我设置第一个Label的最大显示宽度也可以给第二个Label留显示的空间。没错,就是这样的。

那么除了水平方向是这样设置,那垂直方向也是同理,感兴趣的小伙伴可以自己去试一下。我就不在此献丑了~

有疑问、和错误的欢迎留言,我会一一回复和解答的。

第一次写技术博客,紧张,激动,感慨万千!!!也算是对自己学习到的知识巩固一下。

以前都是伸手党,今天终于体会到了“原创不易”啊,希望自己以后能多多坚持写写。

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