ios 仿淘宝自定义TabBar

最新推荐文章于 2020-04-10 12:09:34 发布

生姜可乐

最新推荐文章于 2020-04-10 12:09:34 发布

阅读量4.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： iOS 文章标签： iOS 自定义TabBar

本文链接：https://blog.youkuaiyun.com/smk524198002/article/details/10963517

iOS 专栏收录该内容

10 篇文章

订阅专栏

 iOS 自带的TabBar样式比较单一，很多时候需要自定义，仿淘宝的效果如下： 
 
 
 
自定义TabBar的类MainController继承UITabBarController 
 
#import <UIKit/UIKit.h>



@interface MainController : UITabBarController
{
    @private
    UIButton *homeBtn;
    UIButton *myTaobaoBtn;
    UIButton *cartBtn;
    UIButton *weitaoBtn;
    UIButton *searchBtn;
    
    UIImageView *tabbarBG;
    UIImageView *itemBG;
    

}

- (void)createCustomTabBar; //创建自定义TabBar
- (void)showTabBar; //显示TabBar
- (void)hideTabBar; //隐藏TabBar

@end

主要是上面三个方法：

createCustomTabBar创建一个自定义TabBar,主要思想就是：把系统自带的TabBar隐藏，然后在TabBar的位置上放自定义的TabBar视图

自定义TabBar的视图层次关系：

背景（最下面）,选择图片（中间），按钮（最上面）

主要代码：

- (void)createCustomTabBar
{
    /*
     *层次关系：背景（最下面）,选择图片（中间），按钮（最上面）
     */
    
    tabbarBG = [[UIImageView alloc]initWithFrame:CGRectMake(0, 480-49, 320, 49)];
    tabbarBG.image = [UIImage imageNamed:@"tabbar_background.png"];
    tabbarBG.userInteractionEnabled = YES;
    [self.view addSubview:tabbarBG];
    
    
    itemBG = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"tabbar_item_selected.png"]];
    [tabbarBG addSubview:itemBG];
    
    homeBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    homeBtn.tag = 0;
    homeBtn.frame = CGRectMake(0.0, 0.0, 64.0, 49.0);
    [homeBtn setImage:[UIImage imageNamed:@"tabbar_home_unselected.png"] forState:UIControlStateNormal];
    [homeBtn setImage:[UIImage imageNamed:@"tabbar_home_selected.png"] forState:UIControlStateSelected];
    [homeBtn setTitle:@"首页" forState:UIControlStateNormal];
    [homeBtn setTitleColor:[UIColor colorWithRed:135.0/255.0 green:145.0/255.0 blue:165.0/255.0 alpha:1] forState:UIControlStateNormal];
    [homeBtn setTitleColor:[UIColor colorWithRed:235.0/255.0 green:81.0/255.0 blue:17.0/255.0 alpha:1] forState:UIControlStateSelected];
    homeBtn.titleLabel.font = [UIFont systemFontOfSize:10.0];
    [homeBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, -29, -30, 0)];
    [homeBtn setImageEdgeInsets:UIEdgeInsetsMake(-10, 18, 0, 18)];
    [homeBtn addTarget:self action:@selector(homeBtn_Click:) forControlEvents:UIControlEventTouchUpInside];
    homeBtn.selected = YES;
    itemBG.frame = CGRectMake(0, 0, 64, 49);
    [tabbarBG addSubview:homeBtn];
    
    
     myTaobaoBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    myTaobaoBtn.tag = 1;
    myTaobaoBtn.frame = CGRectMake(64, 0.0, 64.0, 49.0);
    [myTaobaoBtn setImage:[UIImage imageNamed:@"tabbar_mytaobao_unselected.png"] forState:UIControlStateNormal];
    [myTaobaoBtn setImage:[UIImage imageNamed:@"tabbar_mytaobao_selected.png"] forState:UIControlStateSelected];
    [myTaobaoBtn setTitle:@"我的淘宝" forState:UIControlStateNormal];
    [myTaobaoBtn setTitleColor:[UIColor colorWithRed:135.0/255.0 green:145.0/255.0 blue:165.0/255.0 alpha:1] forState:UIControlStateNormal];
    [myTaobaoBtn setTitleColor:[UIColor colorWithRed:235.0/255.0 green:81.0/255.0 blue:17.0/255.0 alpha:1] forState:UIControlStateSelected];
    myTaobaoBtn.titleLabel.font = [UIFont systemFontOfSize:10.0];
    [myTaobaoBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, -29, -30, 0)];
    [myTaobaoBtn setImageEdgeInsets:UIEdgeInsetsMake(-10, 18, 0, 18)];
    [myTaobaoBtn addTarget:self action:@selector(myTaobaoBtn_Click:) forControlEvents:UIControlEventTouchUpInside];
    [tabbarBG addSubview:myTaobaoBtn];
    
  
    cartBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    cartBtn.tag = 2;
    cartBtn.frame = CGRectMake(64*2, 0.0, 64.0, 49.0);
    [cartBtn setImage:[UIImage imageNamed:@"tabbar_cart_unselected.png"] forState:UIControlStateNormal];
    [cartBtn setImage:[UIImage imageNamed:@"tabbar_cart_selected.png"] forState:UIControlStateSelected];
    [cartBtn setTitle:@"购物车" forState:UIControlStateNormal];
    [cartBtn setTitleColor:[UIColor colorWithRed:135.0/255.0 green:145.0/255.0 blue:165.0/255.0 alpha:1] forState:UIControlStateNormal];
    [cartBtn setTitleColor:[UIColor colorWithRed:235.0/255.0 green:81.0/255.0 blue:17.0/255.0 alpha:1] forState:UIControlStateSelected];
    cartBtn.titleLabel.font = [UIFont systemFontOfSize:10.0];
    [cartBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, -27, -30, 0)];
    [cartBtn setImageEdgeInsets:UIEdgeInsetsMake(-10, 18, 0, 18)];
    [cartBtn addTarget: self action:@selector(cartBtn_Click:) forControlEvents:UIControlEventTouchUpInside];
    [tabbarBG addSubview:cartBtn];
    
    weitaoBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    weitaoBtn.tag = 3;
    weitaoBtn.frame = CGRectMake(64*3, 0.0, 64.0, 49.0);
    [weitaoBtn setImage:[UIImage imageNamed:@"tabbar_weitao_unselected.png"] forState:UIControlStateNormal];
    [weitaoBtn setImage:[UIImage imageNamed:@"tabbar_weitao_selected.png"] forState:UIControlStateSelected];
    [weitaoBtn setTitle:@"微淘" forState:UIControlStateNormal];
    [weitaoBtn setTitleColor:[UIColor colorWithRed:135.0/255.0 green:145.0/255.0 blue:165.0/255.0 alpha:1] forState:UIControlStateNormal];
    [weitaoBtn setTitleColor:[UIColor colorWithRed:235.0/255.0 green:81.0/255.0 blue:17.0/255.0 alpha:1] forState:UIControlStateSelected];
    weitaoBtn.titleLabel.font = [UIFont systemFontOfSize:10.0];
    [weitaoBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, -27, -30, 0)];
    [weitaoBtn setImageEdgeInsets:UIEdgeInsetsMake(-10, 18, 0, 18)];
    
    [weitaoBtn addTarget: self action:@selector(weitaoBtn_Click:) forControlEvents:UIControlEventTouchUpInside];
    [tabbarBG addSubview:weitaoBtn];
    
    
    searchBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    searchBtn.tag = 4;
    searchBtn.frame = CGRectMake(64*4, 0.0, 64.0, 49.0);
    [searchBtn setImage:[UIImage imageNamed:@"tabbar_search_unselected.png"] forState:UIControlStateNormal];
    [searchBtn setImage:[UIImage imageNamed:@"tabbar_search_selected.png"] forState:UIControlStateSelected];
    [searchBtn setTitle:@"搜索" forState:UIControlStateNormal];
    [searchBtn setTitleColor:[UIColor colorWithRed:135.0/255.0 green:145.0/255.0 blue:165.0/255.0 alpha:1] forState:UIControlStateNormal];
    [searchBtn setTitleColor:[UIColor colorWithRed:235.0/255.0 green:81.0/255.0 blue:17.0/255.0 alpha:1] forState:UIControlStateSelected];
    searchBtn.titleLabel.font = [UIFont systemFontOfSize:10.0];
    [searchBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, -27, -30, 0)];
    [searchBtn setImageEdgeInsets:UIEdgeInsetsMake(-10, 18, 0, 18)];
    
    [searchBtn addTarget: self action:@selector(searchBtn_Click:) forControlEvents:UIControlEventTouchUpInside];
    [tabbarBG addSubview:searchBtn];
}

然后在跳转的时候，有时候需要隐藏TabBar，返回到控制页面的时候需要显示TabBar,下面是show和hide方法

- (void)showTabBar
{
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.35];
    tabbarBG.frame = CGRectMake(0, 431, 320, 49);
    [UIView commitAnimations];
     NSLog(@"显示TabBar");
}
- (void)hideTabBar
{
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.35];
    tabbarBG.frame = CGRectMake(-320, 431, 320, 49);
    [UIView commitAnimations];
    NSLog(@"隐藏TabBar");
}

这里加了动画，隐藏了系统自带的TabBar之后，那一块会变成黑色，因为被自定义的TabBar隐藏，所以看不到，但是在跳转的时候，如果自定义的TabBar移动的速度跟系统页面移动的速度不一致，那么那个黑色的部分就会在跳转的过程中显示出来（可能描述得不是很清楚，大家可以屏蔽动画看一下效果）。

这里放上源码的下载地址：http://download.youkuaiyun.com/detail/smk524198002/6201655

希望大家多多批评指正，谢谢。