iOS導(dǎo)航欄設(shè)置

作為一個(gè)iOS工程師，在項(xiàng)目中經(jīng)常遇到需要設(shè)置導(dǎo)航欄的情況，有的時(shí)候是需要設(shè)置全局導(dǎo)航欄，有的時(shí)候需要單獨(dú)的定義某個(gè)頁(yè)面的導(dǎo)航欄。通過(guò)本篇文章，我們來(lái)討論以下問(wèn)題：

  • 導(dǎo)航欄遮擋的問(wèn)題
  • 導(dǎo)航欄背景設(shè)置和分割線設(shè)置
  • 如何設(shè)置全局返回按鈕
  • 如何控制導(dǎo)航欄的高度
  • 如何添加全局返回手勢(shì)
  • 如何設(shè)置單個(gè)控制器的導(dǎo)航欄

導(dǎo)航欄遮擋的問(wèn)題

iOS7后默認(rèn)情況下，導(dǎo)航欄會(huì)遮擋ViewController的內(nèi)容。這個(gè)原因是由于導(dǎo)航欄的半透明translucent屬性造成的。（想要有半透明效果，那導(dǎo)航欄后邊要有東西啊，要不然怎么看出來(lái)半透明效果）。知道原因那我們就知道該怎么修改了。將導(dǎo)航欄的translucent屬性設(shè)為NO就可以了。

[[UINavigationBar appearance] setTranslucent:NO];

那除了這這種方法還有其他方法解決這個(gè)問(wèn)題么？
我又從UIViewController的接口文檔中，我找到了一下API：

@property(nonatomic,assign) UIRectEdge edgesForExtendedLayout NS_AVAILABLE_IOS(7_0); // Defaults to UIRectEdgeAll
@property(nonatomic,assign) BOOL extendedLayoutIncludesOpaqueBars NS_AVAILABLE_IOS(7_0); // Defaults to NO, but bars are translucent by default on 7_0.  
@property(nonatomic,assign) BOOL automaticallyAdjustsScrollViewInsets NS_AVAILABLE_IOS(7_0); // Defaults to YES

從這些屬性中我找到了其他辦法。

  1. 我們將edgesForExtendedLayout的值設(shè)置為UIRectEdgeNone的時(shí)候，控制器視圖的頂端會(huì)向下移動(dòng)到導(dǎo)航欄的底部。這個(gè)屬性和導(dǎo)航的translucent屬性是沒(méi)有關(guān)系的。這個(gè)屬性只對(duì)子控制器有效，對(duì)容器控制器無(wú)效。
  2. extendedLayoutIncludesOpaqueBars從屬性名稱中我們可以看出這個(gè)屬性是用來(lái)控制布局時(shí)是否包含透明Bar。這個(gè)屬性是和NavBar和Tabbar的translucent屬性是有關(guān)系的。這個(gè)屬性只有當(dāng)他們的translucent屬性為NO時(shí)，這個(gè)屬性才有用。當(dāng) extendedLayoutIncludesOpaqueBars = YES時(shí)。布局是從屏幕頂端（底部）開(kāi)始的，會(huì)被導(dǎo)航欄（或TabBar）遮擋。當(dāng)extendedLayoutIncludesOpaqueBars = NO時(shí)，布局是從導(dǎo)航欄底部（或TabBar頂部）開(kāi)始的，不會(huì)被導(dǎo)航欄（或TabBar）遮擋。
  3. automaticallyAdjustsScrollViewInsets屬性是用來(lái)控制容器視圖控制器中的子控制器的可滾動(dòng)區(qū)域插值的。例如當(dāng)導(dǎo)航欄中的某個(gè)控制器視圖是一個(gè)全屏UITableView，則會(huì)在UITableView的上下自動(dòng)插入NavBar和Tabbar的的高度
@interface UIViewController (UILayoutSupport)
// These objects may be used as layout items in the NSLayoutConstraint API
@property(nonatomic,readonly,strong) id<UILayoutSupport> topLayoutGuide NS_AVAILABLE_IOS(7_0);
@property(nonatomic,readonly,strong) id<UILayoutSupport> bottomLayoutGuide NS_AVAILABLE_IOS(7_0);
@end

從接口文檔中，我們得知這個(gè)用來(lái)做布局的。
官方還給了一個(gè)例子：

[button setTranslatesAutoresizingMaskIntoConstraints: NO];
id topGuide = myViewController.topLayoutGuide;
NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings (button, topGuide);
[myViewController.view addConstraints:
    [NSLayoutConstraint constraintsWithVisualFormat: @"V:[topGuide]-20-[button]"
                                                 options: 0
                                                 metrics: nil
                                                   views: viewsDictionary]];
[self.view layoutSubviews]; // You must call this method here or the system raises an exception

這兩個(gè)屬性是實(shí)現(xiàn)了<UILayoutSupport>協(xié)議的。從這個(gè)協(xié)議中我們可以得到length，也就是高度。這兩個(gè)屬性和NavBar和Tabbar的translucent屬性是有關(guān)系的。只有當(dāng)他們的translucent = YES時(shí)，他們的length才會(huì)返回對(duì)應(yīng)的高度。否則length = 0。

導(dǎo)航欄背景設(shè)置和分割線設(shè)置

導(dǎo)航欄背景
  1. 可以通過(guò)barTintColor來(lái)設(shè)置NavBar的顏色。
@property(nullable, nonatomic,strong) UIColor *barTintColor NS_AVAILABLE_IOS(7_0) UI_APPEARANCE_SELECTOR;  // default is nil
  1. 可以通過(guò)背景圖片來(lái)設(shè)置。
 - (void)setBackgroundImage:(nullable UIImage *)backgroundImage forBarMetrics:(UIBarMetrics)barMetrics NS_AVAILABLE_IOS(5_0) UI_APPEARANCE_SELECTOR;
隱藏分割線（陰影線）
@property(nullable, nonatomic,strong) UIImage *shadowImage NS_AVAILABLE_IOS(6_0) UI_APPEARANCE_SELECTOR;

通過(guò)將shadowImage屬性設(shè)為一個(gè)空的UIImage來(lái)實(shí)現(xiàn)隱藏分割線的效果。前提是導(dǎo)航欄的背景是用圖片來(lái)設(shè)置的。當(dāng)然還有其他方法，比如通過(guò)遍歷NavBar的子視圖來(lái)找到這個(gè)分割線，然后刪除或隱藏，但我還是覺(jué)得這種方法是最簡(jiǎn)單快捷的。

如何設(shè)置全局返回按鈕

設(shè)置返回按鈕的圖片
[[UINavigationBar appearance] setBackIndicatorImage:baceImage];
 [[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:baceImage];
設(shè)置返回按鈕的文字
  1. 方案一：繼承UINavigationController
    //重寫方法
    - (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated{
        [super pushViewController:viewController animated:animated];
        viewController.navigationItem.backBarButtonItem = [[UIBarButtonItem alloc]initWithTitle:@"" style:(UIBarButtonItemStylePlain) target:nil action:nil];
    }
  1. 方案二：實(shí)現(xiàn)<UINavigationControllerDelegate>協(xié)議
 - (void)navigationController:(UINavigationController *)navigationController willShowViewController:(UIViewController *)viewController animated:(BOOL)animated{
        viewController.navigationItem.backBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"" style:(UIBarButtonItemStylePlain) target:nil action:nil];
}

如何控制導(dǎo)航欄的高度

添加UINavigationBar的Category重載sizeThatFits方法或者繼承UINavigationBar重寫sizeThatFits屬性。

- (CGSize)sizeThatFits:(CGSize)size{
    
    return (CGSize){
        [UIScreen mainScreen].bounds.size.width,70
    };
}

如何添加全局返回手勢(shì)

一個(gè)絲滑的全屏滑動(dòng)返回手勢(shì)
FDFullscreenPopGesture
這個(gè)庫(kù)不用一行代碼就可以給UINavigationController添加了全屏滑動(dòng)返回手勢(shì)。并且非常完美的實(shí)現(xiàn)了指定控制器導(dǎo)航欄隱藏的問(wèn)題?？梢詫?duì)指定控制器隱藏導(dǎo)航欄和關(guān)閉全屏滑動(dòng)返回手勢(shì)。

如何設(shè)置單個(gè)控制器的導(dǎo)航欄

利用FDFullscreenPopGesture，隱藏指控制器的導(dǎo)航欄，然后添加自定義的導(dǎo)航欄，來(lái)完成我們想要的效果，比如滑動(dòng)動(dòng)畫隱藏或其他效果。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容