一、添加標題欄
代碼: 復制代碼 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 }