[iOS微博项目 - 1.5] - NavigationBar标题按钮

A.NavigationBar标题按钮

1.需求

• 在“首页”的导航栏中部设置一个“首页”文字+箭头按钮
• 统一设置样式
• 根据实际文本长度调整宽度
• 消除系统自带的点击高亮效果
• 点击按钮，箭头上下颠倒

github: https://github.com/hellovoidworld/HVWWeibo

 

 

2.思路

• 使用UIButton，设置文本和图片
• 在initWithFrame统一样式
• 创建一个继承UIButton的自定义类，重写文本和图片的绘图方法，互换位置
• 设置一个标识成员变量，判断当前的按钮状态（弹出 or 缩回）

 

3.实现

（1）自定义继承UIButton的类 HVWNavigationBarTitleButton

 //
 //  HVWNavigationBarTitleButton.m
 //  HVWWeibo
 //
 //  Created by hellovoidworld on 15/2/2.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "HVWNavigationBarTitleButton.h"

 @implementation HVWNavigationBarTitleButton

 /** 重写initWithFrame, 统一设置按钮的样式 */
 - (instancetype)initWithFrame:(CGRect)frame {
     if (self = [super initWithFrame:frame]) {
         // 设置字体
         self.titleLabel.font = HVWNavigationTitleFont;
         [self setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

         // 文本右对齐
         [self.titleLabel setTextAlignment:NSTextAlignmentRight];

         // 取消图标高亮效果
         [self setAdjustsImageWhenDisabled:NO];

         // 图片居中
         [self.imageView setContentMode:UIViewContentModeCenter];

     }

     return self;
 }

 /** 重写iamge的绘图方法 */
 - (CGRect)imageRectForContentRect:(CGRect)contentRect {
     CGFloat height = contentRect.size.height;
     CGFloat width = height;
     CGFloat x = self.size.width - width;
     CGFloat y = ;
     return CGRectMake(x, y, width, height);
 }

 /** 重写title的绘图方法 */
 - (CGRect)titleRectForContentRect:(CGRect)contentRect {
     CGFloat height = contentRect.size.height;
     // 文本宽度 = 按钮整体宽度 - 图片宽度
     CGFloat width = self.height - height;
     CGFloat x = ;
     CGFloat y = ;
     return CGRectMake(x, y, width, height);
 }

 @end

 

（2）在“首页”控制器设置“标题按钮”:

HVWHomeViewController.m:

 - (void)viewDidLoad {
     [super viewDidLoad];

     // 添加导航控制器按钮
     // 左边按钮
     self.navigationItem.leftBarButtonItem = [UIBarButtonItem itemWithImage:@"navigationbar_friendsearch" hightlightedImage:@"navigationbar_friendsearch_highlighted" target:self selector:@selector(searchFriend)];

     // 右边按钮
     self.navigationItem.rightBarButtonItem = [UIBarButtonItem itemWithImage:@"navigationbar_pop" hightlightedImage:@"navigationbar_pop_highlighted" target:self selector:@selector(pop)];

     // 设置标题按钮
     HVWNavigationBarTitleButton *titleButton = [[HVWNavigationBarTitleButton alloc] init];
     titleButton.height = ;
     titleButton.width = ;
     [titleButton setTitle:@"首页" forState:UIControlStateNormal];
     [titleButton setImage:[UIImage imageWithNamed:@"navigationbar_arrow_down"] forState:UIControlStateNormal];
     // 设置背景图片
     [titleButton setBackgroundImage:[UIImage resizedImage:@"navigationbar_filter_background_highlighted"] forState:UIControlStateHighlighted];

     // 监听按钮点击事件，替换图标
     [titleButton addTarget:self action:@selector(titleButtonClickd:) forControlEvents:UIControlEventTouchUpInside];

     self.navigationItem.titleView = titleButton;
 }

 /** 标题栏按钮点击事件 */
 - (void) titleButtonClickd:(UIButton *) button {
     self.titleButtonExtended = !self.titleButtonExtended;

     if (self.isTitleButtonExtended) {
         [button setImage:[UIImage imageWithNamed:@"navigationbar_arrow_up"] forState:UIControlStateNormal];
     } else {
         [button setImage:[UIImage imageWithNamed:@"navigationbar_arrow_down"] forState:UIControlStateNormal];
     }
 }

 #mark：有希望依赖图片缓存，使用"=="判断当前按钮图片来决定按钮状态的，发现使用currentImage和新建一个UIImage（同一张图片）出来的地址并不一致！所以不能采用。
 -(void)titleButtonClick:(UIButton *)titleButton
 {
     UIImage *titleImage=[UIImage imageWithName:@"navigationbar_arrow_down"];

     if (titleButton.currentImage==titleImage) {
         //换成箭头向上
         [titleButton setImage:[UIImage imageWithName:@"navigationbar_arrow_up"] forState:UIControlStateNormal];
     }else
     {
         //换成箭头向下
         [titleButton setImage:[UIImage imageWithName:@"navigationbar_arrow_down"] forState:UIControlStateNormal];
     }
 }

 

B.导航栏标题按钮弹出框

1.需求

点击导航栏标题按钮弹出一个框

点击框外的其他地方，隐藏此框

 

 

2.思路

因为框的范围涉及到了导航栏，所以不能放在导航栏下的内容界面控制器上，要放在导航栏上

在框和导航栏的夹层放置一个全屏的（透明/半透明）的UIButton，用来监听框外点击

封装此功能，可以作为一个弹出菜单控件

 

（1）简单尝试直接在窗口上添加一个UIImageView

HVWHomeViewController:

 /** 标题栏按钮点击事件 */
 - (void) titleButtonClickd:(UIButton *) button {
     self.titleButtonExtended = !self.titleButtonExtended;

     if (self.isTitleButtonExtended) {
         [button setImage:[UIImage imageWithNamed:@"navigationbar_arrow_up"] forState:UIControlStateNormal];

         // 弹出框
         UIView *window = [[UIApplication sharedApplication] keyWindow];
         UIImageView *popView = [[UIImageView alloc] init];
         popView.size = CGSizeMake(, );
         popView.centerX = window.width * 0.5;
         popView.y = ;
         popView.image = [UIImage resizedImage:@"popover_background"];
         [self.navigationController.view addSubview:popView];

     } else {
         [button setImage:[UIImage imageWithNamed:@"navigationbar_arrow_down"] forState:UIControlStateNormal];
     }
 }

 

 

（2）点击其他区域，隐藏弹出框

使用一个全屏透明/半透明UIButton夹在弹出框和底层的控件之间，监听点击事件

 /** 标题栏按钮点击事件 */
 - (void) titleButtonClickd:(UIButton *) button {
     self.titleButtonExtended = !self.titleButtonExtended;

     if (self.isTitleButtonExtended) {
         [button setImage:[UIImage imageWithNamed:@"navigationbar_arrow_up"] forState:UIControlStateNormal];

         UIView *window = [[UIApplication sharedApplication] keyWindow];

         // 中间辅助覆盖层（帮助隐藏弹出框）
         UIButton *coverLayer = [UIButton buttonWithType:UIButtonTypeCustom];
         coverLayer.frame = window.bounds;
         coverLayer.backgroundColor = [UIColor blackColor];
         coverLayer.alpha = 0.2;
         [window addSubview:coverLayer];
         [coverLayer addTarget:self action:@selector(coverLayerClicked:) forControlEvents:UIControlEventTouchUpInside];

         // 弹出框
         UIImageView *popView = [[UIImageView alloc] init];
         self.popView = popView;
         popView.size = CGSizeMake(, );
         popView.centerX = window.width * 0.5;
         popView.y = ;
         popView.userInteractionEnabled = YES;

         popView.image = [UIImage resizedImage:@"popover_background"];
         [window addSubview:popView];

     } else {
         [button setImage:[UIImage imageWithNamed:@"navigationbar_arrow_down"] forState:UIControlStateNormal];
     }
 }

 /** 辅助覆盖层点击事件 */
 - (void) coverLayerClicked:(UIButton *) button {
     if (self.isTitleButtonExtended) {
         [button removeFromSuperview];
         [self.popView removeFromSuperview];
         [self titleButtonClickd:self.titleButton];
     }
 }

 

 

 

（3）由于弹出框功能可能在多处用到，而且让控制器负责创建不合适，所以封装成一个类

封装成“弹出菜单”类HVWPopMenu（继承UIView）

内部包含：

背景图片

遮盖UIButton

一个内容界面 （如tableViewController），作为背景图片的子控件

 

 //
 //  HVWPopMenu.h
 //  HVWWeibo
 //
 //  Created by hellovoidworld on 15/2/2.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import <UIKit/UIKit.h>

 typedef enum {
     PopMenuArrowLeft,
     PopMenuArrowMid,
     PopMenuArrowRight
 } PopMenuArrow;

 @class HVWPopMenu;
 @protocol HVWPopMenuDelegate <NSObject>

 @optional
 - (void) popMenuDidHideMenu:(HVWPopMenu *) popMenu;

 @end

 @interface HVWPopMenu : UIView

 /** 背景兼内容容器 */
 @property(nonatomic, strong) UIImageView *backgroundContainer;

 #pragma mark - 成员属性
 /** 遮盖夹层 */
 @property(nonatomic, strong) UIButton *coverLayer;

 /** 内容控件 */
 @property(nonatomic, strong) UIView *contentView;

 /** 箭头位置 */
 @property(nonatomic, assign) PopMenuArrow popMenuArrow;

 /** 遮盖夹层透明标识 */
 @property(nonatomic, assign, getter=isDimCoverLayer) BOOL dimCoverLayer;

 /** 代理 */
 @property(nonatomic, weak) id<HVWPopMenuDelegate> delegate;

 #pragma mark - 初始化方法
 - (instancetype) initWithContentView:(UIView *) contentView;
 + (instancetype) popMenuWithContentView:(UIView *) contentView;

 #pragma mark - 使用方法
 /** 弹出 */
 - (void) showMenuInRect:(CGRect) rect;

 /** 隐藏 */
 - (void) hideMenu;

 @end

 

 //
 //  HVWPopMenu.m
 //  HVWWeibo
 //
 //  Created by hellovoidworld on 15/2/2.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "HVWPopMenu.h"

 @implementation HVWPopMenu

 #pragma mark - 初始化方法
 - (instancetype) initWithContentView:(UIView *) contentView {
     if (self = [super init]) {
         self.contentView = contentView;
     }

     return self;
 }

 + (instancetype) popMenuWithContentView:(UIView *) contentView {
     return [[self alloc] initWithContentView:contentView];
 }

 /** 初始化子控件 */
 - (instancetype)initWithFrame:(CGRect)frame {
     self = [super initWithFrame:frame];
     if (self) {
         // 中间辅助覆盖层（帮助隐藏弹出框）
         UIButton *coverLayer = [UIButton buttonWithType:UIButtonTypeCustom];
         self.coverLayer = coverLayer;
         [self setDimCoverLayer:YES];
         [coverLayer addTarget:self action:@selector(coverLayerClicked) forControlEvents:UIControlEventTouchUpInside];
         [self addSubview:coverLayer];

         // 添加背景容器
         UIImageView *backgroundContainer = [[UIImageView alloc] init];
         self.backgroundContainer = backgroundContainer;
         backgroundContainer.userInteractionEnabled = YES;
         [self setPopMenuArrow:PopMenuArrowMid];
         [self addSubview:backgroundContainer];
     }

     return self;
 }

 /** 遮盖夹层点击事件 */
 - (void) coverLayerClicked {
     [self hideMenu];
 }

 #pragma mark - 使用方法
 /** 弹出 */
 - (void) showMenuInRect:(CGRect) rect {
     // 准备添加到当前主窗口上
     UIView *window = [[UIApplication sharedApplication] keyWindow];
     self.frame = window.bounds;
     [window addSubview:self];

     self.coverLayer.frame = window.bounds;
     self.backgroundContainer.frame = rect;

     // 添加内容控件
     if (self.contentView) {
         CGFloat topMargin = ;
         CGFloat leftMargin = ;
         CGFloat bottomMargin = ;
         CGFloat rightMargin = ;

         self.contentView.x = leftMargin;
         self.contentView.y = topMargin;
         self.contentView.width = self.backgroundContainer.width - leftMargin - rightMargin;
         self.contentView.height = self.backgroundContainer.height - topMargin - bottomMargin;

         [self.backgroundContainer addSubview:self.contentView];
     }
 }

 /** 隐藏 */
 - (void) hideMenu {
     if ([self.delegate respondsToSelector:@selector(popMenuDidHideMenu:)]) {
         [self.delegate popMenuDidHideMenu:self];
     }

     [self removeFromSuperview];
 }

 #pragma mark - 特性设置
 /** 设置遮盖夹层是否透明 */
 - (void)setDimCoverLayer:(BOOL)dimCoverLayer {
     if (dimCoverLayer) { // 需要半透明模糊效果的
         self.coverLayer.backgroundColor = [UIColor blackColor];
         self.coverLayer.alpha = 0.2;
     } else { // 全透明
         self.coverLayer.backgroundColor = [UIColor clearColor];
         self.coverLayer.alpha = 1.0;
     }
 }

 /** 设置弹出菜单顶部箭头位置：左、中、右 */
 - (void)setPopMenuArrow:(PopMenuArrow)popMenuArrow {
     _popMenuArrow = popMenuArrow;

     switch (popMenuArrow) {
         case PopMenuArrowLeft:
             self.backgroundContainer.image = [UIImage resizedImage:@"popover_background_left"];
             break;
         case PopMenuArrowMid:
             self.backgroundContainer.image = [UIImage resizedImage:@"popover_background"];
             break;
         case PopMenuArrowRight:
             self.backgroundContainer.image = [UIImage resizedImage:@"popover_background_right"];
             break;
         default:
             break;
     }
 }

 @end

 

 //  HVWHomeViewController.m
 /** 标题栏按钮点击事件 */
 - (void) titleButtonClickd:(UIButton *) button {
     self.titleButtonExtended = !self.titleButtonExtended;

     if (self.isTitleButtonExtended) {
         [button setImage:[UIImage imageWithNamed:@"navigationbar_arrow_up"] forState:UIControlStateNormal];

         // 添加弹出菜单
         UITableView *tableView = [[UITableView alloc] init];
         HVWPopMenu *popMenu = [HVWPopMenu popMenuWithContentView:tableView];
         popMenu.delegate = self;
         popMenu.dimCoverLayer = YES; // 模糊遮盖
         popMenu.popMenuArrow = PopMenuArrowMid; // 中部箭头

         // 弹出
         [popMenu showMenuInRect:CGRectMake(, , , )];

     } else {
         [button setImage:[UIImage imageWithNamed:@"navigationbar_arrow_down"] forState:UIControlStateNormal];
     }
 }

 #pragma mark - HVWPopMenuDelegate
 - (void)popMenuDidHideMenu:(HVWPopMenu *)popMenu {
     UIButton *titleButton = (UIButton *)self.navigationItem.titleView;
     [self titleButtonClickd:titleButton];
 }