版本記錄

前言

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

自定義導航欄的實現(xiàn)

頭條幾個界面的導航欄樣式是不同的，下面我們就自定義下導航欄。

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

頂部搜索欄的優(yōu)化

大家都知道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

效果實現(xiàn)

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

首頁

西瓜視頻

微頭條

我的

后記

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