我们知道,界面布局可以用Storyboard或Xib结合Autolayout实现,如果用纯代码布局,比较热门的有Masonry、SDAutoLayout,下面的简单demo,采用纯代码布局,实现不定高tableview。

实现方式:Masonry + FDTemplateLayoutCell

先上图:

其中:1和2都是UILabel,内容不固定,所以高度也不固定,3是view,可用作点赞和评论或其他用途。

话不多说,上代码:

1、准备工作

pods集成:

pod 'UITableView+FDTemplateLayoutCell'
pod 'Masonry'

2、新建cell,由于头像我用的网络图片,要事先集成一下SDWebImage

#import "FDTMasoryCell.h"
#import "Masonry.h"
#import "UIImageView+WebCache.h"
-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
self.backgroundColor = [UIColor clearColor];
[self initViews];
}
return self;
} -(void)initViews{
//头像icon
icon = [[UIImageView alloc] init];
[self.contentView addSubview:icon];
//高宽40,顶端和左边距离10px
[icon mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.contentView).offset(10);
make.top.equalTo(self.contentView).offset(10);
make.width.and.height.offset(40);
}]; //标题title
lblTitle = [UILabel new];
[self.contentView addSubview:lblTitle];
//高20,左边距离头像10px,顶部距离contentview10px,右边距离15px(为什么是-15,因为ios内原点是左上角,所以右边和底部间距要负数)
[lblTitle mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(icon.mas_right).offset(10);
make.top.equalTo(self.contentView).offset(10);
make.right.equalTo(self.contentView).offset(-15);
make.height.mas_equalTo(20);
}]; //描述内容1
lblDesc = [UILabel new];
lblDesc.backgroundColor = [UIColor redColor];
lblDesc.numberOfLines = 0;
[self.contentView addSubview:lblDesc];
//不定高label,顶端距离title 10px,左边距离icon 10px, 右边距离 15px
[lblDesc mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(lblTitle.mas_bottom).offset(10);
make.left.equalTo(icon.mas_right).offset(10);
make.right.equalTo(self.contentView).offset(-15);
}]; //描述内容2
lblDesc2 = [UILabel new];
lblDesc2.numberOfLines = 0;
lblDesc2.backgroundColor = [UIColor yellowColor];
[self.contentView addSubview:lblDesc2];
//不定高label,顶端距离描述内容1 10px,左边距离icon 10px, 右边距离 15px
[lblDesc2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(lblDesc.mas_bottom).offset(10);
make.left.equalTo(icon.mas_right).offset(10);
make.right.equalTo(self.contentView).offset(-15);
}]; //其他
viewComment = [[UIView alloc] init];
viewComment.backgroundColor = [UIColor orangeColor];
[self.contentView addSubview:viewComment];
//高25,顶端距离内容2 10px,左边距离和内容2齐平, 右边距离 15px
[viewComment mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(lblDesc2.mas_bottom).offset(10);
make.left.equalTo(lblDesc2);
make.height.mas_equalTo(25);
make.right.bottom.equalTo(self.contentView).offset(-15);
}]; } -(void)fill:(FDTModel *)model{
[icon sd_setImageWithURL:[NSURL URLWithString:model.iconUrl] placeholderImage:[UIImage imageNamed:@"iconDefault"]];
lblTitle.text = model.title;
lblDesc.text = model.desc;
lblDesc2.text = model.desc;
}

  

3、控制器 tableviewview  

#import "FDTMasoryCell.h"
#import "FDTModel.h"
#import "UITableView+FDTemplateLayoutCell.h"
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor = [UIColor whiteColor]; _tableview = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, KScreenWidth, KScreenHeight) style:UITableViewStylePlain];
_tableview.delegate = self;
_tableview.dataSource = self;
//[_tableview registerNib:[UINib nibWithNibName:@"FDTCell" bundle:nil] forCellReuseIdentifier:cellID];
[_tableview registerClass:[FDTMasoryCell class] forCellReuseIdentifier:cellMasonryID];
[self.view addSubview:_tableview]; } #pragma mark - tableview
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return self.dataArry.count;
} -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
//FDTCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID];
FDTMasoryCell *cell = [tableView dequeueReusableCellWithIdentifier:cellMasonryID];
FDTModel *model = self.dataArry[indexPath.row];
[cell fill:model];
return cell; } -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return [tableView fd_heightForCellWithIdentifier:cellMasonryID cacheByIndexPath:indexPath configuration:^(id cell) {
FDTModel *model = self.dataArry[indexPath.row];
[cell fill:model];
}]; }

PS:

1、tableview这里用法跟平常一样,唯一区别以及最关键的就是代理内的:heightForRowAtIndexPath方法

这里用到了 UITableView+FDTemplateLayoutCell  处理高度,用法简单明了,再也不用自己根据内容一个个计算了!

2、cell内,我是简单用了三层view,大家也可以按自己需求改动cell即可。

3、这里cell,我是用masonry布局,当然也可以用系统Autolayout添加约束实现布局,有时候cell内如果内容不多,用约束反而更简单。

Last,经过以上三步,一个简单的排列效果就出来了,大家都试试吧。。

有任何疑问,欢迎留言~~~

Masonry和FDTemplateLayoutCell 结合使用示例Demo的更多相关文章

  1. AutoLayout初战----Masonry与FDTemplateLayoutCell实践

    学iOS也有几个月了.一直都是纯代码开发,菜鸟入门,到今天还处在Frame时代.刚好近期项目在提审.有点时间能够学学传说中的AutoLayout.事实上.就是android的相对布局(Relative ...

  2. iOS之ProtocolBuffer搭建和示例demo

    这次搭建iOS的ProtocolBuffer编译器和把*.proto源文件编译成*.pbobjc.h 和 *.pbobjc.m文件时,碰到不少问题! 搭建pb编译器到时没有什么问题,只是在把*.pro ...

  3. c#实例化继承类,必须对被继承类的程序集做引用 .net core Redis分布式缓存客户端实现逻辑分析及示例demo 数据库笔记之索引和事务 centos 7下安装python 3.6笔记 你大波哥~ C#开源框架(转载) JSON C# Class Generator ---由json字符串生成C#实体类的工具

    c#实例化继承类,必须对被继承类的程序集做引用   0x00 问题 类型“Model.NewModel”在未被引用的程序集中定义.必须添加对程序集“Model, Version=1.0.0.0, Cu ...

  4. 利用webuploader插件上传图片文件,完整前端示例demo,服务端使用SpringMVC接收

    利用WebUploader插件上传图片文件完整前端示例demo,服务端使用SpringMVC接收 Webuploader简介   WebUploader是由Baidu WebFE(FEX)团队开发的一 ...

  5. 百度编辑器UEditor ASP.NET示例Demo 分类: ASP.NET 2015-01-12 11:18 346人阅读 评论(0) 收藏

    在百度编辑器示例代码基础上进行了修改,封装成类库,只需简单配置即可使用. 完整demo下载 版权声明:本文为博主原创文章,未经博主允许不得转载.

  6. 使用Nancy搭建简单的Http服务的示例demo

    刚刚接触Nancy没几天,暂时还不会使用Nancy来做web开发,只是使用Nancy实现了一个简单的Http服务的Demo程序,实现对Post和Get请求的处理. Demo的示例代码地址如下:http ...

  7. Windows上配置Mask R-CNN及运行示例demo.ipynb

    最近做项目需要用到Mask R-CNN,于是花了几天时间配置.简单跑通代码,踩了很多坑,写下来分享给大家. 首先贴上官方Mask R-CNN的Github地址:https://github.com/m ...

  8. php中钩子(hook)的应用示例demo

    我们先来回顾下原本的开发流程:产品汪搞出了一堆需求:当用户注册成功后需要发送短信.发送邮件等等:然后聪明机智勇敢的程序猿们就一扑而上:把这些需求转换成代码扔在 用户注册成功 和 跳转到首页 之间: 没 ...

  9. ASP.NET处理301重定向方法 带示例 (demo)

    System.Web.HttpContext.Current.Response.Status = "301 Moved Permanently"; System.Web.HttpC ...

随机推荐

  1. 自动以读写方式挂载ntfs-黑苹果之路

    在mac下ntfs分区总是以只读方式挂载,双操作系统,尤其有些时候需要用u盘,需要手工umount再mount,很麻烦,找了一些资料,通过修改/etc/fstab文件无效,要么就是使用第三方软件,不合 ...

  2. 用Python实现常见排序算法

    最简单的排序有三种:插入排序,选择排序和冒泡排序.这三种排序比较简单,它们的平均时间复杂度均为O(n^2),在这里对原理就不加赘述了.贴出来源代码. 插入排序: def insertion_sort( ...

  3. redis面试总结

    http://blog.csdn.net/guchuanyun111/article/category/6335900 (1)什么是redis? Redis 是一个基于内存的高性能key-value数 ...

  4. 关于在链路聚合下做smart,monitor link的转发测试

    关于在链路聚合下做smart,monitor link的转发测试 这次又要开始瞎折腾了.没事找事了.毕竟我还是很无聊的: 这个实验主要要涉及到以下几个方面: 1.gvrp的应用: 2.Smart Li ...

  5. css form表单样式清除

    开发项目中表单常用的清楚样式: 1.改变placeholder默认字体颜色 ::-webkit-input-placeholder{color: #333;} :-moz-placeholder{co ...

  6. PAT1007:Maximum Subsequence Sum

    1007. Maximum Subsequence Sum (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Y ...

  7. 代码漏洞扫描描述Cross Site History Manipulation解决办法[dongcoder.com]

    代码漏洞扫描 漏洞描述:Cross Site History Manipulation 简要描述:产品的行为差异或发送不同的反应,在某种程度上暴露了与安全性相关的产品状态,例如特定的操作是否成功.可能 ...

  8. (理论篇)从基础文件IO说起虚拟内存,内存文件映射,零拷贝

    为了快速构建项目,使用高性能框架是我的职责,但若不去深究底层的细节会让我失去对技术的热爱. 探究的过程是痛苦并激动的,痛苦在于完全理解甚至要十天半月甚至没有机会去应用,激动在于技术的相同性,新的框架不 ...

  9. 每日英语:KFC's Crisis in China Tests Ingenuity of Man Who Built Brand

    Sam Su for years ran one of the highest-flying foreign business operations in China. These days, he' ...

  10. asp后台读id设置样式

    加runat=“server”