iOS屏幕适配方案详解

本文介绍了iOS开发中的三种布局技术:早期的autoresizing用于相对父视图布局,iOS6引入的autoLayout支持更复杂的约束,sizeClass和TraitVariations则针对不同屏幕尺寸和设备特性提供抽象适配。作者还提到了Masonry作为第三方库在简化代码中的作用。
摘要由CSDN通过智能技术生成

1、autoResizing

autoresizing是苹果早期的ui布局适配的解决办法,所有的ui控件只要相对父控件布局就可以了,没错autoResizing就是一个相对于父控件的布局解决方法;注意:它只能相对父控件布局;
在xcode中可以通过可视化的界面调整也可以通过代码去控制
1.png
可以通过图片看到autoResizing通过可视化能调整的只有6根线刚好和它的6个枚举值对应

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
};

外边的4根线用来设置当前view距离父控件的上、下、左、右的距离是否固定;
内部的两根线来设置view是否跟随父控件来自适应width和height;
代码则可以通过view.autoresizingMask = …来设定autoResizing值;
autoResizing的功能仅此而已;显然不够用;

2、autoLayout

autoLayout是iOS6之后出现的布局方法,它可以在任意两个控件之间通过添加约束的方式建立布局关系,如图:
2.png
autoLayout的设置功能就上图中下方的红色方框中;
左起第一个:
在这里插入图片描述

通过图中红色框圈住的地方可以看出来,该处功能是设置多个view之间的对齐方式,所以设置的时候要同时选中多个View进行设置
第二个:
4.png
这一部分相当于是一个autoResizing,强大之处在于可以是任意两个view的相对布局,可以设置距离父控件的上下左右位置(红色框),还有自身的宽高,还可以相对其他控件设置宽高(蓝色框)
第三个:
5.png
这部分是用来添加、删除、和更新约束的,上半部分是对于选中view的约束更新,下边是容器中得所有view的约束。
代码可以通过NSLayoutConstraint对象来实现,但是原生代码比较复杂,每个控件的一个约束就是一个NSLayConstraint对象,会造成很多重复代码,可读性差,一般不使用,一般在项目开发中使用三方框架Masonry替代。

3、sizeClass

由于后期苹果推出了多种屏幕尺寸的手机,所以适配方面需要做的工作就更加的多了,sizeClass随着大屏手机的推出应运而生。
sizeClass: 对屏幕尺寸进行了抽象:不在拘泥于具体尺寸;因为尺寸一直都在变化,我们如果按照尺寸去做适配,一定会很累的;
sizeClass针对iOS设备的屏幕进行了抽象分类:
1.compact (紧凑-小)
2.Any (任意)
3.Regular (宽松-大)
把高度和宽度都抽象为上边的3种,33也就是总共9种类型;是9种类型,不是9种屏幕尺寸;
注意:sizeClass只是对屏幕进行了抽象分类;具体做屏幕的适配还得用autoLayout;
这样做的结果就是你可以做好一个interface builder适配,然后不管在iphone还是ipad中都可以用了;
这就是苹果的意愿;打开xcode如果新建一个universal项目,在xcode6之前会默认有两个storyboard,一个是iphone的,一个是ipad版本的;xcode6之后只有一个,并且是正方形的,也就是说不管你做那种屏幕尺寸的app(无论是ipad还是iphone),都只用这一个storyboard就可以了;
xcode中得样子:
6.png
具体来看的话:
7.png
图中9个格子代表 3
3的9中抽象;
通过sizeclass对屏幕进行分类,然后用autolayout去适配布局,可以说能实现任何想要的效果,并且不用区分设备而做不同的IB了,一个IB全部搞定,不管是iphone还是ipad;

4、Trait Variations

Trait Variations是为了替换Xcode7的Size Class,因为SizeClass不能看到具体机型适配后的效果,不够直观,Trait Variations就是为了解决这个问题的。
8.png
试着选择设备iPhone7(wC hR),在里面放一个标签如下图:
在这里插入图片描述

你会发现所有的设备,包括iPhone,iPad等都添加上了这个标签,要想只在与我所选设备同类型的设备上即wC hR类型的设备上添加该标签,需要使用如下方法:
在这里插入图片描述

点击图中的按钮,如果你勾选了复选框width则所加的标签只会在wC的设备上显示,height同理。
注意相比sizeClass,Trait Variations的w和h只有两种类型C和R,没有any类型

  • 17
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值