iOS开发项目篇—13标题栏设置
浏览数：38 /
时间：2015年06月11日
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 }
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
