iOS布局-autoresizingMask

iOS布局-AutoresizingMask

前端的主要任务简单来看,就是绘制界面,绑定数据。在iOS绘制界面的布局方式主要有以下三种:

  1. frame
  2. autoresizingMask
  3. AutoLayout

fame:常用于绝对布局,通过设置x, y, width, height来确定控件的位置和大小。

autoresingMask:苹果早期的相对布局的方案,允许子视图跟随父视图变化而变化,比如按比例缩放宽高,按比例缩放边距,仅限于两个视图之间使用,需要fame配合使用[不建议代码使用,可以在xib中使用]。

AutoLayout:iOS6引入基于关系的相对布局方式,允许视图与另外一个或者多个视图保持约束关系,可以在多个视图间使用,但是建议参考父视图添加约束,系统可以自动将frame转为约束。

Waring: 同一个视图,不能同时使用autoresizingMask和AutoLayou,比如视图A不能左边关系使用autoresizingMask,高宽布局使用AutoLayout。但是允许同一父视图,不同子视图使用autoresizingMask或者AutoLayout

AutoresizingMask理解

与frame绝对布局不同,autoresizingMask允许子视图的大小和位置跟随父视图动态变化,比如像UIButtion内部哪些子控件就使用autoresizingMask来布局达到适应效果。

借助xib我们可以形象理解autoresizingMask。

设置子视图与父视图宽高等比例变化效果图如下:

iOS布局-autoresizingMask_第1张图片

设置等比例高度变化,底边距等比例间距,效果如下

iOS布局-autoresizingMask_第2张图片

通过上面的 gif 我们能轻松理解autoresizingMask的布局特点。就是可以设置等比例变化,达到视图自适应变化。

autoresizingMask支持 xib 和代码。

UIViewAutoresizing枚举值

在autoresizingMask中,通过控制UIView的autoresizingMask属性控制,包含以下枚举值:

布局关系 视图随父视图等比例变化
none 默认值,不会随父视图改变而改变
flexiableLeftMargin 子视图左边距,等比例变化
flexiableWidth 子视图宽度,等比例变化
flexiableRightMargin 子视图右边距,等比例变化
flexiableTopMargin 子视图上边距,等比例变化
flexiableHeight 子视图高度,等比例变化
flexiableBottomMargin 子视图底边距离,等比例变化

Tips: flexiable表示灵活的、可自适应的、弹性的意思

实际设置往往需要组合这几个枚举值达到要求。

注意:在xib的Size Inspector的autoresizing中也可以设置对应关系(而且很简单),但是表达方式可能不一样,对于边距,在xib中选中表示不变的边距 , 对于宽高,选中表示等比例变化的。如下图

iOS布局-autoresizingMask_第3张图片

代码枚举值却是:[.flexibleTopMargin, .flexibleRightMargin]

xib/StroryBoard使用autoresizingMask

通过xib设置autoresizingMask很简单,也很直观,当你选择完后,鼠标放在上面就会有动效,可以观察到是不是自己想要的效果。

比如实现这个需求:label在不同尺寸的屏幕上,自适应变化宽高,等比例设置左右边距,但是顶部边距不变,达到不同设备相似视觉感。

首先在storyboard中,以SE屏幕Controller为参考设置想要的frame,设置automask,如下图:

iOS布局-autoresizingMask_第4张图片

实际运行显示,根据不同屏幕,label的左右边距等比例缩放,且自适应宽高。效果图如下

iOS布局-autoresizingMask_第5张图片

代码布局使用autoresizingMaskt

关于在代码中使用autoresizingMask,我是百思不得其解,感觉设置了也没有起到效果,感觉就像设置了还要自己算frame,不像在xib中设置了来得实际。

参考:自动布局值autoresizingMask使用详情

不建议使用,感觉理解起来很复杂。

你可能感兴趣的:(#,UI控件)