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

需要注意的是,两个控件都有代理方法,分别实现监听标题的点击和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);
}

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

iOS中如何实现一个带标题的pager滑动控制器呢_第1张图片
gifhome_544x960_9s.gif

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

你可能感兴趣的:(iOS中如何实现一个带标题的pager滑动控制器呢)