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

版本记录

版本号 时间
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 () 

@property (nonatomic, strong) UIScrollView *channelScrollView;
@property (nonatomic, strong) UIScrollView *backScrollView;
@property (nonatomic, strong) NSMutableArray  *views;
@property (nonatomic, strong) NSMutableArray  *vcs;
@property (nonatomic, strong) NSArray  *titleStrArr;
@property (nonatomic, strong) JJSegementView *segmentView;
@property (nonatomic, strong) NSMutableArray *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 

@protocol JJLiveBaseProtocol 

@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。


功能效果

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

仿今日头条项目架构 (四)—— 首页父子控制器频道切换的集成_第1张图片
推荐
仿今日头条项目架构 (四)—— 首页父子控制器频道切换的集成_第2张图片
热点
仿今日头条项目架构 (四)—— 首页父子控制器频道切换的集成_第3张图片
其他

可见基本实现了这种标签频道切换的逻辑。

后记

未完,待续~~~

仿今日头条项目架构 (四)—— 首页父子控制器频道切换的集成_第4张图片

你可能感兴趣的:(仿今日头条项目架构 (四)—— 首页父子控制器频道切换的集成)