iOS开发项目篇—13标题栏设置
一、添加标题栏
代码：
1 #import "YYHomeTableViewController.h"
2 #import "YYOneViewController.h"
3
4 @interface YYHomeTableViewController ()
5
6 @end
7
8 @implementation YYHomeTableViewController
9
10 - (id)initWithStyle:(UITableViewStyle)style
11 {
12 self = [super initWithStyle:style];
13 if (self) {
14 // Custom initialization
15 }
16 return self;
17 }
18
19 - (void)viewDidLoad
20 {
21 [super viewDidLoad];
22
23 //设置导航栏的按钮
24 self.navigationItem.leftBarButtonItem=[UIBarButtonItem itemWithImageName:@"navigationbar_friendsearch" highImageName:@"navigationbar_friendsearch_highlighted" target:self action:@selector(friendsearch)];
25 self.navigationItem.rightBarButtonItem=[UIBarButtonItem itemWithImageName:@"navigationbar_pop" highImageName:@"navigationbar_pop_highlighted" target:self action:@selector(pop)];
26
27 //设置导航栏按钮
28 UIButton *titleButton=[[UIButton alloc]init];
29 //设置文字
30 [titleButton setTitle:@"首页" forState:UIControlStateNormal];
31 //设置文字颜色为黑色
32 [titleButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
33 //设置图标
34 [titleButton setImage:[UIImage imageWithName:@"navigationbar_arrow_down"] forState:UIControlStateNormal];
35 //设置背景
36 [titleButton setBackgroundImage:[UIImage resizedImage:@"navigationbar_filter_background_highlighted"] forState:UIControlStateHighlighted];
37 //当高亮的时候，不调整图片
38 titleButton.adjustsImageWhenHighlighted=NO;
39 //设置尺寸
40 titleButton.width=100;
41 titleButton.height=35;
42 self.navigationItem.titleView=titleButton;
43 }
显示效果：
二、进一步实现
（1）要求：要求图标在右边，文字在左边
解决方法：自定义一个类，让其继承自UIButton,重写内部的方法，调整图片和文字的位置。
封装的原则，经常需要设置且不会经常变动的应该封装在方法内部。
自定义类的声明和实现：
1 //
2 // YYTitleButton.m
3 //
4
5 #import "YYTitleButton.h"
6
7 @implementation YYTitleButton
8
9 - (id)initWithFrame:(CGRect)frame
10 {
11 self = [super initWithFrame:frame];
12 if (self) {
13 //设置图片居中
14 self.imageView.contentMode=UIViewContentModeCenter;
15 //当高亮的时候，不调整图片
16 self.adjustsImageWhenHighlighted=NO;
17 //设置文字对齐方式为右对齐
18 self.titleLabel.textAlignment=NSTextAlignmentRight;
19 //设置文字颜色为黑色
20 [self setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
21 //设置文字的字体为统一的20号字体
22 self.titleLabel.font=YYNavigationTitleFont;
23 }
24 return self;
25 }
26
27 //设置内部图标的frame
28 -(CGRect)imageRectForContentRect:(CGRect)contentRect
29 {
30 CGFloat imageY=0;
31 CGFloat imageW=self.height;
32 CGFloat imageH=imageW;
33 CGFloat imageX=self.width-imageW;
34 return CGRectMake(imageX, imageY, imageW, imageH);
35
36 }
37 //设置内部文字的frame
38 -(CGRect)titleRectForContentRect:(CGRect)contentRect
39 {
40 CGFloat titleY=0;
41 CGFloat titleX=0;
42 CGFloat titleH=self.height;
43 //图片为正方形
44 CGFloat titleW=self.width-self.height;
45 return CGRectMake(titleX, titleY, titleW, titleH);
46 }
47
48 @end
在控制器中的使用：
1 //
2 // YYHomeTableViewController.m
3 //
4
5 #import "YYHomeTableViewController.h"
6 #import "YYOneViewController.h"
7 #import "YYTitleButton.h"
8
9 @interface YYHomeTableViewController ()
10
11 @end
12
13 @implementation YYHomeTableViewController
14
15 - (id)initWithStyle:(UITableViewStyle)style
16 {
17 self = [super initWithStyle:style];
18 if (self) {
19 // Custom initialization
20 }
21 return self;
22 }
23
24 - (void)viewDidLoad
25 {
26 [super viewDidLoad];
27
28 //设置导航栏的按钮
29 self.navigationItem.leftBarButtonItem=[UIBarButtonItem itemWithImageName:@"navigationbar_friendsearch" highImageName:@"navigationbar_friendsearch_highlighted" target:self action:@selector(friendsearch)];
30 self.navigationItem.rightBarButtonItem=[UIBarButtonItem itemWithImageName:@"navigationbar_pop" highImageName:@"navigationbar_pop_highlighted" target:self action:@selector(pop)];
31
32 //设置导航栏按钮
33 YYTitleButton *titleButton=[[YYTitleButton alloc]init];
34 //设置文字
35 [titleButton setTitle:@"首页" forState:UIControlStateNormal];
36 //设置图标
37 [titleButton setImage:[UIImage imageWithName:@"navigationbar_arrow_down"] forState:UIControlStateNormal];
38 //设置背景
39 [titleButton setBackgroundImage:[UIImage resizedImage:@"navigationbar_filter_background_highlighted"] forState:UIControlStateHighlighted];
40
41 //设置尺寸
42 titleButton.width=100;
43 titleButton.height=35;
44 self.navigationItem.titleView=titleButton;
45 }
46 -(void)pop
47 {
48 YYLog(@"---POP---");
49 }
50 -(void)friendsearch
51 {
52 //跳转到one这个子控制器界面
53 YYOneViewController *one=[[YYOneViewController alloc]init];
54 one.title=@"One";
55 //拿到当前控制器
56 [self.navigationController pushViewController:one animated:YES];
57
58 }
59
60 #pragma mark - Table view data source
61 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
62 {
63 return 20;
64 }
65
66 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
67 {
68 static NSString *ID = @"cell";
69 UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
70 if (!cell) {
71 cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
72 }
73 cell.textLabel.text = [NSString stringWithFormat:@"%d----首页测试数据", indexPath.row];
74 return cell;
75 }
76
77 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
78 {
79 //点击cell的时候，跳到下一个界面
80 UIViewController *newVc = [[UIViewController alloc] init];
81 newVc.view.backgroundColor = [UIColor redColor];
82 newVc.title = @"新控制器";
83 [self.navigationController pushViewController:newVc animated:YES];
84 }
85
86 @end
实现效果：
新的问题：设置文字为右对齐，但是如果文字的长度非常长，不止是两个字的话就会影响到显示的效果，更好的做法是在设置尺寸的时候根据标题的长度能够自动设置尺寸。
三、进一步实现
（1）要求：点击标题栏按钮切换箭头的方向
第一种实现方法：
1 #import "YYHomeTableViewController.h"
2 #import "YYOneViewController.h"
3 #import "YYTitleButton.h"
4
5 @interface YYHomeTableViewController ()
6 @property(nonatomic,assign)BOOL down;
7 @end
8
9 @implementation YYHomeTableViewController
10
11 - (id)initWithStyle:(UITableViewStyle)style
12 {
13 self = [super initWithStyle:style];
14 if (self) {
15 // Custom initialization
16 }
17 return self;
18 }
19
20 - (void)viewDidLoad
21 {
22 [super viewDidLoad];
23
24 //设置导航栏的按钮
25 self.navigationItem.leftBarButtonItem=[UIBarButtonItem itemWithImageName:@"navigationbar_friendsearch" highImageName:@"navigationbar_friendsearch_highlighted" target:self action:@selector(friendsearch)];
26 self.navigationItem.rightBarButtonItem=[UIBarButtonItem itemWithImageName:@"navigationbar_pop" highImageName:@"navigationbar_pop_highlighted" target:self action:@selector(pop)];
27
28 //设置导航栏按钮
29 YYTitleButton *titleButton=[[YYTitleButton alloc]init];
30 //设置文字
31 [titleButton setTitle:@"首页" forState:UIControlStateNormal];
32 //设置图标
33 [titleButton setImage:[UIImage imageWithName:@"navigationbar_arrow_down"] forState:UIControlStateNormal];
34 //设置背景
35 [titleButton setBackgroundImage:[UIImage resizedImage:@"navigationbar_filter_background_highlighted"] forState:UIControlStateHighlighted];
36
37 //设置尺寸
38 titleButton.width=100;
39 titleButton.height=35;
40 //监听按钮的点击事件
41 [titleButton addTarget:self action:@selector(titleButtonClick:) forControlEvents:UIControlEventTouchUpInside];
42 self.navigationItem.titleView=titleButton;
43 }
44
45 -(void)titleButtonClick:(UIButton *)titleButton
46 {
47 if (self.down) {
48 //换成箭头向上
49 self.down=NO;
50 [titleButton setImage:[UIImage imageWithName:@"navigationbar_arrow_up"] forState:UIControlStateNormal];
51 }else
52 {
53 self.down=YES;
54 //换成箭头向下
55 [titleButton setImage:[UIImage imageWithName:@"navigationbar_arrow_down"] forState:UIControlStateNormal];
56 }
57 }
缺点:需要增加一个全局的属性（down）用来记录状态
第二种实现方法：
1 -(void)titleButtonClick:(UIButton *)titleButton
2 {
3 if (titleButton.tag==0) {
4 titleButton.tag=10;
5 //换成箭头向上
6 self.down=NO;
7 [titleButton setImage:[UIImage imageWithName:@"navigationbar_arrow_up"] forState:UIControlStateNormal];
8 }else
9 {
10 titleButton.tag=0;
11 self.down=YES;
12 //换成箭头向下
13 [titleButton setImage:[UIImage imageWithName:@"navigationbar_arrow_down"] forState:UIControlStateNormal];
14 }
15 }
缺点:这里使用了tag,虽然不需要添加一个新的属性，但是使用tag引入了魔法数字，不利于阅读。
第三种实现方法：
1 -(void)titleButtonClick:(UIButton *)titleButton
2 {
3 UIImage *titleImage=[UIImage imageWithName:@"navigationbar_arrow_down"];
4
5 if (titleButton.currentImage==titleImage) {
6 //换成箭头向上
7 [titleButton setImage:[UIImage imageWithName:@"navigationbar_arrow_up"] forState:UIControlStateNormal];
8 }else
9 {
10 //换成箭头向下
11 [titleButton setImage:[UIImage imageWithName:@"navigationbar_arrow_down"] forState:UIControlStateNormal];
12 }
13 }
iOS开发项目篇—13标题栏设置
时间： 2024-12-28 00:56:17