转自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;