摘要

特别说明：本文适合于新手，老司机就没必要浪费时间去看了。
实现功能点
1.可自定义滚动标题个数
2.滚动标题切换有字体颜色效果
3.滚动标题点击可切换到对应的子控制器
4.滑动内容视图可切换到对应标题

运用场景：新闻类和电商类

接下来就是开始项目，我们要写分析界面结构，好做出相对应的思路。

1.先分析一下界面结构

我们可以发现view上包括了标题滚动条以及内容展示，所以需要添加标题和内容滚动视图。
注意：由于iOS7以后，导航控制器上的scrollview顶部会额外多出64的滚动区域，所以是导航控制器的就要注意了，添加以下代码可以解决：

self.automaticallyAdjustsScrollViewInsets = NO;

添加滚动视图代码如下：

//添加标题滚动视图
- (void)setupTitleScrollview {
    self.titleScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 64, KWidth, 44)];
    self.titleScrollView.showsHorizontalScrollIndicator = NO;
    [self.view addSubview:self.titleScrollView];
}

//添加内容展示滚动视图
- (void)setupContentScrollview {
    CGFloat y = CGRectGetMaxY(self.titleScrollView.frame);
    self.contentScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, y, KWidth, KHeight - y)];
    [self.view addSubview:self.contentScrollView];
    self.contentScrollView.delegate = self;
    self.contentScrollView.showsHorizontalScrollIndicator = NO;//指示器
    self.contentScrollView.pagingEnabled = YES;//分页
    self.contentScrollView.bounces = NO;//边界是否允许滑动
}

2.添加标题以及子控制器

1 ）标题与子控制器一一对应，先添加标题还是子控制器呢，这里我采取的是先添加子控制器。
2 ）标题用button显示

//添加所有的子控制器
- (void)setupAllChildViewController {
    //头条
    TopLineViewController *topLineVC = [[TopLineViewController alloc] init];
    topLineVC.title = @"头条";
    [self addChildViewController:topLineVC];
    //热点
    HotViewController *hotVC = [[HotViewController alloc] init];
    hotVC.title = @"热点";
    [self addChildViewController:hotVC];
    //视频
    VideoViewController *videoVC = [[VideoViewController alloc] init];
    videoVC.title = @"视频";
    [self addChildViewController:videoVC];
    //社会
    ScoietyViewController *scoietyVC = [[ScoietyViewController alloc] init];
    scoietyVC.title = @"社会";
    [self addChildViewController:scoietyVC];
    //订阅
    ReaderViewController *readerVC = [[ReaderViewController alloc] init];
    readerVC.title = @"订阅";
    [self addChildViewController:readerVC];
    //科技
    ScienceViewController *scineceVC = [[ScienceViewController alloc] init];
    scineceVC.title = @"科技";
    [self addChildViewController:scineceVC];
}

//添加所有的标题按钮
- (void)setupAllTitle {
    self.titleBtns = [NSMutableArray array];
    NSInteger count = self.childViewControllers.count;
    for (NSInteger i = 0; i < count; i ++) {
        UIButton *titleBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        titleBtn.frame = CGRectMake(100 * i, 0, 100, self.titleScrollView.frame.size.height);
        UIViewController *vc = self.childViewControllers[i];
        [titleBtn setTitle:vc.title forState:UIControlStateNormal];
        [titleBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];//默认字体为黑色
        titleBtn.titleLabel.font = [UIFont systemFontOfSize:16];
        [titleBtn addTarget:self action:@selector(titleClick:) forControlEvents:UIControlEventTouchUpInside];
        titleBtn.tag = 10 + i;
        [self.titleScrollView addSubview:titleBtn];
        [self.titleBtns addObject:titleBtn];//保存标题按钮
        //第一次手动调用
        if (i == 0) {
            [self titleClick:titleBtn];
        }
    }
    self.titleScrollView.contentSize = CGSizeMake(100 * count, 0);
    self.contentScrollView.contentSize = CGSizeMake(KWidth * count, 0);
}

3.处理标题按钮的点击事件

分析，按钮点击后需要做的事情是什么？
1 ）标题颜色 变成 红色。
2 ）把对应子控制器的view添加上去。
3 ）内容滚动视图滚动到对应的位置。

//标题按钮的点击事件
- (void)titleClick:(UIButton *)btn {
    NSInteger i = btn.tag - 10;
    //改变选中颜色
    [self selectBtn:btn];
    //添加对应的子控制器
    [self setupViewController:i];
    //设置内容展示的偏移位置
    self.contentScrollView.contentOffset = CGPointMake(KWidth * i, 0);
}

//记录选中的按钮
@property (nonatomic, strong) UIButton *selectBtn;
//改变标题颜色
- (void)selectBtn:(UIButton *)btn {
    [self.selectBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];//恢复原色
    [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];//选中颜色
    [self setupTitleCenter:btn];//设置标题居中
    self.selectBtn = btn;//记录选中按钮
}

//标题居中处理
- (void)setupTitleCenter:(UIButton *)btn {
    CGFloat offsetX = btn.center.x - KWidth * 0.5;
    if (offsetX < 0) {
        offsetX = 0;
    }
    
    CGFloat maxOffsetX = self.titleScrollView.contentSize.width - KWidth;
    if (offsetX > maxOffsetX) {
        offsetX = maxOffsetX;
    }
    [self.titleScrollView setContentOffset:CGPointMake(offsetX, 0) animated:YES];
}

//添加子控制器的view
- (void)setupViewController:(NSInteger)i {
    UIViewController *vc = self.childViewControllers[i];
    //避免重复加载
    if (vc.view.superview) {
        return;
    }
    vc.view.frame = CGRectMake(i * KWidth, 0, KWidth, self.contentScrollView.frame.size.height);
    [self.contentScrollView addSubview:vc.view];
}

4.处理内容视图的业务逻辑(监听内容滚动)

设置代理，目的:监听内容滚动视图什么时候完成。
原因:
1.防SB用户,按住屏幕死循环着左右滑,每次都加载会很卡。
2.用户也有可能滑动到一半,不想看了,就没有必要加载出来,浪费用户流量。
代理方法：

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    NSInteger i = self.contentScrollView.contentOffset.x / KWidth;
    //获取标题按钮
    UIButton *btn = self.titleBtns[i];
    //改变标题按钮颜色
    [self selectBtn:btn];
    //添加对应的子控制器view
    [self setupViewController:i];  
}

嗯，到这基本上就结束了。
如果在阅读中看到错误或者不懂得，欢迎提问。