前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >iOS 布局进阶:你真的会用 autolayout 么?

iOS 布局进阶:你真的会用 autolayout 么?

作者头像
波儿菜
修改于 2018-05-09 12:51:24
修改于 2018-05-09 12:51:24
1.5K00
代码可运行
举报
文章被收录于专栏:iOS技术iOS技术
运行总次数:0
代码可运行

前言

iOS系统已经迎来了10.3.2版本,iOS软件开发发展至今已经相当成熟了。布局的方式从frame、size、center到如今强大的autolayout,将UI布局尽量的“自动化”和“智能化”,在很大程度上减少了程序员的工作量。

可能很多人体会过接手一个老项目通篇的frame是有多么的痛苦。在现如今的开发中,个人还是提倡使用自动布局(比如UITableview的高度自适应用法),以减少大量的UI计算,然而很多开发者可能写出的自动布局一点也不自动。

autolayout可以理解为:给界面设定规则,让界面随着数据的变化而做出符合规则的变化。

本篇文章重在解决自动布局中复杂的相互约束。

选择布局的工具

在“遥远的”过去,相信大家都用过(或者见别人用过)UIKit框架的下的NSLayoutConstraint,用原生的layout代码体量之大让人有些难以接受,好在大牛们写了一些轮子照福大家,比如业界最有名气的框架——Masonry。这里就不介绍Masonry的基础用法了,相关的文档已经满天飞了。

关于使用xib、storyboard还是纯代码布局,大家可以根据开发项目的进度要求和开发者人数来决定,反正他们布局的道理是一样的。

intrinsicContentSize

首先,我们得搞清楚intrinsicContentSize是什么。

一个View的约束确定需要两个东西,一个是位置,一个是大小。在日常开发中,我们发现给UILabel、UIImageView、UIButton实例写约束的时候,只需要给他们位置,而不需要给大小。这是因为它们指定了intrinsicContentSize(可以理解为内部通过内容计算出了一个合理的大小,我们可以不用指定它)。

<i>指定intrinsicContentSize 方法:重写UIView 中的 -(CGSize)intrinsicContentSize: 方法,在需要改变这个值时调用:invalidateIntrinsicContentSize 方法,告知系统值已改变(我们可以自定义指定intrinsicContentSize的类)</i>

所以,当我们不给这三种指定了intrinsicContentSize的控件的大小的时候,UI还是不会出错,而且可以通过intrinsicContentSize属性获取内部计算过后的大小。

模糊约束

模糊约束,就是Masonry中的 lessThanOrEqualTo、greaterThanOrEqualTo,也就是小于等于、大于等于。单独使用模糊约束很简单。

example:

需求:上图中label宽度和高度遵循intrinsicContentSize,但是长度不能超过父视图。 实现:Label距离左边10,纵向居中,距离右边小于等于10

优先级

优先级就是在两个约束冲突的时候,优先满足优先级高的约束。

example:

这个例子只是演示优先级,并无实际意义

其实通常情况下的优先级的使用很简单,这里我要讲的是视图的优先级,如下图

QQ20170603-095009@2x.png

这两个方法相信大家都不陌生(不管有没有用过),他们派上用场的条件是,该视图指定了intrinsicContentSize(固有大小),所以UILabel、UIImageView、UIButton都可以配置这几个方法。

当然,这是在nib文件里面进行可视化的配置,在代码里面是这样的(他们是UIView的方法):

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
- (void)setContentHuggingPriority:(UILayoutPriority)priority forAxis:(UILayoutConstraintAxis)axis NS_AVAILABLE_IOS(6_0);
- (void)setContentCompressionResistancePriority:(UILayoutPriority)priority forAxis:(UILayoutConstraintAxis)axis NS_AVAILABLE_IOS(6_0);

<ul> <li>contentHuggingPriority:拒绝变大优先级</li> <li>ContentCompressionResistancePriority:拒绝缩小优先级</li> </ul> 换言之,拒绝变大优先级越高,它就不会变大,拒绝缩小优先级越高,它就不会缩小(额,有点废话的感觉)。举个例子见道理:

example:

需求:A和B相距10pt,A的宽度只能和文本一致(A尽量遵守指定的intrinsicContentSize)

实现:

step 1:先固定A和B的位置,然后他们相距10,把约束加上过后会报警告

step 2:我们做以下操作就能解决

拒绝变大优先级的使用

当然,这只是一个默认情况(提醒各位,不光是写业务逻辑,写布局也需要考虑极限情况,这样才能写出完美的布局),当A的文本变化的时候会这样:

极限情况

step3:以下的处理就顺理成章了

拒绝变小优先级的使用

当然,到目前为止算了完成了需求,但是在实际开发中还有一个问题需要考虑,就是A的内容过长,将B挤压为0了(_)

B的宽度被挤压为0了

step4:这时候,我们需要给B一个最小的宽度,避免“人间蒸发”,实现这个并没有想象中的那么简单,方法也很多,下面只讲解一种:

给B一个宽度,优先级为默认的1000

设置B宽度优先级为250 ![B的宽度再一次压缩为0](http://upload-images.jianshu.io/upload_images/2909132-aa15868f6f9f62d4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

最终解决

结语

布局的重点内容无非就以上讲解的东西,它们单独拎出来时,大家都觉得非常的简单。是否能写出一个完美无bug的布局,往往需要结合它们使用(固定约束、模糊约束、优先级),当布局元素很多且极其灵活的时候,才是考研iOS工程师布局UI能力的时候。

大家觉得读完本篇文章有些许收货,可以点赞或留言,觉得写得太low也可以点赞留言

由于篇幅原因,没有列举实际业务需要的例子,之后有空会写一写 。 _

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.06.02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
关于AutoLayout原生Content Hugging和Content Resistance小研究
之前就知道系统AutoLayout有拉伸和挤压的设置,平时用Masonry设置优先级也是可以解决这样的挤压和压缩的问题。但是设置Masonry的优先级自己一直设置不好。可能自己太菜了,或者自己对于Masonry研究的不是很精通。
君赏
2018/08/31
7330
关于AutoLayout原生Content Hugging和Content Resistance小研究
iOS界面布局之四——使用第三方库Masonry进行autolayout布局
        在前面博客,我们讨论了使用iOS原生的框架代码来进行autolayout布局。在使用中,我们会发现,无论是代码量还是结构的清晰度,都十分不能让我们满意,在storyBoard中只需要几条线就可以搞定的事情,用代码缺要写冗余的一大堆。并且有些时候,故事版并不能解决所有问题,某些控件必须我们手写,这样的话,我们就不得不进行代码的autolayout布局,幸运的是,Masonry可以帮助我们轻松愉快的完成这一任务。
珲少
2018/08/15
1.9K0
iOS界面布局之四——使用第三方库Masonry进行autolayout布局
iOS-屏幕适配实现(AutoLayout)
AutoLayout旨在替代Autoresizing,所以在同一个项目中,AutoLayout和Autoresizing是不能共存的,二者只能选其一,如果你选择了AutoLayout,那么Autoresizing自动被屏蔽掉;如果你选择了Autoresizing,那么AutoLayout自动被屏蔽掉。XCode5及其之后的版本,默认新建的项目就是使用AutoLayout
xy_ss
2023/11/22
4510
iOS-屏幕适配实现(AutoLayout)
iOS开发-屏幕适配三种技术(Autoresizing,AutoLayout,SizeClass)
1.系统适配:针对不同版本的操作系统进行适配 2.屏幕适配:针对不同大小的屏幕尺寸进行适配
孙寅
2020/06/02
5.5K0
iOS-屏幕适配实现(Masonry)
Masonry是一个轻量级的布局框架,拥有自己的描述语法,采用更优雅的链式语法封装AutoLayout,简洁明了并具有高可读性,而且同时支持 iOS 和 Max OS X
xy_ss
2023/11/22
3680
iOS开源界面布局库终于破3000star
经过几年的打磨和多次的重构,我的iOS开源界面布局库MyLayout的star数量终于在2018年8月6号破3000了!有图为证:
欧阳大哥2013
2018/08/22
1.9K0
iOS开源界面布局库终于破3000star
关于Autolayout和Masonry自动布局的几个坑
最近遇到一个复杂视图:根控制器里面有上下两个子控制器,子控制器中各自实现类似PageView的视图,然后PageView的每一页是一个WebView,同时中间有个可拖拽的控件,实现上下两个控制器视图的大小调整。采用子控制器的原因是因为防止所有的逻辑代码都混在根控制器中,所以没有使用nicklockwood的iCarousel或SwipeView,而是采用了之前一直在用的SCPageViewController。
freesan44
2018/09/05
1.6K0
关于Autolayout和Masonry自动布局的几个坑
深入剖析Auto Layout,分析iOS各版本新增特性
先前写到的一篇Masonry心得文章里已经提到了很多AutoLayout相关的知识,这篇我会更加详细的对其知识要点进行分析和整理。
用户7451029
2020/06/16
1.3K0
Autolayout
Autolayout Autolayout是一种“自动布局”技术,专门用来布局UI界面的 Autolayout自iOS6开始引入,由于Xcode4的不给力,当时并没有得到很大推广自iOS7(Xcode5)开始,Autolayout的开发效率得到很大的提升 苹果官方也推荐开发者尽量使用Autolayout来布局UI界面 Autolayout能很轻松地解决屏幕适配的问题 Autolayout的2个核心概念 参照 约束 与 Autoresizing 区别 在Autolayout之前,有Autoresizing可以
用户1941540
2018/05/11
9350
iOS布局之AutoresizingMask和AutoLayout
关于iOS的布局主要有两种方式,分别是AutoResizing和AutoLayout。其中AutoResizing作为一种旧的布局方式,在AutoLayout被推广之后已经很少被使用。为了更加清晰的了解iOS的布局方式,本篇针对于这两种布局方法进行简要的总结。 一.AutoResizing 我们在使用AutoResizing进行布局的时候,其主要思想就是设置子视图跟随父视图的frame变化而变化。具体的情况,我们可以设置左跟随,右跟随等等。下面是AutoResizing在代码中的使用。 //父视图 UIVi
梧雨北辰
2018/04/24
1.9K0
iOS布局之AutoresizingMask和AutoLayout
浅谈 iOS AutoLayout 中 Label 的抗拉伸和抗压缩
UIView 中关于 Content Hugging 和 Content Compression Resistance 的方法有:
s_在路上
2018/09/11
5.5K0
浅谈 iOS AutoLayout 中 Label 的抗拉伸和抗压缩
iOS自动布局框架之Masonry
目前iOS开发中大多数页面都已经开始使用Interface Builder的方式进行UI开发了,但是在一些变化比较复杂的页面,还是需要通过代码来进行UI开发的。而且有很多比较老的项目,本身就还在采用纯代码的方式进行开发。而现在iPhone和iPad屏幕尺寸越来越多,虽然开发者只需要根据屏幕点进行开发,而不需要基于像素点进行UI开发。但如果在项目中根据不同屏幕尺寸进行各种判断,写死坐标的话,这样开发起来是很吃力的。所以一般用纯代码开发UI的话,一般都是配合一些自动化布局的框架进行屏幕适配。苹果为我们提供的适配
xiangzhihong
2018/01/26
2.1K0
iOS开发常用之UI模糊效果、自动版式
模糊效果 FXBlurView - 是一个UIView子类,支持iOS5.0以上版本,支持静态,动态模糊效果,继承与UIView的模糊特效。 VVBlurPresentation - 很简单易用的在原来viewconntroller基础上做模糊,然后呈现新的viewcontroller的。 UICustomActionSheet - 通过模糊背景来着重强调与菜单相关的元素 - 对话框里面已经收藏。 SABlurImageView - 支持渐变动画效果的图像模糊化类库.PS与前几天推存类SAH
GuangdongQi
2018/12/14
1.7K0
关于Autolayout和Masonry自动布局的几个坑
自动布局 02 Mar 2016 Comments 前言 最近遇到一个复杂视图:根控制器里面有上下两个子控制器,子控制器中各自实现类似PageView的视图,然后PageView的每一页是一个WebView,同时中间有个可拖拽的控件,实现上下两个控制器视图的大小调整。采用子控制器的原因是因为防止所有的逻辑代码都混在根控制器中,所以没有使用nicklockwood 的iCarousel 或SwipeView ,而是采用了之前一直在用的SCPageViewController 。 记录下自动布局中遇到的几个坑。 关于translatesAutoresizingMaskIntoConstraints
freesan44
2018/09/05
1.7K0
关于Autolayout和Masonry自动布局的几个坑
如何把设计图自动转换为iOS代码? 在线等,挺急的!
本文主要介绍了一种基于Masonry的视图模块化方案,通过使用自定义UIView和UICollectionView实现视图的模块化,简化了视图的创建过程,提高了开发效率。同时,还介绍了一种基于Masonry的自动计算视图间距的方法,简化了间距调整的实现过程。
ios122
2018/01/02
1.4K0
如何把设计图自动转换为iOS代码? 在线等,挺急的!
【IOS开发基础系列】Autolayout自动布局专题
        bounds是指这个view在它自己坐标系的坐标和大小 而frame指的是这个view在它superview的坐标系的坐标和大小区别主要在坐标系这一块。很明显一个是自己为原点的坐标系,一个是以屏幕为原点的坐标系。
江中散人_Jun
2023/10/16
3530
【IOS开发基础系列】Autolayout自动布局专题
Masonry -- 使用纯代码进行iOS应用的autolayout自适应布局
简介 简化iOS应用使用纯代码机型自适应布局的工作,使用一种简洁高效的语法替代NSLayoutConstraints. 最新示例: 点击下载 项目简议: 如果再看到关于纯代码,xib或storyboa
ios122
2018/01/02
2.1K0
Ios常用第三方框架(一)
一.UI框架 下拉刷新 EGOTableViewPullRefresh - 最早的下拉刷新控件。 SVPullToRefresh - 下拉刷新控件。 MJRefresh - 仅需一行代码就可以为UITableView或者CollectionView加上下拉刷新或者上拉刷新功能。可以自定义上下拉刷新的文字说明。具体使用看“使用方法”。 (国人写) XHRefreshControl - XHRefreshControl 是一款高扩展性、低耦合度的下拉刷新、上提加载更多的组件。(国人写) CBStore
honey缘木鱼
2018/09/26
5.5K0
浅汇-iOS UI布局
  iOS中UI的布局是很重要的,而在前期开发中就要选定好布局的方法,因为这对整个工程乃至于后期的版本维护都有很重要的影响。本文从比较老的Frame到新生AutoLayout都进行了浅显的总结,希望对大家的UI布局学习有所帮助
進无尽
2018/09/12
2.2K0
浅汇-iOS UI布局
iOS学习——UIView的研究
在iOS开发中,我们知道有一个共同的基类——NSObject,但是对于界面视图而言,UIView是非常重要的一个类,UIView是很多视图控件的基类,因此,对于UIView的学习闲的非常有必要。在iO
mukekeheart
2018/03/26
2.8K0
iOS学习——UIView的研究
相关推荐
关于AutoLayout原生Content Hugging和Content Resistance小研究
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文