iOS開發項目篇—13標題欄設置
編輯：IOS開發綜合
一、添加標題欄
代碼：
復制代碼
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 }
相關文章
+