Masonry简单用法（三）

前面两篇文章简单介绍了一下Masonry的属性及方法，那么我们这一篇做一个小Demo加深一下练习。
我们就仿照做一个网易新闻客户端 “我的” 界面。
网易效果：

IMG_4673.jpg

表头布局代码：

    //设置按钮
    [_setButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(weakSelf.mas_right).offset(-15);
        make.top.equalTo(weakSelf.mas_top).offset(25);
        make.size.mas_equalTo(CGSizeMake(30, 20));
        
    }];
     //头像图标
    [_headButton mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.top.equalTo(weakSelf.mas_top).offset(40);
        make.centerX.equalTo(weakSelf.mas_centerX);
        make.size.mas_equalTo(CGSizeMake(60, 60));
        
    }];
   
     //用户名称
    [_nameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(_headButton.mas_bottom).offset(8);
        make.centerX.equalTo(weakSelf.mas_centerX);
        make.size.mas_equalTo(CGSizeMake(300, 16));
    }];
    
    //活动标题
    [_activityLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(_nameLabel.mas_bottom).offset(5);
        make.centerX.equalTo(weakSelf.mas_centerX);
        make.size.mas_equalTo(CGSizeMake(300, 16));
        
    }];

cell布局代码：

- (void)layoutSubviews{
    [super layoutSubviews];
    
    __weak typeof(self) weakSelf = self;
    //图标
    [self.imgView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.centerY.equalTo(weakSelf.mas_centerY);
        make.left.equalTo(weakSelf).with.offset(5);
        make.size.mas_equalTo(CGSizeMake(15, 15));
        
    }];
    //正标题
    [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(weakSelf.mas_centerY);
        make.left.equalTo(weakSelf.imgView.mas_right).offset(10);
        make.size.mas_equalTo(CGSizeMake(100, 20));
        
        
    }];
    //副标题
    [self.subLalbel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(weakSelf.mas_centerY);
        make.right.equalTo(weakSelf.iconImageView).offset(-5);
        make.size.mas_equalTo(CGSizeMake(180, 20));
        
    }];
    //向右图标
    [self.iconImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo (weakSelf.mas_centerY);
        make.right.equalTo(weakSelf.mas_right).offset(-5);
        make.size.mas_equalTo(CGSizeMake(10, 10));
        
    }];
    //底部横线
    [self.lineView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(weakSelf).offset(0);
        make.right.equalTo(weakSelf).offset(0);
        make.bottom.equalTo(weakSelf.mas_bottom).offset(0);
        make.height.equalTo(@1);
    }];
}

最终效果：

IMG_4677.jpg

童鞋们可以多练习练习，需要看demo的可以联系我，我会把文章中的每一个demo保存起来。

全部栏目

Masonry简单用法（三）