iOS中如何实现一个带标题的pager滑动控制器呢

iOS中如何实现一个带标题的pager滑动控制器呢？

如图，这个滑动的控制器分为两部分组成，上面的导航标题和下面的页面，上下两层都是可以滑动的，所以他们是由两个UIScrollView组成，在这两个scrollview的上层再套一层UIView作为外壳，这个组件就算封装完成了。

那么先来看看用法：

    CWViewPager *pager = [[CWViewPager alloc] initWithFrame:CGRectMake(0, 144, self.view.frame.size.width, self.view.frame.size.height-344)];
    pager.delegates = self;
    [pager setTitleArray:titlea controlerArray:cona];  //设置标题和内容页
    [self.view addSubview:pager];  
    [pager setDefaultIndex:1];   //设置默认选中的item

那么CWViewPager里面由两部分组成，一个是顶部的标题，一个是底部的内容页面

   CWTopTitleScrollView *navs = [[CWTopTitleScrollView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, 40)];
   navs.delegates = self;
   //设置标题栏的宽度，默认是一个item 宽度是100，但是小于屏幕宽度的时候就按照屏宽度计算
   NSInteger maxW = _titleArray.count*100;
   [navs setContentWidth:maxW<self.frame.size.width?self.frame.size.width:maxW]; 
   [navs setItemWidth:70];
   [navs setTitleArray:_titleArray];
   [navs createView];
   [navs defaultIndex:0];   //默认选中0的位置
   _navs = navs;
   [self addSubview:navs];
   
   CWContentScrollView *content = [[CWContentScrollView alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(navs.frame), self.frame.size.width, self.frame.size.height-navs.frame.size.height)];
   [content setControllerArray:_cvArray];
   content.delegates = self;
   _content = content;
   [self addSubview:content];

需要注意的是，两个控件都有代理方法，分别实现监听标题的点击和page的滑动。
CWTopTitleScrollView 需要实现滑动item点击事件的代理方法，给每个item添加一个tag，通代理方法回调到pager中tag的值。监听的tag值回调切换CWContentScrollView中偏移量。

这里比较复杂一点点的是监听CWContentScrollView里面的滑动事件，通过scrollview的代理方法回调滑动的数值，然后在CWTopTitleScrollView中通过回调的值实时改变title颜色和下划线的位置，核心代码如下：

//监听page的滑动
- (void)pageScrolling:(UIScrollView *)scrollview{
    NSInteger index = (NSInteger)((scrollview.contentOffset.x/(float)scrollview.frame.size.width)+0.5);
   
    for (NSInteger i=0; i<_titleArray.count; i++) {
        UILabel *label1 = [self viewWithTag:i+100];
        label1.textColor = [UIColor blackColor];
    }
    
    CGFloat offset = scrollview.contentOffset.x/(float)scrollview.frame.size.width;
    NSLog(@"=====%lf",offset);
    
    UILabel *label = [self viewWithTag:index+100];
    label.textColor = [UIColor redColor];
    
    //判断左滑动还是右滑动
    if (offset-_offset<=0) {
        [self scrollRectToVisible:CGRectMake(label.frame.origin.x-250, 0, label.frame.size.width, label.frame.size.height) animated:YES];
    }else{
        [self scrollRectToVisible:CGRectMake(label.frame.origin.x+250, 0, label.frame.size.width, label.frame.size.height) animated:YES];
    }
    _offset = offset;
    
    //监听后实时滑动线条位置
    NSInteger itemW = _contentW/_titleArray.count;
    NSInteger margin = (itemW-_itemwidth)/2;
    _line.frame = CGRectMake((itemW *offset)+margin, self.frame.size.height-2, _itemwidth, 2);
}

到这里，核心代码就全部贴出来的，效果图如下：

gifhome_544x960_9s.gif

git代码如下，可根据自己需要修改：
https://github.com/duanchangwen/ScrollPager.git