iOS中如何實(shí)現(xiàn)一個(gè)帶標(biāo)題的pager滑動(dòng)控制器呢

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);
}

到這里爸业,核心代碼就全部貼出來的,效果圖如下:

gifhome_544x960_9s.gif

git代碼如下河泳,可根據(jù)自己需要修改:
https://github.com/duanchangwen/ScrollPager.git

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市年栓,隨后出現(xiàn)的幾起案子拆挥,更是在濱河造成了極大的恐慌,老刑警劉巖某抓,帶你破解...
    沈念sama閱讀 219,427評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件纸兔,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡否副,警方通過查閱死者的電腦和手機(jī)汉矿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來备禀,“玉大人洲拇,你說我怎么就攤上這事奈揍。” “怎么了赋续?”我有些...
    開封第一講書人閱讀 165,747評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵男翰,是天一觀的道長。 經(jīng)常有香客問我纽乱,道長蛾绎,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,939評(píng)論 1 295
  • 正文 為了忘掉前任鸦列,我火速辦了婚禮租冠,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘薯嗤。我一直安慰自己顽爹,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,955評(píng)論 6 392
  • 文/花漫 我一把揭開白布应民。 她就那樣靜靜地躺著话原,像睡著了一般。 火紅的嫁衣襯著肌膚如雪诲锹。 梳的紋絲不亂的頭發(fā)上繁仁,一...
    開封第一講書人閱讀 51,737評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音归园,去河邊找鬼黄虱。 笑死,一個(gè)胖子當(dāng)著我的面吹牛庸诱,可吹牛的內(nèi)容都是我干的捻浦。 我是一名探鬼主播,決...
    沈念sama閱讀 40,448評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼桥爽,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼朱灿!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起钠四,我...
    開封第一講書人閱讀 39,352評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤盗扒,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后缀去,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體侣灶,經(jīng)...
    沈念sama閱讀 45,834評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,992評(píng)論 3 338
  • 正文 我和宋清朗相戀三年缕碎,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了褥影。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,133評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡咏雌,死狀恐怖凡怎,靈堂內(nèi)的尸體忽然破棺而出校焦,到底是詐尸還是另有隱情,我是刑警寧澤栅贴,帶...
    沈念sama閱讀 35,815評(píng)論 5 346
  • 正文 年R本政府宣布斟湃,位于F島的核電站,受9級(jí)特大地震影響檐薯,放射性物質(zhì)發(fā)生泄漏凝赛。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,477評(píng)論 3 331
  • 文/蒙蒙 一坛缕、第九天 我趴在偏房一處隱蔽的房頂上張望墓猎。 院中可真熱鬧,春花似錦赚楚、人聲如沸毙沾。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽左胞。三九已至,卻和暖如春举户,著一層夾襖步出監(jiān)牢的瞬間烤宙,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評(píng)論 1 272
  • 我被黑心中介騙來泰國打工俭嘁, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留躺枕,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,398評(píng)論 3 373
  • 正文 我出身青樓供填,卻偏偏與公主長得像拐云,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子近她,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,077評(píng)論 2 355