如何使用Masonry设计复合型cell

sodawaterer

于 2017-05-19 11:00:14 发布

阅读量309

点赞数

分类专栏： ios开发文章标签： autolayout masnory ios开发

ios开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

原文地址：如何使用Masonry设计复合型cell

前言

其实早在@sunnyxx同学发布UIView-FDCollapsibleConstraints的时候我就说要写一下怎么用代码来稍微麻烦的实现复用的问题但是一直各种没时间(主要是我的办法太复杂 - -) 正好看到@叶孤城同学也说了一下他的解决办法所以我来说一下我是如何解决这个问题的

分析

我们以叶孤城同学的例子来简单分析一下假设view是这样的(为了方便将所有的间隙设定为20)
正常的布局是这样的

布局代码如下:


@interface ComplexCell()

@property (nonatomic, strong) UIView *vB; //view blue    height:30
@property (nonatomic, strong) UIView *vY; //view yellow  height:30
@property (nonatomic, strong) UIView *vR; //view red     height:30
@property (nonatomic, strong) UIView *vG; //view green   height:100

@end

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    
    
    
    if ( self ) {
        
        CGFloat spacing = 20.0f;
        
        self.vB = [UIView new];
        [self.contentView addSubview:self.vB];
        [self.vB mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.top.equalTo(self.contentView).insets(UIEdgeInsetsMake(spacing,spacing,0,0));
            make.width.equalTo(@60);
            make.height.equalTo(@30).priorityLow();
            self.cB = make.height.equalTo(@0).priority(UILayoutPriorityRequired);
        }];
        self.vB.backgroundColor = [UIColor blueColor];
        
        
        self.vY = [UIView new];
        [self.contentView addSubview:self.vY];
        [self.vY mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(self.vB.mas_right).offset(spacing);
            make.right.top.equalTo(self.contentView).insets(UIEdgeInsetsMake(spacing,0,0,spacing));
            make.height.equalTo(@30).priorityLow();
            self.cY = make.height.equalTo(@0).priority(UILayoutPriorityRequired);
        }];
        self.vY.backgroundColor = [UIColor yellowColor];
        
        self.vR = [UIView new];
        [self.contentView addSubview:self.vR];
        [self.vR mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(self.vB.mas_bottom).offset(spacing);
            make.left.right.equalTo(self.contentView).insets(UIEdgeInsetsMake(0,spacing,0,spacing));
            make.height.equalTo(@30).priorityLow();
            self.cR = make.height.equalTo(@0).priority(UILayoutPriorityRequired);
        }];
        self.vR.backgroundColor = [UIColor redColor];
        
        self.vG = [UIView new];
        [self.contentView addSubview:self.vG];
        [self.vG mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(self.vR.mas_bottom).offset(spacing);
            make.left.right.equalTo(self.contentView).insets(UIEdgeInsetsMake(0,spacing,0,spacing));
            make.height.equalTo(@100).priorityLow();
            self.cG = make.height.equalTo(@0).priority(UILayoutPriorityRequired);
        }];
        self.vG.backgroundColor = [UIColor greenColor];
        
    }
    
    return self;
}

实际效果如图

看上去还不错

在Masonry中针对单条的MASLayoutConstraint可以进行active和deactive操作那么意味着可以动态的启用或者禁用某条预置的约束所以我们只要预先设置一条高优先级的高度为0(或者宽度为0)的约束然后在适当的时候激活它不就行了? 先尝试隐藏红色的view 隐藏后如下

啊~哦~ 结果不正确隐藏是隐藏了但是间隙没有隐藏导致缝变大了这是因为我们仅仅隐藏了view 而没有隐藏view之间的间隔那么应该如何处理这种情况呢?
主流的做法是将这个view的所有约束值全设置成0 然后恢复的时候再还原这种方法需要记录原值但是在前言我说了要用稍微麻烦的方法来解决这个问题所以肯定不是这样做啦

我采用的方法是group法具体如下图

其实在第一行还有一个groupview如图

但是因为图显示出来不太好看(不会画图 T_T ) 所以我隐藏了具体可以看代码细节

每个(或者每组)可以隐藏的view 都对应有一个group view(group其实就是包含了view和spacing) 需要隐藏的时候直接隐藏这个group 就可以达到既隐藏view又缩短间隙的目的

代码较长大家可以选择跳过 - -!


@interface ComplexCell()

@property (nonatomic, strong) MASConstraint *cF; //constraint first row
@property (nonatomic, strong) MASConstraint *cB; //constraint blue
@property (nonatomic, strong) MASConstraint *cY; //constraint yellow
@property (nonatomic, strong) MASConstraint *cR; //constraint red
@property (nonatomic, strong) MASConstraint *cG; //constraint green

@property (nonatomic, strong) UIView *gF; //group first row
@property (nonatomic, strong) UIView *gB; //group blue
@property (nonatomic, strong) UIView *gY; //group yellow
@property (nonatomic, strong) UIView *gR; //group red
@property (nonatomic, strong) UIView *gG; //group green

@property (nonatomic, strong) UIView *vB; //view blue    height:30
@property (nonatomic, strong) UIView *vY; //view yellow  height:30
@property (nonatomic, strong) UIView *vR; //view red     height:30
@property (nonatomic, strong) UIView *vG; //view green   height:100

@end

@implementation ComplexCell

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    

    
    if ( self ) {
        
        CGFloat spacing = 20.0f;
        
        
        self.gF = [UIView new];
        [self.contentView addSubview:self.gF];
        [self.gF mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.top.right.equalTo(self.contentView);
            
            self.cF = make.height.equalTo(@0).priority(UILayoutPriorityRequired);
            [self.cF deactivate];
        }];
        self.gF.clipsToBounds = YES;
        
        self.gB = [UIView new];
        [self.gF addSubview:self.gB];
        [self.gB mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.top.bottom.equalTo(self.gF);
            
            self.cB = make.width.equalTo(@0).priority(UILayoutPriorityRequired);
            [self.cB deactivate];
        }];
        self.gB.clipsToBounds = YES;
        
        self.gY = [UIView new];
        [self.gF addSubview:self.gY];
        [self.gY mas_makeConstraints:^(MASConstraintMaker *make) {
            make.right.top.bottom.equalTo(self.gF);
            make.left.equalTo(self.gB.mas_right);
            
            self.cY = make.width.equalTo(@0).priority(UILayoutPriorityRequired);
            [self.cY deactivate];
        }];
        self.gY.clipsToBounds = YES;
        
        self.gR = [UIView new];
        [self.contentView addSubview:self.gR];
        [self.gR mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.right.equalTo(self.contentView);
            make.top.equalTo(self.gF.mas_bottom);
            
            self.cR = make.height.equalTo(@0).priority(UILayoutPriorityRequired);
            [self.cR deactivate];
        }];
        self.gR.clipsToBounds = YES;
        
        self.gG = [UIView new];
        [self.contentView addSubview:self.gG];
        [self.gG mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.right.equalTo(self.contentView);
            make.top.equalTo(self.gR.mas_bottom);
            
            self.cG = make.height.equalTo(@0).priority(UILayoutPriorityRequired);
            [self.cG deactivate];
        }];
        self.gG.clipsToBounds = YES;
        
        
        self.vB = [UIView new];
        [self.gB addSubview:self.vB];
        [self.vB mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.equalTo(self.gB).insets(UIEdgeInsetsMake(spacing, spacing, 0, 0)).priorityLow();
            make.height.equalTo(@30);
            make.width.equalTo(@60);
        }];
        self.vB.backgroundColor = [UIColor blueColor];
        
        
        self.vY = [UIView new];
        [self.gY addSubview:self.vY];
        [self.vY mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.equalTo(self.gY).insets(UIEdgeInsetsMake(spacing, spacing, 0, spacing)).priorityLow();
            make.height.equalTo(@30);
        }];
        self.vY.backgroundColor = [UIColor yellowColor];
        
        self.vR = [UIView new];
        [self.gR addSubview:self.vR];
        [self.vR mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.equalTo(self.gR).insets(UIEdgeInsetsMake(spacing, spacing, 0, spacing)).priorityLow();
            make.height.equalTo(@30);
        }];
        self.vR.backgroundColor = [UIColor redColor];
        
        self.vG = [UIView new];
        [self.gG addSubview:self.vG];
        [self.vG mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.equalTo(self.gG).insets(UIEdgeInsetsMake(spacing, spacing, 0, spacing)).priorityLow();
            make.height.equalTo(@100);
        }];
        self.vG.backgroundColor = [UIColor greenColor];
        
    }
    
    return self;
}

然后为每种不同的布局定义一个枚举(为了举例我随便定义的 0和1代表这个view是否被显示)

typedef NS_ENUM(NSUInteger, ComplexType) {
    ComplexType1111,
    ComplexType1110,
    ComplexType0111,
    ComplexType0011,
    ComplexType0010,
    ComplexType1101
};

@interface ComplexCell : UITableViewCell

@property (nonatomic, assign) ComplexType type;

@end


- (void)setType:(ComplexType)type {
    
    [self.cF deactivate];
    [self.cB deactivate];
    [self.cY deactivate];
    [self.cR deactivate];
    [self.cG deactivate];
    
    switch (type) {
        case ComplexType1111:
        {
            break;
        }
        case ComplexType0111:
        {
            [self.cB activate];
            break;
        }
        case ComplexType0011:
        {
            [self.cF activate];
            break;
        }
        case ComplexType1110:
        {
            [self.cG activate];
            break;
        }
        case ComplexType1101:
        {
            [self.cR activate];
            break;
        }
        case ComplexType0010:
        {
            [self.cF activate];
            [self.cG activate];
            break;
        }
            
        default:
            break;
    }
}

这样在tableview的datasource中我们只要这样做就可以了

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 6;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return [ComplexCell getHeightByType:indexPath.row%6];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    ComplexCell* cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
    cell.type = indexPath.row%6;
    
    return cell;
}

看看效果是不是很不错

小结

文中的demo可以在这里找到要注意的地方是约束的priority的设置另外这种方式也支持不定长内容的Autolayout

可能很多人看了觉得我在瞎折腾明明一个挺简单实现的东西被我一弄弄得又长又臭其实不然像我这种方法虽然麻烦了点(文章开头就指出了) 但是面对稍微复杂点的需求却是更得心应手(其实有点类似DIV+CSS的感觉有木有?)

使用group的方式面对同时在横向和纵向都有隐藏要求的时候会方便很多
比如文中举的例子第一行有时会隐藏蓝色的按钮有时整个一行都会不显示这样的话当我想隐藏按钮时只要激活按钮的约束想隐藏整行时只要激活整行的那条约束就行了

sodawaterer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用Masonry设计复合型cell

原文地址：如何使用Masonry设计复合型cell前言其实早在@sunnyxx同学发布UIView-FDCollapsibleConstraints的时候我就说要写一下怎么用代码来稍微麻烦的实现复用的问题但是一直各种没时间(主要是我的办法太复杂 - -) 正好看到@叶孤城同学也说了一下他的解决办法所以我来说一下我是如何解决这个问题的分析我们以叶孤城同学的例子来简单分析
复制链接

扫一扫