iOS-屏幕适配实现（Autoresizing）

xy_ss

发布于 2023-11-22 09:31:11

2630

发布于 2023-11-22 09:31:11

文章被收录于专栏：浮躁的喧嚣

Autoresizing简介

Autoresizing是苹果早期屏幕适配的解决办法，当时iOS设备机型很少、屏幕尺寸单一、APP界面相对简单，屏幕适配并没有现在这么复杂，所有的UI控件只要相对父控件布局就可以了，Autoresizing就是一个相对于父控件的布局解决方法

在Xcode5之后，新建的项目默认使用AutoLayout。Autoresizing默认不启用，我们可以去掉use Auto Layout前面的对勾来启用Autoresizing

Autoresizing用法

XIB中使用Autoresizing Autoresizing的核心用法就是6条线，上下左右以及空间内的两条红色交叉线如下图上下左右四条红色的线分别表示此视图距离父视图的上下左右边的约束各式多少中间两条上下交叉的线表示，此视图的高度与宽度是否随着父视图的变化而按比例变化

Autoresizing

举个例子：当我们将左边和上面虚线变成实线时，代表子控件和父控件在这个方向上的间距被固定当我们点击子视图内部的虚线时，同样也变为实线，代表子视图的宽度或者高度被固定了

Autoresizing

代码中使用Autoresizing

@property(nonatomic) BOOL autoresizesSubviews; // 默认为YES，代表父控件会跟随子控件尺寸的变化而变化
@property(nonatomic) UIViewAutoresizing autoresizingMask;    //是一个枚举值，作用是自动调整子控件与父控件中间的margin(间距)或者子控件的宽高。默认其枚举值是UIViewAutoresizingNone

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 //与父视图上边间距固定，下边可变 };

注意：UIView的autoresizesSubviews属性为YES时（默认为YES），autoresizingMask才会生效，也就是说，当我们想要利用autoresizingMask指定某个控件和其父控件的关系时候，必须autoresizesSubviews = YES。

Autoresizing的各种组合预览

** UIViewAutoresizingNone** view的frame不会随superview的改变而改变(这样的约束条件有冲突，会默认左间距和上间距固定)

UIViewAutoresizingNone.gif

UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleBottomMargin view和其superView左间距和上间距固定，宽高固定，右间距和底部间距随父控件的缩放而按比例缩放

UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleBottomMargin.gif

UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleBottomMargin view与其superView上间距固定，右间距固定，宽高固定，左间距、下间距锁父控件的缩放而缩放

UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleBottomMargin.gif

UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin view与其superView的右间距、底部间距固定，宽高固定，上间距、左间距随父控件的缩放而缩放

UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin.gif

UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin view与其superView的左间距、底部间距固定，宽高固定，右间距、上间距随父控件的缩放而缩放

UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin.gif

UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleHeight view与其superView的上间距、左间距、底部间距固定，宽度固定。高度、右边距随父控件缩放而缩放

UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleHeight.gif

UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleWidth view与其superView的左间距、上间距、右间距固定，高度固定。宽度、底部间距随父控件的缩放而缩放

UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleWidth.gif

UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight view与其superView的上间距、右间距、底部间距固定，宽度固定。高度、左间距随父控件的缩放而缩放

UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight.gif

UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth view与其superView的左间距、右间距、底部间距固定，高度固定。宽度、上间距随父控件的缩放而缩放

UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth.gif

UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight view与其superView的左间距、上间距、底部间距固定。宽度、高度、右间距随父控件的缩放而缩放

UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight.gif

UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight view与其superView的左间距、上间距、右间距固定。宽度、高度、底部间距随父控件的缩放而缩放

UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight.gif

UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight view与其superView的上间距、右间距、下间距固定。宽度、高度、左间距随父控件的缩放而缩放

UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight.gif

UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight view与其superView的左间距、底部间距、右间距固定。宽度、高度、上间距随父控件的缩放而缩放

UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight.gif

UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottom view与其superView的宽高比例维持不变，上下左右间距也随其superView的缩放而缩放

UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin view与其superView的左右间距固定，高度固定，宽度、上间距、底部间距随其父控件的缩放而缩放

UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin.gif

UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin view与其superView的上下左右边距的比例维持不变，宽高固定，反映在storyBoard中，就是什么都不设置

UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin.gif

UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleRightMargin 左边距、右边距、宽按比例调整，上边距固定，下边距固定，高度固定（这样的约束条件有冲突，会默认上边距不变）垂直方向是同样效果，故不列举

UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleRightMargin.gif

UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight 自动调整view的宽和高，保证上下左右边距不变

UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight.gif

综上发现，只要是我们在水平方向同时固定了左边距和右边距，那么我们千万不能固定子控件的宽度（反应在storyBoard中的设置，也就是必须使控制子控件宽度的虚线变为实线）。同理，如果垂直方向同时固定了上边距和下边距，那么我们不能固定子控件的高度（反应在storyBoard中的设置，也就是必须使控制子控件高度的虚线变为实线）