demo地址：gitHub
一废酷、先來個效果
tabBar.gif
二、代碼示例
1.抽屜頁作為根視圖：
@interface DrawerViewController ()
{
UITapGestureRecognizer *tapGesture;
}
//創(chuàng)建左邊的抽屜
@property (nonatomic, strong) LeftViewController *leftViewController;
//創(chuàng)建右邊的標(biāo)簽控制器
@property (nonatomic, strong) MTabBarViewController *mainViewController;
//抽屜是否顯示的標(biāo)示
@property (nonatomic, assign) BOOL isOpen;
@end
@implementation DrawerViewController
- (void)dealloc
{
//移除通知
[[NSNotificationCenter defaultCenter]removeObserver:self name:@"buttonTap" object:nil];
}
- (void)viewDidLoad {
[super viewDidLoad];
[self createTabBarController];
[self createLeftVc];
self.view.backgroundColor = [UIColor grayColor];
//添加通知抹缕，監(jiān)聽TabBar的點(diǎn)擊事件 隱藏左邊抽屜
[[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(buttonTap) name:@"buttonTap" object:nil];
}
- (void)buttonTap
{
//抽屜展開時則隱藏
if (self.isOpen == YES) {
[self openOrHidden];
}
}
//創(chuàng)建左邊抽屜
- (void)createLeftVc
{
self.leftViewController = [[LeftViewController alloc]init];
//抽屜控制器添加到父控制器中
[self addChildViewController:self.leftViewController];
self.leftViewController.view.frame = LeftViewStartFrame();
[self.view addSubview:self.leftViewController.view];
[self.leftViewController didMoveToParentViewController:self];
}
//創(chuàng)建右邊的標(biāo)簽控制器
- (void)createTabBarController{
//
NSArray *classNames = @[@"ProductViewController",@"MessageViewController",@"OrderViewController"];
//保存viewControllers
NSMutableArray *viewControllers = [NSMutableArray array];
[classNames enumerateObjectsUsingBlock:^(NSString * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
//先把字符串轉(zhuǎn)化為類名
Class class = NSClassFromString(obj);
//創(chuàng)建ViewController
UIViewController *vc = [[class alloc]init];
UINavigationController *aNav = [[UINavigationController alloc]initWithRootViewController:vc];
[viewControllers addObject:aNav];
}];
//TabBarController 創(chuàng)建
_mainViewController = [[MTabBarViewController alloc]initWithViewControllers:viewControllers];
_mainViewController.view.backgroundColor = [UIColor brownColor];
//添加標(biāo)簽控制器到父控制器
[self addChildViewController:self.mainViewController];
self.mainViewController.view.frame = BOUNDS;
[self.view addSubview:self.mainViewController.view];
[self.mainViewController didMoveToParentViewController:self];
}
//標(biāo)簽控制器顯示的vc的根控制器的view往右邊移動
//tabBar -> Nav (ViewControllers[selectedIndex]) -> Nav.rootViewController.view
- (void)tabBar_Nav_RootViewController_viewMoveRight
{
//標(biāo)簽控制器當(dāng)中 當(dāng)前顯示的控制器
UINavigationController *nav = self.mainViewController.viewControllers[self.mainViewController.selectedIndex];
//取出導(dǎo)航控制器的根控制器
UIViewController *rootVc = nav.childViewControllers[0];
rootVc.view.frame = RightContentEndFrame();
}
- (void)tabBar_Nav_RootViewController_viewMoveLeft
{
//標(biāo)簽控制器當(dāng)中 當(dāng)前顯示的控制器
UINavigationController *nav = self.mainViewController.viewControllers[self.mainViewController.selectedIndex];
//取出導(dǎo)航控制器的根控制器
UIViewController *rootVc = nav.childViewControllers[0];
rootVc.view.frame = RigntContentStartFrame();
}
//顯示左邊抽屜
- (void)open
{
[UIView animateWithDuration:0.48 animations:^{
self.leftViewController.view.frame = LeftViewEndFrame();
[self tabBar_Nav_RootViewController_viewMoveRight];
} completion:nil];
//添加點(diǎn)擊手勢澈蟆，點(diǎn)擊某些區(qū)域的隱藏抽屜
tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)];
tapGesture.numberOfTapsRequired = 1;
tapGesture.numberOfTouchesRequired = 1;
[self.view addGestureRecognizer:tapGesture];
}
- (void)tap:(UITapGestureRecognizer *)gesturer
{
//獲取點(diǎn)擊的位置
CGPoint point = [gesturer locationInView:self.view];
if (CGRectContainsPoint(self.leftViewController.view.frame, point) == YES) {
return;
}
[self hidden];
self.isOpen = NO;
//移除手勢
[self.view removeGestureRecognizer:tapGesture];
}
//隱藏左邊抽屜
- (void)hidden
{
[UIView animateWithDuration:0.48 animations:^{
self.leftViewController.view.frame = LeftViewStartFrame();
[self tabBar_Nav_RootViewController_viewMoveLeft];
} completion:nil];
}
- (void)openOrHidden
{
//當(dāng)前如果是隱藏，則顯示
if (self.isOpen == NO) {
[self open];
}
//當(dāng)前如果是顯示的卓研，則隱藏
if (self.isOpen == YES) {
[self hidden];
}
//改變隱藏標(biāo)記
self.isOpen = !self.isOpen;
}
@end
2.標(biāo)簽視圖 修改方法 - (void)selectBtn:(UIButton *)sender中的切換效果可以實(shí)現(xiàn)不同的切換動畫與效果趴俘。
@implementation MTabBar
- (instancetype)initWithTitles:(NSArray *)titles imageNames:(NSArray *)imageNames
{
self = [super initWithFrame:TabBarFrame()];
if (self) {
//標(biāo)題數(shù)組不為空，圖片名字個數(shù) ＝ 標(biāo)題個數(shù)
self.buttonBack = [[UIView alloc]initWithFrame:CGRM(0, 0, BUTTON_W, 64)];
self.buttonBack.backgroundColor = BUTTON_BACK_COLOR;
[self addSubview:self.buttonBack];
self.backgroundColor = TABBAR_BACK_COLOR;
if ([titles count] && [titles count] == [imageNames count]) {
[titles enumerateObjectsUsingBlock:^(NSString * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
UIButton *button = [[UIButton alloc]initWithFrame:CGRM(BUTTON_W*idx, 0, BUTTON_W, 64)];
button.tag = 1000 + idx;
[self addSubview:button];
//默認(rèn)選中第一個
if (idx == 0) {
button.selected = YES;
self.selectedButton = button;
}
[button addSubview:MakeLabel(CGRM(0, 30, BUTTON_W, 34), obj)];
// // 圖片寬 高分別為 44 24
CGFloat x = (BUTTON_W - 44)/2;
[button addSubview:MakeImageView(CGRM(x, 5, 44, 24),[imageNames objectAtIndex:idx])];
//添加點(diǎn)擊方法
[button addTarget:self action:@selector(selectBtn:) forControlEvents:UIControlEventTouchUpInside];
}];
}
}
return self;
}
//button 點(diǎn)擊方法
- (void)selectBtn:(UIButton *)sender
{
//讓抽屜隱藏鉴分，發(fā)出通知
[[NSNotificationCenter defaultCenter]postNotificationName:@"buttonTap" object:nil];
//選中的button 已經(jīng)是選中狀態(tài) 不用處理
if (self.selectedButton == sender) {
return;
}
//改變之前選中button的狀態(tài) 為非選中狀態(tài)
self.selectedButton.selected = NO;
//改變當(dāng)前選中button的狀態(tài)
sender.selected = YES;
self.selectedButton = sender;
//通知標(biāo)簽控制器顯示當(dāng)前button對應(yīng)的viewController
if (self.callBack) {
self.callBack(sender.tag - 1000);
}
[UIView animateWithDuration:0.5 animations:^{
self.buttonBack.center = CGPointMake(BUTTON_W/2+(sender.tag - 1000) * BUTTON_W, 32);
} completion:nil];
}
UILabel *MakeLabel(CGRect frame, NSString *title)
{
UILabel *label = [[UILabel alloc]initWithFrame:frame];
// label.userInteractionEnabled = YES;
label.backgroundColor = [UIColor clearColor];
label.textColor = [UIColor whiteColor];
label.textAlignment = NSTextAlignmentCenter;
label.text = title;
return label;
}
//根據(jù) frame和 imageName 創(chuàng)建UIImageView
UIImageView *MakeImageView(CGRect frame, NSString *imageName)
{
UIImageView *imageV = [[UIImageView alloc]initWithFrame:frame];
// imageV.userInteractionEnabled = YES;
imageV.backgroundColor = [UIColor clearColor];
imageV.image = [UIImage imageNamed:imageName];
return imageV;
}
@end
3.標(biāo)簽控制器
@interface MTabBarViewController ()
@end
@implementation MTabBarViewController
- (instancetype)initWithViewControllers:(NSArray *)viewControllers
{
self = [super init];
if (self) {
_viewControllers = viewControllers;
//遍歷數(shù)組哮幢，添加子控制器
[_viewControllers enumerateObjectsUsingBlock:^(UIViewController * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
[self addChild:obj];
}];
/*
@[@"商品.png",@"消息.png",@"訂單.png"]
@[@"商品瀏覽",@"我的消息",@"我的訂單"]
*/
_tabBar = [[MTabBar alloc]initWithTitles:@[@"商品瀏覽",@"我的消息",@"我的訂單"] imageNames:@[@"商品.png",@"消息.png",@"訂單.png"]];
[self.view addSubview:self.tabBar];
__weak typeof(self) weakSelf = self;
self.tabBar.callBack = ^(NSInteger index){
weakSelf.selectedIndex = index;
};
//默認(rèn)選中第0個
self.selectedIndex = 0;
}
return self;
}
- (void)setSelectedIndex:(NSInteger)selectedIndex
{
//取出當(dāng)前控制器 oldVc
UIViewController *oldVc = self.viewControllers[self.selectedIndex];
//取出將要顯示的 控制器 newVc
UIViewController *newVc = self.viewControllers[selectedIndex];
//動畫 向左邊移動
newVc.view.frame = CGRectMake(S_W, 0, S_W, S_H);
//改變 newVc 的視圖層次
//把newVc.view 的視圖放在 self.tabBar 的下面
[self.view insertSubview:newVc.view belowSubview:self.tabBar];
[UIView animateWithDuration:0.5 animations:^{
oldVc.view.frame = CGRectMake(-S_W, 0, S_W, S_H);
newVc.view.frame = BOUNDS;
}];
_selectedIndex = selectedIndex;
}
//添加子控制器具體步驟
- (void)addChild:(UIViewController *)viewController
{
[self addChildViewController:viewController];
viewController.view.frame = BOUNDS;
//將viewContoller.view 放在最底層
[self.view insertSubview:viewController.view atIndex:0];
[viewController didMoveToParentViewController:self];
// self.view.subviews 數(shù)組 下標(biāo)越小带膀，視圖層次越在下面志珍，下標(biāo)越大，視圖層次越在上面
}
@end
4.視圖位置控制 修改對應(yīng)的視圖的frame可以實(shí)現(xiàn)不同的視圖效果
CGRect TabBarFrame()
{
return CGRectMake(0, S_H-64, S_W, 64);
}
//左邊抽屜隱藏（開始）的位置
CGRect LeftViewStartFrame()
{
return CGRectMake(-S_W*0.75, 67,S_W*0.75 , S_H-64-64-6);
}
//左邊抽屜顯示（結(jié)束）的位置
CGRect LeftViewEndFrame()
{
return CGRectMake(0, 67, S_W*0.75, S_H-64-64-6);
}
//右邊內(nèi)容開始（抽屜隱藏時）的位置
CGRect RigntContentStartFrame()
{
return CGRectMake(0, 0, S_W, S_H);
}
//右邊內(nèi)容結(jié)束（抽屜顯示時）的位置
CGRect RightContentEndFrame()
{
return CGRectMake(S_W*0.75, 0, S_W, S_H);
}
CGRect CGRM(CGFloat x, CGFloat y,CGFloat w,CGFloat h)
{
return CGRectMake(x, y, w, h);
}
@end
歡迎下載
