实现页面效果如下 :
点击子标签切换对应的页面.
第一天（搭建项目框架）
1.创建项目，设置相关的信息（图标....） 2.使用Storyboard搭建三级控制器框架子类化导航控制器,子类化Button
3.自定义标签栏（移除系统TabBarButton，使用自定义的WXTabBarButton） 4.设置导航栏
代码如下:
1>
BaseNavigationController类 :
1 #import "BaseNavigationController.h" 2 3 @interface BaseNavigationController () 4 5 @end 6 7 @implementation BaseNavigationController 8 9 - (void)viewDidLoad {10 [super viewDidLoad];11 12 //设置导航栏背景图片13 [self.navigationBar setBackgroundImage:[UIImage imageNamed:@"nav_bg_all-64"]14 forBarMetrics:UIBarMetricsDefault];15 16 //设置是不起效果的17 // self.navigationBar.tintColor = [UIColor whiteColor];18 // self.navigationBar.barTintColor = [UIColor whiteColor];19 //20 21 //设置导航栏的样式,黑色,则标题是白色的22 self.navigationBar.barStyle = UIBarStyleBlack;23 24 25 }26 27 28 //设置状态栏的样式 状态栏的字是白色的29 - (UIStatusBarStyle)preferredStatusBarStyle30 {31 return UIStatusBarStyleLightContent;32 33 }
2>
WXTabBarButton类 :
1 #import "WXTabBarButton.h" 2 3 @interface WXTabBarButton () 4 5 @property (nonatomic,strong)UIImageView *imageView; 6 @property (nonatomic,strong)UILabel *titleLabel; 7 8 @end 9 10 11 @implementation WXTabBarButton12 13 - (instancetype)initWithFrame:(CGRect)frame14 WithImageName:(NSString *)imageName15 WithTitle:(NSString *)title{16 17 self = [super initWithFrame:frame];18 if (self) {19 20 //1.创建标签栏图片视图21 _imageView = [[UIImageView alloc]initWithFrame:CGRectMake((frame.size.width - 20) / 2, 7, 20, 20)];22 _imageView.image = [UIImage imageNamed:imageName];23 _imageView.contentMode = UIViewContentModeScaleAspectFit;24 _imageView.userInteractionEnabled = YES;25 26 27 [self addSubview:_imageView];28 29 30 //2.创建标签栏标题31 _titleLabel = [[UILabel alloc]32 initWithFrame:CGRectMake(0, 7 + 20 + 5, frame.size.width, 17)];33 _titleLabel.textAlignment = NSTextAlignmentCenter;34 _titleLabel.font = [UIFont boldSystemFontOfSize:14];35 _titleLabel.textColor = [UIColor whiteColor];36 37 _titleLabel.text = title;38 39 [self addSubview:_titleLabel];40 }41 42 return self;43 44 }
3>
MainTabBarController类:
1 #import "MainTabBarController.h" 2 3 //导入文件 4 #import "Common.h" 5 #import "WXTabBarButton.h" 6 7 8 @interface MainTabBarController () 9 10 @property (nonatomic,strong)UIImageView *selectedView; 11 12 @end 13 14 @implementation MainTabBarController 15 16 - (void)viewDidLoad { 17 [super viewDidLoad]; 18 19 20 21 //设置导航栏 22 [self _customNavigationBar]; 23 24 //移除按钮 25 [self _removeTabBarButton]; 26 27 //自定义标签栏 28 [self _customTabBar]; 29 30 } 31 32 //视图将要出现的时候调用 33 - (void)viewWillAppear:(BOOL)animated { 34 [super viewWillAppear:animated]; 35 36 //视图将要出现的时候，移除tabbar上的按钮 37 38 //使用storyboard搭建三级控制器，在viewDidLoad方法走完之后，故事板没有全部加载完成 39 //等故事板加载完成，就会再次添加tabbarbutton 40 [self _removeTabBarButton]; 41 } 42 43 44 - (void)didReceiveMemoryWarning { 45 [super didReceiveMemoryWarning]; 46 // Dispose of any resources that can be recreated. 47 } 48 49 50 51 #pragma mark - 标签栏的设置 52 53 //自定义标签栏 54 - (void)_customTabBar{ 55 56 //1.设置标签栏的背景图片 57 58 self.tabBar.backgroundImage = [UIImage imageNamed:@"tab_bg_all"]; 59 60 // 2.选中的视图 61 _selectedView = [[UIImageView alloc] 62 initWithImage:[UIImage imageNamed:@"selectTabbar_bg_all1"]]; 63 _selectedView.frame = CGRectMake(0, 0, 55, 47); 64 [self.tabBar addSubview:_selectedView]; 65 66 //3.设置TabBar按钮 67 68 //先将数据存起来至数组 69 NSArray *titles = @[ @"首页", @"新闻", @"Top", @"影院", @"更多" ]; 70 71 NSArray *imageNames = @[ 72 @"movie_home", 73 @"msg_new", 74 @"start_top250", 75 @"icon_cinema", 76 @"more_setting" 77 ]; 78 79 float buttonWidth = kScreenWidth/titles.count; 80 81 for (NSInteger i = 0; i < titles.count; i++) { 82 83 //取得标题和图片 84 NSString *title = titles[i]; 85 NSString *imageName = imageNames[i]; 86 87 //设置每个按钮的fram 88 CGRect fram = CGRectMake(buttonWidth * i, 0, buttonWidth, kTabBarHeight); 89 90 //使用自定义的控件创建按钮 91 WXTabBarButton *button = [[WXTabBarButton alloc]initWithFrame:fram WithImageName:imageName WithTitle:title]; 92 93 button.tag = 1000 + i; 94 95 [button addTarget:self action:@selector(buttonAction:) forControlEvents:UIControlEventTouchUpInside]; 96 [self.tabBar addSubview:button]; 97 98 if (i == 0) { 99 100 //选中的视图和第一个按钮对齐101 _selectedView.center = button.center;102 103 }104 105 }106 }107 108 109 //移除系统标签栏上的按钮110 - (void)_removeTabBarButton {111 112 //取到所有的子视图113 for (UIView *view in self.tabBar.subviews) {114 //从字符串生成一个类名115 Class class = NSClassFromString(@"UITabBarButton");116 117 //找出UITabBarButton，移除掉118 if ([view isKindOfClass:class]) {119 [view removeFromSuperview];120 }121 }122 123 // NSLog(@"%@", self.tabBar.subviews);124 }125 126 127 #pragma mark - Button Action128 - (void)buttonAction:(UIButton *)sender {129 130 //1.切换控制器131 self.selectedIndex = sender.tag - 1000;132 133 134 135 //3.设置动画136 [UIView beginAnimations:nil context:nil];137 [UIView setAnimationDuration:.35];138 139 //2.移动选中的视图140 _selectedView.center = sender.center;141 142 [UIView commitAnimations];143 144 }145 146 147 148 #pragma mark - 设置导航栏149 - (void)_customNavigationBar {150 151 /*152 for (UINavigationController *naviCtrl in self.viewControllers) {153 [naviCtrl.navigationBar setBackgroundImage:[UIImage imageNamed:@"nav_bg_all-64"] forBarMetrics:UIBarMetricsDefault];154 }155 */156 157 //Appearance 作用：158 //实现UIAppearance这个协议方法的系统控件，可以使用它来修改它的默认的样式159 //只有这行代码执行之后，后面创建控件才会受到影响160 [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"nav_bg_all-64"] forBarMetrics:UIBarMetricsDefault];161 162 }