iOS时间轴的实现

最近项目需求，恰好要做一个时间轴，而iOS这方面时间轴的例子也比较少，我就把自己所做的例子和思路共享出来给大家，共同学习。

时间轴的具体实现效果如图1所示：

               　　　　　　 图1

 

第一步：看到这个图，我们想到的第一反应就是使用tableView或者CollectionView来完成，那么我这里使用的是tableView。首先，创建一个Single View Application项目，在Main.Storyboard里面拖入一个TableView（如图2所示），这里别忘记了把TableView的delegate指向ViewController。

                                图 2 

 

第二步：TableView完成了，接下来就是如何自定义TableViewCell了。在项目中new file选择Cocoa Touch Class，然后选择继承自TableViewCell，然后勾选XIB file选项，命名为“TimeCourseTableViewCell”，点击创建，完成后如图3所示：

         　　图 3

 

接下来，就是为这个xib文件布局，通过图4圈出来的，我们可以找出一个cell里面具有什么控件。

        　　　　　　图  4 

根据这个，我们布局出来的如图5所示，主要就是Label和View来完成布局。

    ​    ​    ​    ​    ​    ​    ​　　　　　　　　图 5

其实这里肯定会有人有疑问：

1.为什么下面那个不直接用一个Button就好了呢，还要用一个View里面嵌套一个Label呢？ 

2.为什么"内容"的那个label还要添加一个父控件View呢？

其实，刚开始的时候，我确实也是使用简单的一个Button和一个Label以为就可以了。后来发现，莫名的出现明明设置了buttom和label的Frame，修改了Origin，却总是出现乱七八糟的位置，后来通过view嵌套在里面，改变view的位置，就完全可以实现了。这个BUG本人也不清楚，望知情人告知，谢谢。

 

第三步：接下来，看xib里面的TimeCourseTableViewCell.h文件里的代码：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

#import <UIKit/UIKit.h>   @interface  TimeCourseTableViewCell : UITableViewCell   @property  (weak,  nonatomic )  IBOutlet  UILabel *lbDate;  //日期 @property  (weak,  nonatomic )  IBOutlet  UILabel *lbTime;   //时间 @property  (weak,  nonatomic )  IBOutlet  UIView *infoView;  //白色底的那个View @property  (weak,  nonatomic )  IBOutlet  UILabel *lbInfoTitle;   //通知标题 @property  (weak,  nonatomic )  IBOutlet  UILabel *lbInfoContent;  //通知内容 @property  (weak,  nonatomic )  IBOutlet  UIView *infoContentView;  //通知内容的父View @property  (weak,  nonatomic )  IBOutlet  UILabel *lbSegment;  //竖着的灰色分割线 @property  (weak,  nonatomic )  IBOutlet  UIView *receiveView;  //深红色的View @property  (weak,  nonatomic )  IBOutlet  UILabel *lbReceive;  //轻触收到通知    - (CGFloat)setCellHeight:( NSString  *)strInfo isSameDay:( BOOL )isSame; - ( void )setRidues; - ( void )setClick; - ( void )setNotClick;   @end

 

 

TimeCourseTableViewCell.m文件里的代码：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121

#import "TimeCourseTableViewCell.h"   @implementation  TimeCourseTableViewCell @synthesize  lbDate; @synthesize  lbTime; @synthesize  infoView;