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

#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;
@synthesize lbInfoTitle;
@synthesize lbInfoContent;
@synthesize  lbReceive;
@synthesize receiveView;
@synthesize lbSegment;
@synthesize infoContentView;

- (void)awakeFromNib {

    // Initialization code

}

/*去掉上面的日期*/
- (void)deleteDate{
    lbDate.hidden = YES;
    CGRect timeTemp = lbTime.frame;
    timeTemp.origin = CGPointMake(timeTemp.origin.x, 8);
    lbTime.frame = timeTemp;  

    CGRect infoViewTemp = infoView.frame;
    infoViewTemp.origin = CGPointMake(infoViewTemp.origin.x, 8);
    infoView.frame = infoViewTemp;
}

/*设置显示的文本高度，以确定整个tableViewCell的高度，最后返回cell高度*/
- (CGFloat)setCellHeight:(NSString *)strInfo isSameDay:(BOOL)isSame{
    /*如果是同一天 则去掉上面的日期*/
    if (isSame) {
        [self deleteDate];
    }

    [lbInfoContent setNumberOfLines:0];  //0行，则表示根据文本长度，自动增加行数
    NSString *labelText = strInfo;
    NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:labelText];
    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
    [paragraphStyle setLineSpacing:5.0f];//调整行间距
    [attributedString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, [labelText length])];
    lbInfoContent.attributedText = attributedString;
    [lbInfoContent sizeToFit];  //填充
    //NSLog(@"%@",lbInfoContent);

    CGRect infoContentViewTemp = infoContentView.frame;
    infoContentViewTemp.size = CGSizeMake(212, lbInfoContent.frame.size.height);
    infoContentView.frame = infoContentViewTemp;

    /*设置手势点击位置*/
    CGRect btnTemp = receiveView.frame;
    btnTemp.origin = CGPointMake(0, infoContentView.frame.origin.y + infoContentView.frame.size.height + 8 );
    receiveView.frame = btnTemp;
    //NSLog(@"%@",receiveView);

    /*设置整个infoView高度*/
    CGRect viewTemp = infoView.frame;
    viewTemp.size = CGSizeMake(viewTemp.size.width, receiveView.frame.origin.y + receiveView.frame.size.height);
    infoView.frame = viewTemp;
    //NSLog(@"%@",infoView);

    lbSegment.frame = CGRectMake(lbSegment.frame.origin.x, 0, 3, infoView.frame.origin.y + infoView.frame.size.height + 8);
    NSLog(@"HEight %f",infoView.frame.origin.y + infoView.frame.size.height + 8);
    return infoView.frame.origin.y + infoView.frame.size.height + 8;
}

/*设置圆形*/
- (void)setRidues{
    lbTime.layer.cornerRadius = lbTime.frame.size.width / 2;
    [lbTime.layer setMasksToBounds:YES];
}

/*设置点击阅读样式*/
- (void)setClick{
    CGFloat R  = (CGFloat) 128/255.0;
    CGFloat G = (CGFloat) 128/255.0;
    CGFloat B = (CGFloat) 128/255.0;
    CGFloat alpha = (CGFloat) 1.0;
    UIColor *ColorRGB = [ UIColor colorWithRed: R
                                         green: G
                                          blue: B
                                         alpha: alpha
                        ];
    receiveView.backgroundColor = ColorRGB;
    lbReceive.text = @"我已收到通知";
}

/*设置未点击阅读样式*/
- (void)setNotClick{
    CGFloat R  = (CGFloat) 255/255.0;
    CGFloat G = (CGFloat) 83/255.0;
    CGFloat B = (CGFloat) 83/255.0;
    CGFloat alpha = (CGFloat) 1.0;

    UIColor *ColorRGB = [ UIColor colorWithRed: R
                                         green: G
                                          blue: B
                                         alpha: alpha
                         ];
    receiveView.backgroundColor = ColorRGB;    

    lbReceive.text = @"轻触收到通知";
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];
    // Configure the view for the selected state
}

@end

接下来，看ViewController.m文件里的代码：

#import "ViewController.h"
#import "TimeCourseTableViewCell.h" 

@interface ViewController () 

@property (weak, nonatomic) IBOutlet UITableView *messageTableView; 

@property int messageSum;  //cell个数
@property NSArray *infoArray; //保存信息内容
@property NSMutableArray *clickArray;  //记录是否已经阅读了信息 1未接收  0接收

@end

@implementation ViewController
@synthesize messageSum;

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.    

    /*tableView*/
    [self setTableViewStyle];
    messageSum = 10;
    self.infoArray = [[NSArray alloc] initWithObjects:@"老夫聊发少年狂，治肾亏，不含糖。",
                      @"锦帽貂裘，千骑用康王。",
                      @"",
                      @"为报倾城随太守，三百年，九芝堂。酒酣胸胆尚开张，西瓜霜，喜之郎。",
                      @"持节云中，三金葡萄糖。会挽雕弓如满月，西北望 ，阿迪王。",
                      @"十年生死两茫茫，恒源祥，羊羊羊。",
                      @"千里孤坟，洗衣用奇强。",
                      @"纵使相逢应不识，补维C，施尔康。",
                      @"夜来幽梦忽还乡，学外语，新东方。相顾无言，洗洗更健康。得年年断肠处，找工作，富士康",
                      @"啦啦啦",nil];   

    self.clickArray = [[NSMutableArray alloc] initWithObjects:@"1",
                      @"1",
                      @"1",
                      @"1",
                      @"1",
                      @"1",
                      @"1",
                      @"1",
                      @"1",
                      @"1",nil];
}

#pragma mark - 设置messageTableView的背景色和去掉分割线
- (void)setTableViewStyle{
    self.messageTableView.separatorStyle = UITableViewCellSeparatorStyleNone;  //去掉tabelView分割线
    CGFloat R  = (CGFloat) 237/255.0;
    CGFloat G = (CGFloat) 237/255.0;
    CGFloat B = (CGFloat) 237/255.0;
    CGFloat alpha = (CGFloat) 1.0;
    UIColor *ColorRGB = [ UIColor colorWithRed: R
                                         green: G
                                          blue: B
                                         alpha: alpha
                         ];

    [self.messageTableView setBackgroundColor:ColorRGB];
}

#pragma mark - TabelView数据源协议
//该方法指定了表格视图的行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return messageSum;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    //按时间分组，假设这里[0,2],[3,5],[6,9]是同一天
    TimeCourseTableViewCell *nib = [[[NSBundle mainBundle] loadNibNamed:@"TimeCourseTableViewCell" owner:self options:nil] lastObject];
    if ([indexPath row] == 0) {
        NSLog(@"0");
        return [nib setCellHeight:[self.infoArray objectAtIndex:[indexPath row]] isSameDay:NO];
    }
    else if ([indexPath row]<3) {
        NSLog(@"0 - 3");
        return [nib setCellHeight:[self.infoArray objectAtIndex:[indexPath row]] isSameDay:YES];
    }else if ([indexPath row] == 3){
        NSLog(@"3");
        return [nib setCellHeight:[self.infoArray objectAtIndex:[indexPath row]] isSameDay:NO];
    }else if ([indexPath row] < 6){
        NSLog(@"3 - 6");
        NSLog(@"%f",[nib setCellHeight:[self.infoArray objectAtIndex:[indexPath row]] isSameDay:YES]);
        return [nib setCellHeight:[self.infoArray objectAtIndex:[indexPath row]] isSameDay:YES];
    }else if ([indexPath row] == 6){
        NSLog(@"6");
        NSLog(@"%f",[nib setCellHeight:[self.infoArray objectAtIndex:[indexPath row]] isSameDay:NO]);
        return [nib setCellHeight:[self.infoArray objectAtIndex:[indexPath row]] isSameDay:NO];
    }else if ([indexPath row] > 6){
        NSLog(@"6- 9");
        NSLog(@"%f",[nib setCellHeight:[self.infoArray objectAtIndex:[indexPath row]] isSameDay:YES]);
        return [nib setCellHeight:[self.infoArray objectAtIndex:[indexPath row]] isSameDay:YES];
    }else
        return 145;
}

//该方法返回单元格对象，有多少行表格，则调用多少次
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

    static NSString *simpleIdentify = @"TimeCourse";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleIdentify];
    TimeCourseTableViewCell *nib = [[[NSBundle mainBundle] loadNibNamed:@"TimeCourseTableViewCell" owner:self options:nil] lastObject];
    [nib setTag:[indexPath row]];
    if ([[self.clickArray objectAtIndex:[indexPath row]] isEqualToString:@"1"]) {
        [nib setNotClick];
    }else
        [nib setClick];
    [nib setRidues];
    UITapGestureRecognizer *Tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapGesture:)];
    nib.receiveView.userInteractionEnabled = YES;
    [nib.receiveView addGestureRecognizer:Tap];    

    if ([indexPath row] == 0) {
        [nib setCellHeight:[self.infoArray objectAtIndex:[indexPath row]] isSameDay:NO];
    }
    else if ([indexPath row]<3) {
        [nib setCellHeight:[self.infoArray objectAtIndex:[indexPath row]] isSameDay:YES];
    }else if ([indexPath row] == 3){
        [nib setCellHeight:[self.infoArray objectAtIndex:[indexPath row]] isSameDay:NO];
    }else if ([indexPath row] < 6){
        [nib setCellHeight:[self.infoArray objectAtIndex:[indexPath row]] isSameDay:YES];
    }else if ([indexPath row] == 6){
        [nib setCellHeight:[self.infoArray objectAtIndex:[indexPath row]] isSameDay:NO];
    }else if ([indexPath row] > 6){
        [nib setCellHeight:[self.infoArray objectAtIndex:[indexPath row]] isSameDay:YES];
    }
    cell = nib;
    cell.selectionStyle = UITableViewCellSelectionStyleNone;   //去掉提供的选中无颜色    

    return  cell;

}

#pragma mark - TabelView代理协议
//选中事件
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"44");
} 

- (void)tapGesture:(UITapGestureRecognizer *)sender{
    NSLog(@"接收通知");
    UIView *view = sender.self.view;
    TimeCourseTableViewCell *cell = (TimeCourseTableViewCell *)view.superview.superview.superview;   

    UILabel *lb = view.subviews[0];
    NSString *str = @"轻触收到通知";

    if ([lb.text isEqualToString:str]) {
        [cell setClick];
        [self.clickArray setObject:@"0" atIndexedSubscript:cell.tag];
    }
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

那么，运行之后，效果如图6所示：

?　　　　　　　　图 6

改一下颜色，完成如下：

?

至此，整个时间轴完成。

思路大概如下：

1.根据时间分组：判断是不是同一天，如果是则把上面的日期隐藏，整体布局往上移动。

2.获取点击的是哪个cell：通过给cell添加tag，那么我单击手势时候，便可以获取出cell，然后更改这个cell的样式

可能写的不是很明白，大家可以认真看一下代码。

源码地址免费下载：http://download.csdn.net/detail/junlinfushi/8345531

时间： 2024-02-20 19:03:47

iOS时间轴的实现的相关文章

iOS中各种风格时间轴的设计及总结

前言 上一篇给大家总结了绘图各种画法,今天紧接着给大家在总结时间轴的各种设计,其中也用到了绘图. 时间轴有什么作用呢? 现在在项目当中时间轴已经变得无处不在了.最典型的就是社交媒体了,像Facebook和人人网这样的SNS社区会将你的生活以时间轴的形式呈现出来,QQ,微博和Twitter也自不必说,同样以时间轴来排列信息,而移动APP Path更是以时间轴而出名. 时间轴不仅帮助用户梳理信息,更是用户交互的基础规则. 今天就给大家讲讲各种时间轴风格的不同实现.在这里先让大家看看这3种时间轴风格的

时间轴

在前端网看到个时间轴的效果,故简单模范了个. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{margin: 50px;} .container{margin-left: 30%;l

jQuery时间轴插件：jQuery Timelinr

前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. HTML 我们在body中建立一个div#timeline作为展示区,#dates为时间轴,示例中我们用年份作为主轴,#issues作为内容展示区,即展示对应主轴点年份的内容,注意id对应上. <div id="timeline"> <ul id="dates&

Android 时间轴

效果图: 数据是随便填的,显得有点乱,但是不影响效果.实现方面主要是用ListView来实现,主要是根据ListView的item位置与上一条数据进行比较,来控制时间的显示隐藏效果.思路很简单,下面看代码实现: 首先是页面的整体布局,很简单,就一个ListView: res/layout/activity_main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:and

android 简易时间轴(实质是ListView)

ListView的应用 1.在很多时候是要用到时间轴的,有些处理的时间轴比较复杂,这里就给出一个比较简单的时间轴,其实就是ListView里面的Item的设计. 直接上代码: ListView,item的xml文件-->time_item.xml 1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.andro

Jquery实现的几款漂亮的时间轴

引言 最近项目中使用了很多前端的东西,对于我一个做后台开发的人员,这是一个很好的锻炼的机会.经过这段时间的学习,感觉前端的东西太多了,太强大了,做出来的东西太炫酷了.现在有很多开源的前端框架,做的都非常的漂亮,h5发展了这么多年了,改变了互联网行业啊!下面给大家介绍几款漂亮的时间轴,也许大家以后工作中会用到. 一.纵向折叠时间轴 1.js文件(jQuery.js或者jQuery.min.js) 2.CSS文件   3.HTML代码   4.运行效果: 二.纵向鼠标滑动时间轴 1.js文件(jqu

JS时间轴效果(类似于qq空间时间轴效果)

2013-11-04 23:51 by 空智, 4041 阅读, 15 评论, 收藏, 编辑 在上一家公司写了一个时间轴效果,今天整理了下,感觉有必要写一篇博客出来 给大家分享分享 当然代码还有很多不足的地方,希望大家多指点指点下,此效果类似于QQ空间或者人人网空间时间轴效果,当时也是为了需求 研究了下qq空间逻辑(当然JS代码压缩了肯定看不到的),只是当时研究了下他们HTML结构和css结构,所以仿照他们那种逻辑自己也写了一个出来.先来看看是个什么样的吧!如下图所示: 需求分析:左侧是一个时间

时光轴 时间轴 效果

要实现类似QQ空间那样时光轴 时间轴效果 如图 ==================== 分析:左边 ul的border-left实现,这样会出现底部的 余出的线条,不美观, 所以考虑li的border-left实现. li的padding-bottom撑开上下间距 h4标题的:before实现圆圈,定位到左边. 圆圈的实现使用绝对定位实现,注意下UL和LI实现方式下的,圆圈定位位置. =========Ul实现边框======= .money-process .process-list { w

DevExpress之ChartControl实现时间轴实例 z

using System; using System.Data; using System.Windows.Forms; using DevExpress.XtraCharts; namespace DevExpressChart { public partial class winDateTime : Form { public winDateTime() { InitializeComponent(); } private void winDateTime_Load(object sende