ScrollView的contentSize属性 与 AutoLayout(Masonry布局)

UIScrollView的contentSize属性,在AutoLayout下,UIScrollView的contentSize是由其内容的约束来定义的。

因此,在scrollView里面设置的约束不仅起到布局内容的作用,同时也定义scrollView可滚动范围的作用。

通过代码来演示:(自动布局用Masonry来做)

视图层级结构:view addSubView:scrollView addSubView:label

- (void)setupView {
    [self.view addSubview:self.normalScrollView];

    [self.normalScrollView addSubview:self.label];

    [self.label mas_makeConstraints:^(MASConstraintMaker *make) {
        //写法1,当通过leading和trailing的设定去约束
        make.top.equalTo(self.normalScrollView.mas_top).mas_offset(50);
        make.leading.equalTo(self.normalScrollView.mas_leading).mas_offset(20);
        make.trailing.equalTo(self.normalScrollView.mas_trailing).mas_offset(-20);
        make.height.mas_equalTo(50);
    }]; 
}

- (UILabel *)label {
    if (!_label) {
        _label = [[UILabel alloc] initWithFrame:CGRectZero];
        _label.text = @"测试Label测试";
        _label.backgroundColor = [UIColor grayColor];
        _label.textAlignment = NSTextAlignmentCenter;
    }
    return _label;
}

- (UIScrollView *)normalScrollView {
    if (!_normalScrollView) {
        _normalScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(20, 20, ScreenWidth-40, ScreenHeight-40)];
        _normalScrollView.scrollEnabled = YES;

        _normalScrollView.contentSize = CGSizeMake(ScreenWidth, ScreenHeight-40);
        _normalScrollView.backgroundColor = [UIColor blueColor];
    }
    return _normalScrollView;
}

图1
断点调试得到的结果:

<UIScrollView: 0x7faa3203e000; frame = (20 20; 335 627); contentSize: {150, 0}>

上面的代码可以看出,虽然已经设置了scrollView的contentSize,但是实际上在自动布局的情况下,contentSize的大小并不是原先设置的那样,而是由内容约束来定义的(leading,trailing),后执行的Masonry布局代码重定义了contentSize

因此,自动布局的情况下去定义contentSize是无效的。而mas_leading,mas_trailing是根据contentSize来确定的具体位置,而不是根据scrollview的frame来确定,因此布局得到的并不是想要得到的结果。(相互依赖)

如果想要得到想要的效果,用Masonry对scrollView的子视图布局时最好采用以下写法:(下面的写法是在scrollView的frame写死的情况下)

    [self.label mas_makeConstraints:^(MASConstraintMaker *make) {
        //写法2,通过frame设定width去约束
       make.top.equalTo(self.normalScrollView.mas_top).mas_offset(50);
        make.leading.equalTo(self.normalScrollView.mas_leading).mas_offset(20);
        make.width.mas_equalTo(self.normalScrollView.frame.size.width - 40);
        make.height.mas_equalTo(50);
    }];

图2
此时能达到想要的效果,但是注意这里contentSize仍然是{0,0},可见contentSize需要leading,trailing同时约束才会生效,未覆盖scrollView初始化时设置的contentSize。

contentSize的height同理,由top,bottom来决定,这里不作累述

所以,在Masonry中采用上述的写法,既能自定义滑动范围,不影响contentSize时很好的完成自动布局。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值