iOS中各种风格时间轴的设计及总结
上一篇给大家总结了绘图各种画法,今天紧接着给大家在总结时间轴的各种设计,其中也用到了绘图.
时间轴有什么作用呢?
现在在项目当中时间轴已经变得无处不在了。最典型的就是社交媒体了，像Facebook和人人网这样的SNS社区会将你的生活以时间轴的形式呈现出来，QQ,微博和Twitter也自不必说，同样以时间轴来排列信息，而移动APP Path更是以时间轴而出名。
时间轴不仅帮助用户梳理信息，更是用户交互的基础规则。
今天就给大家讲讲各种时间轴风格的不同实现.在这里先让大家看看这3种时间轴风格的整体的画面效果.
看到了整体效果后,大家可能非常关心这三种时间轴风格具体是怎么实现的,下面就给大家具体来介绍这三种时间轴具体的设计思路.
01 StyleOne时间轴
1)自定义cell
自定义cell设置好了,现在来看一下里面关键技术点的实现.
2)自定义cell关键代码块
TimeCourseTableViewCell.m
/*去掉上面的日期*/
- (void)deleteDate{
lbDate.hidden = YES;
CGRect timeTemp = lbTime.
timeTemp.origin = CGPointMake(timeTemp.origin.x, 8);
lbTime.frame = timeT
CGRect infoViewTemp = infoView.
infoViewTemp.origin = CGPointMake(infoViewTemp.origin.x, 8);
infoView.frame = infoViewT
/*设置显示的文本高度，以确定整个tableViewCell的高度，最后返回cell高度*/
- (CGFloat)setCellHeight:(NSString *)strInfo isSameDay:(BOOL)isSame{
/*如果是同一天 则去掉上面的日期*/
if (isSame) {
[self deleteDate];
[lbInfoContent setNumberOfLines:0];
//0行，则表示根据文本长度，自动增加行数
NSString *labelText = strI
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 = attributedS
[lbInfoContent sizeToFit];
CGRect infoContentViewTemp = infoContentView.
infoContentViewTemp.size = CGSizeMake(212, lbInfoContent.frame.size.height);
infoContentView.frame = infoContentViewT
/*设置手势点击位置*/
CGRect btnTemp = receiveView.
btnTemp.origin = CGPointMake(0, infoContentView.frame.origin.y + infoContentView.frame.size.height + 8 );
receiveView.frame = btnT
/*设置整个infoView高度*/
CGRect viewTemp = infoView.
viewTemp.size = CGSizeMake(viewTemp.size.width, receiveView.frame.origin.y + receiveView.frame.size.height);
infoView.frame = viewT
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) 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
alpha: alpha
receiveView.backgroundColor = ColorRGB;
lbReceive.text = @&我已关注&;
/*设置未点击阅读样式*/
- (void)setNotClick{
= (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
alpha: alpha
receiveView.backgroundColor = ColorRGB;
lbReceive.text = @&轻触添加关注&;
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
自定cell设置好了,我们来看看控制器是如何进行调用的.
3)方法的调用
#import &StyleOneViewController.h&
#import &TimeCourseTableViewCell.h&
@interface StyleOneViewController ()
@property (weak, nonatomic) IBOutlet UITableView *messageTableV
@property(nonatomic,assign)int messageS//cell个数
@property(nonatomic,strong) NSArray *infoA //保存信息内容
@property (nonatomic,strong)NSMutableArray *clickA
//记录是否已经阅读了信息 1未接收
@implementation StyleOneViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.messageTableView.delegate =
self.messageTableView.dataSource =
/*tableView*/
[self setTableViewStyle];
self.messageSum = 10;
Array = @[@&蓝鸥北京中心&,
@&蓝鸥上海中心&,
@&蓝鸥大连中心&,
@&蓝鸥武汉校区&,
@&蓝鸥广州中心&,
@&蓝鸥成都中心&,
@&蓝鸥郑州中心&,
@&蓝鸥西安中心&,
@&蓝鸥科技&,
@&啦啦啦&];
self.clickArray = [@[@&1&,
@&1&]mutableCopy];
#pragma mark - 设置messageTableView的背景色和去掉分割线
- (void)setTableViewStyle{
self.messageTableView.separatorStyle = UITableViewCellSeparatorStyleN
//去掉tabelView分割线
= (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
alpha: alpha
[self.messageTableView setBackgroundColor:ColorRGB];
#pragma mark - TabelView数据源协议
//该方法指定了表格视图的行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return self.messageS
- (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) {
return [nib setCellHeight:[Array objectAtIndex:[indexPath row]] isSameDay:NO];
else if (indexPath.row&3) {
return [nib setCellHeight:[Array objectAtIndex:[indexPath row]] isSameDay:YES];
}else if (indexPath.row == 3){
return [nib setCellHeight:[Array objectAtIndex:[indexPath row]] isSameDay:NO];
}else if (indexPath.row & 6){
return [nib setCellHeight:[Array objectAtIndex:[indexPath row]] isSameDay:YES];
}else if (indexPath.row == 6){
return [nib setCellHeight:[Array objectAtIndex:[indexPath row]] isSameDay:NO];
}else if (indexPath.row & 6){
return [nib setCellHeight:[Array objectAtIndex:[indexPath row]] isSameDay:YES];
return 145;
//该方法返回单元格对象，有多少行表格，则调用多少次
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
//短工tableView
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];
[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:[Array objectAtIndex:[indexPath row]] isSameDay:NO];
else if (indexPath.row&3) {
[nib setCellHeight:[Array objectAtIndex:[indexPath row]] isSameDay:YES];
}else if (indexPath.row == 3){
[nib setCellHeight:[Array objectAtIndex:[indexPath row]] isSameDay:NO];
}else if (indexPath.row & 6){
[nib setCellHeight:[Array objectAtIndex:[indexPath row]] isSameDay:YES];
}else if (indexPath.row == 6){
[nib setCellHeight:[Array objectAtIndex:[indexPath row]] isSameDay:NO];
}else if (indexPath.row & 6){
[nib setCellHeight:[Array objectAtIndex:[indexPath row]] isSameDay:YES];
cell.selectionStyle = UITableViewCellSelectionStyleN
//去掉提供的选中无颜色
#pragma mark - TabelView代理协议
//选中事件
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
- (void)tapGesture:(UITapGestureRecognizer *)sender{
NSLog(@&接收通知&);
UIView *view = sender.self.
TimeCourseTableViewCell *cell = (TimeCourseTableViewCell *)view.superview.superview.
UILabel *lb = view.subviews[0];
NSString *str = @&轻触添加关注&;
if ([lb.text isEqualToString:str]) {
[cell setClick];
[self.clickArray setObject:@&0& atIndexedSubscript:cell.tag];
就这么简单,就这样设置完了,现在我们来看看他的效果.
3)效果展示
02 StyleTwo时间轴
现在我们来看看第二种时间轴是怎么实现的.
1)关键代码实现
#import &StyleTwoViewController.h&
#import &PlanLine.h&
#import &ViewController.h&
@interface StyleTwoViewController ()
@implementation StyleTwoViewController
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
self.title = @&时间轴&;
- (void)viewDidLoad
[super viewDidLoad];
[self.navigationController setToolbarHidden:NO];
self.navigationController.navigationBar.tintColor = [UIColor blackColor];
self.navigationController.toolbar.tintColor = [UIColor blackColor];
self.a = 0;
self.y = 0;
self.photoImageViewArray = [[NSMutableArray alloc]initWithCapacity:10];
self.array = [[NSMutableArray alloc]initWithCapacity:10];
NSArray *array1 = [NSArray arrayWithObjects:@&1.jpg&,@&2.jpg&,@&3.jpg&,@&4.jpg&, nil];
for (int i = 0; i & array1. i++){
UIImage *image = [UIImage imageNamed:[array1 objectAtIndex:i]];
[self.array addObject:image];
NSArray *array4 = @[@&1月&,@&2月&,@&3月&,@&4月&,@&5月&,@&6月&,@&7月&,@&8月&,@&9月&,@&10月&,@&11月&,@&12月&];
self.arrayMonths = [array4 copy];
int number = (int)[self.arrayMonths count];
UIImageView *backgroundImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height)];
[self.view addSubview:backgroundImageView];
[self makeScrollView:number];
self.imageView = [[UIImageView alloc]init];
self.imageView.frame = CGRectMake(0, 0, self.scrollView.bounds.size.width, self.scrollView.contentSize.height);
[self.scrollView addSubview:self.imageView];
self.view.backgroundColor = [UIColor whiteColor];
PlanLine *plan = [[PlanLine alloc]init];
plan.delegate =
[plan setImageView:self.imageView setlineWidth:5.0 setColorRed:0 ColorBlue:1 ColorGreen:0 Alp:1 setBeginPointX:60 BeginPointY:0 setOverPointX:60 OverPointY:self.scrollView.contentSize.height];
[self makeMonthButton:number];
[self makeView:number];
//ScrollView设置
-(void)makeScrollView:(int)number
self.scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 60, self.view.bounds.size.width, self.view.bounds.size.height)];
self.scrollView.delegate =
self.scrollView.backgroundColor = [UIColor clearColor];
self.scrollView.contentSize = CGSizeMake(self.view.bounds.size.width, number*50+200);
[self.view addSubview:self.scrollView];
//基本设置
-(void)makeMonthButton:(int)number
self.monthLabelArray = [[NSMutableArray alloc]initWithCapacity:10];
self.buttonArray = [[NSMutableArray alloc]initWithCapacity:10];
for (int i = 0; i & i++)
self.monthButton = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *image = [UIImage imageNamed:@&button.png&];
[self.monthButton setImage:image forState:UIControlStateNormal];
self.monthButton.frame = CGRectMake(46, i*50, 30, 30);
self.monthButton.tag =
[self.monthButton addTarget:self action:@selector(openMassage:) forControlEvents:UIControlEventTouchUpInside];
[self.scrollView addSubview:self.monthButton];
[self.buttonArray addObject:self.monthButton];
self.monthlabel = [[UILabel alloc]initWithFrame:CGRectMake(0, i*50, 40, 30)];
self.monthlabel.text = [self.arrayMonths objectAtIndex:i];
self.monthlabel.font = [UIFont fontWithName:@&Noteworthy-Light& size:10];
self.monthlabel.textAlignment = 1;
self.monthlabel.backgroundColor = [UIColor clearColor];
[self.scrollView addSubview:self.monthlabel];
[self.monthLabelArray addObject:self.monthlabel];
//设置显示内容信息
-(void)makeView:(int)number
NSArray *infoArray = @[@&蓝鸥北京中心&,
@&蓝鸥上海中心&,
@&蓝鸥大连中心&,
@&蓝鸥武汉中心&,
@&蓝鸥广州中心&,
@&蓝鸥成都中心&,
@&蓝鸥郑州中心&,
@&蓝鸥西安中心&,
@&蓝鸥科技&,
@&蓝鸥科技&,
@&蓝鸥科技&,
@&蓝鸥科技&,
@&蓝鸥科技&];
self.massageViewArray = [[NSMutableArray alloc]initWithCapacity:10];
for (int i = 0; i & i++)
self.massageView = [[UIView alloc]initWithFrame:CGRectMake(80, i*50, 200, 30)];
self.massageView.backgroundColor = [UIColor clearColor];
self.label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, self.massageView.bounds.size.width, 30)];
self.label.textAlignment= 1;
// int x = 50+i;
NSString *str = [NSString stringWithFormat:@&蓝鸥科技 %@&,infoArray[i]];
[self.label setText:str];
self.label.textColor=[UIColor colorWithRed:0.3176 green:0.902 blue:0.0549 alpha:1.0];
self.label.font = [UIFont fontWithName:@&Noteworthy-Light& size:15];
self.label.backgroundColor = [UIColor clearColor];
[self.scrollView addSubview:self.massageView];
[self.massageView addSubview:self.label];
[self.massageViewArray addObject:self.massageView];
[self.massageView setUserInteractionEnabled:NO];
-(void)openMassage:(id)sender
UIButton *button = (UIButton *)
self.c = (int)button.
//移除功能
if (self.b!=0)
[self.photoImageViewArray makeObjectsPerformSelector:@selector(removeFromSuperview)];
[self.photoImageViewArray removeAllObjects];
[self.animationImageView removeFromSuperview];
[self.AddimageView removeFromSuperview];
[self.textView removeFromSuperview];
//时间段线段
self.y = (int)button.
PlanLine *plan = [[PlanLine alloc]init];
self.AddimageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, self.scrollView.bounds.size.width, self.scrollView.contentSize.height)];
[plan setImageView:self.AddimageView setlineWidth:5.0 setColorRed:255 ColorBlue:0 ColorGreen:0 Alp:1 setBeginPointX:60 BeginPointY:button.tag*50+30 setOverPointX:60 OverPointY:(button.tag + 1 )*50+200];
self.animation1 = [CATransition animation];
self.animation1.delegate =
self.animation1.duration = 2.0f;
self.animation1.timingFunction = UIViewAnimationCurveEaseInO
self.animation1.type = kCATransitionMoveIn;
self.animation1.subtype = kCATransitionR
[self.AddimageView.layer addAnimation:self.animation1 forKey:@&animation&];
[self.AddimageView setUserInteractionEnabled:NO];
[self.scrollView addSubview:self.AddimageView];
//实例化弹出界面
[[self.massageViewArray objectAtIndex:button.tag] setFrame:CGRectMake(80, button.tag*50, 200, 200)];
CATransition *animation = [CATransition animation];
animation.delegate =
animation.duration = 2.0f;
animation.timingFunction = UIViewAnimationCurveEaseInO
animation.type = kCATransitionMoveIn;
animation.subtype = kCAT
[[[self.massageViewArray objectAtIndex:button.tag] layer] addAnimation:animation forKey:@&animation&];
[[self.massageViewArray objectAtIndex:button.tag] setUserInteractionEnabled:YES];
UIView *view = [self.massageViewArray objectAtIndex:button.tag];
[view.layer setShadowColor:[UIColor blackColor].CGColor];
[view.layer setShadowOffset:CGSizeMake(10, 10)];
[view.layer setShadowOpacity:0.5];
view.backgroundColor = [UIColor purpleColor];
UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(gotoNext)];
[view addGestureRecognizer:singleTap];
[[self.buttonArray objectAtIndex:button.tag] setFrame:CGRectMake(46, button.tag*50, 30, 30)];
[[self.monthLabelArray objectAtIndex:button.tag] setFrame:CGRectMake(5, button.tag*50, 40, 30)];
//图片实例化显示
for (int i = 0; i & self.array. i++){
self.massageImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0+i*50, 100, self.massageView.bounds.size.width/4, 75)];
[self.massageImageView setImage:[self.array objectAtIndex:i]];
[[self.massageViewArray objectAtIndex:button.tag] addSubview:self.massageImageView];
[self.photoImageViewArray addObject:self.massageImageView];
//动画视图
self.textView = [[UITextView alloc]initWithFrame:CGRectMake(0, 30, (self.massageView.bounds.size.width)-50, 70)];
self.textView.text = @&了解查看详情信息,请点击...&;
self.textView.textColor=[UIColor redColor];
self.textView.textAlignment = 1;
self.textView.userInteractionEnabled = NO;
[[self.massageViewArray objectAtIndex:button.tag] addSubview:self.textView];
//动画窗口
self.animationImageView = [[UIImageView alloc]initWithFrame:CGRectMake(self.massageView.bounds.size.width/2+50, 30, self.massageView.bounds.size.width/2-50, 70)];
[self.animationImageView setAnimationImages:self.array];
[self.animationImageView setAnimationDuration:10];
[animationImageView setAlpha:0.5];
[self.animationImageView setAnimationRepeatCount:0];
[self.animationImageView startAnimating];
[[self.massageViewArray objectAtIndex:button.tag] addSubview:self.animationImageView];
//位置调整 分上下 注意！！！！
//点击处上面的
if (button.tag == 0){
NSLog(@&asdasd&);
for (int i = 0; i & button. i++){
[[self.massageViewArray objectAtIndex:i] setFrame:CGRectMake(80, 0+i*50, 200, 30)];
[[self.massageViewArray objectAtIndex:i] setBackgroundColor:[UIColor clearColor]];
[[self.massageViewArray objectAtIndex:i] setUserInteractionEnabled:NO];
[[self.buttonArray objectAtIndex:i] setFrame:CGRectMake(46, 0+i*50, 30, 30)];
[[self.monthLabelArray objectAtIndex:i] setFrame:CGRectMake(5, 0+i*50, 40, 30)];
[[self.massageViewArray objectAtIndex:button.tag-1] setFrame:CGRectMake(80, (button.tag-1)*50, 200, 30)];
[[self.buttonArray objectAtIndex:button.tag-1] setFrame:CGRectMake(46, (button.tag-1)*50, 30, 30)];
[[self.monthLabelArray objectAtIndex:button.tag-1] setFrame:CGRectMake(5, (button.tag-1)*50, 40, 30)];
//点击处下面的
for (int i = (int)button.tag + 1; i & [self.massageViewArray count]; i++)
[[self.massageViewArray objectAtIndex:i] setFrame:CGRectMake(80, 200+i*50, 200, 30)];
[[self.massageViewArray objectAtIndex:i] setBackgroundColor:[UIColor clearColor]];
[[self.massageViewArray objectAtIndex:i] setUserInteractionEnabled:NO];
UIView *view = [self.massageViewArray objectAtIndex:i];
CABasicAnimation *positionAnim=[CABasicAnimation animationWithKeyPath:@&position&];
[positionAnim setFromValue:[NSValue valueWithCGPoint:CGPointMake(view.center.x, view.center.y-200)]];
[positionAnim setToValue:[NSValue valueWithCGPoint:CGPointMake(view.center.x, view.center.y)]];
[positionAnim setDelegate:self];
[positionAnim setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[positionAnim setDuration:0.5f];
[view.layer addAnimation:positionAnim forKey:@&positon&];
[view setCenter:CGPointMake(view.center.x, view.center.y)];
[[self.buttonArray objectAtIndex:i] setFrame:CGRectMake(46, 200+i*50, 30, 30)];
UIButton *button = [self.buttonArray objectAtIndex:i];
CABasicAnimation *positionAnim1=[CABasicAnimation animationWithKeyPath:@&position&];
[positionAnim1 setFromValue:[NSValue valueWithCGPoint:CGPointMake(button.center.x, button.center.y-200)]];
[positionAnim1 setToValue:[NSValue valueWithCGPoint:CGPointMake(button.center.x, button.center.y)]];
[positionAnim1 setDelegate:self];
[positionAnim1 setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[positionAnim1 setDuration:0.5f];
[button.layer addAnimation:positionAnim1 forKey:nil];
[button setCenter:CGPointMake(button.center.x, button.center.y)];
[[self.monthLabelArray objectAtIndex:i] setFrame:CGRectMake(5, 200+i*50, 40, 30)];
UILabel *label1 = [_monthLabelArray objectAtIndex:i];
CABasicAnimation *positionAnim2=[CABasicAnimation animationWithKeyPath:@&position&];
[positionAnim2 setFromValue:[NSValue valueWithCGPoint:CGPointMake(label1.center.x, label1.center.y-200)]];
[positionAnim2 setToValue:[NSValue valueWithCGPoint:CGPointMake(label1.center.x, label1.center.y)]];
[positionAnim2 setDelegate:self];
[positionAnim2 setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[positionAnim2 setDuration:0.5f];
[label1.layer addAnimation:positionAnim2 forKey:@&positon&];
[label1 setCenter:CGPointMake(label1.center.x, label1.center.y)];
* @brief 点击跳转下一个控制器
-(void)gotoNext
kkViewController *kk = [[kkViewController alloc]initWithNibName:nil bundle:nil];
kk.uTag = self.c;
[self.navigationController pushViewController:kk animated:YES];
好了,代码写完了,我们来看一下具体的效果
2)效果展示
好了,样式2的时间轴弄完了,我们来看看样式3的时间轴的实现.
03 StyleOne时间轴
1)自定义时间轴的视图实现
-(void)drawRect:(CGRect)rect{//重写drawRect方法 绘制图形
//绘制中间的竖线
CGContextRef ctf=UIGraphicsGetCurrentContext();
CGContextSetLineWidth(ctf, 1);
CGContextSetRGBStrokeColor(ctf, 0, 0, 0, 1);
CGPoint aPoints[2];
aPoints[0]=CGPointMake(WIDTH/2,SP_W(10));
aPoints[1]=CGPointMake(WIDTH/2, self.frame.size.height-SP_W(10));
CGContextAddLines(ctf, aPoints, 2);
CGContextDrawPath(ctf, kCGPathStroke);
//绘制最上面的原点
CGContextAddArc(ctf, aPoints[0].x,SP_W(4),SP_W(4), 0, 2*M_PI, 0);
CGContextSetRGBFillColor(ctf, 1, 1, 1, 1);
CGContextDrawPath(ctf, kCGPathFillStroke);
//绘制最下面的原点
CGContextAddArc(ctf, aPoints[0].x,self.frame.size.height-SP_W(5),SP_W(5), 0, 2*M_PI, 0);
CGContextSetRGBFillColor(ctf, 1, 1, 1, 1);
CGContextDrawPath(ctf, kCGPathFillStroke);
//绘制中线上的原点和链接线
for(int i=0;i&_msgModelArray.i++){
MsgModel * model=[_msgModelArray objectAtIndex:i];
//绘制中线上的链接线
CGPoint startP
CGPoint endP
if(i%2==0){
CGContextMoveToPoint(ctf, WIDTH/2, SP_W(60)+SP_W(60)*i);
CGContextAddLineToPoint(ctf, WIDTH/2-(WIDTH/2-SP_W(50)), SP_W(60)+SP_W(60)*i);
CGContextSetLineWidth(ctf, 1);
CGContextSetRGBStrokeColor(ctf, 0, 0, 0, 1);
CGContextDrawPath(ctf, kCGPathStroke);
startPoint.x=WIDTH/2;
startPoint.y=SP_W(60)+SP_W(60)*i;
endPoint.x=WIDTH/2-(WIDTH/2-SP_W(50));
endPoint.y=SP_W(60)+SP_W(60)*i;
//绘制末尾圆点后的图片
NSString * imageStr1=[NSString stringWithFormat:@&%02d&,i+1];
UIImageView * image=[[UIImageView alloc]initWithFrame:CGRectMake(endPoint.x-SP_W(20), endPoint.y-8, SP_W(15), SP_W(15))];
image.image=[UIImage imageNamed:imageStr1];
[self addSubview:image];
//绘制详细说明信息
if(![model.address isEqualToString:@&&]){
UIImageView * imageAdd=[[UIImageView alloc]initWithFrame:CGRectMake(endPoint.x-SP_W(20), endPoint.y+SP_W(20), SP_W(15), SP_W(15))];
imageAdd.image=[UIImage imageNamed:@&address&];
[self addSubview:imageAdd];
UILabel * addLab=[[UILabel alloc]initWithFrame:CGRectMake(CGRectGetMaxX(imageAdd.frame)+SP_W(5), endPoint.y+SP_W(20), WIDTH/2, SP_W(20))];
addLab.text=model.
[addLab sizeToFit];
[self addSubview:addLab];
if([model.address isEqualToString:@&&]&&![model.motive isEqualToString:@&&]){
UIImageView * imageMotive=[[UIImageView alloc]initWithFrame:CGRectMake(endPoint.x-SP_W(20), endPoint.y+SP_W(20), SP_W(15), SP_W(15))];
imageMotive.image=[UIImage imageNamed:@&book&];
[self addSubview:imageMotive];
UILabel * motiveLab=[[UILabel alloc]initWithFrame:CGRectMake(CGRectGetMaxX(imageMotive.frame)+SP_W(5), endPoint.y+SP_W(20), WIDTH/2, SP_W(20))];
motiveLab.text=model.
[motiveLab sizeToFit];
[self addSubview:motiveLab];
}else if(![model.address isEqualToString:@&&]){
UIImageView * imageMotive=[[UIImageView alloc]initWithFrame:CGRectMake(endPoint.x-SP_W(20), endPoint.y+SP_W(40), SP_W(15), SP_W(15))];
imageMotive.image=[UIImage imageNamed:@&book&];
[self addSubview:imageMotive];
UILabel * motiveLab=[[UILabel alloc]initWithFrame:CGRectMake(CGRectGetMaxX(imageMotive.frame)+SP_W(5), endPoint.y+SP_W(40), WIDTH/2, SP_W(20))];
motiveLab.text=model.
[motiveLab sizeToFit];
[self addSubview:motiveLab];
if([model.address isEqualToString:@&&]&&[model.motive isEqualToString:@&&]&&![model.date isEqualToString:@&&]){
UIImageView * imageDate=[[UIImageView alloc]initWithFrame:CGRectMake(endPoint.x-SP_W(20), endPoint.y+SP_W(20), SP_W(15), SP_W(15))];
imageDate.image=[UIImage imageNamed:@&date&];
[self addSubview:imageDate];
UILabel * dateLab=[[UILabel alloc]initWithFrame:CGRectMake(CGRectGetMaxX(imageDate.frame)+SP_W(5), endPoint.y+SP_W(20), WIDTH/2, SP_W(20))];
dateLab.text=model.
[dateLab sizeToFit];
[self addSubview:dateLab];
}else if (![model.address isEqualToString:@&&]&&[model.motive isEqualToString:@&&]&&![model.date isEqualToString:@&&]){
UIImageView * imageDate=[[UIImageView alloc]initWithFrame:CGRectMake(endPoint.x-SP_W(20), endPoint.y+SP_W(40), SP_W(15), SP_W(15))];
imageDate.image=[UIImage imageNamed:@&date&];
[self addSubview:imageDate];
UILabel * dateLab=[[UILabel alloc]initWithFrame:CGRectMake(CGRectGetMaxX(imageDate.frame)+SP_W(5), endPoint.y+SP_W(20), WIDTH/2, SP_W(40))];
dateLab.text=model.
[dateLab sizeToFit];
[self addSubview:dateLab];
}else if (![model.address isEqualToString:@&&]&&![model.motive isEqualToString:@&&]&&![model.date isEqualToString:@&&]){
UIImageView * imageDate=[[UIImageView alloc]initWithFrame:CGRectMake(endPoint.x-SP_W(20), endPoint.y+SP_W(60), SP_W(15), SP_W(15))];
imageDate.image=[UIImage imageNamed:@&date&];
[self addSubview:imageDate];
UILabel * dateLab=[[UILabel alloc]initWithFrame:CGRectMake(CGRectGetMaxX(imageDate.frame)+SP_W(5), endPoint.y+SP_W(60), WIDTH/2, SP_W(20))];
dateLab.text=model.
[dateLab sizeToFit];
dateLab.textColor=[UIColor grayColor];
dateLab.font=[UIFont systemFontOfSize:14];
[self addSubview:dateLab];
CGContextMoveToPoint(ctf, WIDTH/2, SP_W(60)+SP_W(60)*i);
CGContextAddLineToPoint(ctf, WIDTH/2+(WIDTH/2-SP_W(50)), SP_W(60)+SP_W(60)*i);
CGContextSetLineWidth(ctf, 1);
CGContextSetRGBStrokeColor(ctf, 0, 0, 0, 1);
CGContextDrawPath(ctf, kCGPathStroke);
startPoint.x=WIDTH/2;
startPoint.y=SP_W(60)+SP_W(60)*i;
endPoint.x=WIDTH/2+(WIDTH/2-SP_W(50));
endPoint.y=SP_W(60)+SP_W(60)*i;
//绘制末尾圆点后的图片
NSString * imageStr1=[NSString stringWithFormat:@&%02d&,i+1];
UIImageView * image=[[UIImageView alloc]initWithFrame:CGRectMake(endPoint.x+SP_W(5), endPoint.y-8, SP_W(15), SP_W(15))];
image.image=[UIImage imageNamed:imageStr1];
[self addSubview:image];
if(![model.address isEqualToString:@&&]){
UIImageView * imageAdd=[[UIImageView alloc]initWithFrame:CGRectMake(startPoint.x+SP_W(20), endPoint.y+SP_W(20), SP_W(15), SP_W(15))];
imageAdd.image=[UIImage imageNamed:@&address&];
[self addSubview:imageAdd];
UILabel * addLab=[[UILabel alloc]initWithFrame:CGRectMake(CGRectGetMaxX(imageAdd.frame)+SP_W(5), endPoint.y+SP_W(20), WIDTH/2, SP_W(20))];
addLab.text=model.
[addLab sizeToFit];
[self addSubview:addLab];
if([model.address isEqualToString:@&&]&&![model.motive isEqualToString:@&&]){
UIImageView * imageMotive=[[UIImageView alloc]initWithFrame:CGRectMake(startPoint.x+SP_W(20), endPoint.y+SP_W(20), SP_W(15), SP_W(15))];
imageMotive.image=[UIImage imageNamed:@&book&];
[self addSubview:imageMotive];
UILabel * motiveLab=[[UILabel alloc]initWithFrame:CGRectMake(CGRectGetMaxX(imageMotive.frame)+SP_W(5), endPoint.y+SP_W(20), WIDTH/2, SP_W(20))];
motiveLab.text=model.
[motiveLab sizeToFit];
[self addSubview:motiveLab];
}else if(![model.address isEqualToString:@&&]){
UIImageView * imageMotive=[[UIImageView alloc]initWithFrame:CGRectMake(startPoint.x+SP_W(20), endPoint.y+SP_W(40), SP_W(15), SP_W(15))];
imageMotive.image=[UIImage imageNamed:@&book&];
[self addSubview:imageMotive];
UILabel * motiveLab=[[UILabel alloc]initWithFrame:CGRectMake(CGRectGetMaxX(imageMotive.frame)+SP_W(5), endPoint.y+SP_W(40), WIDTH/2, SP_W(20))];
motiveLab.text=model.
[motiveLab sizeToFit];
[self addSubview:motiveLab];
if([model.address isEqualToString:@&&]&&[model.motive isEqualToString:@&&]&&![model.date isEqualToString:@&&]){
UIImageView * imageDate=[[UIImageView alloc]initWithFrame:CGRectMake(startPoint.x+SP_W(20), endPoint.y+SP_W(20), SP_W(15), SP_W(15))];
imageDate.image=[UIImage imageNamed:@&date&];
[self addSubview:imageDate];
UILabel * dateLab=[[UILabel alloc]initWithFrame:CGRectMake(CGRectGetMaxX(imageDate.frame)+SP_W(5), endPoint.y+SP_W(20), WIDTH/2, SP_W(20))];
dateLab.text=model.
[dateLab sizeToFit];
[self addSubview:dateLab];
}else if (![model.address isEqualToString:@&&]&&[model.motive isEqualToString:@&&]&&![model.date isEqualToString:@&&]){
UIImageView * imageDate=[[UIImageView alloc]initWithFrame:CGRectMake(startPoint.x+SP_W(20), endPoint.y+SP_W(40), SP_W(15), SP_W(15))];
imageDate.image=[UIImage imageNamed:@&date&];
[self addSubview:imageDate];
UILabel * dateLab=[[UILabel alloc]initWithFrame:CGRectMake(CGRectGetMaxX(imageDate.frame)+SP_W(5), endPoint.y+SP_W(20), WIDTH/2, SP_W(40))];
dateLab.text=model.
[dateLab sizeToFit];
[self addSubview:dateLab];
}else if (![model.address isEqualToString:@&&]&&![model.motive isEqualToString:@&&]&&![model.date isEqualToString:@&&]){
UIImageView * imageDate=[[UIImageView alloc]initWithFrame:CGRectMake(startPoint.x+SP_W(20), endPoint.y+SP_W(60), SP_W(15), SP_W(15))];
imageDate.image=[UIImage imageNamed:@&date&];
[self addSubview:imageDate];
UILabel * dateLab=[[UILabel alloc]initWithFrame:CGRectMake(CGRectGetMaxX(imageDate.frame)+SP_W(5), endPoint.y+SP_W(60), WIDTH/2, SP_W(20))];
dateLab.text=model.
[dateLab sizeToFit];
dateLab.textColor=[UIColor grayColor];
dateLab.font=[UIFont systemFontOfSize:14];
[self addSubview:dateLab];
//绘制末尾的圆点
CGContextAddArc(ctf, endPoint.x, endPoint.y, SP_W(2), 0, 2*M_PI, 0);
CGContextSetFillColorWithColor(ctf,model.color.CGColor);
CGContextDrawPath(ctf, kCGPathFill);
//绘制中线上的原点
CGContextAddArc(ctf, WIDTH/2, SP_W(60)+SP_W(60)*i, SP_W(4), 0, 2*M_PI, 0);
CGContextSetRGBFillColor(ctf, 1, 1, 1, 1);
CGContextDrawPath(ctf, kCGPathFillStroke);
//绘制中线上的原点内的小圆点
CGContextAddArc(ctf, WIDTH/2, SP_W(60)+SP_W(60)*i, SP_W(3), 0, 2*M_PI, 0);
UIColor * color=[_colorArray objectAtIndex:i];
CGContextSetFillColorWithColor(ctf,color.CGColor);
CGContextDrawPath(ctf, kCGPathFill);
-(instancetype)initWithFrame:(CGRect)frame{
self=[super initWithFrame:frame];
self.backgroundColor=[UIColor clearColor];
_colorArray=[NSArray arrayWithObjects:[UIColor colorWithPatternImage:[UIImage imageNamed:@&圆线01&]], [UIColor colorWithPatternImage:[UIImage imageNamed:@&圆线02&]], [UIColor colorWithPatternImage:[UIImage imageNamed:@&圆线03&]], [UIColor colorWithPatternImage:[UIImage imageNamed:@&圆线04&]], [UIColor colorWithPatternImage:[UIImage imageNamed:@&圆线05&]], [UIColor colorWithPatternImage:[UIImage imageNamed:@&圆线01&]], [UIColor colorWithPatternImage:[UIImage imageNamed:@&圆线02&]], [UIColor colorWithPatternImage:[UIImage imageNamed:@&圆线03&]], [UIColor colorWithPatternImage:[UIImage imageNamed:@&圆线04&]], [UIColor colorWithPatternImage:[UIImage imageNamed:@&圆线05&]], [UIColor colorWithPatternImage:[UIImage imageNamed:@&圆线01&]], [UIColor colorWithPatternImage:[UIImage imageNamed:@&圆线02&]], nil];
2)方法调用
StyleThreeViewController.m
- (void)viewDidLoad {
[super viewDidLoad];
[self initData];
-(void)initData{
//设置时间格式
NSDateFormatter* dateFormat = [[NSDateFormatter alloc] init];//实例化一个NSDateFormatter对象
[dateFormat setDateFormat:@&yyyy-MM-dd HH:mm&];//设定时间格式,这里可以设置成自己需要的格式
NSString *dataString = [dateFormat stringFromDate:[NSDate date]];
myView=[[MyView alloc]init];
MsgModel * model=[[MsgModel alloc]init];
model.address=@&蓝鸥科技&;
model.motive=@&蓝鸥广州中心&;
model.date=dataS
model.color=[UIColor redColor];
myView.msgModelArray=@[model,model,model,model,model,model,model,model,model,model,model,model];
-(void)viewWillAppear:(BOOL)animated{
scrollView=[[UIScrollView alloc]initWithFrame:CGRectMake(0, -70, WIDTH, HEIGHT)];
scrollView.backgroundColor=RGBACOLOR(240, 240, 240, 1);
dataPiker=[[UIView alloc]initWithFrame:CGRectMake(0, 0, WIDTH, SP_W(60))];
myView.frame=CGRectMake(0,SP_W(65), WIDTH, SP_W(60)*myView.msgModelArray.count+65);
scrollView.contentSize=CGSizeMake(0, SP_W(60)*(myView.msgModelArray.count+2)+SP_W(30));
[scrollView addSubview:dataPiker];
[scrollView addSubview:myView];
[self.view addSubview:scrollView];
最后我们来看看效果展示.
3)效果展示
现在来总结一下,其实设置时间轴是非常简单的,用的知识也是在我们熟知范围之内的,例如:绘图,自定义cell等.
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'