iOS 时间线-显示学习进度,完成进度等

当需要显示学习进度完成的情况,发现以"时间线"的方式显示效果不错,写个简单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

有任何问题请私信或者留言.