前言
最近玩网易贵金属的时候发现首页隐藏导航栏的效果很不错,简书app、nice app都有类似的效果,便百度找了一下,然而并没有类似的效果,于是自己尝试写了几行代码,最初实现都会有一些细节不符,最终找到了问题所在,实现了类似效果,分享给想要此效果的猿友们。
思路
- 自己添加一个和导航栏同样颜色的view放在status位置,然后使用代码 self.navigationController.hidesBarsOnSwipe = YES; 来控制导航栏的隐藏与显示。 ---代码量少,简单 (safari效果)
- 在滚动代理方法里面根据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;
}
网友评论