iOS布局之AutoresizingMask和AutoLayout

关于iOS的布局主要有两种方式,分别是AutoResizing和AutoLayout。其中AutoResizing作为一种旧的布局方式,在AutoLayout被推广之后已经很少被使用。为了更加清晰的了解iOS的布局方式,本篇针对于这两种布局方法进行简要的总结。

一.AutoResizing

我们在使用AutoResizing进行布局的时候,其主要思想就是设置子视图跟随父视图的frame变化而变化。具体的情况,我们可以设置左跟随,右跟随等等。下面是AutoResizing在代码中的使用。

//父视图
UIView *superView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
superView.backgroundColor = [UIColor orangeColor];
[self.view addSubview:superView];
//子视图
UIView *subView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
subView.backgroundColor = [UIColor purpleColor];
[superView addSubview:subView];

//设置子视图的宽度随着父视图变化
subView.autoresizingMask = UIViewAutoresizingFlexibleWidth;

//修改父视图的frame
superView.frame = CGRectMake(0, 0,200 , 200);

以上代码中我们设置了子视图的宽度随父视图的变化而改变,其效果图如下:

屏幕快照 2016-09-18 下午4.53.23.png

我们可以看到,图中的子视图的宽度也随着父视图的宽度增加到了二倍。这就是AutoResizing的一个最简单的应用。在我们在实际使用时,还有很多的相关属性可以设置。有关AutoResizing可设置的布局属性如下:

typedef NS_OPTIONS(NSUInteger, UIViewAutoresizing) {
    UIViewAutoresizingNone                 = 0,
    UIViewAutoresizingFlexibleLeftMargin   = 1 << 0,
    UIViewAutoresizingFlexibleWidth        = 1 << 1,
    UIViewAutoresizingFlexibleRightMargin  = 1 << 2,
    UIViewAutoresizingFlexibleTopMargin    = 1 << 3,
    UIViewAutoresizingFlexibleHeight       = 1 << 4,
    UIViewAutoresizingFlexibleBottomMargin = 1 << 5
};

如果我们需要在XIB中使用AutoResizing,我们需要进行如下的操作,在当我们创建xib视图的时候,我们在XIB里选中一个UIView, 1.进入file Inspector, 在这里取消AutoLayout属性,这样我们就可以使用AutoResizing方法布局了。

image.png

2.然后我们进入size Inspector,在这里我们可以看到与AutoResizing布局属性相关的红色线条,我们在这里选择或者取消红线,就相当于增加或者取消了子视图的自动跟随约束。

2.png

二、AutoLayout

AutoLayout相比AutoResizing更加实用,是可以完全替代AutoResizing的一种自动布局方式。而在使用AutoLayout前,我们必须理解一个属性,那就是translatesAutoresizingMaskIntoConstraints。该属性表示autoresizingMask和autolayout两种方式的转换。这个属性对于在代码中生成的view来说默认是true,而对于IB中拖出来的view来说默认是false. 对于这一属性,官方文档给出的解释是这样的:

     /* By default, the autoresizing mask on a view gives rise to constraints that fully determine
 the view's position. This allows the auto layout system to track the frames of views whose
 layout is controlled manually (through -setFrame:, for example).
 When you elect to position the view using auto layout by adding your own constraints,
 you must set this property to NO. IB will do this for you.
    */

从以上的描述中,我们可以知道在使用AutoResizing布局时,AutoLayout会根据autoResizing来创建同等行为的constraint出来确定视图的位置。从而实现了视图的自动布局。而当我们确定选择使用AutoLayout添加自己的约束的时候,我们必须设置此属性为NO,XIB中这个属性默认是NO。 在实际的使用过程中,我还需要注意两点: 1.当我们设置这个属性为YES的时候,view的布局结果由AutoResizingMask,frame,center这些因素共同决定,如果再在其上添加AutoLayout约束,自定义的AutoLayout约束就会和AutoResizing里Autolayout约束冲突而报错。 2.我们设置该属性为NO,AutoResizing并不会直接失效,只有当我们为视图设置了constraint之后,AutoResizing才会失效。

那么AutoLayout在开发中具体如何使用呢,这其实分为两种情况,一种是借助xib中的约束功能通过连线的方法实现。还有一种就是代码直接添加约束,但是代码自动布局是一件很麻烦的事,我们通常又会借助第三方即Masonry,下章节将会简要介绍Masonry的用法。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

React Native导航器之react-navigation使用

在上一节Navigation组件,我们使用系统提供的导航组件做了一个跳转的例子,不过其实战能力不强,这里推荐一个超牛逼的第三方库:react-navigatio...

2.1K70
来自专栏进步博客

iOS编程101:如何创建圆形头像和圆角图片

IOS7的一个变化是相对于方形图像,更偏爱于使用圆形图像。在内置的应用中可以看到圆形图标或圆形图像,如联系人和电话应用。这篇短文中,我们将探讨CALayer类,...

13820
来自专栏Django Scrapy

HTML表格不变形的方法;颜色代号

在<table>< td ><tr>标签加style 相关链接在这里 如何保证table表格不被撑开(固定HTML表格宽度) 我们在网站制作过程中,有时会...

63570
来自专栏微信小开发

五分钟掌握微信小程序轮播图

从公共库v1.4.0开始,change事件返回detail中包含一个source字段,表示导致变更的原因,可能值如下: autoplay 自动播放导致 swip...

24160
来自专栏cnblogs

bootstrap源码分析之form、navbar

一、表单(Form) 源码文件: _form.scss mixins/_form.scss 1、按层次结构分:form-group -> form-contr...

24570
来自专栏余生开发

markdown基本语法

markdown是一种纯文本格式的标记语言。通过简单的标记语法,它可以使普通文本内容具有一定的格式。

11540
来自专栏一“技”之长

iOS动画开发之二——UIView动画执行的另一种方式

        上一篇博客中介绍了UIView的一些常用动画,通过block块,我们可以很方便简洁的创建出动画效果:http://my.oschina.net/...

9630
来自专栏糊一笑

移动端APP列表点透事件处理方法

关于点透事件这里不再赘述,如果不清楚的可以上网搜一搜,或者看小火柴的这篇文章。 这里是自己在做移动端时,在列表滑动的时候,遇到的点透问题。出现这个问题的来由是因...

38150
来自专栏python学习指南

Python爬虫(二十四)_selenium案例:执行javascript脚本

本章叫介绍如何使用selenium在浏览器中使用js脚本,更多内容请参考:Python学习指南 隐藏百度图片 #-*- coding:utf-8 -*- ...

235100
来自专栏xx_Cc的学习总结专栏

六天完成一个简单iOS App - 第二天

29950

扫码关注云+社区

领取腾讯云代金券