全部产品
云市场

定制导航栏

更新时间:2019-09-26 18:40:08

  • AUCustomNavigationBar 为 mPaaS 中专门为有需要导航栏透明定制的导航栏 。
  • 原生的导航栏当从透明切换到不透明时会有视觉体验问题,故写此类。

效果图

接口说明

  1. /**
  2. 自定义透明导航栏,主要用于导航栏需要透明的场景
  3. 由于用原生的导航栏切换会有视觉体验问题,故写此类
  4. */
  5. @interface AUCustomNavigationBar : UIView
  6. @property(nonatomic, strong) UIView *backgroundView; // 毛玻璃背景 view
  7. @property(nonatomic, strong) NSString *backButtonTitle; // 返回按钮 title(默认无)
  8. @property(nonatomic, strong) UIColor *backButtonTitleColor; // 返回按钮 title 颜色
  9. @property(nonatomic, strong) UIImage *backButtonImage; // 返回按钮图片
  10. @property(nonatomic, strong) NSString *title; // 标题
  11. @property(nonatomic, strong) UIColor *titleColor; // 标题颜色
  12. @property(nonatomic, strong) UIView *titleView; // 自定义 titleview
  13. @property(nonatomic, strong) NSString *rightItemTitle; // 右侧 item title
  14. @property(nonatomic, strong) UIColor *rightItemTitleColor; // 右侧 item title 颜色
  15. @property(nonatomic, strong) UIImage *rightItemImage; // 右侧 item 图片
  16. /**
  17. * 右侧 item 的 VoiceOver 提示文案,
  18. * 左侧 item 默认为“返回”
  19. * 右侧 item 默认是 rightItemTitle,如果没有设置 rightItemTitle,需要手动设置此属性来支持 VoiceOver
  20. */
  21. @property(nonatomic,strong) NSString *rightItemVoiceOverText;
  22. @property(nonatomic,strong) NSString *leftItemVoiceOverText;
  23. /**
  24. * 创建指定透明的导航栏 View。
  25. *
  26. * (1)此导航栏默认在左侧显示返回箭头图片,不显示返回文本。若当前页面需设置与框架逻辑一致的返回文案,请在 VC 中重写 - (UIView *)customNavigationBar 方法
  27. * (2)如需设置标题、右侧 item、毛玻璃背景,请调用相关接口
  28. *
  29. * @param currentVC 当前 VC
  30. *
  31. * @return 透明的导航栏 View
  32. */
  33. + (AUCustomNavigationBar *)navigationBarForCurrentVC:(UIViewController *)currentVC;
  34. /**
  35. * 设置毛玻璃背景 View,默认透明度为 0
  36. */
  37. - (void)setNavigationBarBlurEffective;
  38. /**
  39. * 创建导航栏右侧 item
  40. *
  41. * @param rightItemTitle 显示的文本
  42. * @param target target
  43. * @param action action
  44. *
  45. */
  46. - (void)setNavigationBarRightItemWithTitle:(NSString *)rightItemTitle target:(id)target action:(SEL)action;
  47. /**
  48. * 创建导航栏右侧 item
  49. *
  50. * @param rightItemImage 显示的图片
  51. * @param target target
  52. * @param action action
  53. *
  54. */
  55. - (void)setNavigationBarRightItemWithImage:(UIImage *)rightItemImage target:(id)target action:(SEL)action;
  56. /**
  57. * 创建导航栏左侧 item
  58. *
  59. * @param leftItemTitle 显示的文本
  60. * @param target target
  61. * @param action action
  62. *
  63. */
  64. - (void)setNavigationBarLeftItemWithTitle:(NSString *)leftItemTitle target:(id)target action:(SEL)action;
  65. /**
  66. * 创建导航栏左侧 item
  67. *
  68. * @param leftItemTitle 显示的图片
  69. * @param target target
  70. * @param action action
  71. *
  72. */
  73. - (void)setNavigationBarLeftItemWithImage:(UIImage *)leftItemTitle target:(id)target action:(SEL)action;
  74. @end

代码示例

  1. AUCustomNavigationBar *navBar = [AUCustomNavigationBar navigationBarForCurrentVC:self];
  2. [navBar setNavigationBarBlurEffective]; // 毛玻璃效果
  3. [self.view addSubview:navBar];
  4. navBar.title = @"标题";
  5. navBar.backButtonImage = [AUIconView iconWithName:kICONFONT_BILL width:22 color:AU_COLOR_LINK];
  6. navBar.backButtonTitle = @"账单";
  7. navBar.rightItemImage = [AUIconView iconWithName:kICONFONT_ADD width:22 color:AU_COLOR_LINK];
  8. // mPaaS 内使用,需覆盖父类的如下两个方法
  9. - (BOOL)autohideNavigationBar
  10. {
  11. return YES;
  12. }
  13. - (UIView *)customNavigationBar
  14. {
  15. return self.navBar;
  16. }