iOS开发之模仿简书App自定义TabBar详解

先来看看效果图吧

模仿简书自定义TabBar(纯代码).gif

然后我们再来一步一步看看代码
1.首先页面下面TabBar的Button需要自定义,把Button的文字放在图片下面
//更换文字图片的位置,最主要的就是实现以下两个方法,重写父类方法
//image ratio
#define TabBarButtonImageRatio 0.6
-(CGRect)imageRectForContentRect:(CGRect)contentRect
{
    CGFloat imageW = contentRect.size.width;
    CGFloat imageH = contentRect.size.height*TabBarButtonImageRatio;

    return CGRectMake(0, 0, imageW, imageH);
}

-(CGRect)titleRectForContentRect:(CGRect)contentRect
{
    CGFloat titleY = contentRect.size.height*TabBarButtonImageRatio;
    CGFloat titleW = contentRect.size.width;
    CGFloat titleH = contentRect.size.height - titleY;

    return CGRectMake(0, titleY, titleW, titleH);
}
//在头文件中增加UITabBarItem类型的属性,是为了设置图片和title比较方便
@property(nonatomic, strong)UITabBarItem *tabBarItem;
//实现其set方法
- (void)setTabBarItem:(UITabBarItem *)tabBarItem
{
    _tabBarItem = tabBarItem;
    [self setTitle:self.tabBarItem.title forState:UIControlStateNormal];
    [self setImage:self.tabBarItem.image forState:UIControlStateNormal];
    [self setImage:self.tabBarItem.selectedImage forState:UIControlStateSelected];
}
2.其次就是自定义一个TabBar,其实就是自定义个UIView
//单独的设置写文章Button的属性,因为点击它是通过导航控制器跳转到一个在一个页面
- (void)SetupWriteButton{
    UIButton *writeButton = [UIButton new];
    writeButton.adjustsImageWhenHighlighted = NO;
    [writeButton setBackgroundImage:[UIImage imageNamed:@"button_write~iphone"] forState:UIControlStateNormal];
    [writeButton addTarget:self action:@selector(ClickWriteButton) forControlEvents:UIControlEventTouchUpInside];
    writeButton.bounds = CGRectMake(0, 0, writeButton.currentBackgroundImage.size.width, writeButton.currentBackgroundImage.size.height);
    [self addSubview:writeButton];
    _writeButton = writeButton;
}
//设置自控件的frame,下面的tabbarBtnArray只添加了自定义的tabBarButton,没有加入writeButton
//所以它的count的值是4,而subviews.count值是5;
//因为writeButton是放在正中间,所以,在nIndex大于1时,需要再加上一个按钮的宽度btnW
- (void)layoutSubviews{
    [super layoutSubviews];
    self.writeButton.center = CGPointMake(self.frame.size.width*0.5, self.frame.size.height*0.5);

    CGFloat btnY = 0;
    CGFloat btnW = self.frame.size.width/(self.subviews.count);
    CGFloat btnH = self.frame.size.height;

    for (int nIndex = 0; nIndex < self.tabbarBtnArray.count; nIndex++) {
        CGFloat btnX = btnW * nIndex;
        MainTabBarButton *tabBarBtn = self.tabbarBtnArray[nIndex];
        if (nIndex > 1) {
            btnX += btnW;
        }
        tabBarBtn.frame = CGRectMake(btnX, btnY, btnW, btnH);
        tabBarBtn.tag = nIndex;
    }
}
//这个是个公共的方法,用于添加tarBarItem
- (void)addTabBarButtonWithTabBarItem:(UITabBarItem *)tabBarItem{
    MainTabBarButton *tabBarBtn = [[MainTabBarButton alloc] init];
    tabBarBtn.tabBarItem = tabBarItem;
    [tabBarBtn addTarget:self action:@selector(ClickTabBarButton:) forControlEvents:UIControlEventTouchDown];
    [self addSubview:tabBarBtn];
    [self.tabbarBtnArray addObject:tabBarBtn];

    //default selected first one
    if (self.tabbarBtnArray.count == 1) {
        [self ClickTabBarButton:tabBarBtn];
    }
}
//这个是通知代理,并使用一个中间变量设置按钮的选中状态,这个代理看方法名也能明白,就是为了tabBar里控制器的切换
- (void)ClickTabBarButton:(MainTabBarButton *)tabBarBtn{

    if ([self.delegate respondsToSelector:@selector(tabBar:didSelectedButtonFrom:to:)]) {
        [self.delegate tabBar:self didSelectedButtonFrom:self.selectedButton.tag to:tabBarBtn.tag];
    }

    self.selectedButton.selected = NO;
    tabBarBtn.selected = YES;
    self.selectedButton = tabBarBtn;
}
3.再自定义一个UITabBarController,下面介绍两个比较重要的方法,如何使用自定义的tabBar
//这个是必不可少的,功能就是把系统自带的tabBar里的按钮移除,否者会重叠
- (void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];

    for (UIView *child in self.tabBar.subviews) {
        if ([child isKindOfClass:[UIControl class]]) {
            [child removeFromSuperview];
        }
    }
}
//这个方法就是把自定义的tabBar添加到系统的tabBar上,这里的好处就是,在push或者pop控制器时,隐藏tabBar就是十分的方便
//只要设置viewController.hidesBottomBarWhenPushed = YES;这个属性为YES就可以了。
//如果你不是将自定义的tabBar添加到系统的tabBar上,实现起来就没这么方便了。
- (void)SetupMainTabBar{
    MainTabBar *mainTabBar = [[MainTabBar alloc] init];
    mainTabBar.frame = self.tabBar.bounds;
    mainTabBar.delegate = self;
    [self.tabBar addSubview:mainTabBar];
    _mainTabBar = mainTabBar;
}
//封装一个方法来初始化子控制器
- (void)SetupChildVc:(UIViewController *)childVc title:(NSString *)title image:(NSString *)imageName selectedImage:(NSString *)selectedImageName{
    MainNavigationController *nav = [[MainNavigationController alloc] initWithRootViewController:childVc];
    childVc.tabBarItem.image = [UIImage imageNamed:imageName];
    childVc.tabBarItem.selectedImage = [UIImage imageNamed:selectedImageName];
    childVc.tabBarItem.title = title;
    [self.mainTabBar addTabBarButtonWithTabBarItem:childVc.tabBarItem];
    [self addChildViewController:nav];
}

还以一个是自定义tabBar遇到的问题文章iOS自定义TabBar使用popToRootViewControllerAnimated重叠问题解决

demo下载地址如下:

demo下载地址

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值