自定义UITabbar

最新推荐文章于 2024-07-18 13:49:49 发布

leizh007_IOS

最新推荐文章于 2024-07-18 13:49:49 发布

阅读量467

点赞数

CC 4.0 BY-SA版权

分类专栏：开源中国iOS客户端学习

本文链接：https://blog.youkuaiyun.com/leizh007_IOS/article/details/46476449

开源中国iOS客户端学习专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在iOS应用中自定义TabBar的中间按钮，并实现点击后按钮状态改变及带有动画效果的选项按钮展示。通过添加自定义按钮并利用UIDynamicAnimator实现上下弹跳动画，增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看看效果：

中间那个绿色的按钮是自定义的，点击之后显示：

那些按钮出现是有动画的，从底下蹦出来的。

我们来看看这个是怎么实现的：

首先添加普通的item：

self.tabBar.translucent = NO;
    self.viewControllers = @[
                             [self addNavigationItemForViewController:newsSVC],
                             [self addNavigationItemForViewController:tweetsSVC],
                             [UIViewController new],
                             [self addNavigationItemForViewController:discoverTableVC],
                             [[UINavigationController alloc] initWithRootViewController:myInfoVC]
                             ];
    
    NSArray *titles = @[@"综合", @"动弹", @"", @"发现", @"我"];
    NSArray *images = @[@"tabbar-news", @"tabbar-tweet", @"", @"tabbar-discover", @"tabbar-me"];
    [self.tabBar.items enumerateObjectsUsingBlock:^(UITabBarItem *item, NSUInteger idx, BOOL *stop) {
        [item setTitle:titles[idx]];
        [item setImage:[UIImage imageNamed:images[idx]]];
        [item setSelectedImage:[UIImage imageNamed:[images[idx] stringByAppendingString:@"-selected"]]];
    }];

现在效果如下：

点击中间那个部分会显示：

接下来：

[self.tabBar.items[2] setEnabled:NO];
    
[self addCenterButtonWithImage:[UIImage imageNamed:@"tabbar-more"]];

禁用了中间那个按钮并且在tabBar上加入了一个自定义的按钮：

-(void)addCenterButtonWithImage:(UIImage *)buttonImage
{
    _centerButton = [UIButton buttonWithType:UIButtonTypeCustom];
    
    CGPoint origin = [self.view convertPoint:self.tabBar.center toView:self.tabBar];
    CGSize buttonSize = CGSizeMake(self.tabBar.frame.size.width / 5 - 6, self.tabBar.frame.size.height - 4);
    
    _centerButton.frame = CGRectMake(origin.x - buttonSize.height/2, origin.y - buttonSize.height/2, buttonSize.height, buttonSize.height);
    
    [_centerButton setCornerRadius:buttonSize.height/2];
    [_centerButton setBackgroundColor:[UIColor colorWithHex:0x24a83d]];
    [_centerButton setImage:buttonImage forState:UIControlStateNormal];
    [_centerButton addTarget:self action:@selector(buttonPressed) forControlEvents:UIControlEventTouchUpInside];
    
    [self.tabBar addSubview:_centerButton];
}

这样就在tabBar中添加了一个自定义的按钮，看一下按钮点击后的事件：

其中有：

@property (nonatomic, strong) UIDynamicAnimator *animator;

_animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];

- (void)buttonPressed
{
    [self changeTheButtonStateAnimatedToOpen:_isPressed];
    
    _isPressed = !_isPressed;
}


- (void)changeTheButtonStateAnimatedToOpen:(BOOL)isPressed
{
    if (isPressed) {
        [self removeBlurView];
        
        [_animator removeAllBehaviors];
        for (int i = 0; i < 6; i++) {
            UIButton *button = _optionButtons[i];
            //加入一个动画，这里安妮
            UIAttachmentBehavior *attachment = [[UIAttachmentBehavior alloc] initWithItem:button
                                                                         attachedToAnchor:CGPointMake(_screenWidth/6 * (i%3*2+1),
                                                                                                      _screenHeight + 200 + i/3*100)];
            attachment.damping = 0.65;
            attachment.frequency = 4;
            attachment.length = 1;
            
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 0.01 * NSEC_PER_SEC * (6 - i)), dispatch_get_main_queue(), ^{
                [_animator addBehavior:attachment];
            });
        }
    } else {
        [self addBlurView];
        
        [_animator removeAllBehaviors];
        for (int i = 0; i < 6; i++) {
            UIButton *button = _optionButtons[i];
            [self.view bringSubviewToFront:button];
            //加入一个动画，这里按钮会蹦下去
            UIAttachmentBehavior *attachment = [[UIAttachmentBehavior alloc] initWithItem:button
                                                                         attachedToAnchor:CGPointMake(_screenWidth/6 * (i%3*2+1),
                                                                                                      _screenHeight - 200 + i/3*100)];
            attachment.damping = 0.65;
            attachment.frequency = 4;
            attachment.length = 1;
            
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 0.02 * NSEC_PER_SEC * (i + 1)), dispatch_get_main_queue(), ^{
                [_animator addBehavior:attachment];
            });
        }
    }
}

- (void)addBlurView
{
    _centerButton.enabled = NO;
    
    CGSize screenSize = [UIScreen mainScreen].bounds.size;
    CGRect cropRect = CGRectMake(0, screenSize.height - 270, screenSize.width, screenSize.height);
    
    UIImage *originalImage = [self.view updateBlur];
    UIImage *croppedBlurImage = [originalImage cropToRect:cropRect];
    //下半部分那块画面
    _blurView = [[UIImageView alloc] initWithImage:croppedBlurImage];
    _blurView.frame = cropRect;
    _blurView.userInteractionEnabled = YES;
    [self.view addSubview:_blurView];
    <pre name="code" class="objc">    //背景的半透明图片

_dimView = [[UIView alloc] initWithFrame:self.view.bounds]; _dimView.backgroundColor = [UIColor blackColor]; _dimView.alpha = 0.4; [self.view insertSubview:_dimView belowSubview:self.tabBar]; [_blurView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(buttonPressed)]]; [_dimView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(buttonPressed)]]; [UIView animateWithDuration:0.25f animations:nil completion:^(BOOL finished) { if (finished) {_centerButton.enabled = YES;} }];}- (void)removeBlurView{ _centerButton.enabled = NO; self.view.alpha = 1; [UIView animateWithDuration:0.25f animations:nil completion:^(BOOL finished) { if(finished) { [_dimView removeFromSuperview]; _dimView = nil; [self.blurView removeFromSuperview]; self.blurView = nil; _centerButton.enabled = YES; } }];}