仿今日头条项目架构（四）—— 首页父子控制器频道切换的集成

版本记录

版本号	时间
V1.0	2017.11.26

前言

今日头条目前发展势头很猛，不仅有新闻资讯，还有视频，直播，微头条的模块，可以说，头条已经集成了新闻、社交、短视频和直播等多方面的技术和发展方向。接下来几篇我们就以头条为模板，对头条整体框架的搭建以及相关细节处理进行详细解析，希望大家能喜欢，有什么不对的地方希望大家能批评指正。感兴趣的可以看我写的上面几篇。详细代码已经长传至刀客传奇 - GitHub。
1. 仿今日头条项目架构（一）—— ios11导航栏和tabBar层级
 2. 仿今日头条项目架构（二）—— 项目主架构的搭建
 3. 仿今日头条项目架构（三）—— 导航栏的自定义实现

首页父子控制器频道切换

下面我们就看一下首页父子控制器的切换，可以使上边频道与下边的视图进行同时变更状态。下面我们就直接看代码。

// 首页控制器

1. JJHomeVC.m

#import "JJHomeVC.h"
#import "JJSegementView.h"
#import "JJOtherVC.h"
#import "JJHotVC.h"
#import "JJRecommandVC.h"
#import "JJLIveBaseVC.h"

#define SEGMENT_HEIGHT          (40.0)

@interface JJHomeVC () <UIScrollViewDelegate>

@property (nonatomic, strong) UIScrollView *channelScrollView;
@property (nonatomic, strong) UIScrollView *backScrollView;
@property (nonatomic, strong) NSMutableArray <UIView *> *views;
@property (nonatomic, strong) NSMutableArray <UIViewController *> *vcs;
@property (nonatomic, strong) NSArray <NSString *> *titleStrArr;
@property (nonatomic, strong) JJSegementView *segmentView;
@property (nonatomic, strong) NSMutableArray<JJSegementView *> *segmentViewsArrM;

@end

@implementation JJHomeVC

#pragma mark - Override Base Function

- (void)viewDidLoad
{
    [super viewDidLoad];
   
    self.view.backgroundColor = [UIColor whiteColor];
    self.segmentViewsArrM = [NSMutableArray array];
    
    [self initUI];
}

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
}

#pragma mark - Object Private Function

- (void)initUI
{
    //初始化相关数据
    self.titleStrArr = @[@"推荐", @"热点", @"视频", @"北京", @"社会", @"头条号", @"问答", @"娱乐", @"图片", @"科技", @"汽车", @"体育", @"财经", @"军事", @"国际", @"段子"];
    
    self.views = [NSMutableArray arrayWithCapacity:16];
    self.vcs = [NSMutableArray arrayWithCapacity:4];
    
    //加载背后的滚动视图
    [self loadBackScrollView];
    
    //加载子视图
    [self loadSubviews];
    
    //加载顶部滚动视图
    [self loadTitleView];
    
    //加载子控制器内容
    [self loadContents];
}

- (void)loadTitleView
{
    self.channelScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0.0, 64.0, self.view.width - 50.0, SEGMENT_HEIGHT)];
    self.channelScrollView.contentSize = CGSizeMake(self.titleStrArr.count * 50.0, SEGMENT_HEIGHT);
    [self.channelScrollView addSubview:self.segmentView];
    self.channelScrollView.bounces = NO;
    self.channelScrollView.backgroundColor = [UIColor whiteColor];
    self.channelScrollView.showsHorizontalScrollIndicator = NO;
    [self.view addSubview:self.channelScrollView];
    
    for (NSInteger i = 0; i < self.titleStrArr.count; i ++) {
        JJSegementView *segmentView = [[JJSegementView alloc] initWithFrame:CGRectMake(50 * i, 0.0, 50.0, SEGMENT_HEIGHT)];
        segmentView.titleStr = self.titleStrArr[i];
        segmentView.tag = 1000 + i;
        [self.segmentViewsArrM addObject:segmentView];
        [segmentView addTarget:self action:@selector(segmentViewValueChanged:) forControlEvents:UIControlEventTouchUpInside];
        [self.channelScrollView addSubview:segmentView];
    }
    self.segmentViewsArrM[0].selected = YES;
    
    //加号按钮
    [self loadPlusButton];
}

//加号按钮

- (void)loadPlusButton
{
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setImage:[UIImage imageNamed:@"plus_button"] forState:UIControlStateNormal];
    [button addTarget:self action:@selector(plusButtonDidClick:) forControlEvents:UIControlEventTouchUpInside];
    button.frame = CGRectMake(kScreenWidth - 35.0, 5.0, 30.0, 30.0);
    [self.view addSubview:button];
    
    [button mas_makeConstraints:^(MASConstraintMaker *make) {
        make.width.height.equalTo(@20.0);
        make.left.equalTo(self.channelScrollView.mas_right).offset(15.0);
        make.centerY.equalTo(self.channelScrollView);
    }];
}

//加载子控制器内容

- (void)loadContents
{
    [self.vcs removeAllObjects];
    
    for (NSInteger i = 0; i < self.titleStrArr.count; i ++) {
        [self.views[i] removeAllSubviews];
        JJLIveBaseVC *liveVC;
        if ([self.titleStrArr[i] isEqualToString:@"推荐"]) {
            liveVC = [[JJRecommandVC alloc] initWithDiscovery:YES tag:YES withBanner:NO withKey:@"推荐" withPosition:i];
        }
        
        else if([self.titleStrArr[i] isEqualToString:@"热点"]){
            liveVC = [[JJHotVC alloc] initWithDiscovery:NO tag:YES withBanner:NO withKey:@"热点" withPosition:i];
        }
        else {
            liveVC = [[JJOtherVC alloc] initWithDiscovery:NO tag:YES withBanner:NO withKey:@"其他" withPosition:i];
        }
        
        [liveVC loadDataWithSuperVC:self view:self.views[i] withIndex:i];
        [self.vcs addObject:liveVC];
    }
}

//加载后面的滚动视图

- (void)loadBackScrollView
{
    self.backScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0.0, 64.0 + SEGMENT_HEIGHT, kScreenWidth, CGRectGetHeight(self.view.bounds) - SEGMENT_HEIGHT - 64.0 - 49.0)];
    self.backScrollView.scrollsToTop = NO;
    self.backScrollView.backgroundColor = [UIColor colorForHex:@"ededed"];
    self.backScrollView.showsHorizontalScrollIndicator = NO;
    self.backScrollView.showsVerticalScrollIndicator = NO;
    self.backScrollView.delegate = self;
    self.backScrollView.pagingEnabled = YES;
    self.backScrollView.bounces = NO;
    self.backScrollView.delaysContentTouches = YES;
    self.backScrollView.canCancelContentTouches = NO;
    [self.view addSubview:self.backScrollView];
}

//加载子视图数组

- (void)loadSubviews
{
    for (NSInteger i = 0; i < self.titleStrArr.count; i++) {
        UIView *contentView = [[UIView alloc] initWithFrame:CGRectZero];
        contentView.frame = CGRectMake(i * self.backScrollView.bounds.size.width, 0.0, self.backScrollView.bounds.size.width, self.backScrollView.bounds.size.height);
        [self.backScrollView addSubview:contentView];
        CGSize contentSize = self.backScrollView.contentSize;
        contentSize.height = self.backScrollView.frame.size.height;
        contentSize.width = (i + 1) * self.backScrollView.bounds.size.width;
        self.backScrollView.contentSize = contentSize;
        [self.views addObject:contentView];
    }
}

- (JJLIveBaseVC *)selectViewController:(NSInteger)i
{
    if(self.vcs && self.vcs.count > i){
        JJLIveBaseVC *liveCurrentV = (JJLIveBaseVC *)[self.vcs objectAtIndex:i];
        [liveCurrentV selectViewController];
        return liveCurrentV;
    }
    return nil;
}

#pragma mark - Action && Notification

- (void)segmentViewValueChanged:(JJSegementView *)sender
{
    NSLog(@"替换标签了--%ld", sender.tag);
    
    [self.segmentViewsArrM enumerateObjectsUsingBlock:^(JJSegementView * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        obj.selected = NO;
    }];
    self.segmentViewsArrM[sender.tag - 1000].selected = YES;
    
    UIView *hiddenView = [self.views objectAtIndex:sender.tag - 1000];
    [self.backScrollView scrollRectToVisible:hiddenView.frame animated:NO];
    
    [self selectViewController:sender.tag - 1000];
}

- (void)plusButtonDidClick:(UIButton *)button
{
    NSLog(@"加号按钮");
}

#pragma mark - UIScrollViewDelegate

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    if (scrollView == self.channelScrollView) {
        return;
    }
   
    NSInteger tag = self.backScrollView.contentOffset.x / kScreenWidth;
    [self.segmentViewsArrM enumerateObjectsUsingBlock:^(JJSegementView * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        obj.selected = NO;
    }];
    self.segmentViewsArrM[tag].selected = YES;
    JJSegementView *hiddenView = [self.segmentViewsArrM objectAtIndex:tag];
    [self.channelScrollView scrollRectToVisible:hiddenView.frame animated:NO];
    
    [self selectViewController:tag];
}

@end

// 一个协议

2. JJLiveBaseProtocol.h

#import <Foundation/Foundation.h>

@protocol JJLiveBaseProtocol <NSObject>

@optional

- (void)loadDataWithSuperVC:(UIViewController *)controller
                       view:(UIView *)view
                  withIndex:(NSInteger)index;

- (void)selectViewController;

@end

// 推荐

3. JJRecommandVC.h

#import "JJLIveBaseVC.h"

@interface JJRecommandVC : JJLIveBaseVC

- (instancetype)initWithDiscovery:(BOOL)isNew
                              tag:(BOOL)isTag
                       withBanner:(BOOL)isBanner
                          withKey:(NSString *)key
                     withPosition:(NSInteger )position;

@end

4. JJRecommandVC.m

#import "JJRecommandVC.h"

@interface JJRecommandVC ()

@end

@implementation JJRecommandVC

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor greenColor];
}

#pragma mark - Object Public Function

- (instancetype)initWithDiscovery:(BOOL)isNew
                              tag:(BOOL)isTag
                       withBanner:(BOOL)isBanner
                          withKey:(NSString *)key
                     withPosition:(NSInteger)position
{
    if (self = [super init]) {

    }
    return self;
}

#pragma mark - JJLiveBaseProtocol

- (void)loadDataWithSuperVC:(UIViewController *)controller view:(UIView *)view withIndex:(NSInteger)index
{
    if (controller != nil) {
        [controller addChildViewController:self];
    }
    
    if (view != nil) {
        [view addSubview:self.view];
        self.view.frame = view.bounds;
    }
}

- (void)selectViewController
{
    NSLog(@"JJRecommandVC - 被选中了");
    
    //接下来可以请求数据了
}

@end

// 热点

5. JJHotVC.h

#import "JJLIveBaseVC.h"

@interface JJHotVC : JJLIveBaseVC

- (instancetype)initWithDiscovery:(BOOL)isNew
                               tag:(BOOL)isTag
                        withBanner:(BOOL)isBanner
                           withKey:(NSString *)key
                      withPosition:(NSInteger )position;


@end

6. JJHotVC.m

#import "JJHotVC.h"

@interface JJHotVC ()

@end

@implementation JJHotVC

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor yellowColor];
}

#pragma mark - Object Public Function

- (instancetype)initWithDiscovery:(BOOL)isNew
                              tag:(BOOL)isTag
                       withBanner:(BOOL)isBanner
                          withKey:(NSString *)key
                     withPosition:(NSInteger)position
{
    if (self = [super init]) {
        
    }
    return self;
}

#pragma mark - JJLiveBaseProtocol

- (void)loadDataWithSuperVC:(UIViewController *)controller view:(UIView *)view withIndex:(NSInteger)index
{
    if (controller != nil) {
        [controller addChildViewController:self];
    }
    
    if (view != nil) {
        [view addSubview:self.view];
        self.view.frame = view.bounds;
    }
}

- (void)selectViewController
{
    NSLog(@"JJHotVC - 被选中了");
    
    //接下来可以请求数据了
}

@end

主要的代码差不多就这些，已经上传至GitHub。

功能效果

下面我们就看一下实现的功能效果。

后记

未完，待续~~~

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 221,135评论 6赞 514
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 94,317评论 3赞 397
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 167,596评论 0赞 360
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 59,481评论 1赞 296
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 68,492评论 6赞 397
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 52,153评论 1赞 309
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,737评论 3赞 421
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,657评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 46,193评论 1赞 319
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 38,276评论 3赞 340
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 40,420评论 1赞 352
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 36,093评论 5赞 349
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,783评论 3赞 333
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 32,262评论 0赞 23
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,390评论 1赞 271
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,787评论 3赞 376
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 45,427评论 2赞 359

仿今日头条项目架构 （四）—— 首页父子控制器频道切换的集成

版本记录

前言

首页父子控制器频道切换

功能效果

后记

推荐阅读更多精彩内容

仿今日头条项目架构（四）—— 首页父子控制器频道切换的集成