电影项目 (一)
实现页面效果如下 :
点击子标签切换对应的页面.
第一天（搭建项目框架）
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)preferredStatusBarStyle 30 { 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 WXTabBarButton 12 13 - (instancetype)initWithFrame:(CGRect)frame 14 WithImageName:(NSString *)imageName 15 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 Action 128 - (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 }
