masonry简单的用法

作者: 贼海鸥 | 来源:发表于2017-03-22 14:30 被阅读0次

    1.这两天写新的界面,本来想用xib写的,但是,听别人说的,使用xib影响性能,所以,我就开始使用代码写布局.在这里写代码的时候,发现用autolayout太麻烦了,就查了一下,发现masonry好用,就下载了看看.
    2.使用的时候很简单,直接把masonry拖进项目中就好了.最终成果如下图:


    Simulator Screen Shot 2017年3月22日 14.30.03.png

    做法如下:

    1.前面的代码就不做介绍了,只是简单的创建tableView

    - (void)initTableView {
        UITableView *tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStyleGrouped];
        tableView.delegate = self;
        tableView.dataSource = self;
        [self.view addSubview:tableView];
    }
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
        return 1;
    }
    - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
        return 5;
    }
    - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
        return Size(290);
    }
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
        YLGroupCell *cell = [YLGroupCell cellWithTableView:tableView];
        return cell;
    }
    

    2.自定义tableviewCell

    + (instancetype)cellWithTableView:(UITableView *)tableView {
        static NSString *ID = @"group";
        YLGroupCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
        if (!cell) {
            cell = [[YLGroupCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
        }
        return cell;
    }
    
    - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
        self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
        if (self) {
            [self initialize];
        }
        return self;
    }
    

    3.自定义view,添加控件

    - (void)initialize {
        // 商品图片
        UIImageView *goodsImage = [[UIImageView alloc] init];
        goodsImage.image = [UIImage imageNamed:@"goods.png"];
        [self.contentView addSubview:goodsImage];
        self.goodsImage = goodsImage;
        
        // 商品名称
        UILabel *goodsName = [[UILabel alloc] init];
        goodsName.textColor = [UIColor colorWithHexString:@"#333333"];
        goodsName.numberOfLines = 2;
        goodsName.font = [UIFont systemFontOfSize:Size(15.f)];
        [self.contentView addSubview:goodsName];
        self.goodsName = goodsName;
        self.goodsName.text = @"百草味 芒果味夹心麻薯210g/袋 台式点心糕点零食特产 送朋友自己吃,都非常好!";
        
        // 商品价格
        UILabel *goodsPrice = [[UILabel alloc] init];
        goodsPrice.textColor = [UIColor colorWithHexString:@"#ba1712"];
        goodsPrice.font = [UIFont systemFontOfSize:(Size(20.f))];
        [self.contentView addSubview:goodsPrice];
        self.goodsPrice = goodsPrice;
        self.goodsPrice.text = @"¥9.50";
        
        // 成团人数
        UILabel *groupNum = [[UILabel alloc] init];
        groupNum.textColor = [UIColor colorWithHexString:@"#999999"];
        groupNum.font = [UIFont systemFontOfSize:Size(14.f)];
        [self.contentView addSubview:groupNum];
        self.groupNum = groupNum;
        self.groupNum.text = @"已有200人成单";
        
        // 几人成单
        UILabel *orderNum = [[UILabel alloc] init];
        orderNum.textColor = [UIColor colorWithHexString:@"#ba1712"];
        orderNum.font = [UIFont systemFontOfSize:(Size(20.f))];
        orderNum.textAlignment = NSTextAlignmentRight;
        [self.contentView addSubview:orderNum];
        self.orderNum = orderNum;
        self.orderNum.text = @"5人拼";
        
        // 立即开团按钮
        UIButton *groupBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        groupBtn.backgroundColor = [UIColor redColor];
        [groupBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        [groupBtn setTitle:@"立即开拼" forState:UIControlStateNormal];
        groupBtn.titleLabel.font = [UIFont systemFontOfSize:Size(15.f)];
        groupBtn.layer.masksToBounds = YES;
        groupBtn.layer.cornerRadius = 5;
        [self.contentView addSubview:groupBtn];
        self.groupBtn = groupBtn;
    }
    

    4.添加约束

    - (void)layoutSubviews {
        [super layoutSubviews];
        
        UIView *superview = self.contentView;
        int padding = Size(10);
        
        // 商品图片
        [self.goodsImage mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.top.right.mas_equalTo(0);
            make.height.mas_equalTo(Size(185));
        }];
        
        // 商品名称
        [self.goodsName mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(superview.mas_left).offset(padding);
            make.top.equalTo(self.goodsImage.mas_bottom).offset(padding);
            make.right.equalTo(superview.mas_right).offset(-padding);
            make.height.equalTo(@(Size(45)));
        }];
        
        // 价格
        [self.goodsPrice mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(superview.mas_left).offset(padding);
            make.centerY.equalTo(self.groupBtn.mas_centerY);
            make.right.equalTo(self.groupNum.mas_left).offset(-padding);
        }];
        
        // 已经成团的人数
        [self.groupNum mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerY.equalTo(self.groupBtn.mas_centerY);
            make.width.equalTo(@(Size(120)));
        }];
        
        // 按钮
        [self.groupBtn mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(self.goodsName.mas_bottom).offset(padding);
            make.right.equalTo(superview.mas_right).offset(-padding);
            make.width.equalTo(@90);
            make.height.equalTo(@(Size(30)));
        }];
        
        // 需要几人成团
        [self.orderNum mas_makeConstraints:^(MASConstraintMaker *make) {
            make.right.equalTo(self.groupBtn.mas_left).offset(-padding);
            make.centerY.equalTo(self.groupBtn.mas_centerY);
            make.width.equalTo(@(Size(60)));
        }];
    }
    

    在这里面用到的文件,如将16进制的颜色字符串转换为颜色UIColor+YLHexString

    + (UIColor *)colorWithHexString:(NSString *)color {
        NSString *cString = [[color stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]] uppercaseString];
        
        
        
        // String should be 6 or 8 characters
        
        if ([cString length] < 6) {
            
            return [UIColor clearColor];
            
        }
        
        
        
        // strip 0X if it appears
        
        if ([cString hasPrefix:@"0X"])
            
            cString = [cString substringFromIndex:2];
        
        if ([cString hasPrefix:@"#"])
            
            cString = [cString substringFromIndex:1];
        
        if ([cString length] != 6)
            
            return [UIColor clearColor];
        
        
        
        // Separate into r, g, b substrings
        
        NSRange range;
        
        range.location = 0;
        
        range.length = 2;
        
        //r
        
        NSString *rString = [cString substringWithRange:range];
        
        
        
        //g
        
        range.location = 2;
        
        NSString *gString = [cString substringWithRange:range];
        
        
        
        //b
        
        range.location = 4;
        
        NSString *bString = [cString substringWithRange:range];
        
        
        
        // Scan values
        
        unsigned int r, g, b;
        
        [[NSScanner scannerWithString:rString] scanHexInt:&r];
        
        [[NSScanner scannerWithString:gString] scanHexInt:&g];
        
        [[NSScanner scannerWithString:bString] scanHexInt:&b];
        
        return [UIColor colorWithRed:((float) r / 255.0f) green:((float) g / 255.0f) blue:((float) b / 255.0f) alpha:1.0f];
    }
    

    还有一个宏定义

    #define Size(Float) [UIScreen mainScreen].bounds.size.width/375*Float
    

    最后提醒一句:如果你写的约束条件不对,程序就会崩溃.

    相关文章

      网友评论

        本文标题:masonry简单的用法

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