码迷,mamicode.com
首页 > 移动开发 > 详细

iOS时间轴的实现

时间:2015-01-09 19:17:28      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:

最近项目需求,恰好要做一个时间轴,而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

 

iOS时间轴的实现

标签:

原文地址:http://www.cnblogs.com/linjianxiang/p/4213926.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!