美文网首页
iOS-XIB多控件自动收缩显示

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

作者: 亲叫我簞蒓哥 | 来源:发表于2020-05-29 14:48 被阅读0次

如何让两个甚至多个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留显示的空间。没错,就是这样的。

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

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

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

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

相关文章

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

    如何让两个甚至多个UI控件自动收缩以及设置它的拉伸优先级呢? 这就是我们经常遇到多个Label并排一起,由于数据未...

  • 视频

    标签:videoautoplay 自动播放controls 显示控件loop ...

  • 音频

    audio标签:autoplay 自动播放controls 显示控件l...

  • Shiny学习(四)||响应式输出

    Shiny应用程序中控件选中的值可以通过生成响应式输出来显示。用户切换控件的值,输出的文本也随着控件的值自动响应。...

  • UIViewController的View显示在导航栏下面如何解

    ios7之前的版本中UIViewController中的view在显示后会自动调整为去掉导航栏的高度的,控件会自动...

  • UIViewController-----Extend Edge

    ios7之前的版本中UIViewController中的view在显示后会自动调整为去掉导航栏的高度的,控件会自动...

  • 重修笔记之UILabel

    UILabel------基础控件 显示的文本只读,无法编辑,可以根据文字个数自动换行 一、定义UILabel +...

  • video标签以及视频播放器的一些实现

    video标签的属性: autoplay:自动播放 controls:向用户显示浏览器自带的控件 width:视频...

  • 串口编程

    串口连接界面 主要控件 打开串口 自动获取串口列表并显示 初始化串口 写入卡片 插入打卡记录并显示打卡成功

  • Autolayout中关于intrinsic content、相

    理论 intrinsic content size: 有些控件能通过自己显示的内容计算出需要的Size,这个自动计...

网友评论

      本文标题:iOS-XIB多控件自动收缩显示

      本文链接:https://www.haomeiwen.com/subject/cccxzhtx.html