模仿36氪首页效果

效果图(ps:没有效果图,怎么看的下去)

FQ_ScrollerVC.gif

前言:其实是因为看到新浪微博的效果以后就写了.刚好36氪也有这个效果^-.

介绍:这还是一个可以直接使用的基类控制器

 -------------------下划线三种样式----------------------
   typedef enum : NSInteger{
    BottomLineTypeNone, //无下划线
    BottomLineTypeDefault = 0, //默认
    BottomLineTypeScaling, //拉伸
    }BottomLineType;

主要三个类:

1.配置类:FQ_MineScrollerModel.控制器所需的初始化数据.

 //标题数组
 @property (strong, nonatomic) NSArray *titlesArr;

 //子控制器数组
 @property (strong, nonatomic) NSArray *childVCArr;

 //下划线样式.默认:BottomLineTypeDefault
 @property (assign, nonatomic) BottomLineType lineType;

 //titleView默认颜色
 @property (strong, nonatomic) UIColor *defaultColor;

 //titleView选中颜色
 @property (strong, nonatomic) UIColor *selectColor;

 //普通下滑线的颜色
 @property (strong, nonatomic) UIColor *lineColor;

 //下滑线使用Scaling拉伸样式.渐变颜色.CGColor.或者UIColor对象.不设置则使用随机色
 @property (strong, nonatomic) NSArray *line_Scaling_colors;

 //使用拉伸时可设置线长.默认为0.随文字长度变化!一旦设置所有下划线长度均固定
 @property (assign, nonatomic) CGFloat lineLength;

2.下划线拉伸控件类:FQ_LineColorView.使用layer的mask实现!不断更新路径CGPath属性即可!
核心代码如下:

/**
初始化控件

@param startPoint 起始中心点
@param startLegth 起始线长
 */
-(void)setupStartPoint:(CGPoint)startPoint startLength:(CGFloat)startLegth
{
   CAGradientLayer * leftColor = [CAGradientLayer layer];

leftColor.frame = CGRectMake(0, 0, ScreenW, M_ScreenH);
leftColor.startPoint = CGPointMake(0,1);
leftColor.endPoint = CGPointMake(1,1);
self.leftColor = leftColor;

[self.layer addSublayer:leftColor];

UIBezierPath *path = [UIBezierPath bezierPath];
[self.path moveToPoint:CGPointMake(startPoint.x - startLegth *0.5, M_ScreenH * 0.5)];
[self.path addLineToPoint:CGPointMake(startPoint.x + startLegth * 0.5,M_ScreenH * 0.5)];
self.path = path;

CAShapeLayer * lineLayer = [CAShapeLayer layer];
lineLayer.frame = CGRectMake(0,0, M_ScreenW, M_ScreenH);
lineLayer.lineWidth = 10.0f;
lineLayer.path = path.CGPath;
lineLayer.lineCap = kCALineCapRound;
self.lineLayer = lineLayer;
self.layer.mask = lineLayer;
lineLayer.fillColor = [UIColor clearColor].CGColor; // 填充色为透明（不设置为黑色）
lineLayer.strokeColor = [UIColor blackColor].CGColor; // 随便设置一个边框颜色

}

3.基类控制器:FQ_MineScrollerVC.传入配置FQ_MineScrollerModel即可:

 @property (strong, nonatomic) FQ_MineScrollerModel *scrollerModel;

使用:

1.控制器继承自FQ_MineScrollerVC

#import "FQ_MineScrollerVC.h"

@interface ViewController : FQ_MineScrollerVC

@end

2.属性设置:titlesArr 和 childVCArr 为必须设置项.其他均有默认值

- (void)viewDidLoad {
[super viewDidLoad];
self.title = @"首页";

FQ_MineScrollerModel * scrollerModel = [[FQ_MineScrollerModel alloc]init];

TestViewController * testVC1 = [[TestViewController alloc]init];
testVC1.view.backgroundColor = [UIColor orangeColor];

TestViewController * testVC2 = [[TestViewController alloc]init];
testVC2.view.backgroundColor = [UIColor whiteColor];

TestViewController * testVC3 = [[TestViewController alloc]init];
testVC3.view.backgroundColor = [UIColor redColor];

TestViewController * testVC4 = [[TestViewController alloc]init];
testVC4.view.backgroundColor = [UIColor blueColor];

TestViewController * testVC5 = [[TestViewController alloc]init];
testVC5.view.backgroundColor = [UIColor grayColor];

TestViewController * testVC6 = [[TestViewController alloc]init];
testVC6.view.backgroundColor = [UIColor greenColor];

scrollerModel.titlesArr = @[@"开始",@"历史的轨迹",@"新",@"快乐的时刻",@"信息",@"新闻时刻"];
scrollerModel.childVCArr = @[testVC1,testVC2,testVC3,testVC4,testVC5,testVC6];
scrollerModel.lineType = BottomLineTypeDefault;
scrollerModel.lineLength  = 5;
scrollerModel.line_Scaling_colors = @[(id)[UIColor cyanColor].CGColor,(id)[UIColor redColor].CGColor,(id)[UIColor yellowColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor orangeColor].CGColor,(id)[UIColor blueColor].CGColor,];

self.scrollerModel = scrollerModel;

}

END:代码比较简单!有时间再上传到github账号!现在需要源码可留言!