簡單實(shí)現(xiàn)分頁滾動(dòng)效果

有段時(shí)間沒有更新東西筛峭,原因是工作變動(dòng)铐刘,一直沒有精力去總結(jié)一些東西。最近公司項(xiàng)目中需要用到類似網(wǎng)易新聞滾動(dòng)的效果影晓,可以先一張效果圖镰吵,后面在分析實(shí)現(xiàn)的過程,這里只是簡單的實(shí)現(xiàn)了一下效果挂签,沒有考慮重用機(jī)制的問題疤祭,希望大神給個(gè)思路。這里是demo
效果如下:

yj_demo.gif

思路:我把他們分成兩個(gè)部分饵婆,頂部標(biāo)題部分和下面的滾動(dòng)視圖部分勺馆,上面也用一個(gè)scrollview搞定,下面用scrollview來顯示,scrollview中需要加載多個(gè)控制器中的view草穆,這兩個(gè)scrollview則加載一個(gè)View上面灌灾、

一、頂部滾動(dòng)標(biāo)題的封裝

為了代碼的重用悲柱,我決定把上面的頂部滾動(dòng)標(biāo)題封裝一個(gè)整塊view锋喜,該view命名為MNTopTitleBar(名字可以隨便取),外界需要的屬性就是提供一個(gè)標(biāo)題數(shù)組豌鸡,還有設(shè)置標(biāo)題按鈕的寬度嘿般,什么字體大小啊,字體顏色啊直颅,我都還寫博个,這里先實(shí)現(xiàn)效果,不考慮的那么復(fù)雜功偿。就是給我一個(gè)數(shù)組盆佣,我就是創(chuàng)建可以滾動(dòng)的標(biāo)題。

我相信上面的思路很簡單械荷,就能實(shí)現(xiàn)了共耍,主要貼上多個(gè)標(biāo)題的時(shí)候點(diǎn)擊標(biāo)題滾動(dòng)到合適的位置的代碼,其他也沒什么難度吨瞎,有興趣的可以下載demo看看痹兜,希望大家多提意見。

[UIView animateWithDuration:0.25 animations:^{
    
    self.indexView.centerX = button.centerX;
}];

//跳轉(zhuǎn)contensize

// 如果數(shù)量不夠就不需要調(diào)整
if (self.backScrollView.width<self.width) {
    
    return;
}
//按鈕的中心
CGFloat centerX = button.centerX;
//該控件的寬度
CGFloat scrollViewW = self.width;

CGFloat leftX = centerX - scrollViewW*0.5;
if (leftX<0) {
    
    leftX = 0;
}

//計(jì)算最右邊能滾動(dòng)最大的距離
CGFloat maxOffSetX = self.backScrollView.contentSize.width -scrollViewW;
if (leftX>maxOffSetX) {
    
    leftX = maxOffSetX;
}

[UIView animateWithDuration:0.25 animations:^{
    
    [self.backScrollView setContentOffset:CGPointMake(leftX, 0)];
}];

另外這里需要說明颤诀,frame的設(shè)置字旭,我自己寫了UIView的一個(gè)分類,這是設(shè)置坐標(biāo)就方便了很多崖叫。

二遗淳、創(chuàng)建

首先看看創(chuàng)建這個(gè)view需要的屬性

@interface YJTabPageView : UIView
/**
 *  子控制器數(shù)組
 */
@property (strong,nonatomic) NSArray *viewControllers;
/**
 *  所屬父類控制
 */
@property (strong,nonatomic) UIViewControlle*parentViewController;

/**
 * 標(biāo)題數(shù)組
 */
@property (strong,nonatomic) NSArray *topBarTitles;

@property (copy,nonatomic) void(^pageChageBlock)(    UIViewController *viewController, NSUInteger index);  // 滾動(dòng)頁面發(fā)生改變時(shí)候的Block

- (void)setPageChageBlock:(void (^)(UIViewController *viewController, NSUInteger index))pageChageBlock;

@end

思路:所有控制器都交給該view的父類控制器來管理,所有的view都添加到下面的scrollview·上面的來顯示心傀,監(jiān)聽滾動(dòng)事件來改變上面標(biāo)題的狀態(tài)屈暗,上面也是一樣。創(chuàng)建代碼如下脂男。

 _bottomScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 44, self.width, self.height-44)];
_bottomScrollView.showsHorizontalScrollIndicator = NO;
_bottomScrollView.showsVerticalScrollIndicator = NO;
_bottomScrollView.pagingEnabled = YES;
_bottomScrollView.delegate = self;
[self addSubview:_bottomScrollView];

for (int i = 0; i<viewControllers.count; i++) {
    
    YJTestViewController *vc = viewControllers[i];
    vc.view.frame = CGRectMake(i*_bottomScrollView.width, 0, _bottomScrollView.width, _bottomScrollView.height);
    [_bottomScrollView addSubview:vc.view];
    
    [self.parentViewController addChildViewController:vc];
}

_bottomScrollView.contentSize = CGSizeMake(_bottomScrollView.width*viewControllers.count, _bottomScrollView.height);

另外說明刷一下刷新控制用了第三方的MJRefresh养叛。有興趣的下載demo看下,發(fā)現(xiàn)錯(cuò)誤希望指正宰翅,也希望大神關(guān)于重用給我點(diǎn)思路弃甥。謝謝!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末汁讼,一起剝皮案震驚了整個(gè)濱河市潘飘,隨后出現(xiàn)的幾起案子肮之,更是在濱河造成了極大的恐慌,老刑警劉巖卜录,帶你破解...
    沈念sama閱讀 218,204評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件戈擒,死亡現(xiàn)場離奇詭異,居然都是意外死亡艰毒,警方通過查閱死者的電腦和手機(jī)筐高,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來丑瞧,“玉大人柑土,你說我怎么就攤上這事“硇冢” “怎么了稽屏?”我有些...
    開封第一講書人閱讀 164,548評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長西乖。 經(jīng)常有香客問我狐榔,道長,這世上最難降的妖魔是什么获雕? 我笑而不...
    開封第一講書人閱讀 58,657評(píng)論 1 293
  • 正文 為了忘掉前任薄腻,我火速辦了婚禮,結(jié)果婚禮上届案,老公的妹妹穿的比我還像新娘庵楷。我一直安慰自己,他們只是感情好楣颠,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,689評(píng)論 6 392
  • 文/花漫 我一把揭開白布尽纽。 她就那樣靜靜地躺著,像睡著了一般童漩。 火紅的嫁衣襯著肌膚如雪弄贿。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,554評(píng)論 1 305
  • 那天睁冬,我揣著相機(jī)與錄音,去河邊找鬼看疙。 笑死豆拨,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的能庆。 我是一名探鬼主播施禾,決...
    沈念sama閱讀 40,302評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼搁胆!你這毒婦竟也來了弥搞?” 一聲冷哼從身側(cè)響起邮绿,我...
    開封第一講書人閱讀 39,216評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎攀例,沒想到半個(gè)月后船逮,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,661評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡粤铭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,851評(píng)論 3 336
  • 正文 我和宋清朗相戀三年挖胃,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片梆惯。...
    茶點(diǎn)故事閱讀 39,977評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡酱鸭,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出垛吗,到底是詐尸還是另有隱情凹髓,我是刑警寧澤,帶...
    沈念sama閱讀 35,697評(píng)論 5 347
  • 正文 年R本政府宣布怯屉,位于F島的核電站蔚舀,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏蚀之。R本人自食惡果不足惜蝗敢,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,306評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望足删。 院中可真熱鬧寿谴,春花似錦、人聲如沸失受。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽拂到。三九已至痪署,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間兄旬,已是汗流浹背狼犯。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評(píng)論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留领铐,地道東北人悯森。 一個(gè)月前我還...
    沈念sama閱讀 48,138評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像绪撵,于是被迫代替她去往敵國和親瓢姻。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,927評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,133評(píng)論 25 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫音诈、插件幻碱、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,103評(píng)論 4 62
  • 深藍(lán)色的天空中绎狭,抹過一絲白云,擠出一滴雨滴,奇怪的是此時(shí)晴空萬里褥傍,沒有一丁點(diǎn)兒陰暗儡嘶。 古老的龐大的杉樹下,姐姐小環(huán)...
    老七吳聿桐閱讀 292評(píng)論 0 1
  • 今天吃晚飯的時(shí)候摔桦,旺財(cái)?shù)男』锇閭冊(cè)跇窍逻汉戎黄鹑ノ譅柆斖嫠I绺叮?cái)咿咿呀呀的很是興奮,平常吃完晚飯休息一會(huì)兒就該上...
    馬力教育Molly閱讀 253評(píng)論 0 1
  • 如果有一天 我變成一只小白鴿 我會(huì)不遠(yuǎn)萬里 銜來橄欖枝 讓世界不再硝煙彌漫 如果有一天 我變成一株仙人掌 我會(huì)迎風(fēng)...
    我心依然_580a閱讀 655評(píng)論 102 72