全部产品

iOS 小程序自定义导航栏

更新时间:2020-09-15 18:03:45

自 10.1.60 版本基线起,iOS 小程序支持对导航栏进行自定义,您可以对导航栏中的标题、背景、返回按钮、右侧的设置和关闭按钮进行自定义。本文将向您详细介绍关于自定义 iOS 小程序导航栏的方法。

自定义导航栏背景和标题

全局自定义导航栏背景和标题

如果您要全局自定义小程序所有页面默认导航栏背景和标题,则需要在 app.json 中修改 window 配置。

  • 导航栏隐藏:您需要自定义 JSAPI 实现。
  • 导航栏透明:"transparentTitle": "always"
  • 导航栏渐变:"transparentTitle": "auto"
  • 导航栏颜色:"titleBarColor": "#f00"
  • 导航栏标题文案:"defaultTitle": "Alert"
  • 导航栏标题颜色:在 H5 基类的 viewWillAppear 方法的 super 之后中,修改当前页面 titleView 的样式。

    1. - (void)viewWillAppear:(BOOL)animated
    2. {
    3. [super viewWillAppear:animated];
    4. ...
    5. BOOL isTinyApp = [NBUtils isTinyAppWithSession:self.psdSession];
    6. if (isTinyApp) {
    7. id<NBNavigationTitleViewProtocol> titleView = self.navigationItem.titleView;
    8. [[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
    9. [[titleView mainTitleLabel] setTextColor:[UIColor redColor]];
    10. }
    11. }
  • 导航栏标题图片:”titleImage”: “https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png“。

  • 导航栏标题位置:请参考以下代码进行实现。

    1. - (NSDictionary *)nebulaCustomConfig
    2. {
    3. return @{@"h5_tinyAppTitleViewAlignLeftConfig" : @"{\"enable\":\"NO\"}"};
    4. }

自定义某一页面导航栏背景和标题

如果您要自定义小程序中某一页面的导航栏背景和标题,则需要在该页面的 .json 中配置。

  • 导航栏隐藏:您需要自定义 JSAPI 实现。
  • 导航栏透明:"transparentTitle": "always"
  • 导航栏渐变:"transparentTitle": "auto"
  • 导航栏颜色:"titleBarColor": "#f00"
  • 导航栏标题文案:"defaultTitle": "Alert"
  • 导航栏标题颜色:您需要自定义 JSAPI,在 JSAPI 中修改当前页面 titleView 的样式。
  1. - (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSD JSAPI ResponseCallbackBlock)callback
  2. {
  3. [super handler:data context:context callback:callback];
  4. // 可以通过data传递字体、颜色等
  5. id<NBNavigationTitleViewProtocol> titleView = context.currentViewController.navigationItem.titleView;
  6. [[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
  7. [[titleView mainTitleLabel] setTextColor:[UIColor redColor]];
  8. }

动态修改当前页面的导航栏背景和标题

如果您要动态修改当前页面的导航栏背景和标题,则需要调用 my.setNavigationBar 进行配置。

  • 导航栏隐藏:您需要自定义 JSAPI 实现。
  • 导航栏透明:不支持。
  • 导航栏渐变:不支持。
  • 导航栏颜色:"backgroundColor": "#f00"
  • 导航栏标题文案:"title": "新标题"
  • 导航栏标题颜色:您需要自定义 JSAPI,在 JSAPI 中修改当前页面 titleView 的样式。

    1. - (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSD JSAPI ResponseCallbackBlock)callback
    2. {
    3. [super handler:data context:context callback:callback];
    4. // 可以通过data传递字体、颜色等
    5. id<NBNavigationTitleViewProtocol> titleView = context.currentViewController.navigationItem.titleView;
    6. [[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
    7. [[titleView mainTitleLabel] setTextColor:[UIColor redColor]];
    8. }
  • 导航栏标题图片:”image”: “https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png“,

自定义导航栏返回按钮

如果您要全局修改返回按钮样式,则需要在 H5 基类的 viewWillAppear 方法的 super 之后中,修改当前页面 leftBarButtonItem 样式。可修改的样式包含以下内容,您可以参考下方代码段以获得更多指导。

  • 修改返回箭头和文案颜色
  • 修改返回箭头样式和文字内容
  • 隐藏返回箭头
  • 隐藏返回文案

    1. // 修改左侧返回按钮样式
    2. AUBarButtonItem *backItem = self.navigationItem.leftBarButtonItem;
    3. if ([backItem isKindOfClass:[AUBarButtonItem class]]) {
    4. // 在默认返回按钮基础上,修改返回箭头和文案颜色
    5. backItem.backButtonColor = [UIColor greenColor];
    6. backItem.titleColor = [UIColor colorFromHexString:@"#00ff00"];
    7. // 修改返回箭头样式和文字内容
    8. // backItem.backButtonTitle = @"回退";
    9. // backItem.backButtonImage = [UIImage imageNamed:@"APCommonUI.bundle/add"];
    10. // 隐藏返回箭头
    11. // backItem.hideBackButtonImage = YES;
    12. // 隐藏返回文案:文案设置为透明,保留返回按钮s点击区域
    13. // backItem.titleColor = [UIColor clearColor];
    14. }

导航栏右侧设置和关闭按钮

全局修改右侧按钮图片和颜色

如果您要修改右侧按钮图片和颜色,则需要引入头文件 #import <TinyappService/TASUtils.h> 并进行如下配置。

  • 修改关闭按钮颜色:[TASUtils sharedInstance].customItemColor = [UIColor redColor]
  • 修改关闭按钮图片:[TASUtils sharedInstance].customCloseImage = [UIImage imageNamed:@"xx"]
  • 显示分享按钮:[TASUtils sharedInstance].shoulShowSettingMenu = YES
  • 修改分享按钮图片:[TASUtils sharedInstance].customSettingImage = [UIImage imageNamed:@"xx"]
  • 修改分享按钮颜色:[TASUtils sharedInstance].customItemColor = [UIColor redColor]

全局修改右侧按钮样式

如果您要全局修改右侧按钮样式,则需要在 H5 基类的 viewwillAppear 中,重写当前页面的 rightBarButtonItem

  1. - (void)viewWillAppear:(BOOL)animated
  2. {
  3. [super viewWillAppear:animated];
  4. ...
  5. BOOL isTinyApp = [NBUtils isTinyAppWithSession:self.psdSession];
  6. if (isTinyApp) {
  7. self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"关闭" style:UIBarButtonItemStylePlain target:self action:@selector(onClickClose)];
  8. }
  9. }
  10. - (void)onClickClose
  11. {
  12. [TASUtils exitTinyApplication:self.appId];
  13. }