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);
}
到这里,核心代码就全部贴出来的,效果图如下:
git代码如下,可根据自己需要修改:
https://github.com/duanchangwen/ScrollPager.git