前言
最近玩網(wǎng)易貴金屬的時候發(fā)現(xiàn)首頁隱藏導航欄的效果很不錯爹凹,簡書app衫樊、nice app都有類似的效果了罪,便百度找了一下锭环,然而并沒有類似的效果,于是自己嘗試寫了幾行代碼泊藕,最初實現(xiàn)都會有一些細節(jié)不符辅辩,最終找到了問題所在,實現(xiàn)了類似效果娃圆,分享給想要此效果的猿友們玫锋。
思路
- 自己添加一個和導航欄同樣顏色的view放在status位置,然后使用代碼 self.navigationController.hidesBarsOnSwipe = YES; 來控制導航欄的隱藏與顯示讼呢。 ---代碼量少撩鹿,簡單 (safari效果)
- 在滾動代理方法里面根據(jù)velocity.y來判斷導航欄的隱藏與顯示。---代碼量多悦屏,復雜(網(wǎng)易貴金屬效果)
( 注意:添加view在狀態(tài)欄位置必須加上此行代碼self.extendedLayoutIncludesOpaqueBars = YES; 不然會出現(xiàn)初始時候位置自動向下偏移64的問題节沦。 )
網(wǎng)易貴金屬原版效果
仿網(wǎng)易貴金屬效果
- (void)viewDidLoad {
[super viewDidLoad];
self.extendedLayoutIncludesOpaqueBars = YES;
self.navigationItem.title = @"網(wǎng)易貴金屬";
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 - 網(wǎng)易貴金屬原版的效果- 正在拖動的時候不隱藏窜管,松手的時候才會隱藏
-(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效果
- (void)viewDidLoad {
[super viewDidLoad];
self.extendedLayoutIncludesOpaqueBars = YES;
self.navigationItem.title = @"網(wǎng)易貴金屬";
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;
}