关于导航栏

iOS系统自2007年1月在苹果举办的MacWorld大会上伴随着第一款苹果手机问世以来，经历过数版本的衍变，当初的第一代手机，曾经被无数人吐槽的所谓智能机，在数10年间迅速边成了全球无数果粉痴迷的产品，在外观从iPhone1到iPhone5s一直延续乔布斯人性化的设计理念，虽然后来的第六代，第七代产品以及最近曝光的iPhone8慢慢摆脱乔布斯的影子，但在用户体验，简约设计等花费的功夫更不逊色与历代的任何一款产品。

不论如何衍变，iOS系统从1.0发展到如今的10.3，有一个细节是值得我们关注的，那就是导航栏，从7.0以前常见的系统自带的导航栏到7.0之后扁平化的风格，给UI交互上提升了一大步。

接下来回到文章的主题，在iOS系统中导航栏使用UINavigationController作为容器，装载并管理视图控制器UIViewController的进栈和出栈，在UIViewController切换的过程中，导航栏发挥了桥梁的作用。

系统导航栏

在实际开发过程中，经常遇到系统默认的导航栏，可以满足简单的需求，系统提供的样式如下：

typedefNS_ENUM(NSInteger, UIBarButtonSystemItem) {

UIBarButtonSystemItemDone,

UIBarButtonSystemItemCancel,

UIBarButtonSystemItemEdit,

UIBarButtonSystemItemSave,

UIBarButtonSystemItemAdd,

UIBarButtonSystemItemFlexibleSpace,

UIBarButtonSystemItemFixedSpace,

UIBarButtonSystemItemCompose,

UIBarButtonSystemItemReply,

UIBarButtonSystemItemAction,

UIBarButtonSystemItemOrganize,

UIBarButtonSystemItemBookmarks,

UIBarButtonSystemItemSearch,

UIBarButtonSystemItemRefresh,

UIBarButtonSystemItemStop,

UIBarButtonSystemItemCamera,

UIBarButtonSystemItemTrash,

UIBarButtonSystemItemPlay,

UIBarButtonSystemItemPause,

UIBarButtonSystemItemRewind,

UIBarButtonSystemItemFastForward,

UIBarButtonSystemItemUndoNS_ENUM_AVAILABLE_IOS(3_0),

UIBarButtonSystemItemRedoNS_ENUM_AVAILABLE_IOS(3_0),

UIBarButtonSystemItemPageCurlNS_ENUM_AVAILABLE_IOS(4_0),

};

举个例子：左边放两个系统按钮，右边放3个按钮，需要注意的是leftBarButtonItems的数组是从左往右摆放，而rightBarButtonItems是从右往左摆放

- (void)viewDidLoad {

[superviewDidLoad];

self.title=@"Detail";

self.view.backgroundColor=[UIColorwhiteColor];

UIBarButtonItem*reply=[[UIBarButtonItemalloc]initWithBarButtonSystemItem:UIBarButtonSystemItemReplytarget:nilaction:nil];

UIBarButtonItem*add=[[UIBarButtonItemalloc]initWithBarButtonSystemItem:UIBarButtonSystemItemAddtarget:nilaction:nil];

UIBarButtonItem*book=[[UIBarButtonItemalloc]initWithBarButtonSystemItem:UIBarButtonSystemItemBookmarkstarget:nilaction:nil];

UIBarButtonItem*search=[[UIBarButtonItemalloc]initWithBarButtonSystemItem:UIBarButtonSystemItemSearchtarget:nilaction:nil];

UIBarButtonItem*refresh=[[UIBarButtonItemalloc]initWithBarButtonSystemItem:UIBarButtonSystemItemRefreshtarget:nilaction:nil];

self.navigationItem.leftBarButtonItems=@[reply,add];

self.navigationItem.rightBarButtonItems=@[refresh,search,book];

}

运行结果如下：

自定义导航栏

在如今各种层出不穷的app中，尤其是爆款至上的年代，系统按钮远远满足不了各位PM大咖的要求，学会使用自定义导航栏是自管重要的，接下来先上一段代码。

UIImageView*saveImgv=[[UIImageViewalloc]initWithFrame:CGRectMake(0,0,22,22)];

saveImgv.image=[UIImageimageNamed:@"保存.png"];//保存

UIImageView*shareImgv=[[UIImageViewalloc]initWithFrame:CGRectMake(0,0,22,22)];

shareImgv.image=[UIImageimageNamed:@"分享.png"];//分享

UIBarButtonItem*saveBitem=[[UIBarButtonItemalloc]initWithCustomView:saveImgv];

UIBarButtonItem*shareBitem=[[UIBarButtonItemalloc]initWithCustomView:shareImgv];

UIBarButtonItem*spaceBar = [[UIBarButtonItemalloc]initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpacetarget:nilaction:nil];

spaceBar.width=15;//间隔作用

self.navigationItem.rightBarButtonItems=@[shareBitem,spaceBar,saveBitem];

完美的解决的了自定义按钮之间的间隔

自定义导航栏动画效果

控制器在跳转过程中执行了push或者pop动画都是系统自带的，从左往右滑动,或者present 和dismiss 从下往上弹出视图，在特定的场景下有时需要自定义跳转的动画，或者跟随手势的上下滑动而执行跳转或者退出的动画，这时候自定义动画可以满足这样场景。

首先需要实现导航栏的两个代理

@interfaceViewController()<UINavigationControllerDelegate,UIViewControllerTransitioningDelegate>

@end

#pragma mark UINavigationControllerDelegatepush pop

-(id)navigationController:(UINavigationController*)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController*)fromVC toViewController:(UIViewController*)toVC {

if(operation==UINavigationControllerOperationPush) {

PushAniation *pushani=[[PushAniation alloc]init];//自定义一个跳转动画继承UIViewControllerAnimatedTransitioning

returnpushani;

}elseif(operation==UINavigationControllerOperationPop) {

PopAniation *pushani=[[PopAniation alloc]init];//自定义一个跳转动画继承UIViewControllerAnimatedTransitioning

returnpushani;

}

returnnil;

}

顺便贴上自定义动画的代码，可以根据自己的需求改动动画：

#import

#import

@interfaceWGC_CustomPushAnimation :NSObject

@end

------------------WGC_CustomPushAnimation。

#import"WGC_CustomPushAnimation.h"

#import"FUTabBarControllerMgr.h"

@implementationWGC_CustomPushAnimation

-(NSTimeInterval)transitionDuration:(id)transitionContext {

return0.3;

}

//设定好了转场的动画的起始位置和最终位置，系统自己计算出中间帧，当执行动画时候，系统自动播放帧，我不用去维护这个动画的帧

-(void)animateTransition:(id)transitionContext {

//目的ViewController

UIViewController*toView=[transitionContextviewControllerForKey:UITransitionContextToViewControllerKey];

//起始ViewController

UIViewController*fromView=[transitionContextviewControllerForKey:UITransitionContextFromViewControllerKey];

UIView*containerViews=[transitionContextcontainerView];

//添加toView到上下文

[containerViewsinsertSubview:toView.viewaboveSubview:fromView.view];

//自定义动画

CGRectbound=[UIScreenmainScreen].bounds;

toView.view.transform=CGAffineTransformMakeTranslation(0, bound.size.height);

[UIViewanimateWithDuration:[selftransitionDuration:transitionContext]animations:^{

//fromView.view.transform = CGAffineTransformMakeTranslation(-320, -568);

toView.view.transform=CGAffineTransformIdentity;//相当于初始状态，有点像重置

}completion:^(BOOLfinished) {

fromView.view.transform=CGAffineTransformIdentity;//相当于初始状态，有点像重置

[[FUTabBarControllerMgrshareMgr]hidenWithAnimation:YES];

//声明过渡结束时调用completeTransition:这个方法

[transitionContextcompleteTransition:![transitionContexttransitionWasCancelled]];

if(![transitionContexttransitionWasCancelled]) {

[[FUTabBarControllerMgrshareMgr]hidenWithAnimation:YES];

}

}];

}

@end

参考这个方法即可完成导航栏自定义动画的效果。

欢迎各位同学指出问题，相互学习～