- 先看一下效果图：
1- 顶部是一张图片，下面是
tableView,图片加载在tableView上是tableView的tableHeaderView
2- 上滑时，逐渐的显示NavigationBar
下面来简单梳理一下：
- 1.
AppDelegate里面给控制器添加上navigationBar
SJNavigationAlphaController *navAlphaController = [[SJNavigationAlphaController alloc] init];
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:navAlphaController];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
self.window.rootViewController = nav;
[self.window makeKeyAndVisible];
- 2.添加文件 此文件为
UINavigationBar的分类,(代码中有)文件名:UINavigationBar+Awesome，此文件的作用是让navigationBar紧靠屏幕顶端，否则系统会自动空出状态栏的20像素高度，可能导致这样的不好效果：
- 3.控制器里面初始化
tableView,一个imageView作为tableView的tableHeaderView.吧啦吧啦（此处省略N字） - 4.设置
navigationBar透明
- (void)setUpNavigationBar
{
self.edgesForExtendedLayout = UIRectEdgeTop;
self.automaticallyAdjustsScrollViewInsets = NO;
[self.navigationController.navigationBar setTranslucent:YES];
self.navigationController.navigationBar.shadowImage = [UIImage new];
self.navigationController.view.backgroundColor = [UIColor clearColor];
}
- 5.修改
navigationBar的背景颜色,这里就是根据视图滑动时计算出一个透明度值，然后根据这个透明度值改变导航栏颜色
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
UIColor * color = kNavigationBarColor;
CGFloat offsetY = scrollView.contentOffset.y;
if (offsetY < -20 ) {
[self.navigationController setNavigationBarHidden:YES animated:YES];
}else{
[self.navigationController setNavigationBarHidden:NO animated:YES];
if (offsetY > 50) {
CGFloat alpha = MIN(1, 1 - ((50 + 64 - offsetY) / 64));
_titleLabel.textColor = [UIColor colorWithRed:255 green:255 blue:255 alpha:alpha];
[self.navigationController.navigationBar lt_setBackgroundColor:[color colorWithAlphaComponent:alpha]];
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
} else {
[self setUpNavigationBar];
_titleLabel.textColor = [UIColor colorWithRed:255 green:255 blue:255 alpha:0];
[self.navigationController.navigationBar lt_setBackgroundColor:[color colorWithAlphaComponent:0]];
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
}
}
}
- 6.当然导航栏的
titleView,leftBarButtonItem,rightButtonItem都可以定义，示例代码中我只写了titleView,仅供参考。
