当需要显示学习进度完成的情况,发现以"时间线"的方式显示效果不错,写个简单demo以供参考.
主要实现方式:
(1)通过自定义tableViewCell即可.
(2)Cell的形式可以换成气泡样式效果.
一.相关图形剖析
(1)普通cell显示样式
此处需注意上下两处的延长长度.
标注1: 上方黄色线条的view
标注2: 下方黄色线条的view
标注3: 中间黄色圆点
标注4: 其它地方自定义即可
时间线cell.png
(2)气泡cell显示样式
增加背景ImageView显示气泡图片.
关于气泡图片:
1.如果对Demo中图片不满意,可以自行使用Sketch进行创建.
标红区域是需要用到的"剪刀"与"组合"工具.
SketchBubble.png
2.此处需注意气泡图片的拉伸效果.
这里我使用的方法是使用Xcode的Asset Catalog的Slicing.
好处是:不需代码去拉伸图片,Xcode会自动识别图片的圆角.
使用方法:
Slicing.png
点击ShowSlicing可以调整拉伸区域.
ShowSlicing.png
关于图片拉伸的几种方法,查看此链接即可.
二.主要代码
(1)判断完成情况设置颜色即可.
if (model.isFinsish == 0) {
self.FinisnLabel.text = @"未完成";
self.cellImgView.backgroundColor = UnFinsishColor
self.TopView.backgroundColor = UnFinsishColor;
self.BottomView.backgroundColor = UnFinsishColor;
}else{
self.FinisnLabel.text = @"已完成";
self.cellImgView.backgroundColor = FinsishColor
self.TopView.backgroundColor = FinsishColor;
self.BottomView.backgroundColor = FinsishColor;}
(2)去掉第一个"上方view"与最后一个"下方view".
//定义方法传值当前row
- (void) bindDataWithTimeModel:(TimeModel *)model withRow:(NSInteger)row withArrCount:(NSInteger)count{ }
//第一个去掉顶部view
if (row==0) self.TopView.hidden = YES;
//最后一个去掉底部view
if (row==count-1) self.BottomView.hidden = YES;
三.实现效果
(1)普通Cell样式显示效果
时间线进度.png
(2)Cell气泡样式显示效果
气泡cell.png
四.Demo地址
欢迎star : https://github.com/FTC-Chen/TimeLineCell
五.参考资料
1.http://www.jianshu.com/p/2504f2989556
有任何问题请私信或者留言.
