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-22 11:05:59

IOS Masonry自动布局的相关文章

iOS 之自动布局

     项目要做iPhone版和iPad的适配,就找了一些资料 关于iOS的自动布局,学习的一些收获以及心得给大家分享一下.       xib的布局就不说了,就是线的连接,主要分享一下纯代码的一些自动布局的学习心得.       Autolayout的强大是毋庸质疑的,当你熟悉了它之后,你肯定会觉得它很方便的实现布局,布局将会比使用frame的绝对坐标时还方便.      UIView *superview = self; UIView *view1 = [[UIView alloc] in

iOS的自动布局

iOS的自动布局 一.StoryBoard和Xib的简介 在这之前先简略介绍一下Xib/nib和StoryBoard. Xib/nib其实可以认为是一样的,nib是iOS3.0前的产物,它的本质是一个装着可执行二进制文件的文件夹.Xib的本质则是一个xml类型的描述文件,可以实现可视化的编程.两者在在UIViewController的生命周期方法loadView方法前都会转换成可执行的nib文件. StoryBoard是多个Xib的集合的描述,也是xml格式的. Storyboard和Xib的区

iOS之自动布局

iOS的自动布局技术一直都是前端开发所必不可少的,它能使我们开发出来的项目更加规范美观,同时也更加灵活 ,接下来笔者就介绍一下自动布局常用的几种方式,供大家参考~~ 方法一:storyboard 从一开始做iOS开发,只考虑适配4s,直接把坐标,长宽都写成固定值. 之后考虑适配5s,在界面上设定好一 bbs.chinaacc.com/forum-2-26/topic-5619705.html bbs.chinaacc.com/forum-2-26/topic-5619701.html bbs.c

ios - masonry第三方库使用自动布局(参考:http://www.cocoachina.com/ios/20141219/10702.html)

#import "ViewController.h" #import "Masonry.h" #define kWeakSelf(weakSelf) __weak typeof(self)weakSelf = self #define WS(weakSelf) __weak __typeof(&*self)weakSelf = self; @interface ViewController () { UIView *topView; } @end @impl

Masonry自动布局使用

Masonry是一个轻量级的布局框架,采用更好的语法封装自动布局,它有自己的布局DSL.简洁明了并具有高可读性 而且同时支持 iOS 和 Max OS X. 下载 NSLayoutConstraints的缺点 NSLayoutConstraints是一个强大且灵活的自动布局架构,可是通过代码创建的约束是十分冗余,下面我们通过一段代码来实现你想要一个视图铺满它的父视图.但是边距为10 UIView *superview = self; UIView *view1 = [[UIView alloc]

iOS:Masonry介绍与使用

Masonry介绍与使用实践:快速上手Autolayout frame----->autoresing------->autoLayout-------->sizeClasses 以上是纯手写代码所经历的关于页面布局的三个时期 在iphone1-iphone3gs时代 window的size固定为(320,480) 我们只需要简单计算一下相对位置就好了 在iphone4-iphone4s时代 苹果推出了retina屏 但是给了码农们非常大的福利:window的size不变 在iphone

Masonry自动布局与UIScrolView适配

Masonry介绍 Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性 而且同时支持 iOS 和 Max OS X.可以通过cocoapods将其导入. Masonry使用 Masonry属性及其说明 //左侧 //@property (nonatomic, strong, readonly) MASViewAttribute *mas_left; //上侧 //@property (nonatomic, strong, read

IOS Masonry的基本使用

Masonry是一个轻量级的布局框架,拥有自己的描述语法,采用更优雅的链式语法封装自动布局,简洁明了并具有高可读性,而且同时支持 iOS 和 Max OS X.Masonry是一个用代码写iOS或OS界面的库,可以代替Auto layout.Masonry的github地址:https://github.com/SnapKit/Masonry 本章内容 - Masonry配置 - Masonry使用 - Masonry实例 Masonry配置 - 推荐使用pods方式引入类库,pod 'Maso

iOS masonry九宫格 单行 多行布局

Masonry是个好东西,在当前尺寸各异的iOS开发适配中发挥着至关重要的作用,由于项目中Masonry布局用的比较多,对于UI布局也有了一些自己的理解,经常会有人问道Masonry布局九宫格要怎么布局呢,单行.多行要怎么做到自动布局呢,之前用frame布局九宫格需要2层for循环,各种判断才可以完成一套九宫格布局,那使用Masonry是不是也这么麻烦呢,答案是否定的!下面把Masonry布局单行,多行的代码贴出来,注释的很详细,有需要的同学可以参考参考,可能对于Masonry的使用会有不一样的