标题scrollView滚动框架

/**
 让标题居中
 改变titleScrollView的偏移量
 */
- (void)setupTitleCenter:(UILabel *)centerLabel
{
    // 滚动距离 = label的中点 - 屏幕的一半
    CGFloat tOffsetX = centerLabel.center.x - kScreenWidth * 0.5;
    CGFloat maxOffsetX = self.titleScrollView.contentSize.width - kScreenWidth;
    if (tOffsetX < 0 ) {
        tOffsetX = 0;
    } else if (maxOffsetX < 0) {  // 个数很小时
        tOffsetX = 0;
    } else if (tOffsetX > maxOffsetX) {
        tOffsetX = maxOffsetX;
    }
    CGPoint titleOffset = CGPointMake(tOffsetX, 0);
    [self.titleScrollView setContentOffset:titleOffset animated:YES];
}

缩放文字

#pragma mark - UIScrollViewDelegate
/// 一滚动就调用，处理标题文字收缩
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 当前,缩放比例
    CGFloat curPage = scrollView.contentOffset.x / kScreenWidth;
    NSInteger leftIndex = curPage;
    NSInteger rightIndex = curPage + 1;
    
    // 获得标题label
    UILabel *leftLabel = self.titleScrollView.subviews[leftIndex];
    UILabel *rightLabel;
    if (rightIndex < self.titleScrollView.subviews.count - 1) {
        rightLabel = self.titleScrollView.subviews[rightIndex];
    }
    
    // 计算缩放比例
    // 0 ~ 1
    CGFloat rightScale = curPage - leftIndex;
    CGFloat leftScale = 1 - rightScale;
    
    // 形变 1 ~ 1.3
    leftLabel.transform = CGAffineTransformMakeScale(leftScale*0.3 + 1, leftScale * 0.3 + 1);
    rightLabel.transform = CGAffineTransformMakeScale(rightScale*0.3 + 1, rightScale*0.3 + 1);
    
    // 文字颜色渐变
    /*
            R G B
        黑色 0 0 0
        红色 1 0 0
     */
    leftLabel.textColor = [UIColor colorWithRed:leftScale green:0 blue:0 alpha:1];
    rightLabel.textColor = [UIColor colorWithRed:rightScale green:0 blue:0 alpha:1];
    
//    NSLog(@"leftScale----%lf，rightScale----%lf", leftScale, rightScale);
    NSLog(@"----%lf", curPage);
}

通用框架，提高扩展性

另外一个控制器，抽取setupAllViewController
  如果不写super 父类什么事情都不帮你做 x
  还要保证setupAllViewController，在setupHeaderTitle之前调用
- (void)viewDidLoad {
    [super viewDidLoad];
    self.automaticallyAdjustsScrollViewInsets = NO;
    // 添加所有子控件
    [self setupAllViewController];
}

viewWillAppear:会多次调用:
  dispatch_once 只调用一次，但应用中有多个地方用到就有问题了
  用bool变量记录，@property (nonatomic, assign) BOO isInitialize;
  一次控制一个控件

- (void)viewWillAppear:(BOOL)animated
{
    [suoer viewWillAppear:animated];
    if (_isInitialize) {
        // 设置所有标题
        [self setupHeaderTitle];
        _isInitialize = YES;
    }
}

控制器view只加载1次

网易新闻总结

• 添加所有子控制器
• 添加标题
  • 可以是Button、可以是Label
• 初始化scrollView
• 点击标题高亮
  • 所有操作都在这里执行
  • 并把子控制器的view添加到contentScrollView上
    • 设置尺寸
• 监听scrollView的滚动
  • 减速完成时
    • 计算索引index
    • 调用按钮点击操作
• 让标题按钮居中
  • 不要管过程，看它最后的状态
    • CGFloat offsetX = label.center.x - screenW * 0.5
  • 边界条件判断
    • if (offsetX < 0) { offsetX = 0; }
    • maxOffsetX = self.titleScrollView.contentSize.width - kScreenWidth;
      • else if (maxOffsetX < 0) { offsetX = 0; }
      • else if (tOffsetX > maxOffsetX) { tOffsetX = maxOffsetX; }
    • [self.titleScrollView setContentOffset:titleOffset animated:YES];
• 标题文字缩放
  • 在(void)scrollViewDidScroll:(UIScrollView *)scrollView方法中
  • 获得当前页curPage浮点型
  • 计算leftInde、rightIndex
    • NSInteger leftIndex = curPage;
    • NSInteger rightIndex = curPage + 1;
  • 获得对应的标题
    • if (rightIndex < self.titleScrollView.subviews.count - 1)
  • 计算要缩放的尺寸
    • CGFloat rightScale = curPage - leftIndex;
    • CGFloat leftScale = 1 - rightScale;
  • 用transform进行缩放，形变
    • leftLabel.transform = CGAffineTransformMakeScale(leftScale*0.3 + 1, leftScale * 0.3 + 1);
  • 在按钮点击方法中，点击放大、上一个取消形变
    • label.transform = CGAffineTransformMakeScale(1.3 , 1.3);
    • 否者只要点击都变大
    • _selectLabel.transform = CGAffineTransformIdentity;
• 标题文字颜色渐变
  • leftLabel.textColor = [UIColor colorWithRed:leftScale green:0 blue:0 alpha:1];
  • rightLabel.textColor = [UIColor colorWithRed:rightScale green:0 blue:0 alpha:1];
  • 点击按钮方法中，还原
    • _selectLabel.textColor = [UIColor blackColor];

参考资料

• 快速集成App中顶部标题滚动条
• VTMagic的使用介绍
• 动手写一个快速集成网易新闻，腾讯视频，头条首页的ScrollPageView,显示滚动视图