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