标签:
上一篇讲到了UITabBarViewController,接着说说UITabBarViewController中怎么自定义TabBar.
今天仿写了微博,发现底部tabbar中间的button和其他有所不同,button较大且着色;而且我们平时工作中也有很多类似这样的问题,有些app有一个看起来像标准 tabBarController,但是呢,tabBar的中间是凸起的或者着色的。我们怎样做可以构建这种现实效果呢?
如图:
这些标签栏除了中间项以外看起来都相当的标准,所以我们会从一个标准的包含一个tabBar的UITabBarController开始;查看应用内的图片,显而易见的是中间的标签是一个简单的自定义button,一个UITabBar 包含了一个UITabBaritems的数组,UITabBaritem继承自UIBarItem。但是和同样继承自UIBarItem的UIBarButtonItem不同,苹果官方没有提供给UITabBarItem创建自定义视图的api。
我们的基本方案是子类化UITabBarController然后添加一个自定义的button再UITabBar上面。
代码实现:(这里我用第二张图片举例)
1 // 2 // TabBarViewController.m 3 // WeiBo 4 // 5 // Created by Oran Wu on 15-11-18. 6 // Copyright (c) 2015年 Xinxin. All rights reserved. 7 // 8 9 #import "TabBarViewController.h" 10 #import "ViewAdditions.h" 11 #import "AddViewController.h" 12 13 @interface TabBarViewController ()<UITabBarControllerDelegate>{ 14 15 UITabBar *tabBar; 16 UIImageView *tabBarView; 17 UIButton *lastSelectedButton; 18 19 UILabel *titleLabel; 20 21 } 22 23 @end 24 25 @implementation TabBarViewController 26 27 28 - (void)viewDidLoad { 29 [super viewDidLoad]; 30 // Do any additional setup after loading the view. 31 32 //把原tabBar隐藏 33 self.tabBar.hidden = YES; 34 35 //在底部创建一个tabBarView替代原tabBar 36 tabBarView =[[UIImageView alloc] initWithFrame:(CGRect){0,self.view.height-45,self.view.width,45}]; 37 [self.view addSubview:tabBarView]; 38 //可交互 39 tabBarView.userInteractionEnabled = YES; 40 41 //创建常见的四个tabBarButton 42 [self creatButtonWithNormalName:@"tabbar_home" andSelectedName:@"tabbar_home_selected" andTitle:@"首页" andIndex:0]; 43 [self creatButtonWithNormalName:@"tabbar_message_center" andSelectedName:@"tabbar_message_center_selected" andTitle:@"消息" andIndex:1]; 44 [self creatButtonWithNormalName:@"tabbar_discover" andSelectedName:@"tabbar_discover_selected" andTitle:@"发现" andIndex:2]; 45 [self creatButtonWithNormalName:@"tabbar_profile" andSelectedName:@"tabbar_profile_selected" andTitle:@" 我" andIndex:3]; 46 [self creatCenterButton:@"jia"]; 47 48 //这里用了通知,切换页面时用来隐藏tabBar 49 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(hideTabbar:) name:@"HideTabbar" object:nil]; 50 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(showTabbar) name:@"ShowTapBar" object:nil]; 51 } 52 53 - (void)hideTabbar:(NSNotification *)notification{ 54 // NSNumber *number = notification.object; 55 56 tabBarView.hidden = YES; 57 } 58 59 - (void)showTabbar{ 60 61 tabBarView.hidden = NO; 62 } 63 64 //自定义方法用来设置button两种状态的图片 65 - (void)creatButtonWithNormalName:(NSString*)normal andSelectedName:(NSString*)selected andTitle:(NSString*)title 66 andIndex:(int)index{ 67 68 //初始化button 69 UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; 70 button.tag = index+100; 71 72 CGFloat buttonWidth = tabBarView.width/5; 73 CGFloat buttonHeight = tabBarView.height; 74 //设置button位置及大小,注意:要留出中间特殊button的位置 75 if (index<2) { 76 button.frame = (CGRect){18+70*index,0,buttonWidth,buttonHeight}; 77 }else 78 button.frame = (CGRect){18+70*(index+1),0,buttonWidth,buttonHeight}; 79 80 [button setImage:[UIImage imageNamed:normal] forState:UIControlStateNormal]; 81 [button setImage:[UIImage imageNamed:selected] forState:UIControlStateSelected]; 82 83 //设置buttonLabel(tabBar的文字) 84 [button.titleLabel setFont:[UIFont systemFontOfSize:10]]; 85 [button setTitle:title forState:UIControlStateNormal]; 86 [button setTitleColor:[UIColor colorWithWhite:0.5 alpha:1] forState:UIControlStateNormal]; 87 [button setTitleColor:[UIColor orangeColor] forState:UIControlStateSelected]; 88 89 [button setTitleEdgeInsets:(UIEdgeInsets){36, -25, 0, 25}]; 90 91 //button动作 92 [button addTarget:self action:@selector(changeViewController:) forControlEvents:UIControlEventTouchUpInside]; 93 button.imageView.contentMode =UIViewContentModeCenter; 94 [tabBarView addSubview:button]; 95 96 UIButton *bt = tabBarView.subviews[0]; 97 [self changeViewController:bt]; 98 99 } 100 101 - (void)creatCenterButton:(NSString*)centerImage{ 102 103 //初始化中间特殊button 104 UIButton *centerButton = [UIButton buttonWithType:UIButtonTypeCustom]; 105 //位置及大小 106 centerButton.frame = (CGRect){148,6,75,tabBarView.height-6}; 107 //图片 108 [centerButton setImage:[UIImage imageNamed:centerImage] forState:UIControlStateNormal]; 109 //动作 110 [centerButton addTarget:self action:@selector(addViewController) forControlEvents:UIControlEventTouchUpInside]; 111 //加到tabBarView上 112 [tabBarView addSubview:centerButton]; 113 114 } 115 116 //换页和button的动作关联上 117 - (void)changeViewController:(UIButton*)button { 118 119 if (self.selectedIndex == button.tag-100) { 120 return; 121 } 122 123 self.selectedIndex = button.tag-100; 124 125 button.selected = YES; 126 127 if (lastSelectedButton != button) { 128 lastSelectedButton.selected = NO; 129 } 130 lastSelectedButton = button; 131 132 self.tabBarController.selectedViewController = [self.tabBarController.viewControllers objectAtIndex:self.selectedIndex]; 133 134 } 135 136 //中间button点击动作 137 - (void)addViewController{ 138 AddViewController *AddVC = [[AddViewController alloc] init]; 139 [self presentViewController:AddVC animated:YES completion:nil]; 140 141 }
标签:
原文地址:http://www.cnblogs.com/0320y/p/5039824.html