美文网首页iOS旅途
UIScrollView如何使用Masonry做自动适配

UIScrollView如何使用Masonry做自动适配

作者: 朝阳小麦 | 来源:发表于2019-01-08 12:57 被阅读3次

    适用人群:iOS开发人员。
    本文内容:一般用UIScrollView的时候,需要设置contentSize来告诉UIScrollView该如何滚动,但是如果UIScrollView的子视图是Masonry布局,则无法获取内容的高度,从而无法设置contentSize。那么,该如何告诉UIScrollView滚动方向呢?

    目录:
    1.效果展示
    2.代码粘贴
    3.代码讲解

    1.效果展示

    效果如下图所示,分别为,1.内容比较少无需UIScrollView滚动;2.内容比较多,需要UIScrollView滚动,显示全部内容。


    效果1:内容比较少,无需滚动
    效果2:内容多,需要滚动展示
    2.代码粘贴

    整个界面代码如下:

    
    #import "FYContactRecordingDeatilViewController.h"
    
    @interface FYContactRecordingDeatilViewController ()
    
    @property (nonatomic, strong) UIScrollView *scrollView;
    @property (nonatomic, strong) UIView *contentView;
    @property (nonatomic, strong) UILabel *nameTLbl;
    @property (nonatomic, strong) UILabel *nameLbl;
    @property (nonatomic, strong) UILabel *timeTLbl;
    @property (nonatomic, strong) UILabel *timeLbl;
    @property (nonatomic, strong) UILabel *wayTLbl;
    @property (nonatomic, strong) UILabel *wayLbl;
    @property (nonatomic, strong) UILabel *descLbl;
    @end
    
    @implementation FYContactRecordingDeatilViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        self.title = @"查看接触记录";
        
        [self setupSubviews];
        
        self.nameTLbl.text = @"姓名";
        self.timeTLbl.text = @"接触时间";
        self.wayTLbl.text = @"接触方式";
        
        self.nameLbl.text = @"2000";
        self.timeLbl.text = @"2018-12-24 13:14";
        self.wayLbl.text = @"微信";
        self.descLbl.text = @"银行是金融机构之一,银行按类型分为:中央银行, 政策性银行,商业银行,投资银行,世界银行,它们 的职责各不相同。银行是金融机构之一,银行按类型分为:中央银行, 政策性银行,商业银行,投资银行,世界银行,它们 的职责各不相同。银行是金融机构之一,银行按类型分为:中央银行, 政策性银行,商业银行,投资银行,世界银行,它们 的职责各不相同。银行是金融机构之一,银行按类型分为:中央银行, 政策性银行,商业银行,投资银行,世界银行,它们 的职责各不相同。银行是金融机构之一,银行按类型分为:中央银行, 政策性银行,商业银行,投资银行,世界银行,它们 的职责各不相同。银行是金融机构之一,银行按类型分为:中央银行, 政策性银行,商业银行,投资银行,世界银行,它们 的职责各不相同。银行是金融机构之一,银行按类型分为:中央银行, 政策性银行,商业银行,投资银行,世界银行,它们 的职责各不相同。银行是金融机构之一,银行按类型分为:中央银行, 政策性银行,商业银行,投资银行,世界银行,它们 的职责各不相同。银行是金融机构之一,银行按类型分为:中央银行, 政策性银行,商业银行,投资银行,世界银行,它们 的职责各不相同。银行是金融机构之一,银行按类型分为:中央银行, 政策性银行,商业银行,投资银行,世界银行,它们 的职责各不相同。银行是金融机构之一,银行按类型分为:中央银行, 政策性银行,商业银行,投资银行,世界银行,它们 的职责各不相同。银行是金融机构之一,银行按类型分为:中央银行, 政策性银行,商业银行,投资银行,世界银行,它们 的职责各不相同。银行是金融机构之一,银行按类型分为:中央银行, 政策性银行,商业银行,投资银行,世界银行,它们 的职责各不相同。银行是金融机构之一,银行按类型分为:中央银行, 政策性银行,商业银行,投资银行,世界银行,它们 的职责各不相同。";
        
    }
    
    #pragma mark - views
    - (void)setupSubviews {
        [self.view addSubview:self.scrollView];
        [_scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.mas_equalTo(UIEdgeInsetsZero);
        }];
        
        [_scrollView addSubview:self.contentView];
        [_contentView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.mas_equalTo(self.scrollView);
            make.width.mas_equalTo(self.scrollView);
            make.height.mas_greaterThanOrEqualTo(kAutoWidth(264));
        }];
        
        [self.contentView addSubview:self.nameLbl];
        [self.contentView addSubview:self.nameTLbl];
        [self.contentView addSubview:self.timeTLbl];
        [self.contentView addSubview:self.timeLbl];
        [self.contentView addSubview:self.wayLbl];
        [self.contentView addSubview:self.wayTLbl];
        [self.contentView addSubview:self.descLbl];
        
        [_nameTLbl mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.mas_equalTo(15);
            make.top.mas_equalTo(0);
            make.height.mas_equalTo(43);
        }];
        [_nameLbl mas_makeConstraints:^(MASConstraintMaker *make) {
            make.right.mas_equalTo(-30);
            make.centerY.mas_equalTo(self.nameTLbl);
        }];
        [_timeTLbl mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.height.mas_equalTo(self.nameTLbl);
            make.top.mas_equalTo(self.nameTLbl.mas_bottom).mas_offset(1);
        }];
        [_timeLbl mas_makeConstraints:^(MASConstraintMaker *make) {
            make.right.mas_equalTo(self.nameLbl);
            make.centerY.mas_equalTo(self.timeTLbl);
        }];
        [_wayTLbl mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.height.mas_equalTo(self.nameTLbl);
            make.top.mas_equalTo(self.timeTLbl.mas_bottom).mas_offset(1);
        }];
        [_wayLbl mas_makeConstraints:^(MASConstraintMaker *make) {
            make.right.mas_equalTo(self.nameLbl);
            make.centerY.mas_equalTo(self.wayTLbl);
        }];
        [_descLbl mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.mas_equalTo(self.nameTLbl);
            make.top.mas_equalTo(self.wayTLbl.mas_bottom).mas_offset(15);
            make.right.mas_equalTo(-15);
            make.bottom.mas_lessThanOrEqualTo(-15);
        }];
        
        //划分隔线 箭头icon
        __block NSArray *arr = @[self.nameTLbl, self.timeTLbl, self.wayTLbl];
        for (int i=0; i<3; i++) {
            UIView *line = [UIView new];
            line.backgroundColor = [UIColor colorWithHexString:@"#F5F5F5"];
            [self.contentView addSubview:line];
            __block CGFloat left = i==2?0:15;
            __block CGFloat top = 43*(i+1)+i;
            [line mas_makeConstraints:^(MASConstraintMaker *make) {
                make.left.mas_equalTo(left);
                make.right.mas_equalTo(0);
                make.top.mas_equalTo(top);
                make.height.mas_equalTo(1);
            }];
            
            UIImageView *icon = [UIImageView new];
            icon.image = [UIImage imageNamed:@"arrow_gray"];
            [self.contentView addSubview:icon];
            [icon mas_makeConstraints:^(MASConstraintMaker *make) {
                make.centerY.mas_equalTo(arr[i]);
                make.right.mas_equalTo(-15);
            }];
        }
    }
    
    #pragma mark -- Getter
    - (UIScrollView *)scrollView {
        if (!_scrollView) {
            _scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
            _scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
            _scrollView.backgroundColor = [UIColor clearColor];
        }
        return _scrollView;
    }
    - (UIView *)contentView {
        if (!_contentView) {
            _contentView = [UIView new];
            _contentView.backgroundColor = [UIColor whiteColor];
        }
        return _contentView;
    }
    - (UILabel *)nameTLbl {
        if (!_nameTLbl) {
            _nameTLbl = [UILabel new];
            _nameTLbl.textColor = [UIColor colorWithHexString:@"#999999"];
            _nameTLbl.font = FONT_REGULAR(15);
        }
        return _nameTLbl;
    }
    - (UILabel *)wayTLbl {
        if (!_wayTLbl) {
            _wayTLbl = [UILabel new];
            _wayTLbl.textColor = [UIColor colorWithHexString:@"#999999"];
            _wayTLbl.font = FONT_REGULAR(15);
        }
        return _wayTLbl;
    }
    - (UILabel *)timeTLbl {
        if (!_timeTLbl) {
            _timeTLbl = [UILabel new];
            _timeTLbl.textColor = [UIColor colorWithHexString:@"#999999"];
            _timeTLbl.font = FONT_REGULAR(15);
        }
        return _timeTLbl;
    }
    - (UILabel *)nameLbl {
        if (!_nameLbl) {
            _nameLbl = [UILabel new];
            _nameLbl.textColor = [UIColor colorWithHexString:@"#666666"];
            _nameLbl.font = FONT_REGULAR(15);
        }
        return _nameLbl;
    }
    - (UILabel *)timeLbl {
        if (!_timeLbl) {
            _timeLbl = [UILabel new];
            _timeLbl.textColor = [UIColor colorWithHexString:@"#666666"];
            _timeLbl.font = FONT_REGULAR(15);
        }
        return _timeLbl;
    }
    - (UILabel *)wayLbl {
        if (!_wayLbl) {
            _wayLbl = [UILabel new];
            _wayLbl.textColor = [UIColor colorWithHexString:@"#666666"];
            _wayLbl.font = FONT_REGULAR(15);
        }
        return _wayLbl;
    }
    - (UILabel *)descLbl {
        if (!_descLbl) {
            _descLbl = [UILabel new];
            _descLbl.textColor = [UIColor colorWithHexString:@"#666666"];
            _descLbl.font = FONT_REGULAR(15);
            _descLbl.numberOfLines = 0;
        }
        return _descLbl;
    }
    
    @end
    
    3.代码讲解

    (1)上述代码可以看到,全部过程并不需要设置UIScrollView的contentSize。
    (2)把UIScrollView的大小设置为和self.view一样大:

    [_scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.mas_equalTo(UIEdgeInsetsZero);
        }];
    

    (3)UIScrollView只有一个子视图contentView(UIView),其他的视图都被添加到这个contentView上。contentView的大小是:

     [_contentView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.mas_equalTo(self.scrollView);
            make.width.mas_equalTo(self.scrollView);
            make.height.mas_greaterThanOrEqualTo(kAutoWidth(264));
        }];
    

    注意:
    make.edges.mas_equalTo(self.scrollView);
    make.width.mas_equalTo(self.scrollView);
    这两句是重点,width和scrollView相同,则告诉了scrollView如何只能竖直方向滚动。
    make.height.mas_greaterThanOrEqualTo(kAutoWidth(264));这一句,是因为我这个界面希望contentView这个白色的底部局能有个最小高度,这里根据自己界面需求来。
    (4)contentView的子视图,最下面一个view要有一个bottom约束,声明和contentView的底部关系,这样才能依靠所有子视图内容,来把contentView的高度撑开。

      [_descLbl mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.mas_equalTo(self.nameTLbl);
            make.top.mas_equalTo(self.wayTLbl.mas_bottom).mas_offset(15);
            make.right.mas_equalTo(-15);
            make.bottom.mas_lessThanOrEqualTo(-15);/////////把contentView的高度撑开
        }];
    

    注意:
    make.bottom.mas_lessThanOrEqualTo(-15);
    这里是因为承接上面:make.height.mas_greaterThanOrEqualTo(kAutoWidth(264));
    因为我要给contentView一个最小高度,所以bottom要为mas_lessThanOrEqualTo,如果设置为mas_equalTo的话,UIlabel默认文本居中,显示效果就不太好了。
    如果你的界面没这个需求,设置为make.bottom.mas_equalTo(-15);即可。

    这样,UIScrollView就能基于Masonry约束布局根据内容来自适配了。

    相关文章

      网友评论

        本文标题:UIScrollView如何使用Masonry做自动适配

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