美文网首页QiShare文章汇总
iOS 常用布局方式之Frame

iOS 常用布局方式之Frame

作者: QiShare | 来源:发表于2019-05-27 17:10 被阅读41次

    级别: ★★☆☆☆
    标签:「iOS布局」「iOS frame」「iOS frame bounds」
    作者: Xs·H
    审校: QiShare团队

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

    frameUIView的属性,用来描述UIView及其子类所表示的视图的位置(origin)和大小(size)。frameiOS布局中最基本、最常用和最容易被开发者接受的布局方式。一般来说,可以通过以下方式很方便地创建并显示一个视图,如下。

    - (void)viewDidLoad {
        
        [super viewDidLoad];
        
        _contentView = [[QiFrameContentView alloc] initWithFrame:self.view.bounds];
        _contentView.backgroundColor = [UIColor lightGrayColor];
        [self.view addSubview:_contentView];
    }
    

    在上述代码中,作者在viewDidLoad中,将一个浅灰色的contentView添加到了self.view上,并将其frame设置为了self.view.bounds。显然,作者希望浅灰色的contentView完全盖住self.view(默认白色)。使用模拟器运行一下,初始效果如作者所愿,但将模拟器旋转方向后,浅灰色的contentView没有一起旋转,在右侧漏出了一部分白色的self.view,如下。

    上述现象其实是frame特性的一种表现。在仅使用frame来布局视图时,视图的位置和大小是被唯一确定了的,不会跟随父视图的变化而变化,除非在某个时间点再次设置了frame。

    作者希望contentView可以跟着self.view一起旋转,始终保持完全覆盖的效果,于是做了如下修改。

    - (void)viewDidLoad {
        
        [super viewDidLoad];
        
        _contentView = [[QiFrameContentView alloc] initWithFrame:CGRectZero];
        _contentView.backgroundColor = [UIColor lightGrayColor];
        [self.view addSubview:_contentView];
    }
    
    - (void)viewWillLayoutSubviews {
        
        [super viewWillLayoutSubviews];
        
        _contentView.frame = self.view.bounds;
    }
    

    为实现想要的小伙,作者在viewWillLayoutSubviews方法中重新设置了contentViewframe,并将viewDidLoad中初始化contentView时设置的frame改为了CGRectZero因为在每一次self.view的frame变化后和self.view的子view发生变化前都会触发viewWillLayoutSubviews方法。

    借鉴上面的原理,作者在contentView上添加4subView,实现4等分的效果,如下图。

    实现上图效果的代码如下:

    - (instancetype)initWithFrame:(CGRect)frame {
        
        self = [super initWithFrame:frame];
        
        if (self) {
        
            _subView1 = [[UIView alloc] initWithFrame:CGRectZero];
            _subView1.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:.6];
            [self addSubview:_subView1];
            
            _subView2 = [[UIView alloc] initWithFrame:CGRectZero];
            _subView2.backgroundColor = [[UIColor greenColor] colorWithAlphaComponent:.6];
            [self addSubview:_subView2];
            
            _subView3 = [[UIView alloc] initWithFrame:CGRectZero];
            _subView3.backgroundColor = [[UIColor blueColor] colorWithAlphaComponent:.6];
            [self addSubview:_subView3];
            
            _subView4 = [[UIView alloc] initWithFrame:CGRectZero];
            _subView4.backgroundColor = [[UIColor yellowColor] colorWithAlphaComponent:.6];
            [self addSubview:_subView4];
        }
        
        return self;
    }
    
    - (void)layoutSubviews {
     
        [super layoutSubviews];
        
        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.frame = CGRectMake(margin, margin, width, height);
        _subView2.frame = CGRectMake(margin + width + padding, margin, width, height);
        _subView3.frame = CGRectMake(margin, margin + height + padding, width, height);
        _subView4.frame = CGRectMake(margin + width + padding, margin + height + padding, width, height);
    
        /*
        _subView4.qi_width = width;
        _subView4.qi_height = height;
        _subView4.qi_top = _subView3.qi_top;
        _subView4.qi_left = _subView3.qi_right + padding;
         */
    }
    

    其中,通过打点可知contentView中的layoutSubviews方法与viewController中的viewWillLayoutSubviews方法成对触发,并且layoutSubviews晚于后者。

    PS:bounds与frame有一定区别。
    bounds只用来描述视图的尺寸,就像一页A4纸,不论把它放在桌子上还是地板上,它的bounds都不发生变化。
    frame除了能够描述视图的尺寸外还能描述视图的位置。再如A4纸,从桌子上挪到地板上,它的frame就发生变化了。

    另外,为了更方便、直观地使用frame布局视图,可以使用类似上面代码中注释的代码形式。具体的实现细节,可以在QiLayoutDemo中查看。


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

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

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

    相关文章

      网友评论

        本文标题:iOS 常用布局方式之Frame

        本文链接:https://www.haomeiwen.com/subject/cyfqtctx.html