iOS学习笔记02--导航栏（UINavigationContr

2016-04-12 本文已影响487人 MrFire_

之前我在使用导航栏的时候都是深度定制的，具体就是把系统的导航栏给隐藏掉，然后自己做一个view放到导航栏的位置，根据自己的需要直接往view上添加各种需要用到的控件，导致对系统自带的导航栏不是很清楚，今天特意研究了一下，记录之。

设置导航栏背景
如果项目中所有的导航栏的背景都是一样的，可以在APPDelegate里面如下设置：

//设定导航栏的背景色
[[UINavigationBar appearance] setBarTintColor:[UIColor redColor]];
//设定导航栏的背景图片，以下两个方法均的效果是一样的
[[UINavigationBar appearance] setBarTintColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"navgationBar"]]];
 [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"navgationBar"] forBarMetrics:UIBarMetricsDefault];
//设定导航栏按钮的颜色（返回按钮等等，但不包含标题）
[[UINavigationBar appearance] setTintColor:[UIColor blackColor]];

这样设置完成后，就把bar的背景色和按钮的颜色统一完成了，在项目中所有的bar的背景都是一样的了，需要注意的地方就是这些方法的调用要在navigationBar出现之前，一般在APPDelegate里面，否则该方法不会起作用。
那么如果有这样一个需要，某个界面的导航栏和别的都不一样，这个时候我们可以在那个界面做如下操作：

//设置背景色，如果需要的是图片的话也可以设置成图片
self.navigationController.navigationBar.barTintColor = [UIColor greenColor];
//设置按钮标题的颜色
self.navigationController.navigationBar.tintColor = [UIColor grayColor];

注意：这样设置后也是全局生效的，如果我们需要在某个单独的界面需要这种效果，而其他界面不需要，那么我们可以在该界面的viewWillAppear和viewWillDisappear中进行相应的设置：

//在这里设置成该界面需要的效果
-(void)viewWillAppear:(BOOL)animated{
    self.navigationController.navigationBar.tintColor = [UIColor grayColor];
    self.navigationController.navigationBar.barTintColor = [UIColor greenColor];
}
//在这里还原之前的设置
-(void)viewWillDisappear:(BOOL)animated{
    self.navigationController.navigationBar.tintColor = [UIColor blackColor];
    self.navigationController.navigationBar.barTintColor = [UIColor redColor];
}

那么效果就是，刚进入：

屏幕快照 2016-04-12 上午10.37.18.png

push后的界面：

屏幕快照 2016-04-12 上午10.37.32.png

而pop回来后还是原来的背景，这样就实现了对单独界面的定制。

设置标题
标题设置都是在相应的controller中，一下三种方法任选其一即可

self.title=@"首页";
self.navigationItem.title = @"首页";
self.navigationItem.titleView = [自定义view及其子类（label、segment等）];

既然是标题，那肯定就有字体的大小、颜色等属性，可以通过attribute属性来进行相应的设置：

self.navigationController.navigationBar.titleTextAttributes = @{NSForegroundColorAttributeName:[UIColor whiteColor],NSFontAttributeName:[UIFont systemFontOfSize:21]};

这里只是设置了字体大小、颜色，还有很多可以设置的属性,有兴趣的可以试一下：

UIKIT_EXTERN NSString * const NSFontAttributeName NS_AVAILABLE(10_0, 6_0);                // UIFont, default Helvetica(Neue) 12
UIKIT_EXTERN NSString * const NSParagraphStyleAttributeName NS_AVAILABLE(10_0, 6_0);      // NSParagraphStyle, default defaultParagraphStyle
UIKIT_EXTERN NSString * const NSForegroundColorAttributeName NS_AVAILABLE(10_0, 6_0);     // UIColor, default blackColor
UIKIT_EXTERN NSString * const NSBackgroundColorAttributeName NS_AVAILABLE(10_0, 6_0);     // UIColor, default nil: no background
UIKIT_EXTERN NSString * const NSLigatureAttributeName NS_AVAILABLE(10_0, 6_0);            // NSNumber containing integer, default 1: default ligatures, 0: no ligatures
UIKIT_EXTERN NSString * const NSKernAttributeName NS_AVAILABLE(10_0, 6_0);                // NSNumber containing floating point value, in points; amount to modify default kerning. 0 means kerning is disabled.
UIKIT_EXTERN NSString * const NSStrikethroughStyleAttributeName NS_AVAILABLE(10_0, 6_0);  // NSNumber containing integer, default 0: no strikethrough
UIKIT_EXTERN NSString * const NSUnderlineStyleAttributeName NS_AVAILABLE(10_0, 6_0);      // NSNumber containing integer, default 0: no underline
UIKIT_EXTERN NSString * const NSStrokeColorAttributeName NS_AVAILABLE(10_0, 6_0);         // UIColor, default nil: same as foreground color
UIKIT_EXTERN NSString * const NSStrokeWidthAttributeName NS_AVAILABLE(10_0, 6_0);         // NSNumber containing floating point value, in percent of font point size, default 0: no stroke; positive for stroke alone, negative for stroke and fill (a typical value for outlined text would be 3.0)
UIKIT_EXTERN NSString * const NSShadowAttributeName NS_AVAILABLE(10_0, 6_0);              // NSShadow, default nil: no shadow
UIKIT_EXTERN NSString *const NSTextEffectAttributeName NS_AVAILABLE(10_10, 7_0);          // NSString, default nil: no text effect
UIKIT_EXTERN NSString * const NSAttachmentAttributeName NS_AVAILABLE(10_0, 7_0);          // NSTextAttachment, default nil
UIKIT_EXTERN NSString * const NSLinkAttributeName NS_AVAILABLE(10_0, 7_0);                // NSURL (preferred) or NSString
UIKIT_EXTERN NSString * const NSBaselineOffsetAttributeName NS_AVAILABLE(10_0, 7_0);      // NSNumber containing floating point value, in points; offset from baseline, default 0
UIKIT_EXTERN NSString * const NSUnderlineColorAttributeName NS_AVAILABLE(10_0, 7_0);      // UIColor, default nil: same as foreground color
UIKIT_EXTERN NSString * const NSStrikethroughColorAttributeName NS_AVAILABLE(10_0, 7_0);  // UIColor, default nil: same as foreground color
UIKIT_EXTERN NSString * const NSObliquenessAttributeName NS_AVAILABLE(10_0, 7_0);         // NSNumber containing floating point value; skew to be applied to glyphs, default 0: no skew
UIKIT_EXTERN NSString * const NSExpansionAttributeName NS_AVAILABLE(10_0, 7_0);           // NSNumber containing floating point value; log of expansion factor to be applied to glyphs, default 0: no expansion
UIKIT_EXTERN NSString * const NSWritingDirectionAttributeName NS_AVAILABLE(10_6, 7_0);    // NSArray of NSNumbers representing the nested levels of writing direction overrides as defined by Unicode LRE, RLE, LRO, and RLO characters.  The control characters can be obtained by masking NSWritingDirection and NSTextWritingDirection values.  LRE: NSWritingDirectionLeftToRight|NSWritingDirectionEmbedding, RLE: NSWritingDirectionRightToLeft|NSWritingDirectionEmbedding, LRO: NSWritingDirectionLeftToRight|NSWritingDirectionOverride, RLO: NSWritingDirectionRightToLeft|NSWritingDirectionOverride,
UIKIT_EXTERN NSString * const NSVerticalGlyphFormAttributeName NS_AVAILABLE(10_7, 6_0);   // An NSNumber containing an integer value.  0 means horizontal text.  1 indicates vertical text.  If not specified, it could follow higher-level vertical orientation settings.  Currently on iOS, it's always horizontal.  The behavior for any other value is undefined.

除了title外还有一个属性：prompt，即副标题，设置后导航栏的高度会在原有的基础上增加30：

self.navigationItem.prompt = @"我是副标题";

效果：

屏幕快照 2016-04-12 上午11.09.13.png

不怎么美观的样子，很少会用到。

设置按钮
对于barItem，如果不是rootController ，那么会在左上角有一个系统自带的返回按钮，按钮的名字是上一级的title，效果如上图。我们当然可以自定制item：

    UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:@selector(backClick)];
    self.navigationItem.leftBarButtonItem = item;

屏幕快照 2016-04-12 下午12.10.59.png

这是系统为我们提供的类型，有很多种，可以根据需要选用：

    UIBarButtonSystemItemDone,
    UIBarButtonSystemItemCancel,
    UIBarButtonSystemItemEdit,  
    UIBarButtonSystemItemSave,  
    UIBarButtonSystemItemAdd,
    UIBarButtonSystemItemFlexibleSpace,
    UIBarButtonSystemItemFixedSpace,
    UIBarButtonSystemItemCompose,
    UIBarButtonSystemItemReply,
    UIBarButtonSystemItemAction,
    UIBarButtonSystemItemOrganize,
    UIBarButtonSystemItemBookmarks,
    UIBarButtonSystemItemSearch,
    UIBarButtonSystemItemRefresh,
    UIBarButtonSystemItemStop,
    UIBarButtonSystemItemCamera,
    UIBarButtonSystemItemTrash,
    UIBarButtonSystemItemPlay,
    UIBarButtonSystemItemPause,
    UIBarButtonSystemItemRewind,
    UIBarButtonSystemItemFastForward,
    UIBarButtonSystemItemUndo NS_ENUM_AVAILABLE_IOS(3_0),
    UIBarButtonSystemItemRedo NS_ENUM_AVAILABLE_IOS(3_0),
    UIBarButtonSystemItemPageCurl NS_ENUM_AVAILABLE_IOS(4_0),

如果这些仍然不够（实际上这些在项目中很少用到），我们可以自定义，可放图片或者文字：

//设置图片
UIBarButtonItem *backItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back"] style:UIBarButtonItemStylePlain target:self action:@selector(backClick)];
self.navigationItem.leftBarButtonItem = backItem;

//设置文字
UIBarButtonItem *backItem = [[UIBarButtonItem alloc] initWithTitle:@"返回" style:UIBarButtonItemStyleDone target:self action:@selector(backClick)];
backItem.tintColor = [UIColor redColor];//可以自定义颜色
backItem.width = 100;//如果有需要可以设置宽度，此宽度会影响item的作用范围
self.navigationItem.leftBarButtonItem = backItem;

假如我们想让我们的item既包含图片又包含文字，应该怎么办呢？再定制：

    UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 60, 44)];
    //button.backgroundColor = [UIColor blackColor];
    button.titleLabel.font = [UIFont systemFontOfSize:14];
    [button setTitle:@"返回" forState:UIControlStateNormal];
    [button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    [button setImage:[UIImage imageNamed:@"back"] forState:UIControlStateNormal];
    [button addTarget:self action:@selector(backClick) forControlEvents:UIControlEventTouchUpInside];
    [button setImageEdgeInsets:UIEdgeInsetsMake(0, -20, 0, 0)];
    [button setTitleEdgeInsets:UIEdgeInsetsMake(0, -40, 0, 0)];
    UIBarButtonItem *backItem = [[UIBarButtonItem alloc] initWithCustomView:button];

就是犟样子的：

屏幕快照 2016-04-12 下午12.44.37.png

我承认，很丑，木有什么艺术细菌，不过功能是实现了，等童靴们来做的更漂亮了。

以上是放置了一个item，也是可以放置多个的：

UIBarButtonItem *backItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back"] style:UIBarButtonItemStylePlain target:self action:@selector(backClick)];
UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:@selector(backClick)];
self.navigationItem.leftBarButtonItems = @[item,backItem];

效果：

屏幕快照 2016-04-12 下午12.52.54.png

这是左边的，右边的也是一样的，可以进行同样的设置，在这就不再赘述了。
会有一个小问题，就是iOS7之后自带边缘右滑返回的功能，而当我们自定义返回按钮后，右滑返回就失效了，解决办法也很简单，一句代码：

self.navigationController.interactivePopGestureRecognizer.delegate = (id)self;

toolBar
这样设置之后Toolbar就显示了出来

self.navigationController.toolbarHidden = NO;

接着给Toolbar添加按钮，也是barItem

    UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:@selector(backClick)];
    UIBarButtonItem *item2 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemReply target:nil action:nil];
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
    view.backgroundColor = [UIColor redColor];
    UIBarButtonItem *item3 = [[UIBarButtonItem alloc] initWithCustomView:view];
    UIBarButtonItem *flexItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
    [self setToolbarItems:@[item,item2,item3]];

看效果：

屏幕快照 2016-04-12 下午2.05.55.png

很挤得样子，我们可以修改一下：

    UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:@selector(backClick)];
    UIBarButtonItem *item2 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemReply target:nil action:nil];
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
    view.backgroundColor = [UIColor redColor];
    UIBarButtonItem *item3 = [[UIBarButtonItem alloc] initWithCustomView:view];
    UIBarButtonItem *flexItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
    [self setToolbarItems:@[flexItem,item,flexItem,item2,flexItem,item3,flexItem]];

再看：

屏幕快照 2016-04-12 下午2.01.32.png

这样看着就比较顺眼了。

push、pop动画的修改
1、push动画修改

    SecondViewController *second = [[SecondViewController alloc] init];
    CATransition *animation = [CATransition animation];//定义CATransition的一个对象
    [animation setDuration:1];//设置动画时间
    [animation setType:kCATransitionMoveIn];//设置动画类型，有很多种可供选择
    [animation setSubtype:kCATransitionReveal];
    [animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
    [self.navigationController.view.layer addAnimation:animation forKey:nil];//这一步是不能省的
    [self.navigationController pushViewController:second animated:NO];//这里一定要设置为No，否则的话效果就混乱了

2、pop，也是一样的

    CATransition *animation = [[CATransition alloc] init];
    animation.duration = 0.5;
    animation.type = kCATransitionFade;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    [self.navigationController.view.layer addAnimation:animation forKey:nil];
    [self.navigationController popViewControllerAnimated:NO];//同样要设为No

iOS学习笔记02--导航栏（UINavigationContr

猜你喜欢

热点阅读