iOS 常用布局方式之Autoresizing

谁践踏了优雅 2022-05-01 12:54 353阅读 0赞

> 级别： ★★☆☆☆  
> 标签：「iOS布局」「iOS autoresizing」「autoresizingMask」  
> 作者： [Xs·H][Xs_H]  
> 审校： [QiShare团队][Xs_H]  
>

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

autoresizing是iOS较早版本中出现的屏幕适配技术。当时，iOS设备机型少、app界面布局简单，autoresizing可以较好地完成比如横竖屏之类的视图适配需求。在QiShare的项目中，autoresizing常与frame结合着使用来达到某些适配效果。比如，与[上篇文章][Link 2]对比，用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 1]  
> [QiShare(知乎)][QiShare 2]  
> [QiShare(GitHub)][QiShare_GitHub]  
> [QiShare(CocoaChina)][QiShare_CocoaChina]  
> [QiShare(StackOverflow)][QiShare_StackOverflow]  
> QiShare(微信公众号)  
>

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

转载于:https://juejin.im/post/5cefb0d8e51d4555fc1acc39

[Xs_H]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fc%2Fb3bd94559163
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fu%2F2efd1004e4d0
[iOS UIButton]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2F0455f7a9ebe8
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2F98c8e18d7fea
[QiLayoutDemo]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FQiShare%2FQiLayoutDemo
[QiShare]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fu%2F3db23baa08c7
[QiShare 1]: https://juejin.im/user/5b542b76e51d4533d2042b62
[QiShare 2]: https://link.juejin.im?target=https%3A%2F%2Fwww.zhihu.com%2Fpeople%2Fedit
[QiShare_GitHub]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FQiShare
[QiShare_CocoaChina]: https://link.juejin.im?target=http%3A%2F%2Fwww.cocoachina.com%2Fbbs%2Fu.php%3Ftid%3D658244
[QiShare_StackOverflow]: https://link.juejin.im?target=https%3A%2F%2Fstackoverflow.com%2Fusers%2F10118400%2Fqishare
[iOS]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2F31aad4b01606
[UIView_hitTest]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2Fccde97aae849
[Link 3]: https://link.juejin.im?target=https%3A%2F%2Fweekly.75team.com