非等高cell实战--实现微博页面
代码地址如下:
http://www.demodashi.com/demo/11639.html
前言
学习过UITableView、AutoLayout以及MVC的相关知识,接下来通过一个微博页面实战来整合一下。
效果图
首先看一下效果图:
程序实现
需求分析
此页面为非等高cell,tableview的组数为1
cell内容根据数据动态展示
cell自适应高度,根据微博有无图片,适配自己高度
项目准备
数据均为本地数据(status.plist 和 images)
上手操作
1、创建工程、导入资源
2、创建MVC对应文件,本案例为:XYStatusesViewController、XYStatus、XYStatusCell控制器逻辑:
3、控制器只需管理逻辑.至于cell的创建和内部细节,全部封装起来
懒加载本地plist数据
- (NSMutableArray *)status {if (_status == nil) {NSString *path = [[NSBundle mainBundle] pathForResource:@"statuses.plist" ofType:nil];NSArray *array = [NSArray arrayWithContentsOfFile:path];NSMutableArray *arrayM = [NSMutableArray new];for (NSDictionary *dict in array) {XYStatus *status = [XYStatus statusWithDict:dict];[arrayM addObject:status];}_status = arrayM;}return _status;}
返回tableView对应的数据源
#pragma mark - Table view data source- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {return self.status.count;
}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {XYStatusCell *cell = [XYStatusCell cellWithTableView:tableView];cell.status = self.status[indexPath.row];NSLog(@"cell.height = %zd",cell.height);return cell;
}
/*** 不知是Xcode8的特性还是iOS10 特性。所以这种通过model保存高度的方法,可以不用写估算方法也行。* 因为最初精算,返回值为0,Model中没有保存。然后返回cell之后,再精算的时候返回真实的保存值。*/- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{NSLog(@"-----heightForRowAtIndexPath------");XYStatus *status = self.status[indexPath.row];return status.cellHeight;}
/*** 这个方法很重要:是估算cell的高度。有这个方法的调用顺序是: 1.估算 2.返回cell 3. 计算准确高度* 否则:1.计算准确高度 2.返回cell 3.再计算准确高度** 不知是Xcode8的特性还是iOS10 特性。所以这种通过model保存高度的方法,可以不用写估算方法也行*/- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath
{NSLog(@"-----estimatedHeightForRowAtIndexPath------");return 200;
}
模型的封装:模型用来存储内部数据、并通过KVC来保存传入数据
@property (nonatomic, copy) NSString *text;
@property (nonatomic, copy) NSString *name;
@property (nonatomic, copy) NSString *icon;
@property (nonatomic, copy) NSString *picture;
@property (nonatomic, assign,getter=isVip) BOOL vip;
/*** cellHeight*/
@property (nonatomic, assign) CGFloat cellHeight;
+ (instancetype)statusWithDict:(NSDictionary *)dict;
- (instancetype)initWithDict:(NSDictionary *)dict;
// 内部实现+ (instancetype)statusWithDict:(NSDictionary *)dict
{return [[self alloc] initWithDict:dict];
}
- (instancetype)initWithDict:(NSDictionary *)dict
{if (self == [super init]) {[self setValuesForKeysWithDictionary:dict];}return self;
}
View的封装,cell推荐使用xib创建,因为方便
首先cell需要一个status属性、并提供一个类方法创建实例
@property (nonatomic, strong) XYStatus *status;
+ (instancetype)cellWithTableView:(UITableView *)tableView;
在Xib中设置内容控件并拖到.m中(设置好复用标识)
根据Xib创建view的步骤来,设置cell
cell类方法的实现
+ (instancetype)cellWithTableView:(UITableView *)tableView
{static NSString *ID = @"cell";XYStatusCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];if (cell == nil) {cell = [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:nil] lastObject];}return cell;
}
设置cell的数据 status
- (void)setStatus:(XYStatus *)status
{_status = status;self.iconView.image = [UIImage imageNamed:status.icon];self.nameLabel.text = status.name;self.contentLabel.text = status.text;if (status.isVip) {self.vipView.hidden = NO;self.vipView.image = [UIImage imageNamed:@"vip"];self.nameLabel.textColor = [UIColor orangeColor];}else{self.vipView.hidden = YES;self.nameLabel.textColor = [UIColor blackColor];}if (status.picture) {self.pictureView.hidden = NO;self.pictureView.image = [UIImage imageNamed:status.picture];_height = CGRectGetMaxY(self.pictureView.frame) + 10;}else{self.pictureView.hidden = YES;_height = CGRectGetMaxY(self.contentLabel.frame) + 10;}// 强制布局[self layoutIfNeeded];// 计算并标记高度保存到model中去if (self.pictureView.hidden) {_height = CGRectGetMaxY(self.contentLabel.frame) + 10;}else{_height = CGRectGetMaxY(self.pictureView.frame) + 10;}// 这里有个注意点:// 通过强制布局使得cell子控件设置数据,计算出具体frame。// 通过计算的cell的高度,来重新保存到status模型中// 这里是C语言中指针的知识,如果有问题,欢迎留言status.cellHeight = _height;}
项目代码结构截图
源码截图如下
小结:
麻雀虽小,五脏俱全。非等高cell实战–实现微博页面
代码地址如下:
http://www.demodashi.com/demo/11639.html注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权
非等高cell实战--实现微博页面相关推荐
- 非等高cell实战(01)-- 实现微博页面
非等高cell实战(01)-- 实现微博页面 学习过UITableView.AutoLayout以及MVC的相关知识,接下来通过一个微博页面实战来整合一下. 首先看一下效果图: 需求分析 此页面为非等 ...
- 自定义非等高 Cell
1.自定义非等高 Cell介绍 1.1 代码自定义(frame) 新建一个继承自 UITableViewCell 的类. 重写 initWithStyle:reuseIdentifier: 方法. 添 ...
- Hadoop大数据零基础高端实战培训系列配文本挖掘项目
<Hadoop大数据零基础高端实战培训系列配文本挖掘项目(七大亮点.十大目标)> 课程讲师:迪伦 课程分类:大数据 适合人群:初级 课时数量:230课时 用到技术:部署Hadoop集群 涉 ...
- 视频教程-2019 react入门至高阶实战,含react hooks-ReactJS
2019 react入门至高阶实战,含react hooks 从事前端开发近5年时间,曾任职于丽珠集团等大型企业担任高级前端开发工程师职位,积累了很多大厂的前端开发经验. 目前处于创业期,正在筹备自己 ...
- 小程序picker_小程序·云开发实战 - 迷你微博
0. 前言 本文将手把手教你如何写出迷你版微博的一行行代码,迷你版微博包含以下功能: Feed 流:关注动态.所有动态 发送图文动态 搜索用户 关注系统 点赞动态 个人主页 使用到的云开发能力: 云数 ...
- java高并发实战Netty+协程(Fiber)|系列1|事件驱动模式和零拷贝
今天开始写一些高并发实战系列. 本系列主要讲两大主流框架: Netty和Quasar(java纤程库) 先介绍netty吧,netty是业界比较成熟的高性能异步NIO框架. 简单来说,它就是对NIO2 ...
- 小程序·云开发实战 - 迷你微博
0. 前言 本文将手把手教你如何写出迷你版微博的一行行代码,迷你版微博包含以下功能: Feed 流:关注动态.所有动态 发送图文动态 搜索用户 关注系统 点赞动态 个人主页 使用到的云开发能力: 云数 ...
- Gerrit代码Review高阶实战
Gerrit代码Review高阶实战 Gerrit代码Review高阶实战 Gerrit 是一个免费.开放源代码的代码审查软件,使用网页界面.利用网页浏览器,同一团队的程序员,可以相互审阅彼此修改后的 ...
- 抵制“非你莫属”节目的微博活动,我被臭公知震到了,微博成了不负责任的宣泄之地
最近有个臭公知-李开复搞了一个万人抵制"非你莫属"节目的微博活动,我觉得很受震惊,一个名人竟然采用了这样的一个暴力行为去发表自己的观点,唉,都是功利主义害死人呀,下面我就长篇大论一 ...
最新文章
- 剑指offer:跳台阶 python 实现
- mysql pt_GitHub - hcymysql/pt-kill: Percona PT-kill重构版(PHP)
- 深入浅出Android系统启动流程
- 学习笔记:验证对称二叉树
- 在PEA上海做演讲主题:大型、高负载网站架构和应用初探
- layui结合form,table的全选、反选v1.0
- 车辆特征系数——车速的计算
- mysql重复数据处理_MySQL 处理重复数据
- Fantom已开始网络升级,大约需2个小时
- C#调用系统的复制、移动、删除文件对话框
- 博科光纤交换机IP+端口策略应用
- 软件测试学习书籍8本【经典推荐】
- 网上打印个人完税证明流程
- selenium 确实是好东西,使用selenium-server 加快执行速度,对速度有很大提升,同时可以拆分服务,进行集群部署。
- android新浪微博改进版
- 使用OpenCV+Tensorflow跟踪排球的轨迹
- 我国智能安防细分市场规模分析
- java实现代码在线编译器-从零开发(三)Web并发环境下的线程安全
- 帝国cmssitemap.php,帝国CMS-sitemap地图插件下载
- 甘特图:编制项目计划的步骤