iOS时间轴的实现

最新推荐文章于 2021-05-27 18:04:06 发布

zhuobi0

最新推荐文章于 2021-05-27 18:04:06 发布

阅读量1.2k

点赞数

分类专栏： IOS开发

本文链接：https://blog.csdn.net/zhuobi0/article/details/42563753

版权

本文介绍了在iOS中实现时间轴的步骤，包括使用TableView、自定义TableViewCell，以及处理布局问题。通过实例展示了如何通过UITableViewCell子类和XIB文件创建时间轴效果，并提供了关键代码示例。

摘要由CSDN通过智能技术生成

最近项目需求，恰好要做一个时间轴，而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文件里的代码：

 
   
    
      
       
         #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文件里的代码：

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