How to use masonry to design a composite cell[turn]

Objective

In fact, as early as @sunnyxx students released uiview-fdcollapsibleconstraints when I said to write how to use the code to a little trouble to achieve the problem of multiplexing but has been a variety of no time (mainly my approach is too complex--) Just see @ ye isolated city classmate also said his solution so let me say how I solve this problem

Analysis

Let's take a brief look at isolated city's example to see if the view is this (to make it easy to set all the gaps to 20)

The normal layout is like this.

The layout code is as follows:

InterfaceComplexcell () @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= [UIViewNew];        [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 (@ -); Make.height.equalTo (@ -). Prioritylow (); SELF.CB= Make.height.equalTo (@0). Priority (uilayoutpriorityrequired);        }]; Self.vB.backgroundColor=[Uicolor Bluecolor]; Self.vy= [UIViewNew];        [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 (@ -). Prioritylow (); Self.cy= Make.height.equalTo (@0). Priority (uilayoutpriorityrequired);        }]; Self.vY.backgroundColor=[Uicolor Yellowcolor]; SELF.VR= [UIViewNew];        [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 (@ -). Prioritylow (); SELF.CR= Make.height.equalTo (@0). Priority (uilayoutpriorityrequired);        }]; Self.vR.backgroundColor=[Uicolor Redcolor]; SELF.VG= [UIViewNew];        [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 (@ -). Prioritylow (); SELF.CG= Make.height.equalTo (@0). Priority (uilayoutpriorityrequired);        }]; Self.vG.backgroundColor=[Uicolor Greencolor]; }         returnSelf

Actual effect

It looks good.

Active and deactive operations for single Maslayoutconstraint in masonry means that a preset constraint can be dynamically enabled or disabled So we just have to pre-set a high-priority height of 0 (or a width of 0) and then activate it at the right time, right? Try hiding the red view first after hiding the following

Ah ~ Oh ~ The result is not hidden is hidden but the gap is not hidden causes the seam to become larger this is because we only hide the view and not hide the interval between the view so how should we handle this situation?

The mainstream approach is to set all the constraint values of this view to 0 and then restore this method to revert to the original value, but in the preface I said it would be a little cumbersome to solve the problem, so I certainly didn't do it.

The approach I'm using is group law specific as

Actually, there's a groupview in the first line.

But because the graph shows not very good (not drawing t_t) so I hide the specific can see the code details

Each (or each group) can hide the view to have a group view (group is actually contains the view and spacing) need to hide the group can be hidden when you hide the view and shorten the gap between the purpose

Code longer people can choose to skip--!

@interfaceComplexcell () @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@implementationComplexcell-(Instancetype) Initwithstyle: (Uitableviewcellstyle) style Reuseidentifier: (NSString *) Reuseidentifier { self=[Super Initwithstyle:style Reuseidentifier:reuseidentifier]; if(self) {cgfloat spacing=20.0f; SELF.GF= [UIViewNew];        [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= [UIViewNew];        [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= [UIViewNew];        [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= [UIViewNew];        [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= [UIViewNew];        [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= [UIViewNew];        [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 (@ -); Make.width.equalTo (@ -);        }]; Self.vB.backgroundColor=[Uicolor Bluecolor]; Self.vy= [UIViewNew];        [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 (@ -);        }]; Self.vY.backgroundColor=[Uicolor Yellowcolor]; SELF.VR= [UIViewNew];        [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 (@ -);        }]; Self.vR.backgroundColor=[Uicolor Redcolor]; SELF.VG= [UIViewNew];        [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 (@ -);        }]; Self.vG.backgroundColor=[Uicolor Greencolor]; }         returnSelf ;}

Then define an enumeration for each of the different layouts (for example, my casually defined 0 and 1 represent whether the view is displayed)

typedef ns_enum (Nsuinteger, ComplexType) {ComplexType1111, ComplexType1110, ComplexType0111, COMPLEXTYPE0 011, ComplexType0010, ComplexType1101};@interfaceComplexcell: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) { CaseComplexType1111: { Break; }         CaseComplexType0111: {[SELF.CB activate];  Break; }         CaseComplexType0011: {[self.cf activate];  Break; }         CaseComplexType1110: {[SELF.CG activate];  Break; }         CaseComplexType1101: {[self.cr activate];  Break; }         CaseComplexType0010: {[self.cf activate];            [SELF.CG activate];  Break; }                     default:             Break; }}

So in TableView's DataSource, we just have to do this.

-(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; returncell;}

Look at the effect is not very good

Summary

The demo in this article can be found here to be aware of the constraints of the priority setting in addition this way also supports the AutoLayout of indefinite content

Maybe a lot of people saw that I was in the blind toss a very simple implementation of the things I made a long and smelly, but like me this method although a bit of trouble (the beginning of the article pointed out) but the face of a slightly more complex point of the demand is more handy (actually a bit similar to the div+css feeling has wood?)

It's much easier to use group to face both horizontal and vertical hidden requirements.

For example, the first line of text cited sometimes hides the blue button, and sometimes the whole line doesn't show up. When I want to hide a button, just activate the constraint of the button to hide the whole row, just activate the whole line of the constraint.

from:http://adad184.com/2015/06/08/complex-cell-with-masonry/

How to use masonry to design a composite cell[turn]