版本记录

前言

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

自定义导航栏的实现

头条几个界面的导航栏样式是不同的，下面我们就自定义下导航栏。

1. JJNavigationVC.h

#import <UIKit/UIKit.h>

typedef NS_ENUM(NSUInteger, JJNavigationVCBarStyle) {
    JJNavigationVCBarStyleHome,
    JJNavigationVCBarStyleVideo,
    JJNavigationVCBarStyleMicro,
    JJNavigationVCBarStyleMine
};

@interface JJNavigationVC : UINavigationController

@property (nonatomic, assign) JJNavigationVCBarStyle style;

@end

2. JJNavigationVC.m

#import "JJNavigationVC.h"
#import "JJSearchBar.h"

@interface JJNavigationVC ()

@property (nonatomic, strong) UITextField *searchBarTextField;

@end

@implementation JJNavigationVC

#pragma mark - Override Base Function

- (void)viewDidLoad
{
    [super viewDidLoad];
}

#pragma mark - Object Private Function

- (void)initHomeNavigationBar
{
    //红色背景
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0.0, -20.0, self.navigationBar.bounds.size.width, 64.0)];
    view.backgroundColor = [UIColor redColor];
    [self.navigationBar addSubview:view];
    
    //今日头条几个文字
    UILabel *label = [[UILabel alloc] init];
    label.textColor = [UIColor whiteColor];
    label.font = [UIFont boldSystemFontOfSize:22];
    label.text = @"今日头条";
    [view addSubview:label];
    
    [label sizeToFit];
    [label mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(view).offset(5.0);
        make.left.equalTo(view).offset(20.0);
    }];
    
    //搜索框
    JJSearchBar *searchGroupBar = [[JJSearchBar alloc] init];
    searchGroupBar.showsCancelButton = YES;
    searchGroupBar.layer.cornerRadius = 8.0;
    searchGroupBar.layer.masksToBounds = YES;
//    searchGroupBar.delegate = self;
//    [searchGroupBar setValue:@"取消" forKeyPath:@"_cancelButtonText"];
//    [searchGroupBar setSearchBarStyle:UISearchBarStyleProminent];
    [searchGroupBar setBackgroundImage:[UIImage new]];
    [searchGroupBar setImage:[UIImage imageNamed:@"shortvideo_search_icon"] forSearchBarIcon:UISearchBarIconSearch state:UIControlStateNormal];
    UIButton *cancelBtn = [searchGroupBar valueForKeyPath:@"cancelButton"];
    cancelBtn.hidden = YES;
    [view addSubview:searchGroupBar];
    
    [searchGroupBar mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(label.mas_right).offset(15.0);
        make.right.equalTo(view).offset(-20.0);
        make.centerY.equalTo(label);
        make.height.equalTo(@28);
    }];
    
    self.searchBarTextField = [searchGroupBar valueForKey:@"_searchField"];
    [self.searchBarTextField setBackgroundColor:[UIColor whiteColor]];
    self.searchBarTextField.placeholder = @"输入任何你感兴趣的";
    self.searchBarTextField.rightViewMode = UITextFieldViewModeNever;
    [self.searchBarTextField setValue:[UIColor darkGrayColor] forKeyPath:@"_placeholderLabel.textColor"];
    [self.searchBarTextField setValue:[UIFont fontWithName:@"PingFangSC-Light" size:14.0] forKeyPath:@"_placeholderLabel.font"];
    [self.searchBarTextField setClearButtonMode:UITextFieldViewModeNever];
    self.searchBarTextField.layer.cornerRadius = 8.0;
    self.searchBarTextField.layer.masksToBounds = YES;
}

#pragma mark - Getter && Setter

- (void)setStyle:(JJNavigationVCBarStyle)style
{
    switch (style) {
        case JJNavigationVCBarStyleHome:
        {
            [self initHomeNavigationBar];
        }
            break;
            
        default:
            break;
    }
}

@end

顶部搜索栏的优化

大家都知道UISearchBar里面的子视图是有UITextField的，但是他俩的frame是不一样的，但是如果你想做一样的frame怎么办呢，这里我给大家提供一个思路：自定义类继承UISearchBar，并在其layoutSubviews方法中重写更改UITextField控件的大小，具体代码如下所示：

#import "JJSearchBar.h"

@implementation JJSearchBar

#pragma mark - Override Base Function

- (void)layoutSubviews
{
    [super layoutSubviews];
    
    self.barTintColor = [UIColor whiteColor];
    UITextField *searchTextField = [[[self.subviews firstObject] subviews] lastObject];
    searchTextField.frame = self.bounds;
}

@end

效果实现

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

首页

西瓜视频

微头条

我的

后记

未完，待续~~~