iOS 自定義導航欄按鈕的那些事兒

關于導航欄

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

參考這個方法即可完成導航欄自定義動畫的效果。

歡迎各位同學指出問題，相互學習～

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容