IOS Masonry自动布局

之前项目用Frame布局,这个项目登录用了VFL,后来觉得用Masonry,前天布局TableViewCell时用了下 ,觉得还不错。

#import "Masonry.h"
#import "MASViewAttribute.h"

先看效果图:

#import "ReportsCell.h"
//#import "Masonry.h"
#import "YZPUIFormatMacros.h"
#import "Global.h"

static const CGFloat kIconWidth                 = 55.0f;
static const CGFloat kIconHeight                = 55.0f;

@implementation ReportsCell
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
         self.backgroundColor = [UIColor whiteColor];

        UIView *headerView = [[UIView alloc]init];
        headerView.backgroundColor = YZPColorDividingLineOutdide;
        [self addSubview:headerView];
        [headerView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(@0);
            make.top.equalTo(@0);
            make.width.equalTo(@(MainWidth));
            make.height.equalTo(@(YZPSpaceHSmall));
        }];
        UIView *topLine=[self lineView];
        [headerView addSubview:topLine];
        [topLine mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(headerView.top);
            make.left.equalTo(headerView.left);
            make.width.equalTo(headerView.width);
            make.height.equalTo(@0.5);

        }];

        UIView *bottomLine=[self lineView];
        [headerView addSubview:bottomLine];
        [bottomLine mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(headerView.bottom).with.offset(-0.5);
            make.left.equalTo(headerView.left);
            make.width.equalTo(headerView.width);
            make.height.equalTo(@0.5);

        }];

        _orderIdLabel=[[UILabel alloc]init];
        _orderIdLabel.font = YZPFontSubhead;
        _orderIdLabel.textColor = YZPColorTextSubhead;
        [self addSubview:_orderIdLabel];
        [_orderIdLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(headerView.bottom).with.offset(15);
            make.left.equalTo(@10);
            make.width.equalTo(headerView.width);
            make.height.equalTo(@20);
        }];

        _orderIconView=[[UIImageView alloc]init];
         [self addSubview:_orderIconView];
        [_orderIconView makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(@15);
            make.top.equalTo(_orderIdLabel.bottom).with.offset(15);
            make.width.equalTo(@(kIconWidth));
            make.height.equalTo(@(kIconHeight));
        }];

        _orderTitleLabel=[[UILabel alloc]init];
        _orderTitleLabel.font=YZPFontSubhead;
        _orderTitleLabel.textColor=[UIColor colorWithRed:0.141f green:0.141f blue:0.141f alpha:1.00f];
        _orderTitleLabel.numberOfLines=2;
        [self addSubview:_orderTitleLabel];
        [_orderTitleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(_orderIconView.right).with.offset(15);
            make.top.equalTo(_orderIconView.top).with.offset(2);
            make.width.equalTo(@(MainWidth-170));
            make.height.lessThanOrEqualTo(@(35));
        }];

        _orderSpecLabel=[[UILabel alloc]init];
        _orderSpecLabel.font=YZPFontExplain;
        _orderSpecLabel.textColor=[UIColor colorWithRed:0.400f green:0.400f blue:0.400f alpha:1.00f];
        [self addSubview:_orderSpecLabel];
        [_orderSpecLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(_orderTitleLabel.left);
            make.top.equalTo(_orderTitleLabel.bottom).offset(10);
            make.width.equalTo(@(MainWidth-135));
            make.height.lessThanOrEqualTo(@(20));
        }];

        _productsCountLabel=[[UILabel alloc]init];
        _productsCountLabel.font=YZPFontContent;
        _productsCountLabel.textAlignment=NSTextAlignmentRight;
        _productsCountLabel.textColor=[UIColor colorWithRed:0.400f green:0.400f blue:0.400f alpha:1.00f];
        [self addSubview:_productsCountLabel];
        [_productsCountLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(_orderTitleLabel.top);
            make.left.equalTo(_orderTitleLabel.right).offset(5);
            make.right.equalTo(self.right).with.offset(-15);
            make.height.equalTo(_orderTitleLabel.height);
        }];

        UIView *centerLine=[self lineView];
        [self addSubview:centerLine];
        [centerLine mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(_orderIconView.bottom).offset(15);
            make.left.equalTo(self);
            make.width.equalTo(self);
            make.height.equalTo(@0.5);
        }];

        _userNameLabel=[[UILabel alloc]init];
        _userNameLabel.font=YZPFontExplain;
        _userNameLabel.textColor=YZPColorTextExplain;
//        _userNameLabel.numberOfLines=2;
        _userNameLabel.textAlignment=NSTextAlignmentLeft;
        [self addSubview:_userNameLabel];
        [_userNameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(self.left).with.offset(15);
            make.top.equalTo(centerLine.bottom).offset(10);
            make.width.lessThanOrEqualTo(@150);
            make.height.lessThanOrEqualTo(@35);
        }];

        _userPhoneLabel=[[UILabel alloc]init];
        _userPhoneLabel.font=YZPFontExplain;
        _userPhoneLabel.textColor=YZPColorTextExplain;
        _userPhoneLabel.textAlignment=NSTextAlignmentRight;
        [self addSubview:_userPhoneLabel];
        [_userPhoneLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(_userNameLabel.top);
            make.right.equalTo(self.right).with.offset(-15);
            make.height.lessThanOrEqualTo(@35);
            make.width.lessThanOrEqualTo(@150);

        }];

        _userAddressLabel=[[UILabel alloc]init];
        _userAddressLabel.font=YZPFontExplain;
        _userAddressLabel.textColor=YZPColorTextExplain;
        [self addSubview:_userAddressLabel];
        [_userAddressLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(_userNameLabel.bottom).with.offset(10);
            make.left.equalTo(self.left).with.offset(15);
//            make.bottom.equalTo(self.bottom).with.offset(-10);
            make.width.equalTo(self.width);
            make.height.lessThanOrEqualTo(@35);
        }];

    }
    return self;
}
-(UIView *)lineView
{
    UIView *line=[[UIView alloc]init];
//    line.backgroundColor=[UIColor redColor];
    line.backgroundColor=[UIColor colorWithRed:0.800f green:0.800f blue:0.800f alpha:1.00f];
    return line;
}

- (void)awakeFromNib {
    // Initialization code
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}

@end
时间: 2024-10-26 20:59:04

IOS Masonry自动布局的相关文章

iOS 6.0 Masonry自动布局表头/表尾时崩溃解决方案

iOS 6.0 Masonry自动布局表头/表尾时崩溃解决方案 使用Masonry要兼容iOS6.0,正常情况下都是可以的.但是对于UITableView的tableHeaderView或者tableFooterView不能直接添加约束,否则在iOS6.0上必闪退. 提示:若您的App不需要支持到iOS6.0,那么您没必要继续阅读这篇文章 支持原创,请阅读原文 解决方案 - (void)configTableView { if (self.tableView != nil) { return;

Masonry自动布局详解二:动画更新约束

Masonry自动布局详解二:动画更新约束 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万大量代码的冗余,对维护和开发的效率都很低. 笔者在这里介绍纯代码自动布局的第三方库:Masonry.这个库使用率相当高,在全世界都有大量的开发者在使用,其star数量也是相当高的. 支持原创,请阅读原文 效果图 本节详解Masonry的以动画的形式更新约束的基本

Masonry自动布局详解一:基本用法

Masonry自动布局详解一:基本用法 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万大量代码的冗余,对维护和开发的效率都很低. 笔者在这里介绍纯代码自动布局的第三方库:Masonry.这个库使用率相当高,在全世界都有大量的开发者在使用,其star数量也是相当高的. 支持原创,请阅读原文 效果图 本节详解Masonry的基本用法,先看看效果图: 我们

Masonry自动布局详解六:tableviewCell布局

Masonry自动布局详解六:tableviewCell布局 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万大量代码的冗余,对维护和开发的效率都很低. 笔者在这里介绍纯代码自动布局的第三方库:Masonry.这个库使用率相当高,在全世界都有大量的开发者在使用,其star数量也是相当高的. 支持原创,请阅读原文 效果图 本节详解Masonry的以动画的

Masonry自动布局详解七:ScrollView循环布局

Masonry自动布局详解七:ScrollView循环布局 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万大量代码的冗余,对维护和开发的效率都很低. 笔者在这里介绍纯代码自动布局的第三方库:Masonry.这个库使用率相当高,在全世界都有大量的开发者在使用,其star数量也是相当高的. 支持原创,请阅读原文 效果图 本节详解Masonry的循环创建视

Masonry自动布局详解九:scrollview实战场景

Masonry自动布局详解九:scrollview实战场景 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万大量代码的冗余,对维护和开发的效率都很低. 笔者在这里介绍纯代码自动布局的第三方库:Masonry.这个库使用率相当高,在全世界都有大量的开发者在使用,其star数量也是相当高的. 支持原创,请阅读原文 提示 在ios 6.0上不能给tablev

Masonry自动布局详解三:remake约束

Masonry自动布局详解三:remake约束 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万大量代码的冗余,对维护和开发的效率都很低. 笔者在这里介绍纯代码自动布局的第三方库:Masonry.这个库使用率相当高,在全世界都有大量的开发者在使用,其star数量也是相当高的. 支持原创,请阅读原文 效果图 本节详解Masonry的以动画的形式更新约束的

Masonry自动布局详解四:整体动画更新约束

Masonry自动布局详解四:整体动画更新约束 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万大量代码的冗余,对维护和开发的效率都很低. 笔者在这里介绍纯代码自动布局的第三方库:Masonry.这个库使用率相当高,在全世界都有大量的开发者在使用,其star数量也是相当高的. 效果图 本节详解Masonry的以动画的形式更新约束的基本用法,先看看效果图

Masonry自动布局详解五:比例(multipliedBy)

Masonry自动布局详解五:比例(multipliedBy) 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万大量代码的冗余,对维护和开发的效率都很低. 笔者在这里介绍纯代码自动布局的第三方库:Masonry.这个库使用率相当高,在全世界都有大量的开发者在使用,其star数量也是相当高的. 支持原创,请阅读原文 效果图 本节详解Masonry的以动画