天天看點
傳回

技術幹貨 ｜ Native 頁面下如何實作導航欄的定制化開發？Native 修改導航欄左側傳回按鈕Native 修改導航欄左側關閉按鈕Native 修改導航欄标題Native 修改導航欄右側按鈕Native 自定義導航欄

技術幹貨 ｜ Native 頁面下如何實作導航欄的定制化開發？Native 修改導航欄左側傳回按鈕Native 修改導航欄左側關閉按鈕Native 修改導航欄标題Native 修改導航欄右側按鈕Native 自定義導航欄

很多 mPaaS Coder 在接入 H5 容器後都會對容器的導航欄進行深度定制，本文旨在通過不同實際場景的描述，供大家參考完成 Native 頁面的定制化開發。

歡迎關注 mPaaS 公衆号，下期推文，我們将為大家介紹 jsapi 下如何動态修改導航欄，敬請期待🤞🏻

Native 修改導航欄左側傳回按鈕

（一）自定義 NBPluginBase 插件中修改

1.自定義原生 BarButtonItem

監聽 kNBEvent_Scene_NavigationItem_Left_Back_Create_Before，在此監聽事件中設定自定義 BarButtonItem

//監聽kNBEvent_Scene_NavigationItem_Left_Back_Create_Before，在此監聽事件中：

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(0, 0, 44, 44);
button.backgroundColor = [UIColor whiteColor];
[button setTitle:@"取消" forState:UIControlStateNormal];
button.titleLabel.font = [UIFont systemFontOfSize:14.0];
[button setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];       event.context.currentViewController.navigationItem.leftBarButtonItem.customView = button;

注：此方案自定義button，需要自行實作關閉頁面邏輯。

2.修改傳回按鈕

監聽 kNBEvent_Scene_NavigationItem_Left_Back_Create_After，在此監聽事件中修改預設傳回按鈕樣式，包括文案顔色、傳回箭頭等，文案内容預設不可修改。

//監聽kNBEvent_Scene_NavigationItem_Left_Back_Create_After，在此監聽事件中：
// 修改傳回按鈕樣式
NSArray *leftBarButtonItems = event.context.currentViewController.navigationItem.leftBarButtonItems;
if ([leftBarButtonItems count] == 1) {
    if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {
        //在預設傳回按鈕基礎上，修改傳回箭頭和文案顔色
        AUBarButtonItem *backItem = leftBarButtonItems[0];
        backItem.backButtonColor = [UIColor greenColor];
        backItem.titleColor = [UIColor orangeColor];// [UIColor colorFromHexString:@"#00ff00"];
        //隐藏、顯示傳回箭頭
        backItem.hideBackButtonImage = NO;
        //backItem.backButtonTitle; 标題内容更改無效。
                       
        // 隐藏傳回文案：文案設定為透明，保留傳回按鈕 s 點選區域
        //backItem.titleColor = [UIColor clearColor];
    }
}

（二）H5容器中自定義修改

1.方式一，在 viewWillAppear 擷取自定義啟動參數，根據參數自定義傳回按鈕。 

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    // 目前頁面的啟動參數
    NSDictionary *expandParams = self.psdScene.createParam.expandParams;
    NSLog(@"[mpaas] expandParams: %@", expandParams);
}

擷取啟動參數後，依據自定義參數實作自定義按鈕。

// 修改預設傳回按鈕文案顔色
    NSString *backButtonColorString = expandParams[@"backButtonColor"];
    if ([backButtonColorString isKindOfClass:[NSString class]] && [backButtonColorString length] > 0) {
        UIColor *backButtonColor = [UIColor colorFromHexString:backButtonColorString];
        NSArray *leftBarButtonItems = self.navigationItem.leftBarButtonItems;
        if ([leftBarButtonItems count] == 1) {
            if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {
                backItem.backButtonTitle = @"測試";// 傳回按鈕title
                backItem.titleColor = backButtonColor;// 傳回按鈕文本顔色
                backItem.backButtonColor = [UIColor blueColor];// 設定箭頭顔色
                backItem.hideBackButtonImage = NO;//隐藏傳回按鈕圖檔，提供給架構使用
                // 傳回按鈕圖檔 backItem.backButtonImage; 設定無效，隻可隐藏or顯示
            }
        }
    }

2.方式二，可以在 viewWillAppear 自定義整個傳回區域 AUBarButtonItem 按鈕、個數： 

AUBarButtonItem *backItem = [AUBarButtonItem barButtonItemWithIconFontName:kICONFONT_BACK iconColor:[UIColor lightGrayColor] target:self action:@selector(custBack:)];  

AUBarButtonItem *backItem = [AUBarButtonItem backBarButtonItemWithTitle:@"測試" backArrowColor:[UIColor redColor] target:self action:@selector(custBack:)];
backItem.customView.frame = CGRectMake(0, 0, 44, 44);
        
AUBarButtonItem *closeItem = [AUBarButtonItem barButtonItemWithIconFontName:kICONFONT_SYSTEM_CANCEL_BOLD iconColor:[UIColor lightGrayColor] target:self action:@selector(custClose:)];
closeItem.customView.frame = CGRectMake(0, 0, 30, 44);
        
self.navigationItem.leftBarButtonItems = @[backItem,closeItem];

如果要修改 BarButtonItem 的文字大小、顔色等深度定制可以參考以下代碼：

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(0, 0, 40, 40);
[button setTitle:@"我的" forState:UIControlStateNormal];
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[button setBackgroundColor: [UIColor whiteColor]];
button.titleLabel.font = [UIFont systemFontOfSize:14.0f];
AUBarButtonItem *backItem = [[AUBarButtonItem alloc] initWithCustomView:button];           
//傳回按鈕事件
- (void)custBack:(id)sender{
    NSLog(@"back -----");
    [self back];
}
//關閉所有session
- (void)custClose:(id)sender{
    NSLog(@"close   ------");
    NSArray<NBSession *> *sessions = [[NBContext sharedContext] sessions];
    for (NBSession* session in sessions) {
        [[NBContext sharedContext] exitSession:session animated:YES];
    }
}

Native 修改導航欄左側關閉按鈕

（一）在自定義 NBPluginBase 插件中關閉按鈕需自行建立

監聽 kNBEvent_Scene_NavigationItem_Left_Close_Create_Before，在此監聽事件中建立關閉按鈕。

//監聽kNBEvent_Scene_NavigationItem_Left_Close_Create_Before，在此監聽事件中：
// 建立關閉按鈕
[event preventDefault];
NBNavigationItemLeftCloseEvent *itemEvent = (NBNavigationItemLeftCloseEvent *)event;
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(0, 0, 44, 44);
button.backgroundColor = [UIColor whiteColor];
[button setTitle:@"關閉" forState:UIControlStateNormal];
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
itemEvent.customView = button;

監聽kNBEvent_Scene_NavigationItem_Left_Close_Create_After，在此監聽事件中修改關閉按鈕樣式。

//監聽kNBEvent_Scene_NavigationItem_Left_Close_Create_After，在此監聽事件中：
// 修改關閉按鈕樣式
[event preventDefault];
NBNavigationItemLeftCloseEvent *itemEvent = (NBNavigationItemLeftCloseEvent *)event;
UIButton *closeButton = (UIButton *)itemEvent.customView;
[closeButton setTitle:@"關閉" forState:UIControlStateNormal];
[closeButton setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];

Native 修改導航欄标題

（一）在viewWillAppear 擷取自定義啟動參數，根據參數自定義标題 

//打開H5離線包
NSString *appId = @"20190927";
    [[MPNebulaAdapterInterface shareInstance]startH5ViewControllerWithNebulaApp:@{@"appId":appId,@"defaultTitle":@"測試",@"readTitle":@"NO",@"titleColor":@"ff0000",@"titleFont":@"18.0"}];//啟動參數設定标題文案、顔色、大小;

這裡的參數key值appId、defaultTitle、readTitle為架構預設不可修改，其餘參數 key 值自定義。

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    // 目前頁面的啟動參數
    NSDictionary *expandParams = self.psdScene.createParam.expandParams;
    NSLog(@"[mpaas] expandParams: %@", expandParams);
    
    // 設定導航欄标題
    NSString *titleColorString = expandParams[@"titleColor"];
    NSString *titleFont = expandParams[@"titleFont"];
    if ([titleColorString isKindOfClass:[NSString class]] && [titleColorString length] > 0 && [titleFont length] > 0) {
        UIColor *titleColor = [UIColor colorFromHexString:titleColorString];
        id<NBNavigationTitleViewProtocol> titleView =          self.navigationItem.titleView;
        [[titleView mainTitleLabel] setTextColor:titleColor];
        
        float font = [titleFont floatValue];
        [[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:font]];
        
    }
}

Native 修改導航欄右側按鈕

（一）NBPluginBase 插件中自定義修改

1.在 NBPluginBase 中，

監聽 kNBEvent_Scene_NavigationItem_Right_Setting_Create_Before，在此監聽事件中建立導航欄右側按鈕。

//監聽kNBEvent_Scene_NavigationItem_Right_Setting_Create_Before，在此監聽事件中：
NBNavigationItemRightSettingEvent *settingEvent = (id)event;
settingEvent.adjustsWidthToFitText = YES;
settingEvent.maxWidth = [UIScreen mainScreen].bounds.size.width / 4.0f;
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(0, 0, 33, 40);
[button setTitle:@"設定" forState:UIControlStateNormal];
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[button setBackgroundColor: [UIColor whiteColor]];
settingEvent.customView = button;
[event preventDefault];

2.在 NBPluginBase 中

監聽kNBEvent_Scene_NavigationItem_Right_Setting_Create_After，在此監聽事件中修改導航欄右側按鈕。

//監聽kNBEvent_Scene_NavigationItem_Right_Setting_Create_After，在此監聽事件中：
NBNavigationItemRightSettingEvent *settingEvent = (id)event;
settingEvent.adjustsWidthToFitText = YES;
settingEvent.maxWidth = [UIScreen mainScreen].bounds.size.width / 4.0f;
UIButton *button = settingEvent.customView;
button.titleLabel.font = [UIFont systemFontOfSize:14.0f];
button.frame = CGRectMake(0, 0, 40, 40);
[button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
[button setTitleColor:[UIColor blackColor] forState:UIControlStateHighlighted];
[button setBackgroundColor: [UIColor whiteColor]];
[event stopPropagation];//去掉預設按鈕圖檔

注：

1. 在插件中自定義導航欄右側按鈕，必須要在打開H5容器的啟動參數中設定@{@"showOptionMenu": @"YES"} 否則設定右側按鈕無效。

2. 必須要在kNBEvent_Scene_NavigationItem_Right_Setting_Create_After監聽事件中實作[event stopPropagation];否則showOptionMenu按鈕的預設圖檔沒有辦法去掉。

（二）H5 容器中自定義修改

1.在 viewWillAppear 擷取自定義啟動參數，根據參數自定義設定 AUBarButtonItem按鈕。

（1）圖檔樣式：

AUBarButtonItem *rightItem1 = [[AUBarButtonItem alloc] initWithImage:image1 style:UIBarButtonItemStylePlain target:self action:@selector(rightBarItemPressed1)];
AUBarButtonItem *rightItem2 = [[AUBarButtonItem alloc] initWithImage:image2 style:UIBarButtonItemStylePlain target:self action:@selector(rightBarItemPressed2)];
//單個按鈕
self.navigationItem.rightBarButtonItem = rightItem1;
//多個按鈕
self.navigationItem.rightBarButtonItems = @[rightItem1, rightItem2];

（2）文字樣式：

AUBarButtonItem *titleItem1 = [[AUBarButtonItem alloc]initWithTitle:@"按鈕" style:UIBarButtonItemStylePlain target:self action:@selector(rightBarItemPressed1)];
AUBarButtonItem *titleItem2 = [[AUBarButtonItem alloc]initWithTitle:@"右側" style:UIBarButtonItemStylePlain target:self action:@selector(rightBarItemPressed2)];
//單個按鈕
self.navigationItem.rightBarButtonItem = rightItem1;
//多個按鈕
self.navigationItem.rightBarButtonItems = @[titleItem1, titleItem2];

2.如果要修改 BarButtonItem 的文字大小、顔色等深度定制參考以下代碼： 

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(0, 0, 40, 40);
[button setTitle:@"我的" forState:UIControlStateNormal];
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[button setBackgroundColor: [UIColor whiteColor]];
button.titleLabel.font = [UIFont systemFontOfSize:14.0f];
AUBarButtonItem *rightItem = [[AUBarButtonItem alloc] initWithCustomView:button];

Native 自定義導航欄

（一）隐藏原生導航欄

自定義導航欄，要先隐藏原生導航欄。

//隐藏容器類navBar
self.options.showTitleBar = NO;
//隐藏系統層navBar
[self.navigationController setNavigationBarHidden:YES];

（二）建立 navBarView

  1. 建立 AUCustomNavigationBar 初始化方法必須要 navigationBarForCurrentVC: 否則按鈕設定無效。
  2. 指派給 self.customNavigationBar 容器會自動适配H5頁面高度，否則需自行适配頁面。 
//建立navBarView，必須要用此方法
AUCustomNavigationBar *navBar = [AUCustomNavigationBar navigationBarForCurrentVC:self];
[self.view addSubview:navBar];
//設定給容器VC
self.customNavigationBar = navBar;

（三）自定義背景樣式

設定背景色、漸變色等，setNavigationBarBlurEffective 設定毛玻璃效果，支援更多樣式自選。

//設定背景顔色，漸變色可自行設定
navBar.backgroundColor = [UIColor lightGrayColor];
[navBar setNavigationBarBlurEffectiveWithStyle:UIBlurEffectStyleDark]; // 毛玻璃效果，更多樣式自選

（四）設定左側導航按鈕

1.設定左側導航按鈕方式一： 

//導航左側按鈕
navBar.backButtonTitle = @"取消";
navBar.backTitleLabel.font = [UIFont systemFontOfSize:16.0];
navBar.backButtonTitleColor = [UIColor orangeColor];
navBar.backButtonImage = [UIImage imageNamed:@"back_button@2x"];
[navBar addSubview:navBar.leftItem];

2.設定左側導航按鈕，自行關聯事件方式二，與方式一沖突，兩者選其一。 

//自行關聯事件方式，與上述屬性設定沖突。
//image和title兩者選其一
[navBar setNavigationBarLeftItemWithImage:[UIImage imageNamed:@"back_button@2x"]target:self action:@selector(leftItemImageClick)];
[navBar setNavigationBarLeftItemWithTitle:@"取消" target:self action:@selector(leftItemTitleClick)];

（五）設定導航欄标題

1.設定導航欄标題方式一: 

//設定導航欄标題
navBar.title = @"标題";
navBar.titleColor = [UIColor redColor];
navBar.titleLabel.font = [UIFont systemFontOfSize:14.0];

2.設定導航欄标題，AUDoubleTitleView雙标題titleView方式二： 

//設定雙标題titleView
AUDoubleTitleView *titleView = [[AUDoubleTitleView alloc]initWithTitle:@"主标題" detailTitle:@"副标題"];
navBar.titleView = titleView;
//這裡使用了mPaaS下雙标題UI，也可自行實作titleView

（六）設定導航欄右側按鈕

1.單個右側按鈕

（1）設定單個按鈕方式一：

//設定導航右側按鈕
navBar.rightItemTitle = @"菜單";
navBar.rightItemTitleColor = [UIColor blackColor];
//image和title兩者選其一
navBar.rightItemImage = [UIImage imageNamed:@"rightTT@2x"];

（2）設定單個按鈕方式二：

//自行關聯事件方式
//image和title兩者選其一
[navBar setNavigationBarRightItemWithTitle:@"菜單" target:self action:@selector(rightItemTitleClick)];
[navBar setNavigationBarRightItemWithImage:[UIImage imageNamed:@"rightTT@2x"] target:self action:@selector(rightItemImageClick)];

2.深度自定義單、多個右側按鈕

深度自定義右側按鈕、文字、大小、圖檔，自行關聯事件。

//深度自定義右側按鈕、文字、大小、圖檔、關聯事件
AUButton *button = [AUButton buttonWithStyle:AUButtonStyleNone title:@"右一" target:self action:@selector(rightItemTitleClick)];
button.titleLabel.font = [UIFont systemFontOfSize:16.0];
[button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    
AUButton *button1 = [AUButton buttonWithStyle:AUButtonStyleNone];
[button1 setImage:[UIImage imageNamed:@"rightTT@2x"] forState:UIControlStateNormal];
navBar.rightItemList = @[button,button1];

本文作者：阿裡雲 mPaaS TAM 團隊（石鵬飛 榮陽）

E · N · D

技術幹貨 ｜ Native 頁面下如何實作導航欄的定制化開發？Native 修改導航欄左側傳回按鈕Native 修改導航欄左側關閉按鈕Native 修改導航欄标題Native 修改導航欄右側按鈕Native 自定義導航欄
點選這裡

了解更多 mPaaS 詳情

移動開發 容器 開發容器 移動開發學習 js開發移動端 移動開發說明 開發移動裝置
上一篇: 阿裡雲PolarDB專業認證考試(ACP)題庫有哪些内容？
下一篇: 阿裡雲容器服務全面更新為 ACK Anywhere，讓雲的邊界拓展至企業需要的每個場景ACK Anywhere：“計算無界、承載無限”的新一代容器平台ACK Distro：安全、易用、開放的 Kubernetes 發行版

繼續閱讀