UINavigationController介绍：6-自定义导航栏（锤子便签）

转自hcios.com

1、“锤子便签”导航栏样例

“锤子便签”是目前非常流行的一款便签类工具App，整体设计非常简洁。本节主要用来实现锤子便签的两个主要界面导航栏，如下图所示。

• 首页：首页导航栏有3个控件，左右按钮以及中间的标题；
• 新提醒：新提醒界面的导航栏左侧有一个按钮，右侧有两个按钮，没有中间标题。

2、实现透明导航栏

锤子便签的导航栏实现比较巧妙，整个控制器的视图使用了一个背景图片，背景图片中为导航栏展示了一个特殊区域，因此，在实际开发中，需要把系统自带的导航栏颜色设置为透明。以下代码请添加到导航控制器定义中。

 
 
    //设置BarStyle
    self.navigationBar.barStyle = UIBarStyleBlackTranslucent;
    
    //设置导航栏透明
    [self.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
    self.navigationBar.shadowImage = [UIImage new];
    self.navigationBar.translucent = YES;

3、添加首页NavigationItem

在实际开发中navigationItem的左右按钮以及中间的titleView，一般都需要完全定制，通过定制才能够控制控件的位置、大小等外观属性。另外，还需要考虑到多尺寸屏幕的适配问题，因此需要定义宏（macro）来判定设备型号。

• 新建一个Global.h文件，在文件中定义判定设备类型的宏；

 
 
#define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
#define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
#define IS_RETINA ([[UIScreen mainScreen] scale] >= 2.0)
 
#define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)
#define SCREEN_HEIGHT ([[UIScreen mainScreen] bounds].size.height)
#define SCREEN_MAX_LENGTH (MAX(SCREEN_WIDTH, SCREEN_HEIGHT))
#define SCREEN_MIN_LENGTH (MIN(SCREEN_WIDTH, SCREEN_HEIGHT))
 
#define IS_IPHONE_4_OR_LESS (IS_IPHONE && SCREEN_MAX_LENGTH < 568.0)
#define IS_IPHONE_5AND5S (IS_IPHONE && SCREEN_MAX_LENGTH == 568.0)
#define IS_IPHONE_6AND6S (IS_IPHONE && SCREEN_MAX_LENGTH == 667.0)
#define IS_IPHONE_6PAND6SP (IS_IPHONE && SCREEN_MAX_LENGTH == 736.0)

• 在子控制器中，根据设备类型，计算偏移量；

 
 
    //根据设备计算偏移量
    CGFloat offsetY;
    if (IS_IPHONE_6AND6S) {
        offsetY = -8;
    }else if(IS_IPHONE_6PAND6SP) {
        offsetY = -15;
    }else {
        offsetY = 0;
    }

• 添加titleView

 
 
    //TitleView
    UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 33)];
    titleLabel.text = @"锤子便签";
    titleLabel.textAlignment = NSTextAlignmentCenter;
    titleLabel.textColor = [UIColor whiteColor];
    UIView *centerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 33)];
    [centerView addSubview:titleLabel];
    centerView.bounds = CGRectOffset(centerView.bounds, 0, offsetY);
    self.navigationItem.titleView = centerView;

• 添加左侧按钮

 
 
    //左侧按钮
    UIButton *leftBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    leftBtn.frame = CGRectMake(0, 0, 44, 44);
    [leftBtn setBackgroundImage:[UIImage imageNamed:@"btn_bg_n"] forState:UIControlStateNormal];
    [leftBtn setBackgroundImage:[UIImage imageNamed:@"btn_bg_p"] forState:UIControlStateHighlighted];
    [leftBtn setImage:[UIImage imageNamed:@"btn_about"] forState:UIControlStateNormal];
    [leftBtn setImage:[UIImage imageNamed:@"btn_about"] forState:UIControlStateHighlighted];
    [leftBtn addTarget:self action:@selector(clickLeftBarButton) forControlEvents:UIControlEventTouchUpInside];
    UIView *leftView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 44, 44)];
    [leftView addSubview:leftBtn];
    //调整位置
    leftView.bounds = CGRectOffset(leftView.bounds, 10, offsetY);
    
    UIBarButtonItem *leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:leftView];
    self.navigationItem.leftBarButtonItem = leftBarButtonItem;

• 添加右侧按钮

 
 
    //右侧按钮
    UIButton *rightBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    rightBtn.frame = CGRectMake(0, 0, 44, 44);
    [rightBtn setBackgroundImage:[UIImage imageNamed:@"btn_bg_n"] forState:UIControlStateNormal];
    [rightBtn setBackgroundImage:[UIImage imageNamed:@"btn_bg_p"] forState:UIControlStateHighlighted];
    [rightBtn setImage:[UIImage imageNamed:@"btn_new"] forState:UIControlStateNormal];
    [rightBtn setImage:[UIImage imageNamed:@"btn_new"] forState:UIControlStateHighlighted];
    [rightBtn addTarget:self action:@selector(clickRightBarButton) forControlEvents:UIControlEventTouchUpInside];
    UIView *rightView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 44, 44)];
    [rightView addSubview:rightBtn];
    //调整位置
    rightView.bounds = CGRectOffset(rightView.bounds, -10, offsetY);
    
    UIBarButtonItem *rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:rightView];
    self.navigationItem.rightBarButtonItem = rightBarButtonItem;

4、添加“新提醒”页面NavigationItem

在“新提醒”界面下，右侧有两个按钮，这需要使用到navigationItem的rightBarButtonItems属性，把所有按钮都装到这个数组中。

• 添加左侧按钮：注意要修改按钮文字的偏移量

 
 
    //左侧按钮
    UIButton *leftBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    leftBtn.frame = CGRectMake(0, 0, 44, 44);
    [leftBtn setBackgroundImage:[UIImage imageNamed:@"btn_long_bg_n"] forState:UIControlStateNormal];
    [leftBtn setBackgroundImage:[UIImage imageNamed:@"btn_long_bg_p"] forState:UIControlStateHighlighted];
    [leftBtn setTitle:@"列表" forState:UIControlStateNormal];
    [leftBtn setTitle:@"列表" forState:UIControlStateHighlighted];
    [leftBtn.titleLabel setFont:[UIFont systemFontOfSize:12.0]];
    leftBtn.titleEdgeInsets = UIEdgeInsetsMake(0, 7, 0, 0);
    [leftBtn addTarget:self action:@selector(clickLeftBarButton) forControlEvents:UIControlEventTouchUpInside];
    
    UIView *leftView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 56, 44)];
    [leftView addSubview:leftBtn];
    //调整位置
    leftView.bounds = CGRectOffset(leftView.bounds, 10, offsetY);
    
    UIBarButtonItem *leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:leftView];
    self.navigationItem.leftBarButtonItem = leftBarButtonItem;
 

• 添加右侧两个按钮

 
 
    //右侧按钮
    UIButton *rightBtn1 = [UIButton buttonWithType:UIButtonTypeCustom];
    rightBtn1.frame = CGRectMake(0, 0, 44, 44);
    [rightBtn1 setBackgroundImage:[UIImage imageNamed:@"btn_bg_n"] forState:UIControlStateNormal];
    [rightBtn1 setBackgroundImage:[UIImage imageNamed:@"btn_bg_p"] forState:UIControlStateHighlighted];
    [rightBtn1 setImage:[UIImage imageNamed:@"btn_send"] forState:UIControlStateNormal];
    [rightBtn1 setImage:[UIImage imageNamed:@"btn_send"] forState:UIControlStateHighlighted];
    [rightBtn1 addTarget:self action:@selector(clickRightBarButton) forControlEvents:UIControlEventTouchUpInside];
    UIView *rightView1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 44, 44)];
    [rightView1 addSubview:rightBtn1];
    //调整位置
    rightView1.bounds = CGRectOffset(rightView1.bounds, -10, offsetY);
    UIBarButtonItem *rightBarButtonItem1 = [[UIBarButtonItem alloc] initWithCustomView:rightView1];
    
    UIButton *rightBtn2 = [UIButton buttonWithType:UIButtonTypeCustom];
    rightBtn2.frame = CGRectMake(0, 0, 44, 44);
    [rightBtn2 setBackgroundImage:[UIImage imageNamed:@"btn_bg_n"] forState:UIControlStateNormal];
    [rightBtn2 setBackgroundImage:[UIImage imageNamed:@"btn_bg_p"] forState:UIControlStateHighlighted];
    [rightBtn2 setImage:[UIImage imageNamed:@"btn_camera"] forState:UIControlStateNormal];
    [rightBtn2 setImage:[UIImage imageNamed:@"btn_camera"] forState:UIControlStateHighlighted];
    [rightBtn2 addTarget:self action:@selector(clickRightBarButton) forControlEvents:UIControlEventTouchUpInside];
    UIView *rightView2 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 44, 44)];
    [rightView2 addSubview:rightBtn2];
    //调整位置
    rightView2.bounds = CGRectOffset(rightView2.bounds, -10, offsetY);
    UIBarButtonItem *rightBarButtonItem2 = [[UIBarButtonItem alloc] initWithCustomView:rightView2];
    
    NSArray *rightItems = @[rightBarButtonItem1,rightBarButtonItem2];
    self.navigationItem.rightBarButtonItems = rightItems;