时间轴的制作

//取出的每个模型
 GTimeLineViewModel *timeLimeM = dataArray[i];
 //设置内容      
 NSString *content = timeLimeM.text;
//计算高度，注意这里的宽度很关键，将会控制你文字设置的高度，options设置为：NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading

 CGSize size = [content boundingRectWithSize:CGSizeMake(200, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:14]} context:nil].size;

- (CGFloat)iyToDataArray:(NSArray <GTimeLineViewModel *> *)dataArray toIndex:(NSInteger)index{
    CGFloat iy = 0;
    GTimeLineViewModel *viewModel;
    if (index > 0) {
        CGFloat contentH = 0;

//计算下一个圆圈，关键点就在这里，当i=1公式为上一个的圆圈+上一个时间轴的高度,当i //== 2时公式为：
//(i- 1)+(i - 2)内容的高度，当i == 3时公式为：
//(i- 1)+(i - 2)+(i-3)内容的高度等等。
        for (NSInteger i = index; i > 0; i--) {
             viewModel= [dataArray objectAtIndex:(i-1)];
            NSString *content = viewModel.text;
            CGSize size = [content boundingRectWithSize:CGSizeMake(200, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[self FontSizeHeight:14]} context:nil].size;
            contentH = contentH+size.height;
        }
//        CGFloat textH = [self compareHeigth:contentH];
        iy = index * (KTIMELINEAUX_WH_CIRCLE+ 2*[_ktimeLineAux kTimeLineAuxScaleHeight:KTIMELINEAUX_HGAP_CIRCLE_IMAGE]+KTIMELINEAUX_WGAP_LEFT)+contentH;
    }else{//为0时，y值 就是0
        viewModel = dataArray[index];
        NSString *content = viewModel.text;
        CGSize size = [content boundingRectWithSize:CGSizeMake(200, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[self FontSizeHeight:14]} context:nil].size;
        iy = index * (KTIMELINEAUX_WH_CIRCLE+size.height+ 2*[_ktimeLineAux kTimeLineAuxScaleHeight:KTIMELINEAUX_HGAP_CIRCLE_IMAGE]+KTIMELINEAUX_WGAP_LEFT);
    }
    return iy;
}

#define  TIME_SCERRN_WIDTH [UIScreen mainScreen].bounds.size.width
#define  TIME_SCERRN_HEIGHT [UIScreen mainScreen].bounds.size.height
#import "GTimeLineView.h"
#import "GTimeLineViewModel.h"
#import "KTimeLineAux.h"
#import "UIImage+Custom.h"
@interface GTimeLineView(){

    UILabel *_circleL; //圆圈
    UILabel *_lineL;   //竖线
    UILabel *_twoCircleL; //圆圈2
    UILabel *_timeL;  //时间label
    UIImageView *_conentImageV; //存储label文字
    UILabel *_conentL;  //label文字
    KTimeLineAux *_ktimeLineAux;
    
}
@end
@implementation GTimeLineView


- (void)timeLineViewWithFrame:(CGRect)frame reloadDataWithArray:(NSArray<GTimeLineViewModel *> *)dataArray{

    if (dataArray && dataArray.count > 0) {
        [self loadUI:frame];
        for (NSInteger i = 0; i < dataArray.count; i++) {
            id sub = dataArray[i];
            if (![sub isKindOfClass:[GTimeLineViewModel class]]) {
                return;
            }
            GTimeLineViewModel *timeLimeM = dataArray[i];
       
            NSString *content = timeLimeM.text;
            if (!content.length) {
                return;
            }
            CGFloat imageW = [self getImageViewWidth];
            
            CGSize size = [content boundingRectWithSize:CGSizeMake(200, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:14]} context:nil].size;
            //线的高度
            CGFloat lineHeight = 2*[_ktimeLineAux kTimeLineAuxScaleHeight:KTIMELINEAUX_HGAP_CIRCLE_IMAGE]+size.height+KTIMELINEAUX_WGAP_LEFT;
            
            CGFloat circleY = [self iyToDataArray:dataArray toIndex:i];
        
            
            [self setFrame:frame];
            //one circle
            _circleL = [[UILabel alloc] initWithFrame:CGRectMake(frame.origin.x,circleY,KTIMELINEAUX_WH_CIRCLE, KTIMELINEAUX_WH_CIRCLE)];
            [self setCornerRadiusWithLabel:_circleL];
            _circleL.layer.borderColor = [self sixtyTwoColor].CGColor;
            _circleL.layer.borderWidth = 2;
           
            //line
           
            _lineL = [[UILabel alloc] initWithFrame:CGRectMake(_circleL.center.x-KTIMELINEAUX_WIDTH_LINE/2,CGRectGetMaxY(_circleL.frame),KTIMELINEAUX_WIDTH_LINE,lineHeight)];
            [_lineL setBackgroundColor:[self sixtyTwoColor]];
            
            
            //time
            _timeL = [[UILabel alloc] initWithFrame:CGRectMake(CGRectGetMaxX(_circleL.frame)+[_ktimeLineAux kTimeLineAuxScaleWidth:KTIMELINEAUX_WGAP_CIRCLE_TIME],CGRectGetMinY(_circleL.frame)-2,KTIMELINEAUX_WIDTH_TIME_LABEL,KTIMELINEAUX_HEIGHT_TIME_LABEL)];
            [_timeL setTextColor:[self sixtyTwoColor]];
            _timeL.text = timeLimeM.time;
            [_timeL setFont:[self FontSizeHeight:16]];
            _timeL.textAlignment = NSTextAlignmentLeft;
            
            //image
            
            _conentImageV = [[UIImageView alloc] initWithFrame:CGRectMake([_ktimeLineAux kTimeLineAuxScaleWidth:KTIMELINEAUX_WGAP_IMAGE_LEFT],CGRectGetMaxY(_circleL.frame)+[_ktimeLineAux kTimeLineAuxScaleHeight:KTIMELINEAUX_HGAP_CIRCLE_IMAGE],imageW,size.height+10)];
            _conentImageV.image = [UIImage resizeableImageWithName:@"timeImage"];
            
            _conentL = [[UILabel alloc] initWithFrame:CGRectMake(KTIMELINEAUX_WGAP_LEFT, KTIMELINEAUX_WGAP_LEFT,CGRectGetWidth(_conentImageV.frame)-2*KTIMELINEAUX_WGAP_LEFT, size.height)];
            _conentL.numberOfLines = 0;
            _conentL.lineBreakMode = NSLineBreakByCharWrapping;
            _conentL.text = content;
            [_conentL setTextColor:[self fivtyOneColor]];
            [_conentImageV addSubview:_conentL];
       
            
            if (i == dataArray.count -1) {
                _twoCircleL = [[UILabel alloc] initWithFrame:CGRectMake(frame.origin.x,CGRectGetMaxY(_lineL.frame),KTIMELINEAUX_WH_CIRCLE, KTIMELINEAUX_WH_CIRCLE)];
                [self setCornerRadiusWithLabel:_twoCircleL];
                _twoCircleL.layer.borderColor = [self sixtyTwoColor].CGColor;
                _twoCircleL.layer.borderWidth = 2;
                [_twoCircleL setBackgroundColor:[UIColor clearColor]];
                
                //change Frame
                CGRect selfF = self.frame;
                selfF.size.height = CGRectGetMaxY(_twoCircleL.frame)+10;
                self.frame = selfF;
                
//                [self setContentSize:CGSizeMake(frame.size.width,3000)];
            }
//            [_scrollView addSubview:self];
            [self addSubview:_circleL];
            [self addSubview:_lineL];
            [self addSubview:_twoCircleL];
            [self addSubview:_timeL];
            [self addSubview:_conentImageV];
            [self addSubview:_twoCircleL];
            NSLog(@"\n_circleL= %@\n_lineL =%@\n_timeL=%@\n_conentImageV=%@\n_twoCircleL=%@\nself=%@\n",_circleL,_lineL,_timeL,_conentImageV,_twoCircleL,self);
            
        }
    }

}
#pragma mark --- loadUI
- (void)loadUI:(CGRect)frame{
    _ktimeLineAux = [KTimeLineAux shareTimeLineAux];
    
    CGFloat iy = 0;
    if (frame.size.height <TIME_SCERRN_HEIGHT) {
        iy = TIME_SCERRN_HEIGHT;
    }else{
        iy = frame.size.height;
    }
}
#pragma mark --- font
- (UIFont*)FontSizeHeight:(CGFloat)height{
    
    return [UIFont systemFontOfSize:height];
}
#pragma mark --- Radius
- (void)setCornerRadiusWithLabel:(UILabel *)label{
    label.layer.cornerRadius  = KTIMELINEAUX_WH_CIRCLE/2;
    label.layer.masksToBounds = YES;
}
#pragma mark --- color
- (UIColor *)fivtyOneColor{
    return [self colorWithR:51 G:51 B:51];
}
- (UIColor *)sixtyTwoColor{
    
    return [self colorWithR:62 G:147 B:75];
}
- (UIColor *)colorWithR:(CGFloat)r G:(CGFloat)g B:(CGFloat)b{
    
    return [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:1.0];
}

//_circly iy
- (CGFloat)iyToDataArray:(NSArray <GTimeLineViewModel *> *)dataArray toIndex:(NSInteger)index{
    CGFloat iy = 0;
    GTimeLineViewModel *viewModel;
    if (index > 0) {
        CGFloat contentH = 0;
        for (NSInteger i = index; i > 0; i--) {
             viewModel= [dataArray objectAtIndex:(i-1)];
            NSString *content = viewModel.text;
            CGSize size = [content boundingRectWithSize:CGSizeMake(200, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[self FontSizeHeight:14]} context:nil].size;
            contentH = contentH+size.height;
        }
//        CGFloat textH = [self compareHeigth:contentH];
        iy = index * (KTIMELINEAUX_WH_CIRCLE+ 2*[_ktimeLineAux kTimeLineAuxScaleHeight:KTIMELINEAUX_HGAP_CIRCLE_IMAGE]+KTIMELINEAUX_WGAP_LEFT)+contentH;
    }else{
        viewModel = dataArray[index];
        NSString *content = viewModel.text;
        CGSize size = [content boundingRectWithSize:CGSizeMake(200, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[self FontSizeHeight:14]} context:nil].size;
        iy = index * (KTIMELINEAUX_WH_CIRCLE+size.height+ 2*[_ktimeLineAux kTimeLineAuxScaleHeight:KTIMELINEAUX_HGAP_CIRCLE_IMAGE]+KTIMELINEAUX_WGAP_LEFT);
    }
    
    
    return iy;
}
- (CGFloat)getImageViewWidth{
    
   return (TIME_SCERRN_WIDTH - [_ktimeLineAux kTimeLineAuxScaleWidth:KTIMELINEAUX_WGAP_IMAGE_LEFT] - 2*KTIMELINEAUX_WGAP_RIGHT);
}
- (CGFloat)compareHeigth:(CGFloat)height{
    
    CGFloat h = 30;
    if (h > height)
        return h;
    else
       return  height;
}
@end

+ (UIImage *)resizeableImageWithName:(NSString *)name{
    
    UIImage *image = [UIImage imageNamed:name];
    NSInteger leftCapWidth = image.size.width *0.7;
    NSInteger topCapHeight = image.size.height *0.5;
    CGFloat left = 5;
    CGFloat right = 10;
    CGFloat top = 10;
    CGFloat bottom = 10;
    UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right);
    
    return [image resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeStretch];
//    return [image stretchableImageWithLeftCapWidth:leftCapWidth topCapHeight:topCapHeight];
}

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
@interface KTimeLineAux : NSObject



extern const NSInteger KTIMELINEAUX_WIDTH_TIME_LABEL;          //时间的宽度
extern const NSInteger KTIMELINEAUX_WIDTH_LINE;          //线的宽度
extern const NSInteger KTIMELINEAUX_WH_CIRCLE;           //圆圈的大小

extern const NSInteger KTIMELINEAUX_HEIGHT_TIME_LABEL;   //时间的高度

extern const NSInteger KTIMELINEAUX_WGAP_LEFT;          //视图左边间距
extern const NSInteger KTIMELINEAUX_WGAP_RIGHT;         //视图右边间距
extern const NSInteger KTIMELINEAUX_HGAP_CIRCLE_IMAGE;  //圆圈与存储文字的视图的上下间距


extern const NSInteger KTIMELINEAUX_WGAP_CIRCLE_TIME;    //圆圈与时间label的间距
extern const NSInteger KTIMELINEAUX_WGAP_LINE_IMAGE;     //线与存储文字视图的左右间距
extern const NSInteger KTIMELINEAUX_WGAP_IMAGE_LEFT;    //存储文字视图左边间距
extern const NSInteger KTIMELINEAUX_WGAP_IMAGE_RIGHT;   //存储文字视图右边间距


+ (KTimeLineAux *)shareTimeLineAux;

/**按比例获取高度*/
- (CGFloat)kTimeLineAuxScaleHeight:(CGFloat)height;
/**按比例获取宽度*/
- (CGFloat)kTimeLineAuxScaleWidth:(CGFloat)width;
@end

#define SCREEN_WIDTH ([[UIScreen mainScreen]bounds].size.width)
#define SCREEN_HEIGHT ([[UIScreen mainScreen]bounds].size.height)
#define SCREEN_WIDTH_SCALE SCREEN_WIDTH/375
#define SCREEN_HEIGHT_SCALE SCREEN_HEIGHT/667
#define SCREEN_DEFAULT_HEIGHT 667
#import "KTimeLineAux.h"

@implementation KTimeLineAux
NSInteger const KTIMELINEAUX_WIDTH_TIME_LABEL = 100;
NSInteger const KTIMELINEAUX_HEIGHT_TIME_LABEL = 20;

NSInteger const KTIMELINEAUX_WIDTH_LINE = 2;
NSInteger const KTIMELINEAUX_WH_CIRCLE = 8;

NSInteger const KTIMELINEAUX_HGAP_CIRCLE_IMAGE = 17;
NSInteger const KTIMELINEAUX_WGAP_LEFT = 10;
NSInteger const KTIMELINEAUX_WGAP_RIGHT = 10;
NSInteger const KTIMELINEAUX_WGAP_CIRCLE_TIME = 19;
NSInteger const KTIMELINEAUX_WGAP_IMAGE_LEFT = 33;
NSInteger const KTIMELINEAUX_WGAP_IMAGE_RIGHT = 10;


+ (KTimeLineAux *)shareTimeLineAux{

    static KTimeLineAux *timeLine = nil;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        timeLine = [[KTimeLineAux alloc] init];
    });
    return timeLine;
}
- (CGFloat)kTimeLineAuxScaleHeight:(CGFloat)height{
    if (height<=0) {
        return 0;
    }
    CGFloat scaleH = height*SCREEN_HEIGHT_SCALE;
    return scaleH;
}
- (CGFloat)kTimeLineAuxScaleWidth:(CGFloat)width{

    if (width <= 0) {
        return 0;
    }
    CGFloat scaleW = width*SCREEN_WIDTH_SCALE;
    return scaleW;
}
@end