iOS中如何實(shí)現(xiàn)一個(gè)帶標(biāo)題的pager滑動(dòng)控制器呢恩商?
如圖磷斧,這個(gè)滑動(dòng)的控制器分為兩部分組成崖堤,上面的導(dǎo)航標(biāo)題和下面的頁面假消,上下兩層都是可以滑動(dòng)的柠并,所以他們是由兩個(gè)UIScrollView組成,在這兩個(gè)scrollview的上層再套一層UIView作為外殼富拗,這個(gè)組件就算封裝完成了臼予。
那么先來看看用法:
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]; //設(shè)置標(biāo)題和內(nèi)容頁
[self.view addSubview:pager];
[pager setDefaultIndex:1]; //設(shè)置默認(rèn)選中的item
那么CWViewPager里面由兩部分組成,一個(gè)是頂部的標(biāo)題啃沪,一個(gè)是底部的內(nèi)容頁面
CWTopTitleScrollView *navs = [[CWTopTitleScrollView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, 40)];
navs.delegates = self;
//設(shè)置標(biāo)題欄的寬度粘拾,默認(rèn)是一個(gè)item 寬度是100,但是小于屏幕寬度的時(shí)候就按照屏寬度計(jì)算
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]; //默認(rèn)選中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];
需要注意的是创千,兩個(gè)控件都有代理方法缰雇,分別實(shí)現(xiàn)監(jiān)聽標(biāo)題的點(diǎn)擊和page的滑動(dòng)。
CWTopTitleScrollView 需要實(shí)現(xiàn)滑動(dòng)item點(diǎn)擊事件的代理方法追驴,給每個(gè)item添加一個(gè)tag械哟,通代理方法回調(diào)到pager中tag的值。監(jiān)聽的tag值回調(diào)切換CWContentScrollView中偏移量殿雪。
這里比較復(fù)雜一點(diǎn)點(diǎn)的是監(jiān)聽CWContentScrollView里面的滑動(dòng)事件暇咆,通過scrollview的代理方法回調(diào)滑動(dòng)的數(shù)值,然后在CWTopTitleScrollView中通過回調(diào)的值實(shí)時(shí)改變title顏色和下劃線的位置丙曙,核心代碼如下:
//監(jiān)聽page的滑動(dòng)
- (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];
//判斷左滑動(dòng)還是右滑動(dòng)
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;
//監(jiān)聽后實(shí)時(shí)滑動(dòng)線條位置
NSInteger itemW = _contentW/_titleArray.count;
NSInteger margin = (itemW-_itemwidth)/2;
_line.frame = CGRectMake((itemW *offset)+margin, self.frame.size.height-2, _itemwidth, 2);
}
到這里爸业,核心代碼就全部貼出來的,效果圖如下:
git代碼如下河泳,可根據(jù)自己需要修改:
https://github.com/duanchangwen/ScrollPager.git