scrollview中使用masory

最新推荐文章于 2020-12-30 05:07:49 发布

原创最新推荐文章于 2020-12-30 05:07:49 发布 · 301 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios #scrollview #自动布局

iOS开发专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何在iOS应用中使用Masonry自动布局与UIScrollView结合，通过添加一层containerView来实现复杂界面的滚动效果。文章详细展示了如何创建UIScrollView、containerView及多个子视图，并利用Masonry设置各控件之间的约束，确保界面在不同设备上都能良好滚动。

很多时候,我们需要使用ScrollView来作为底层View,来使整个界面能够滑动显示.使用Frame来设置各控件的坐标时,很简单,直接用ScrollView的ContentSize属性就可以设置其滑动范围,但是使用Masonry的时候 ,这个方法就不行了,此时,我们需要给ScrollView上加一层containerView,将各个控件都加在containerView上,然后根据最后一个控件的的位置来设置containerView的底部约束就可以了.

 
    // 1.创建scrollview
    UIScrollView *scrollView = [[UIScrollView alloc]init];
    scrollView.backgroundColor = [UIColor whiteColor];
    scrollView.alwaysBounceVertical = YES;
    scrollView.showsVerticalScrollIndicator = NO;
    scrollView.showsHorizontalScrollIndicator = NO;
    if (@available(iOS 11.0, *)) {
        scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
    }
    [self.view addSubview:scrollView];
    [scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view);
    }];
    
    // 2.创建containView
    UIView *containView = [UIView new];
    [scrollView addSubview:containView];
    [containView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(scrollView);
        // 宽度也要撑开
        make.width.equalTo(scrollView);
    }];
    
    // 3. 添加3个控件
    UIView *view1 = [UIView new];
    view1.backgroundColor = [UIColor cyanColor];
    [containView addSubview:view1];
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        // 顶部要约束到containView的顶部
        if (@available(iOS 11.0, *)) {
            make.top.equalTo(containView.mas_safeAreaLayoutGuideTop).offset(20);
        } else {
            make.top.equalTo(containView);
        }
        make.size.mas_equalTo(CGSizeMake(200, 500));
        make.centerX.equalTo(containView);
    }];
    
    UIView *view2 = [UIView new];
    view2.backgroundColor = [UIColor blueColor];
    [containView addSubview:view2];
    [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(view1.mas_bottom).offset(20);
        make.size.mas_equalTo(CGSizeMake(200, 500));
        make.centerX.equalTo(containView);
    }];
    
    UIView *view3 = [UIView new];
    view3.backgroundColor = [UIColor yellowColor];
    [containView addSubview:view3];
    [view3 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(view2.mas_bottom).offset(20);
        make.size.mas_equalTo(CGSizeMake(200, 300));
        make.centerX.equalTo(containView);
        // 底部需要约束到containView的底部
        make.bottom.equalTo(containView).offset(-20);
    }];