導(dǎo)航欄作為iOS開發(fā)的一大空控件來說,是非常的重要,可以實現(xiàn)各種效果,隱藏,透明,簡書的導(dǎo)航欄動畫等等,這次就寫一點自己的經(jīng)驗和總結(jié).
1.導(dǎo)航欄的基本屬性設(shè)置
導(dǎo)航欄的主要的子控件如下,其中都包含了所有的屬性和方法:
- UINavigationItem
- UINavigationBar
-
UIBarButtonItem
剩下的就是自定義左右barButtonItem,這個不就不多說了.
附上一個不錯的博客:http://www.itdecent.cn/p/f797793d683f
2.透明導(dǎo)航欄
1.思路是遍歷NavigationBar的子視圖,找到bar的背景圖片,控制它的hidden
附上代碼:
- (void)viewWillDisappear:(BOOL)animated
{
[self NavigationBarClear:self.navigationController.navigationBar hidden:NO];
self.navigationController.navigationBar.backgroundColor = [UIColor whiteColor];
}
- (void)viewWillAppear:(BOOL)animated
{
[self NavigationBarClear:self.navigationController.navigationBar hidden:YES];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];
}
#pragma mark ----
#pragma mark privateMethods
-(void)NavigationBarClear:(UINavigationBar *)navigationBar hidden:(BOOL) hidden
{
if ([navigationBar respondsToSelector:@selector( setBackgroundImage:forBarMetrics:)]){
NSArray *list = navigationBar.subviews;
for (id obj in list) {
if ([obj isKindOfClass:[UIImageView class]]) {
UIImageView *imageView = (UIImageView *)obj;
imageView.hidden = hidden;
}
}
}
}
2.1.gif
2.是更換背景圖片
- (void)viewWillDisappear:(BOOL)animated
{
[self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setShadowImage:nil];
}
- (void)viewWillAppear:(BOOL)animated
{
[self.navigationController.navigationBar setBackgroundImage:[self imageWithBgColor:[UIColor colorWithRed:1 green:1 blue:1 alpha:0]] forBarMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setShadowImage:[self imageWithBgColor:[UIColor colorWithRed:1 green:1 blue:1 alpha:0]]];
}
#pragma mark ----
#pragma mark privateMethods
-(UIImage *)imageWithBgColor:(UIColor *)color {
CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [color CGColor]);
CGContextFillRect(context, rect);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
2.2.gif
3.導(dǎo)航欄根據(jù)滾動是否透明
1.基于2.1的基礎(chǔ)上實現(xiàn),主要是根據(jù)tableView的偏移量來對navTgationBar的背景色進(jìn)行設(shè)置,其中改了nav的frame,有一點小問題
#pragma mark ----
#pragma mark scrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
UIColor *color=[UIColor redColor];
CGFloat offset=scrollView.contentOffset.y;
self.navigationController.navigationBar.frame = CGRectMake(0, 0, self.view.frame.size.width, 64);
if (offset< 0) {
self.navigationController.navigationBar.backgroundColor = [color colorWithAlphaComponent:1];
}else{
CGFloat alpha = offset / 200;
if (alpha < 0.5) {
self.navigationController.navigationBar.backgroundColor = [color colorWithAlphaComponent:0];
}
}
}
3.1.gif
2.是基于2.2的基礎(chǔ)上實現(xiàn)的,根據(jù)tableView的偏移量,去更改nav的背景圖片
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
[self.navigationController.navigationBar setBackgroundImage:[self imageWithBgColor:[UIColor colorWithRed:1 green:0 blue:0 alpha:self.tableView.contentOffset.y / 100]] forBarMetrics:UIBarMetricsDefault];
}
3.2.gif
- 根據(jù)2.1,2.2 的比對,還是改變圖片實現(xiàn)比較合理一點,如果控制圖片的是否隱藏,會改變navBar的frame,然后對整體有一個向下20的偏移.
4.導(dǎo)航欄隱藏問題
進(jìn)入新的界面時隱藏狀態(tài)欄,view頂頭,在退出VC時記得把隱藏狀態(tài)改成NO
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:NO];
self.navigationController.navigationBarHidden = YES;
}
4.1.gif
5.類似簡書的效果
根據(jù)scrollView的滾動方向在設(shè)置nav是否hidden,適當(dāng)做一個動畫可以讓體驗更好一些.
#pragma mark ----
#pragma mark scrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
if (willEndContentOffsetX > startContentOffsetX) {
[UIView animateWithDuration:0.5 animations:^{
//這里可以有一些其他的操作
} completion:^(BOOL finished) {
self.navigationController.navigationBarHidden = YES;
}];
}else{
[UIView animateWithDuration:0.5 animations:^{
//這里可以有一些其他的操作
} completion:^(BOOL finished) {
self.navigationController.navigationBarHidden = NO;
}];
}
}
#pragma mark scrollViewDelegate
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{ //拖動前的起始坐標(biāo)
startContentOffsetX = scrollView.contentOffset.y;
}
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{ //將要停止前的坐標(biāo)
willEndContentOffsetX = scrollView.contentOffset.y;
}
5.gif
有些人可能會遇到導(dǎo)航欄下面有一條黑線的問題
// 添加上這一句，可以去掉導(dǎo)航條下邊的shadowImage，就可以正常顯示了
self.navigationController.navigationBar.shadowImage = [[UIImage alloc] init];
self.navigationController.navigationBar.translucent = NO;
