美文网首页专注iOS开发
iOS 网易贵金属上滑隐藏导航栏(合并在状态栏)效果

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

作者: 爱上火烧的小毛驴 | 来源:发表于2016-12-02 14:00 被阅读183次

前言

最近玩网易贵金属的时候发现首页隐藏导航栏的效果很不错,简书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;
    
}

相关文章

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/qktqmttx.html