iOS开发：仿网易新闻首页多频道视图切换

前言

1、相信筒子们在项目中会遇到像网易新闻这样的多频道视图切换需求，而这一功能需要考虑的东西也挺多，其中最主要的就是内存问题了。

2、这种多频道视图切换一般分为两部分：上滚动视图（顶部频道列表）和下滚动视图（频道内容展示）

3、上滚动视图基本上都会用UIScrollView来做，而下滚动视图则可采用UITableView或者UIScrollView来做，UITableView可以改善UIScrollView带来的内存问题，但在使用中不是很方便。

4、此Demo采用双滚动视图的方式来实现，主要有：视图切换（延迟加载，当用户滚动到对应频道才加载页面），滚动视图的位置调整，频道切换时标题的动态变化。 未实现：数据本地缓存，释放离当前频道比较远的页面资源来降低内存占用（此基于数据本地缓存）

思路

主要是采用addChildViewController来实现
版本一、在当前页直接切换，不采用滚动视图；
版本二、采用滚动视图

版本一：

1、定义数组和视图

@property (nonatomic,strong) UIViewController * currentVC;
@property (nonatomic,strong) UIButton * currentBtn;
@property (nonatomic,strong) UIScrollView * headScrollView;
@property (nonatomic,strong) NSArray * headTitleArray;
@property (nonatomic,strong) NSMutableArray * vcArray;

2、初始化数组

-(NSArray *)headTitleArray {
    if (!_headTitleArray) {
        _headTitleArray = [NSArray arrayWithObjects:@"头条",@"娱乐",@"热点",@"体育",@"广州",@"财经",@"科技", nil];
    }
    return _headTitleArray;
}

-(NSMutableArray *)vcArray {
    if (!_vcArray ) {
        _vcArray = [[NSMutableArray alloc]init];

        //创建内容视图
        [self configVCArray];
    }
    return _vcArray;
}

- (void)configVCArray {
    CGRect childVCRect = CGRectMake(0, 64 + HEADSCROLLVIEW_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT - 64 - HEADSCROLLVIEW_HEIGHT);
    for (int i = 0; i < self.headTitleArray.count; i ++) {
        ContentViewController * VC = [[ContentViewController alloc]init];
        VC.typeName = self.headTitleArray[i];
        VC.view.frame = childVCRect;
        [_vcArray addObject:VC];
    }
}

3、配置上滚动视图

- (void)configHeadScrollView {
    self.headScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 64, SCREEN_WIDTH, HEADSCROLLVIEW_HEIGHT)];
    self.headScrollView.backgroundColor = [UIColor purpleColor];
    self.headScrollView.contentSize = CGSizeMake(self.headTitleArray.count * 60, 40);
    self.headScrollView.bounces = NO;
    [self.view addSubview:self.headScrollView];

    [self addBtnsToHeadScrollView];
}

- (void)addBtnsToHeadScrollView {

    for (int i = 0; i < self.headTitleArray.count; i ++) {
        UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
        button.frame = CGRectMake(0 + 60 * i, 0, 60, 40);
        [button setTitle:self.headTitleArray[i] forState:UIControlStateNormal];
        [button setTag:1000 + i];
        [button.titleLabel setFont:[UIFont systemFontOfSize:12]];
        [self.headScrollView addSubview:button];

        [button addTarget:self action:@selector(headScrollViewButtonAction:) forControlEvents:UIControlEventTouchUpInside];

        //默认当前为第一个频道
        if (!i) {
            [button.titleLabel setFont:[UIFont systemFontOfSize:15]];
            [button setTitleColor:[UIColor yellowColor] forState:UIControlStateNormal];
            self.currentBtn = button;
        }
    }
}

4、配置默认显示的视图

- (void)configDefaultVC {

    //默认加载第一个标签页
    self.currentVC = self.vcArray[0];
    [self addChildViewController:self.currentVC];
    [self.view addSubview:self.currentVC.view];

}

5、实现视图切换的方法

/**
 *  移除当前VC，替换新的VC
 */
- (void)switchNewVC:(UIViewController *)newViewController {

    //1、先加载新VC为ChildViewController
    [self addChildViewController:newViewController];
    //2、动画从当前VC切换到新VC
    /**
     *  transitionFromViewController 方法
     更详细了解到：http://blog.csdn.net/yongyinmg/article/details/40619727

     交换两个子视图控制器的位置（由于添加的顺序不同，所以子试图控制器在父视图控制器中存在层次关系）

     fromViewController：当前显示的子试图控制器，将被替换为非显示状态

     toViewController：将要显示的子视图控制器

     duration：交换动画持续的时间，单位秒

     options：动画的方式

     animations：动画Block

     completion：完成后执行的Block
     */
    [self transitionFromViewController:self.currentVC toViewController:newViewController duration:0.2 options:UIViewAnimationOptionTransitionCrossDissolve animations:nil completion:^(BOOL finished) {

        if (finished) {

            //3、动画完毕后，移除旧VC，设置新VC为当前VC
            /**
             关于willMoveToParentViewController方法和didMoveToParentViewController方法的使用

             1.这两个方法用在子试图控制器交换的时候调用！即调用transitionFromViewController 方法时，调用。

             2.当调用willMoveToParentViewController方法或didMoveToParentViewController方法时，要注意他们的参数使用：

             当某个子视图控制器将从父视图控制器中删除时，parent参数为nil。

             即：[将被删除的子试图控制器 willMoveToParentViewController:nil];

             当某个子试图控制器将加入到父视图控制器时，parent参数为父视图控制器。

             即：[将被加入的子视图控制器 didMoveToParentViewController:父视图控制器];
             */
            [newViewController didMoveToParentViewController:self];
            [self.currentVC willMoveToParentViewController:nil];
            [self.currentVC removeFromParentViewController];
            self.currentVC = newViewController;
        }
    }];
}

6、实现频道滚动视图点击的方法

- (void)headScrollViewButtonAction:(UIButton *)button {
    //点击频道按钮切换视图
    if (self.currentVC == self.vcArray[button.tag - 1000]) {
        //如果是当前频道，则不操作
        return;
    }else {

        //切换频道按钮
        [self.currentBtn.titleLabel setFont:[UIFont systemFontOfSize:12]];
        [self.currentBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];

        [button.titleLabel setFont:[UIFont systemFontOfSize:15]];
        [button setTitleColor:[UIColor yellowColor] forState:UIControlStateNormal];

        self.currentBtn = button;

        //切换VC
        NSInteger num = button.tag - 1000;
        [self switchNewVC:self.vcArray[num]];

    }
}

7、效果图

8、存在的问题和改进

问题：因为初始化VC数组把VC的view设置了Frame，因此VC会执行viewDidLoad方法，所以如果需要加载大量数据（或网络连接）的情况，要把这些方法放到viewWillApper或者DidApper来执行。
改进：可以在切换VC的时候才设置Frame

版本二：

1、声明数组和视图

@property (nonatomic,assign) int currentPage;
@property (nonatomic,strong) UIScrollView * headScrollView;
@property (nonatomic,strong) UIScrollView * contentScrollView;
@property (nonatomic,strong) NSArray * headTitleArray;

2、初始化

//频道列表
-(NSArray *)headTitleArray {
    if (!_headTitleArray) {
        _headTitleArray = [NSArray arrayWithObjects:@"头条",@"娱乐",@"热点",@"体育",@"广州",@"财经",@"科技", nil];
    }
    return _headTitleArray;
}

pragma mark - 顶部频道配置
- (void)configHeadScrollView {
    self.headScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 64, SCREEN_WIDTH, HEADSCROLLVIEW_HEIGHT)];
    self.headScrollView.backgroundColor = [UIColor purpleColor];
    self.headScrollView.contentSize = CGSizeMake(self.headTitleArray.count * 60, 40);
    self.headScrollView.bounces = NO;
    [self.view addSubview:self.headScrollView];

    [self addBtnsToHeadScrollView];
}


//加频道按钮
- (void)addBtnsToHeadScrollView {

    for (int i = 0; i < self.headTitleArray.count; i ++) {
        UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
        button.frame = CGRectMake(0 + 60 * i, 0, 60, 40);
        [button setTitle:self.headTitleArray[i] forState:UIControlStateNormal];
        [button setTag:1000 + i];
        [button.titleLabel setFont:[UIFont systemFontOfSize:15]];
        [self scaleButton:button withScale:0];
        [self.headScrollView addSubview:button];

        [button addTarget:self action:@selector(headScrollViewButtonAction:) forControlEvents:UIControlEventTouchUpInside];

        //默认当前为第一个频道
        if (!i) {
            [self scaleButton:button withScale:1];
        }

    }
}

pragma mark - 配置内容ScrollView
- (void)configContentScrollView {
    CGRect contentScrollViewRect = CGRectMake(0, 64 + HEADSCROLLVIEW_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT - 64 - HEADSCROLLVIEW_HEIGHT);
    self.contentScrollView = [[UIScrollView alloc]initWithFrame:contentScrollViewRect];
    self.contentScrollView.contentSize = CGSizeMake(SCREEN_WIDTH * self.headTitleArray.count, contentScrollViewRect.size.height);
    self.contentScrollView.bounces = NO;
    self.contentScrollView.pagingEnabled = YES;
    self.contentScrollView.delegate = self;
    [self.view addSubview:self.contentScrollView];

    [self addContentVC];
}

3、加入视图控制器

/**
 *  加入视图控制器
 1、先加入ChildViewController   无
 2、设置frame                   VC会调用viewDidLoad方法
 3、加入superView               VC会调用viewWillApper、viewDidApper方法

 */
- (void)addContentVC {

    for (int i = 0; i < self.headTitleArray.count; i ++) {
        ContentViewController * VC = [[ContentViewController alloc]init];
        VC.typeName = self.headTitleArray[i];
        [self addChildViewController:VC];

        //默认加载第一页
        if (!i) {
            [self loadScrollViewWithPage:i];
        }
    }
}

4、实现视图切换的方法

- (CGRect)getRect:(int)currentPage {
    CGRect rect = CGRectMake(SCREEN_WIDTH * currentPage, 0, SCREEN_WIDTH, SCREEN_HEIGHT - 64 - HEADSCROLLVIEW_HEIGHT);
    return rect;
}

- (void)loadScrollViewWithPage:(int)page {

    if (page < 0 || page >= self.headTitleArray.count) {
        return;
    }
    //判断页面是否已经显示，如果未显示则让其显示
    ContentViewController * VC = [self.childViewControllers objectAtIndex:page];
    if (VC.view.superview == nil) {
        VC.view.frame = [self getRect:page];
        [self.contentScrollView addSubview:VC.view];
    }else {
        return;
    }

}

5、实现频道切换时上滚动视图的图标实时变化

//改变按钮大小
- (void)scaleButton:(UIButton *)button withScale:(CGFloat)scale {
    [button setTitleColor:[UIColor colorWithRed:1.0 green:1.0 blue:1.0 - scale alpha:1.0] forState:UIControlStateNormal];
    CGFloat minScale = 0.8;
    CGFloat trueScale = minScale + (1 - minScale) * scale;
    button.transform = CGAffineTransformMakeScale(trueScale, trueScale);
}

//改变频道按钮的坐标
- (void)scrollHeadScrollView {

    CGFloat x = self.currentPage * 60 + 60 * 0.5 - SCREEN_WIDTH * 0.5;
    if (x >= 0) {
        if (x >= self.headScrollView.contentSize.width - SCREEN_WIDTH) {
            x = self.headScrollView.contentSize.width - SCREEN_WIDTH;
            [self.headScrollView setContentOffset:CGPointMake(x, 0) animated:YES];   //向右滚动到尽头
        }else
            [self.headScrollView setContentOffset:CGPointMake(x, 0) animated:YES];
    }else
        [self.headScrollView setContentOffset:CGPointMake(0, 0) animated:YES];  //向左滚动到尽头
}


//点击频道按钮切换
- (void)headScrollViewButtonAction:(UIButton *)button {

    NSInteger currentPage = button.tag - 1000;
    [self.contentScrollView setContentOffset:CGPointMake(SCREEN_WIDTH * currentPage, 0) animated:YES];

}

6、在ScrollView代理方法里面实现切换视图的判断

pragma mark - scrollViewDelegate
//用户滑动屏幕切换频道的情景：ScrollView滚动停止的时候调用该方法
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {

    if (scrollView == self.contentScrollView) {
        CGFloat pageWidth = SCREEN_WIDTH;
        self.currentPage = floor((scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
        //加载页面
        [self loadScrollViewWithPage:self.currentPage];

        //滚动标题栏
        [self scrollHeadScrollView];

        //修正切换太快导致频道按钮出现缩放不正确的问题
        [self.headScrollView.subviews enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {

            if ([obj isKindOfClass:[UIButton class]] && idx != self.currentPage) {
                [self scaleButton:obj withScale:0];
            }

        }];


    }

}

//用户点击导航频道切换内容的情景：
// 调用以下函数，来自动滚动到想要的位置，此过程中设置有动画效果，停止时，触发该函数
// UIScrollView的setContentOffset:animated:
// UIScrollView的scrollRectToVisible:animated:
// UITableView的scrollToRowAtIndexPath:atScrollPosition:animated:
// UITableView的selectRowAtIndexPath:animated:scrollPosition:
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView {
    [self scrollViewDidEndDecelerating:self.contentScrollView];
}


//用户滑动屏幕的情况：实时改变频道按钮的大小
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    CGFloat value = scrollView.contentOffset.x / SCREEN_WIDTH;
    //计算出需要改变大小的按钮的位置
    int leftBtnIndex = (int)value;
    int rightBtnIndex = leftBtnIndex + 1;
    //计算出需要改变大小的倍数
    CGFloat rightScale = value - leftBtnIndex;
    CGFloat leftScale = 1 - rightScale;

    //改变大小
    UIButton * leftBtn = [self.headScrollView.subviews objectAtIndex:leftBtnIndex];
    [self scaleButton:leftBtn withScale:leftScale];
    if (rightBtnIndex < self.headTitleArray.count) {
        UIButton * rightBtn = [self.headScrollView.subviews objectAtIndex:rightBtnIndex];
        [self scaleButton:rightBtn withScale:rightScale];
    }


}

7、效果图

8、demo下载

下载地址（点击我）https://github.com/DaMingShen/Imitate163PageControlDemo