iOS 经常使用布局方式之Autoresizing

级别： ★★☆☆☆
标签：「iOS布局」「iOS autoresizing」「autoresizingMask」
做者： Xs·H
审校： QiShare团队

在 沐灵洛 线下分享iOS UIButton根据内容自动布局时，有和前端同窗讨论到iOS的经常使用布局方式。讨论过程十分热闹，不容易记录，但做者认为讨论结果有必要记录一下，但愿能帮助到一些同窗。 做者将iOS经常使用布局方式概括为Frame、Autoresizing、Constraint、StackView和Masonry五种，并将逐一介绍。 本篇文章介绍Autoresizing。

autoresizing是iOS较早版本中出现的屏幕适配技术。当时，iOS设备机型少、app界面布局简单，autoresizing能够较好地完成好比横竖屏之类的视图适配需求。在QiShare的项目中，autoresizing常与frame结合着使用来达到某些适配效果。好比，与上篇文章对比，用autoresizing能够更快速地实现浅灰色contentView彻底覆盖self.view并与之一块儿旋转的效果，代码以下。

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    _contentView = [[QiAutoresizingContentView alloc] initWithFrame:self.view.bounds];
    _contentView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    _contentView.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:_contentView];
}
复制代码

在上述代码中，contentView的autoresizingMask属性起到了决定性做用。咱们来认识下这个属性。

@property(nonatomic) UIViewAutoresizing autoresizingMask;    // simple resize. default is 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
};
复制代码

contentView的autoresizingMask属性是一个位移枚举UIViewAutoresizing。UIViewAutoresizing将视图分为了LeftMargin（相对于父视图的左边距）、RightMargin（相对于父视图的右边距）、TopMargin（相对于父视图的上边距）、BottomMargin（相对于父视图的下边距）、Width（视图自身的宽）和Height（视图自身的高）6个属性。在不设置autoresizingMask时默认使用UIViewAutoresizingNone赋值。当将autoresizingMask设置为某一个或多个值后，即设定该view的对应属性能够随着父视图的变化而变化。

好比在上述代码中，contentView的autoresizingMask被赋值为UIViewAutoresizingFlexibleWidth和UIViewAutoresizingFlexibleHeight，即设定contentView除了Width和Height能够随着self.view的变化而变化外，其他4个属性都被固定住了，因此能达到预期的效果，以下。

接下来，做者尝试使用autoresizing实现上篇文章中4等分的效果，代码以下。

- (instancetype)initWithFrame:(CGRect)frame {
    
    self = [super initWithFrame:frame];
    
    if (self) {
        
        CGFloat margin = 20.0;
        CGFloat padding = 20.0;
        CGFloat width = (self.bounds.size.width - margin * 2 - padding) / 2;
        CGFloat height = (self.bounds.size.height - margin * 2 - padding) / 2;
        
        _subView1 = [[UIView alloc] initWithFrame:CGRectMake(margin, margin, width, height)];
        _subView1.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:.6];
        [self addSubview:_subView1];
        
        _subView2 = [[UIView alloc] initWithFrame:CGRectMake(margin + width + padding, margin, width, height)];
        _subView2.backgroundColor = [[UIColor greenColor] colorWithAlphaComponent:.6];
        [self addSubview:_subView2];
        
        _subView3 = [[UIView alloc] initWithFrame:CGRectMake(margin, margin + height + padding, width, height)];
        _subView3.backgroundColor = [[UIColor blueColor] colorWithAlphaComponent:.6];
        [self addSubview:_subView3];
        
        _subView4 = [[UIView alloc] initWithFrame:CGRectMake(margin + width + padding, margin + height + padding, width, height)];
        _subView4.backgroundColor = [[UIColor yellowColor] colorWithAlphaComponent:.6];
        [self addSubview:_subView4];
        
        _subView1.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleBottomMargin;
        _subView2.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleBottomMargin;
        _subView3.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin;
        _subView4.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin;
    }
    
    return self;
}
复制代码

实现的效果图以下。

观察上图，在旋转屏幕至横屏后，4个subView之间的间距出了问题。这是由于UIViewAutoresizing枚举中的6个值都是相对于父视图的，不能实现同级视图之间存在约束关系的场景需求。

要实现同级视图之间的约束需求，阅读下篇文章要讲的Constraint会大有帮助。 另外，做者对contentView作了一个缩放动画，能够更好地观察视图的变化状况。具体细节能够在QiLayoutDemo中查看。

---

小编微信：可加并拉入《QiShare技术交流群》。

关注咱们的途径有：
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

推荐文章：
iOS UIButton根据内容自动布局
iOS 指定初始化方法
UIView中的hitTest方法
奇舞周刊