从0开始架构一个IOS程序 ——04— UITabBarController和自定义TabBar 搭建主页面

从0开始架构一个IOS程序 04 UITabBarController 搭建主页面

Mac OSX 10.11 之后

iphone自定义app布局。效果

1 首先创建自定义TabBar

1.1 WISHomeTabBarView.h

#import <UIKit/UIKit.h>typedef NS_ENUM(NSUInteger,WISHomeItemType){WISHomeItemTypeDefault=0
};@class WISHomeTabBarView;//定义block回调
//用于TabBarView中Item点击事件回调
typedef void(^WISHomeTabBlock)(WISHomeTabBarView *tabBar,WISHomeItemType idx);//定义代理协议回调
//用于TabBarView中Item点击事件回调
@protocol WISHomeTabBarDelegate <NSObject>-(void) tabbar:(WISHomeTabBarView*) tabBar clickButton:(WISHomeItemType) idx;@end@interface WISHomeTabBarView : UIView//代理回调
@property(weak,nonatomic) id<WISHomeTabBarDelegate> delegate;
//block回调
@property(copy,nonatomic) WISHomeTabBlock block;@end

1.2 WISHomeTabBarView.m

#import "WISHomeTabBarView.h"
#import "WISHomeTabBarModel.h"@interface WISHomeTabBarView()//tabBar的背景
@property(nonatomic,strong) UIImageView *tabbarBackgroundImageView;//tabBar条目数据集合
@property(nonatomic,strong) NSMutableArray *dataList;//上一个点击的Item
@property(nonatomic,strong) UIView *lastClickUiView ;@end@implementation WISHomeTabBarView

//设置tabbar的背景
-(UIImageView *)tabbarBackgroundImageView{if (!_tabbarBackgroundImageView) {_tabbarBackgroundImageView=[[UIImageView alloc]init];[_tabbarBackgroundImageView setBackgroundColor:[UIColor grayColor]];}return _tabbarBackgroundImageView;
}//初始化tabbar的条目数据
-(NSMutableArray *)dataList{if (!_dataList) {_dataList=[NSMutableArray array];//首页WISHomeTabBarModel *homeItem = [[WISHomeTabBarModel alloc]initWithName:@"首页" andImageNormalName:@"tab_home_normal" andImagePressName:@"tab_home_press"];//消息WISHomeTabBarModel *msgItem = [[WISHomeTabBarModel alloc]initWithName:@"消息" andImageNormalName:@"home_table_msg_normal" andImagePressName:@"home_table_msg_select"];//发现WISHomeTabBarModel *findItem = [[WISHomeTabBarModel alloc]initWithName:@"发现" andImageNormalName:@"home_table_topic_normal" andImagePressName:@"home_table_topic_select"];//我的WISHomeTabBarModel *personItem = [[WISHomeTabBarModel alloc]initWithName:@"我的" andImageNormalName:@"home_table_me_normal" andImagePressName:@"home_table_me_select"];[_dataList addObject:homeItem];[_dataList addObject:msgItem];[_dataList addObject:findItem];[_dataList addObject:personItem];}return _dataList;
}

//创建Item 并将Item添加到 TabBar（其实是自定义的UIView）中
-(instancetype)initWithFrame:(CGRect)frame{self = [super initWithFrame:frame];//循环创建Itemfor (NSInteger i=0; i<self.dataList.count; i++) {//取出Item数据WISHomeTabBarModel *itemModel = self.dataList[i];//构建ItemUIView *iteView = [[UIView alloc]init];//创建 UIImageViewUIImageView *itemImageView = [[UIImageView alloc]init];//创建  UILabelUILabel *label = [[UILabel alloc]init];//设置显示字体label.text = itemModel.name;//设置字体显示大小label.font=[UIFont italicSystemFontOfSize:12];[iteView addSubview:itemImageView];[iteView addSubview:label];//设置tagiteView.tag = WISHomeItemTypeDefault+i;//设置手势监听UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(clickItem:)];[tap setNumberOfTapsRequired:1];[tap setNumberOfTouchesRequired:1];[iteView addGestureRecognizer:tap];//设置默认if (i==0) {self.lastClickUiView = iteView;//默认图标[itemImageView setImage:[UIImage imageNamed:itemModel.imagePressName]];//默认text颜色label.textColor=[UIColor blueColor];}else{[itemImageView setImage:[UIImage imageNamed:itemModel.imageNormalName]];label.textColor=[UIColor grayColor];}[self addSubview:iteView];}return self;
}

//Item 的点击事件
-(void) clickItem:(UITapGestureRecognizer *) gesture{//当前点击的ViewUITapGestureRecognizer *tap = (UITapGestureRecognizer *)gesture;//当前点击的View的tagNSInteger tag = tap.view.tag;//上一次点击的View的tagNSInteger lastClickTag = self.lastClickUiView.tag;if (tag==lastClickTag) {//同一次点击}else{for (NSInteger i=0; i<[self subviews].count; i++) {UIView *itemView =[self subviews][i];NSInteger cusTag = itemView.tag;if (cusTag==tag) {self.lastClickUiView = itemView;for (NSInteger j=0; j<[itemView subviews].count; j++) {UIView *child = [itemView subviews][j];if ([child isKindOfClass:[UIImageView class]]) {[((UIImageView *)child) setImage:[UIImage imageNamed:((WISHomeTabBarModel*)self.dataList[tag]).imagePressName]];//设置动画[UIView animateWithDuration:0.2 animations:^{child.transform=CGAffineTransformMakeScale(1.2, 1.2);} completion:^(BOOL finished) {[UIView animateWithDuration:0.2 animations:^{//恢复原始状态child.transform = CGAffineTransformIdentity;}];}];//代理回调if ([self.delegate respondsToSelector:@selector(tabBar)]) {[self.delegate tabbar:self clickButton:tag];}//block回调if(self.block){self.block(self,tag);}}else if([child isKindOfClass:[UILabel class]]){[((UILabel *)child) setTextColor:[UIColor blueColor]];}}}else{for (NSInteger j=0; j<[itemView subviews].count; j++) {UIView *child = [itemView subviews][j];if ([child isKindOfClass:[UIImageView class]]) {[((UIImageView *)child) setImage:[UIImage imageNamed:((WISHomeTabBarModel*)self.dataList[itemView.tag]).imageNormalName]];}else if([child isKindOfClass:[UILabel class]]){[((UILabel *)child) setTextColor:[UIColor grayColor]];}}}}}NSLog(@"click %i ",tag);
}

//测量设置每一个条目的Frame
-(void)layoutSubviews{[super layoutSubviews];//设置背景的frameself.tabbarBackgroundImageView.frame = self.bounds;//每一个item的宽度CGFloat itemWidth = self.bounds.size.width/self.dataList.count;for (NSInteger i=0; i<[self subviews].count; i++) {UIView *view = [self subviews][i];NSLog(@"view tag is %i ",view.tag);view.frame = CGRectMake((view.tag)*itemWidth, 0, itemWidth, self.frame.size.height);for (NSInteger j=0; j<[view subviews].count; j++) {UIView *childView = [view subviews][j];if([childView isKindOfClass:[UIImageView class]]){childView.frame=CGRectMake(view.bounds.size.width/2-10, 8, 22, 22);}else if([childView isKindOfClass:[UILabel class]]){childView.frame=CGRectMake(view.bounds.size.width/2-11, 29, 42, 22);}}}
}

WISHomeTabBarModel.h文件

#import <Foundation/Foundation.h>@interface WISHomeTabBarModel : NSObject//条目的显示文字
@property(nonatomic,copy) NSString *name;
//正常状态下图标（未选中）
@property(nonatomic,copy) NSString *imageNormalName;
//选中状态下的图标
@property(nonatomic,copy) NSString *imagePressName;-(id) initWithName:(NSString *) name andImageNormalName:(NSString *)imageNormalName andImagePressName:(NSString*) imagePressName;@end

WISHomeTabBarModel.m文件

#import "WISHomeTabBarModel.h"@implementation WISHomeTabBarModel-(id)initWithName:(NSString *)name andImageNormalName:(NSString *)imageNormalName andImagePressName:(NSString *)imagePressName{_name = name;_imageNormalName = imageNormalName;_imagePressName = imagePressName;return self;
}
@end

2 创建 WISHomeTabBarViewController (UITabBarController) 来搭建主页面

2.1 WISHomeTabBarViewController.h

@interface WISHomeTabBarViewController : UITabBarController@end

2.1 WISHomeTabBarViewController.m

#import "WISHomeTabBarViewController.h"
#import "CXBaseNavViewController.h"
#import "WISHomeTabBarView.h"@interface WISHomeTabBarViewController () <WISHomeTabBarDelegate>//自定义的TabBar
@property(nonatomic,strong) WISHomeTabBarView *homeTabBarView;@end@implementation WISHomeTabBarViewController- (void)viewDidLoad {[super viewDidLoad];//加载控制器[self configViewController];//加载tabBar[self.tabBar addSubview:self.homeTabBarView];
}
//创建自定义的TabBar
-(WISHomeTabBarView *)homeTabBarView{if (!_homeTabBarView) {_homeTabBarView = [[WISHomeTabBarView alloc]init];_homeTabBarView.frame=CGRectMake(0, 0, mainW, 49);_homeTabBarView.delegate=self;}return _homeTabBarView;
}
//加载控制器
-(void) configViewController{//保存的是已创建好的viewController的名称NSMutableArray *array=[NSMutableArray arrayWithArray:@[@"WISHomeViewController",@"WISMsgViewController",@"WISFindViewController",@"WISPersonViewController"]];for (NSInteger i=0; i<array.count; i++) {//取出新建好的ViewController的名称NSString *item = array[i];//构建ViewControllerUIViewController *itemController = [[NSClassFromString(item)alloc]init];//构建NavViewControllerCXBaseNavViewController *itemNavController =[[CXBaseNavViewController alloc]initWithRootViewController:itemController];//添加到集合中[array replaceObjectAtIndex:i withObject:itemNavController];}//将创建好的Controll关联UITabBarControllerself.viewControllers = array;
}//自定义TabBar中Item的点击事件回调
-(void)tabbar:(WISHomeTabBarView *)tabBar clickButton:(WISHomeItemType)idx{//切换对应的UITabBarController中的Controllerself.selectedIndex=idx-WISHomeItemTypeDefault;}
- (void)didReceiveMemoryWarning {[super didReceiveMemoryWarning];// Dispose of any resources that can be recreated.
}@end

3 AppDelegate 中设置rootViewController

#import "AppDelegate.h"
#import "WISHomeTabBarViewController.h"@interface AppDelegate ()@end@implementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {// Override point for customization after application launch.//创建首页TabBarWISHomeTabBarViewController *controller = [[WISHomeTabBarViewController alloc]init];//设置rootself.window.rootViewController = controller;return YES;
}... ... ... @end