iOS時(shí)間軸展示實(shí)現(xiàn)

大家先看一下其顯示效果


時(shí)間軸展示效果

看起來(lái)雖丑，但那不是重點(diǎn)。以上只是一個(gè)簡(jiǎn)單的例子，其實(shí)現(xiàn)起來(lái)方法很多，我列舉出了其中能實(shí)現(xiàn)其效果的兩種實(shí)現(xiàn)方式。

第一種：借助UITableView自定義UITableViewCell####

我們大致觀(guān)察時(shí)間軸的UI效果，雖然顯示內(nèi)容不同，但樣式還是有規(guī)律可循的。
首先，我們自定義LGJTimeLineCell 繼承UITableViewCell

LGJTimeLineCell.png

其具體實(shí)現(xiàn)代碼如下：
LGJTimeLineCell.h

#import <UIKit/UIKit.h>
@class LGJTimeLineModel;
@interface LGJTimeLineCell : UITableViewCell

@property(nonatomic,copy)NSString *numberStr;

@property(nonatomic,strong)LGJTimeLineModel *model;

-(void)setUITopViewShow:(BOOL)topLineShow bottomViewShow:(BOOL)bottomLineShow;

@end

LGJTimeLineCell.m

#import "LGJTimeLineCell.h"
#import "LGJTimeLineModel.h"
@interface LGJTimeLineCell ()

@property (weak, nonatomic) IBOutlet UIView *topLine;
@property (weak, nonatomic) IBOutlet UIButton *circleButton;
@property (weak, nonatomic) IBOutlet UIView *bottomLine;
@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
@property (weak, nonatomic) IBOutlet UILabel *contentLabel;

@end
@implementation LGJTimeLineCell
- (void)awakeFromNib {
    [super awakeFromNib];
    self.circleButton.layer.cornerRadius = 15.0f;
    self.circleButton.layer.masksToBounds = YES;
}
-(void)setUITopViewShow:(BOOL)topLineShow bottomViewShow:(BOOL)bottomLineShow{
    self.topLine.hidden = topLineShow ? YES : NO;
    self.bottomLine.hidden = bottomLineShow ? YES : NO;
}
-(void)setNumberStr:(NSString *)numberStr{
    [self.circleButton setTitle:numberStr forState:UIControlStateNormal];
}
-(void)setModel:(LGJTimeLineModel *)model{
    self.titleLabel.text = model.title;
    self.contentLabel.text = model.content;
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];
    // Configure the view for the selected state
}
@end

創(chuàng)建展示模型類(lèi)

#import <Foundation/Foundation.h>
@interface LGJTimeLineModel : NSObject
@property(nonatomic,copy)NSString *title;
@property(nonatomic,copy)NSString *content;
@end

接下來(lái)借助tableView的展示，并實(shí)現(xiàn)其數(shù)據(jù)源和代理方法

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return [self.dataSourse count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    LGJTimeLineModel *model = self.dataSourse[indexPath.row];
    LGJTimeLineCell *cell = [tableView dequeueReusableCellWithIdentifier:@"LGJTimeLineCell"];
    if (cell == nil) {
        cell = [[[NSBundle mainBundle]loadNibNamed:@"LGJTimeLineCell" owner:nil options:nil]lastObject];
    }
    cell.model = model;
    [cell setUITopViewShow:NO bottomViewShow:NO];
    if (indexPath.row == 0) {
        [cell setUITopViewShow:NO bottomViewShow:YES];
    }
    if (indexPath.row == [self.dataSourse count] - 1) {
        [cell setUITopViewShow:YES bottomViewShow:NO];
    }
    cell.numberStr = [NSString stringWithFormat:@"%ld",indexPath.row + 1];
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{

    LGJTimeLineModel *model = self.dataSourse[indexPath.row];
    CGFloat title_Height = [self returnHeightWithString:model.title font:[UIFont systemFontOfSize:15]];
    CGFloat content_Height = [self returnHeightWithString:model.content font:[UIFont systemFontOfSize:13]];
    return title_Height + content_Height + 60;
}
-(CGFloat)returnHeightWithString:(NSString *)str font:(UIFont *)font{
    return [str boundingRectWithSize:CGSizeMake(self.view.frame.size.width - 70, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:font} context:nil].size.height;
}

第二種：借助UIScollView的滾動(dòng)特性添加子視圖完成####

首先自定義LGJTimelineView類(lèi)
LGJTimelineView.h

#import <UIKit/UIKit.h>
@class LGJTimelineView;

@protocol LGJTimelineViewDelegate <NSObject>

- (void)clickedViewWithTimelineView:(LGJTimelineView *)timelineView sender:(UIButton *)sender;


@end

@interface LGJTimelineView : UIView

@property(nonatomic,weak)id<LGJTimelineViewDelegate> delegate;

-(void)setContentWithTitleArray:(NSArray *)titleArray contentArray:(NSArray *)contentArray scollView:(UIScrollView *)scollView titleFont:(UIFont *)titleFont contentFont:(UIFont *)contentFont;
@end

LGJTimelineView.m

#import "LGJTimelineView.h"

#define kColor(hex) [UIColor colorWithRed:((CGFloat)((hex & 0xFF0000) >> 16)) / 255.0 green:((CGFloat)((hex & 0xFF00) >> 8)) / 255.0 blue:((CGFloat)(hex & 0xFF)) / 255.0 alpha:1]

// 起始位置的Y
#define Start_Position_Y  0
// 起始位置的X
#define Start_Position_X  15
// 直徑
#define Round_Directly  23
// 連接的線(xiàn)長(zhǎng)
#define Line_Length  88



@implementation LGJTimelineView

-(void)setContentWithTitleArray:(NSArray *)titleArray contentArray:(NSArray *)contentArray scollView:(UIScrollView *)scollView titleFont:(UIFont *)titleFont contentFont:(UIFont *)contentFont{
    CGFloat content_H = 0;
    CGFloat view_H = 0;
    for (NSInteger i = 0; i < [titleArray count]; i++) {
        
        CGFloat content_Width = self.frame.size.width - Round_Directly -Start_Position_X * 3;
        CGFloat content_Height = [self calculteTheSizeWithContent:contentArray[i] rect:CGSizeMake(content_Width, MAXFLOAT) font:[UIFont systemFontOfSize:14]].height;

        CGFloat labelH = content_Height + Round_Directly;
        content_H += labelH ;
        view_H += content_Height;
        CGFloat contentY = Start_Position_Y + content_H - labelH + ( Round_Directly) * (i+1);
        
        // 階段
        UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(Start_Position_X, contentY, Round_Directly, Round_Directly)];
        btn.layer.cornerRadius = Round_Directly * 0.5;
        btn.layer.masksToBounds = YES;
        btn.layer.borderColor = kColor(0x358fd7).CGColor;
        btn.layer.borderWidth = 1;
        [btn setTitle:[NSString stringWithFormat:@"%ld", i + 1] forState:UIControlStateNormal];
        [btn setTitleColor:kColor(0x358fd7) forState:UIControlStateNormal];
        btn.tag = i + 1;
        [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:btn];
        
        // 標(biāo)題
        UILabel *titleLable = [self lableWithFrame:CGRectMake(CGRectGetMaxX(btn.frame) + 15, CGRectGetMidY(btn.frame) - Round_Directly*0.5,content_Width , Round_Directly) text:titleArray[i] textColor:kColor(0x358fd7) font:19];
        titleLable.numberOfLines = 0;
        [self addSubview:titleLable];
        
        // 內(nèi)容
        UILabel *contentlable = [self lableWithFrame:CGRectMake(CGRectGetMinX(titleLable.frame), CGRectGetMaxY(titleLable.frame) + Round_Directly * 0.5, titleLable.frame.size.width, content_Height) text:contentArray[i] textColor:kColor(0x666666) font:14];
        contentlable.numberOfLines = 0;
        [self addSubview:contentlable];
        
        // 連接線(xiàn)
        if (i < contentArray.count - 1) {
            
            UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(Start_Position_X + Round_Directly * 0.5 - 0.5,CGRectGetMaxY(titleLable.frame) , 1, labelH)];
            lineView.backgroundColor = kColor(0x358fd7);
            [self addSubview:lineView];
        }
    }
    CGFloat H = Start_Position_Y + view_H + Round_Directly * titleArray.count * 2 + Round_Directly * 0.5;
    scollView.contentSize = CGSizeMake(self.frame.size.width, H);
}
- (UILabel *)lableWithFrame:(CGRect)frame text:(NSString *)text textColor:(UIColor *)textColor font:(NSInteger)font {
    
    UILabel *label = [[UILabel alloc] initWithFrame:frame];
    label.text = text;
    label.textColor = textColor;
    label.font = [UIFont systemFontOfSize:font];
    label.textAlignment = NSTextAlignmentLeft;
    return label;
}
- (CGSize)calculteTheSizeWithContent:(NSString*)content rect:(CGSize)rect font:(UIFont*)font {
    
    NSDictionary *attribute = @{NSFontAttributeName: font};
    
    CGSize size = [content  boundingRectWithSize:rect                                        options:
                   NSStringDrawingTruncatesLastVisibleLine |
                   NSStringDrawingUsesLineFragmentOrigin |
                   NSStringDrawingUsesFontLeading
                                      attributes:attribute
                                         context:nil].size;
    return size;
}
- (void)btnClick: (UIButton *)sender {
    
    if ([self.delegate respondsToSelector:@selector(clickedViewWithTimelineView:sender:)]) {
        [self.delegate clickedViewWithTimelineView:self sender:sender];
    }
}

其使用也是非常簡(jiǎn)單，在我們需要的地方直接調(diào)用，至于UI丑美，這個(gè)根絕個(gè)人情況來(lái)：

    LGJTimelineView *timeLineView = [[LGJTimelineView alloc] initWithFrame:self.view.bounds];
    [timeLineView setContentWithTitleArray:self.titleArray contentArray:self.contentArray scollView:scrollView titleFont:[UIFont systemFontOfSize:15] contentFont:[UIFont systemFontOfSize:13]];
    timeLineView.delegate = self;
    [scrollView addSubview:timeLineView];
  
}
- (void)clickedViewWithTimelineView:(LGJTimelineView *)timelineView sender:(UIButton *)sender{
    NSLog(@"%ld",sender.tag);
}

其實(shí)現(xiàn)效果如下：


第二種
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀(guān)點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,777評(píng)論 25贊 709
  • 麗江古鎮(zhèn)的夜色很撩人，古老的建筑風(fēng)格完美融入了靈魂的年輕，相較于湖南的鳳凰古鎮(zhèn)整體來(lái)說(shuō)應(yīng)該更精致一些，同時(shí)，相較于...
    吾先生ING閱讀 171評(píng)論 0贊 0
  • 我大學(xué)畢業(yè)后直接參加了工作，我最好的朋友小雨去讀了研究生。 工作的人大概會(huì)明白那種感覺(jué)，就是，你與上學(xué)的人之間，越...
    只愿伊芙閱讀 1,687評(píng)論 1贊 9
  • 心智決定視野，視野決定格局，格局決定命運(yùn)，命運(yùn)決定未來(lái)。今天聽(tīng)了西南大學(xué)附中張萬(wàn)國(guó)老師的講座，讓我開(kāi)闊了視野，提高...
    張超_c79b閱讀 405評(píng)論 0贊 3

友情鏈接更多精彩內(nèi)容