iOS 网易贵金属上滑隐藏导航栏(合并在状态栏)效果

前言

最近玩网易贵金属的时候发现首页隐藏导航栏的效果很不错，简书app、nice app都有类似的效果，便百度找了一下，然而并没有类似的效果，于是自己尝试写了几行代码，最初实现都会有一些细节不符，最终找到了问题所在，实现了类似效果，分享给想要此效果的猿友们。

思路

1. 自己添加一个和导航栏同样颜色的view放在status位置，然后使用代码 self.navigationController.hidesBarsOnSwipe = YES; 来控制导航栏的隐藏与显示。 ---代码量少，简单 （safari效果）
2. 在滚动代理方法里面根据velocity.y来判断导航栏的隐藏与显示。---代码量多，复杂（网易贵金属效果）
   ( 注意：添加view在状态栏位置必须加上此行代码self.extendedLayoutIncludesOpaqueBars = YES; 不然会出现初始时候位置自动向下偏移64的问题。 )

网易贵金属原版效果

网易gif.gif

仿网易贵金属效果

仿网易效果gif.gif

- (void)viewDidLoad {
    [super viewDidLoad];
    self.extendedLayoutIncludesOpaqueBars = YES;
    self.navigationItem.title = @"网易贵金属";
    
    UITableView *tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
    tableView.dataSource = self;
    tableView.delegate = self;
    [self.view addSubview:tableView];
    
/*
自己添加一个和导航栏同样颜色的view放在status位置，但是必须加上此行代码self.extendedLayoutIncludesOpaqueBars = YES;
不然初始时候位置会自动向下偏移64
*/
    UIView *statusView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 375, 20)];
    statusView.backgroundColor = [UIColor colorWithRed:14/255.f green:41/255.f blue:71/255.f alpha:1];
    [self.view addSubview:statusView];    
}
#pragma mark - 网易贵金属原版的效果- 正在拖动的时候不隐藏，松手的时候才会隐藏
-(void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{
    if(velocity.y>0){
        [self.navigationController setNavigationBarHidden:YES animated:YES];
    }else{
        [self.navigationController setNavigationBarHidden:NO animated:YES];
    }
}

Safari效果

Safari效果gif.gif

- (void)viewDidLoad {
    [super viewDidLoad];
    self.extendedLayoutIncludesOpaqueBars = YES;
    self.navigationItem.title = @"网易贵金属";
    
    UITableView *tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
    tableView.dataSource = self;
    tableView.delegate = self;
    [self.view addSubview:tableView];
    
    UIView *statusView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 375, 20)];
    statusView.backgroundColor = [UIColor colorWithRed:14/255.f green:41/255.f blue:71/255.f alpha:1];
    [self.view addSubview:statusView];
    
#pragma mark - 类似iphone上的Safari滑动隐藏效果- 只要上拖就会隐藏，缓慢下拉的时候不会显示
    self.navigationController.hidesBarsOnSwipe = YES;
    
}