本篇博客的内容也不算太复杂,算是AutoLayout的一些高级的用法。本篇博客我们主要通过一些示例来看一下AutoLayout中的Content Hugging Priority以及Content Compression Resistance Priority这两个优先级。下方我们先来简单的看一下这两个优先级的涵义:

  • Content Hugging Priority:直译成中文就是“内容拥抱优先级”,从字面意思上来看就是两个视图,谁的“内容拥抱优先级”高,谁就优先环绕其内容。稍后我们会根据一些示例进行介绍。

  • Content Compression Resistance Priority:该优先级直译成中文就是“内容压缩阻力优先级”。也就是视图的“内容压缩阻力优先级”越大,那么该视图中的内容越难被压缩。而该优先级小的视图,则内容优先被压缩。稍后我们也会通过相应的实例来看一下这个优先级的具体表现。

接下来我们就通过相应的实例来看一下这两个优先级的使用场景以及作用。

一、总述

首先在第一部分我们先来整体的看一下Content Hugging PriorityContent Compression Resistance Priority这两个AutoLayout的优先级属性。这两个属性是可以在Storyboard中直接设置的,选中要设置的控件,在右边约束一栏里边就有Content Hugging Priority以及Content Compression Resistance Priority的设置地方。Content Hugging Priority的水平和竖直方向的默认值都是250,而Content Compression Resistance Priority的水平和竖直的默认值是750。我们可以在此对该值进行设置。

  

当然,在代码中也是可以设置这两个代码的优先级的。下方是使用代码的方式为我们的控件设置相应的优先级并且我们可以获取到相应优先级的值。具体代码如下所示:

  

二、Content Hugging Priority

接下来我们就来结合实例来看一下Content Hugging Priority的使用场景以及使用方式。

假如我们有一个需求,需要两个Label并列显示,我们暂且称之为Label1Label2Label1Label2中的显示内容是从网络获取的,并且内容长度不定。我们要求优先显示Label1。也就是说以Label1的宽度为准,不过Label1会有一个最大宽度,当Label1显示到最大宽度时,Label1的内容会被压缩,剩下的部分显示Label2。当然,当Label1没有显示到最大值时,剩下的部分仍然显示Label2。Label2显示不全的也会被压缩。

接下来我们按照上述的描述添加相应的约束,首先我们为Label1添加约束,如下所示。我们为Label1添加了Top、Left、Width和Height四个约束,这四个约束足以来确定该Label的位置了。不过需要注意的一点该Label的Width是小于等于某一个值得,此处我们指定的Width <= 200。也就是该Label的Width的最大值为200。约束添加后如下所示:

  

接下来我们来为并列第二个Label添加约束。因为要求前面Label内容显示完成后,剩下的部分就显示右边Label的内容,所以我们为Label2添加了Left、Top、Right以及Height的约束。当然Left是以右边的Label为基准的,而Right则是以父视图为基准的。

  

从下方截图中我们可以看出,有些约束添加完是红色的,这就是约束有冲突了。也就是当前添加的约束不能确实当前控件的位置。从上述的约束我们不难发现,横向来看,两个Label的宽度都是不确定的,所以会报错。

  

我们可以点击下方这个红色的报错箭头查看相应的报错信息。点击该红色箭头会显示下方这个界面,该界面中会提示相应的错误信息。从下面的对话框中我们可以看到具体的错误信息是“Content Priority Ambiguity”,也就是说“内容优先级是模棱两可的”。点击这个红色的圆圈,会给出相应的解决方案:

  • Decrease horizontal hugging of "Second Label" from 251 to 250 to make it grow before other views。

意思大体就是说:需要减小Second Label的水平拥抱优先级,从现在的251换成250。换句话说,也就是将“Second Label”的Content Hugging Priority从251换成250后,下方的问题就会被解决了。“to make it grow before other views”,这句话的意思是降低这个优先级目的是为了让该视图在其他视图之前生长。

翻译的有些晦涩,我们来用大白话说一下。造成下方错误的原因是水平放置的两个Label的宽度都不确定,而且其内容环抱的优先级又是一致的,所以在运行是我们无法确定是先确定第一个Label的宽度还是先确定第二个Label的宽度,解决方案是将右边的Label的Content Hugging Priority的优先级调低,当然第一个Label的Content Hugging Priority相对就高了。所以左边的Label会优先的环绕其内容,也就是说该Label会优先的确定其宽度。当左边Label的宽度确定了,那么右边Label的宽度也就是随着确定了,所以下方的错误也就解决了。

  

下方就是我们将右边的Label的Content Hugging Priority改成250后的结果。可以看出之前的报错被解决了。当然,也可以将左边的Label的Content Hugging Priority的优先级修改成比右边的高即可。此处我们仅讨论了Content Hugging的水平方向上的优先级,竖直方向上的优先级是一样的,在此就不做过多赘述了。

  

上面约束添加完以及优先级添加完毕后,我们就可以看一下运行效果了。为了动态的看一下约束的效果,我们为每个Label添加了一个Step控件,从下方运行效果我们不难看出,该控件主要是用来控制对应Label的大小的。下方的运行效果是符合我们之前的预期的。左边的Label的长度是有一个最大值得,当左边的Label显示完成后,右边剩下的空间就显示第二个Label的内容了。

  

三、Content Compression Resistance Priority (内容压缩阻力优先级)

聊完“内容拥抱优先级”后,接下来我们就来看一下Content Compression Resistance Priority内容压缩阻力优先级,从字面意思上看,该优先级越大则说明内容压缩阻力越大,也就是说内容越难被压缩。当两个Label并排显示,并且屏幕不足以显示两个Label的所有内容时,则会优先压缩“内容压缩阻力优先级”越小则先被压缩。

我们依然采用上一部分的方式,从错误入手,在错误解决的过程中来认识一下这个“Content Compression Resistance Priority”。首先我们也是让两个Label并排显示,左边的Label我们暂且称之为FirstLabel,右边的Label我们则称之为SecondLabel。我们为FirstLabel添加的约束有Top、Left、Height以及Width >= 50,我们为SecondLabel添加的约束为Left(以First的Right为参照)、Top、Right、Height以及Width>=102。下方截图就是我们添加上述约束后的效果:

  

添加完上述约束后,我们在Storyboard中可以看出是会报错的。报错原因也很明确“Content Priority Ambiguity”,也是内容优先级冲突。用大白话解释就是水平方向上无法确定两个Label的宽度。当然点击红色小圆点也会给出相应的错误解决方案:

  • Decrease horizontal compression resistance of "Bottom Label2" from 750 to 749 to make it get clipped before other views。

其大体意思就是减少第二个Label的水平压缩阻力,将现在的750修改成749,使得SecondLabel在其他视图之前被裁剪。此刻如果你点击该提示中的“Change Priority”按键的话,该错误将会被修复。

  

为了直观的看一下该优先级的效果,我们添加了一个Switch开关来修改上述两个Label的优先级。当Switch开关打开时,FirstLabel的压缩阻力优先级大于SecondLabel,开关关闭就相反了。具体代码如下所示:
  

修改完相应的错误,以及添加完相应的代码后,接下来我们来看一下运行结果。当开关打开时,前边的抗压缩阻力要大于后边的Label。而开关关闭时后边的抗阻力优先级要大于前边的,运行效果如下所示。

  

通过上述示例的演示,应该对Content Hugging Priority以及Content Compression Resistance Priority有了直观的感受,本篇博客就先到这儿吧。下方是上述示例在Github上的分享链接,如下所示:

github分享链接:https://github.com/lizelu/AutoLayoutContentHuggingAndCompressionResistance

iOS开发之AutoLayout中的Content Hugging Priority和 Content Compression Resistance Priority解析的更多相关文章

  1. iOS开发之Autolayout

    1.概述 在以前的iOS程序中,是如何设置布局UI界面的? (1)经常编写大量的坐标计算代码 (2)为了保证在3.5 inch和4.0 inch屏幕上都能有完美的UI界面效果,有时还需要分别为2种屏幕 ...

  2. iOS开发之autoLayout constraint

    前言 ios设备的尺寸越来越多,针对一款app可能要适配到多种设备.多种尺寸.所以.我们期望我们的app可以autoLayout.本文主要介绍在Xcode中使用constraint.未来会不定期对此文 ...

  3. ios开发之xcode6中如何添加pch全局引用文件

    xcode6中去掉了默认添加pch文件,这就需要我们自己手动添加pch文件了,添加pch文件是为了一些琐碎的头文件引用,加快编译速度! 下面就说下该如何手动添加pch文件: 1.添加一个文件,在oth ...

  4. iOS开发之UITableView中计时器的几种实现方式(NSTimer、DispatchSource、CADisplayLink)

    最近工作比较忙,但是还是出来更新博客了.今天博客中所涉及的内容并不复杂,都是一些平时常见的一些问题,通过这篇博客算是对UITableView中使用定时器的几种方式进行总结.本篇博客会给出在TableV ...

  5. iOS开发之MVVM在项目中的应用

    今天写这篇博客是想达到抛砖引玉的作用,想与大家交流一下思想,相互学习,博文中有不足之处还望大家批评指正.本篇博客的内容沿袭以往博客的风格,也是以干货为主,偶尔扯扯咸蛋(哈哈~不好好工作又开始发表博客啦 ...

  6. 李洪强iOS开发之iOS好文章收集

    李洪强iOS开发之iOS好文章收集 该文收集朋友们转发或自己的写的技术文章,如果你也有相关的好文章,欢迎留言,当好文章多的时候,我会对这些好文章进行分门别类 文章 简述 日期 直播服务配置 使用 ng ...

  7. iOS开发之Socket通信实战--Request请求数据包编码模块

    实际上在iOS很多应用开发中,大部分用的网络通信都是http/https协议,除非有特殊的需求会用到Socket网络协议进行网络数 据传输,这时候在iOS客户端就需要很好的第三方CocoaAsyncS ...

  8. iOS开发之UIImage等比缩放

    iOS开发之UIImage等比缩放 评论功能真不错 评论开通后,果然有很多人吐槽.谢谢大家的支持和关爱,如果有做的不到的地方,还请海涵.毕竟我一个人的力量是有限的,我会尽自己最大的努力大家准备一些干货 ...

  9. iOS开发之 Xcode6 添加xib文件,去掉storyboard的hello world应用

    iOS开发之  Xcode6.1创建仅xib文件,无storyboard的hello world应用 由于Xcode6之后,默认创建storyboard而非xib文件,而作为初学,了解xib的加载原理 ...

随机推荐

  1. 大数的加法函数--c语言

    浏览网站http://paste.ubuntu.com/23687758/ #include<stdio.h> #include<stdlib.h> #include<s ...

  2. 8个超震撼的HTML5和纯CSS3动画源码

    HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...

  3. RobotFramework安装完成后怎么在桌面显示ride图标

    安装了RobotFramework后,怎么让桌面上显示带有机器人的图标呢? 一.桌面上创建ride快捷方式 进入到python的安装目录的/Scripts目录下,找到ride.py文件-->右键 ...

  4. 【1414软工助教】团队作业10——复审与事后分析(Beta版本) 得分榜

    题目 团队作业10--复审与事后分析(Beta版本) 往期成绩 个人作业1:四则运算控制台 结对项目1:GUI 个人作业2:案例分析 结对项目2:单元测试 团队作业1:团队展示 团队作业2:需求分析& ...

  5. FileInputStream 小Demo

    要求:设计如下界面  文本框里面可以输入的路径和文件名  单机按钮可以读取在 指定的文件  并把文件内容显示到一个文本域里面来 代码: /** * */ package com.niit.homewo ...

  6. 201521123111《Java程序设计》第7周学习总结

    1. 本章学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 线性表,栈,队列,哈希表是常用的数据结构 在java.util包中有这些数据结构的实现类.比如:List接口,实现类Arra ...

  7. eclipse ide for java ee developers与eclipse ide for java developers有什么区别

    前者集成了WTP,可用于j2ee开发,功能更完善

  8. python3中的一些小改动

    Python 3.3中使用print是必须要括号因为在python3以上的版本中print不再是一条命令而是一个函数了.

  9. 201521123069 《Java程序设计》 第12周学习总结

    1.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2.书面作业 Q1.将Student对象(属性:int id, String name,int age,doub ...

  10. 201521123095 《Java程序设计》第10周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 Q1.finally 题目4-2 1.1 截图你的提交结果( ...