仿今日頭條項(xiàng)目架構(gòu) （四）—— 首頁(yè)父子控制器頻道切換的集成

版本記錄

版本號(hào) 時(shí)間
V1.0 2017.11.26

前言

今日頭條目前發(fā)展勢(shì)頭很猛，不僅有新聞資訊，還有視頻，直播，微頭條的模塊，可以說，頭條已經(jīng)集成了新聞、社交、短視頻和直播等多方面的技術(shù)和發(fā)展方向。接下來幾篇我們就以頭條為模板，對(duì)頭條整體框架的搭建以及相關(guān)細(xì)節(jié)處理進(jìn)行詳細(xì)解析，希望大家能喜歡，有什么不對(duì)的地方希望大家能批評(píng)指正。感興趣的可以看我寫的上面幾篇。詳細(xì)代碼已經(jīng)長(zhǎng)傳至刀客傳奇 - GitHub。
1. 仿今日頭條項(xiàng)目架構(gòu) （一）—— ios11導(dǎo)航欄和tabBar層級(jí)
2. 仿今日頭條項(xiàng)目架構(gòu) （二）—— 項(xiàng)目主架構(gòu)的搭建
3. 仿今日頭條項(xiàng)目架構(gòu) （三）—— 導(dǎo)航欄的自定義實(shí)現(xiàn)

首頁(yè)父子控制器頻道切換

下面我們就看一下首頁(yè)父子控制器的切換，可以使上邊頻道與下邊的視圖進(jìn)行同時(shí)變更狀態(tài)。下面我們就直接看代碼。

// 首頁(yè)控制器

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
{
    //初始化相關(guān)數(shù)據(jù)
    self.titleStrArr = @[@"推薦", @"熱點(diǎn)", @"視頻", @"北京", @"社會(huì)", @"頭條號(hào)", @"問答", @"娛樂", @"圖片", @"科技", @"汽車", @"體育", @"財(cái)經(jīng)", @"軍事", @"國(guó)際", @"段子"];
    
    self.views = [NSMutableArray arrayWithCapacity:16];
    self.vcs = [NSMutableArray arrayWithCapacity:4];
    
    //加載背后的滾動(dòng)視圖
    [self loadBackScrollView];
    
    //加載子視圖
    [self loadSubviews];
    
    //加載頂部滾動(dòng)視圖
    [self loadTitleView];
    
    //加載子控制器內(nèi)容
    [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;
    
    //加號(hào)按鈕
    [self loadPlusButton];
}

//加號(hào)按鈕

- (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);
    }];
}

//加載子控制器內(nèi)容

- (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:@"熱點(diǎn)"]){
            liveVC = [[JJHotVC alloc] initWithDiscovery:NO tag:YES withBanner:NO withKey:@"熱點(diǎn)" 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];
    }
}

//加載后面的滾動(dòng)視圖

- (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];
}

//加載子視圖數(shù)組

- (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(@"替換標(biāo)簽了--%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(@"加號(hào)按鈕");
}

#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

// 一個(gè)協(xié)議

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 - 被選中了");
    
    //接下來可以請(qǐng)求數(shù)據(jù)了
}

@end

// 熱點(diǎn)

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 - 被選中了");
    
    //接下來可以請(qǐng)求數(shù)據(jù)了
}

@end

主要的代碼差不多就這些，已經(jīng)上傳至GitHub。

功能效果

下面我們就看一下實(shí)現(xiàn)的功能效果。

推薦
熱點(diǎn)
其他

可見基本實(shí)現(xiàn)了這種標(biāo)簽頻道切換的邏輯。

后記

未完，待續(xù)~~~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容