如何使用masonry设计复合型cell
招聘信息：
前言其实早同学发布的时候 我就说要写一下怎么用代码来稍微麻烦的实现复用的问题 但是一直各种没时间(主要是我的办法太复杂 - -) 正好看到同学也说了一下 所以我来说一下我是如何解决这个问题的分析我们以叶孤城同学的例子来简单分析一下 假设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
-&(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&
}实际效果如图看上去还不错在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
@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&
}然后 为每种不同的布局定义一个枚举(为了举例我随便定义的 0和1代表这个view是否被显示)typedef&NS_ENUM(NSUInteger,&ComplexType)&{
&&&&ComplexType1111,
&&&&ComplexType1110,
&&&&ComplexType0111,
&&&&ComplexType0011,
&&&&ComplexType0010,
&&&&ComplexType1101
@interface&ComplexCell&:&UITableViewCell
@property&(nonatomic,&assign)&ComplexType&
-&(void)setType:(ComplexType)type&{
&&&&[self.cF&deactivate];
&&&&[self.cB&deactivate];
&&&&[self.cY&deactivate];
&&&&[self.cR&deactivate];
&&&&[self.cG&deactivate];
&&&&switch&(type)&{
&&&&&&&&case&ComplexType1111:
&&&&&&&&&&&&
&&&&&&&&case&ComplexType0111:
&&&&&&&&&&&&[self.cB&activate];
&&&&&&&&&&&&
&&&&&&&&case&ComplexType0011:
&&&&&&&&&&&&[self.cF&activate];
&&&&&&&&&&&&
&&&&&&&&case&ComplexType1110:
&&&&&&&&&&&&[self.cG&activate];
&&&&&&&&&&&&
&&&&&&&&case&ComplexType1101:
&&&&&&&&&&&&[self.cR&activate];
&&&&&&&&&&&&
&&&&&&&&case&ComplexType0010:
&&&&&&&&&&&&[self.cF&activate];
&&&&&&&&&&&&[self.cG&activate];
&&&&&&&&&&&&
&&&&&&&&&&&&
&&&&&&&&default:
&&&&&&&&&&&&
}这样 在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&
}看看效果 是不是很不错小结文中的demo可以 要注意的地方是约束的priority的设置 另外 这种方式也支持不定长内容的Autolayout可能很多人看了觉得我在瞎折腾 明明一个挺简单实现的东西 被我一弄 弄得又长又臭 其实不然 像我这种方法虽然麻烦了点(文章开头就指出了) 但是面对稍微复杂点的需求 却是更得心应手(其实有点类似DIV+CSS的感觉有木有?)使用group的方式 面对同时在横向和纵向都有隐藏要求的时候 会方便很多比如文中举的例子 第一行有时会隐藏蓝色的按钮 有时整个一行都会不显示 这样的话 当我想隐藏按钮时 只要激活按钮的约束 想隐藏整行时 只要激活整行的那条约束就行了
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
您还没有登录！请或
点击量16272点击量10875点击量8664点击量8017点击量7488点击量7063点击量6588点击量6497点击量5716
&2016 Chukong Technologies,Inc.
京公网安备89&&&&iOS Masonry以纯代码的方式计算cell的高度
&iOS Masonry以纯代码的方式计算cell的高度
iOS开发的autolayout布局框架Masonry,以纯代码的方式计算cell的高度，
若举报审核通过，可奖励20下载分
被举报人：
joonchen111
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
Q.为什么我点的下载下不了，但积分却被扣了
A. 由于下载人数众多，下载服务器做了并发的限制。若发现下载不了，请稍后再试，多次下载是不会重复扣分的。
Q.我的积分不多了，如何获取积分？
A. 获得积分，详细见。
完成任务获取积分。
论坛可用分兑换下载积分。
第一次绑定手机，将获得5个C币，C币可。
关注并绑定CSDNID，送10个下载分
下载资源意味着您已经同意遵守以下协议
资源的所有权益归上传用户所有
未经权益所有人同意，不得将资源中的内容挪作商业或盈利用途
CSDN下载频道仅提供交流平台，并不能对任何下载资源负责
下载资源中如有侵权或不适当内容，
本站不保证本站提供的资源的准确性，安全性和完整性，同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
移动开发下载排行
您当前C币：0&&&可兑换 0 下载积分
兑换下载分:&
消耗C币:0&
立即兑换&&
兑换成功你当前的下载分为 。前去下载资源
你下载资源过于频繁，请输入验证码
如何快速获得积分？
你已经下载过该资源，再次下载不需要扣除积分
iOS Masonry以纯代码的方式计算cell的高度
所需积分：0
剩余积分：0
扫描微信二维码精彩活动、课程更新抢先知
VIP会员，免积分下载
会员到期时间：日
剩余下载次数：1000
iOS Masonry以纯代码的方式计算cell的高度
剩余次数：&&&&有效期截止到：
你还不是VIP会员VIP会员享免积分 . 专属通道极速下载
VIP下载次数已满VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员
你的VIP会员已过期VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员主题 : 用Masonry和FDTemplateLayoutCell实现uitableviewcell自动布局
级别: 新手上路
可可豆: 65 CB
威望: 65 点
在线时间: 225(时)
发自: Web Page
来源于&&分类
用Masonry和FDTemplateLayoutCell实现uitableviewcell自动布局&&&
用Masonry和FDTemplateLayoutCell实现uitableviewcell自动布局。手写代码布局的福音。地址：
级别: 新手上路
UID: 383655
可可豆: 30 CB
威望: 18 点
在线时间: 250(时)
发自: Web Page
mak一下 mak一下 mak一下 mak一下 mak一下 mak一下
级别: 新手上路
UID: 468276
可可豆: 80 CB
威望: 80 点
在线时间: 127(时)
发自: Web Page
你好， 我下载了你的用Masonry和FDTemplateLayoutCell&&但是现在打开程序是空白 什么也没有。 我现在也是想用 M + fd 这个来写cell自适应。。。能不能要下QQ 呢？？ 确实比较着急&&我的 麻烦加下....
级别: 新手上路
可可豆: 290 CB
威望: 272 点
在线时间: 162(时)
发自: Web Page
为什么要用这么复杂的东西来布局，手写代码推荐： 界面布局库。
关注本帖(如果有新回复会站内信通知您)
论坛技术问题应该发布到？ 正确答案:CocoaChina问答
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 浏览移动版}