[iOS开发]iOS中TabBar中间按钮凸起的实现

在日常使用app的过程中,经常能看到人家实现了底部分栏控制器的中间按钮凸起的效果,那么这是怎么实现的呢?

效果演示:

请添加图片描述

实现原理:

创建按钮

创建一个UITabBar的子类,重写它的layoutSubviews方法:

- (void)layoutSubviews {
    [super layoutSubviews];
    CGFloat width = self.bp_width;
    // 添加发布按钮
    [self addSubview:self.publishButton];
    self.publishButton.center = CGPointMake(width * 0.5, 0);
    // 按钮索引
    int index = 0;
    // tabBar上按钮的尺寸
    CGFloat tabBarButtonW = (width - publishButtonWidth) / 2;
    CGFloat tabBarButtonH = [UIDevice bp_tabBarHeight];
    CGFloat tabBarButtonY = 0;
    // 设置TabBarButton的frame
    for (UIView *tabBarButton in self.subviews) {
        if (![NSStringFromClass(tabBarButton.class) isEqualToString:@"UITabBarButton"]) {
            continue;
        }
        // 计算按钮的X值
        CGFloat tabBarButtonX = index * tabBarButtonW;
        if (index == 1) { // 给下一个个button增加一个publushButton宽度的x值
            tabBarButtonX += publishButtonWidth;
        }
        // 设置按钮的frame
        tabBarButton.frame = CGRectMake(tabBarButtonX, tabBarButtonY, tabBarButtonW, tabBarButtonH);
        // 增加索引
        index++;
    }
}

方法里面对原有的tabBarButton的位置进行调整,以便把自己加上去的按钮插入到中间,把center位置设置成tabBar上沿的中间位置。

扩大点击范围

按钮加上去后,发现点击超出tabBar范围的位置,按钮无法响应,所以,需要重写hitTest方法,扩大响应范围:

// 重写扩大响应范围
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
   if (self.isHidden == NO) {
       CGPoint newPoint = [self convertPoint:point toView:self.publishButton];
       if ([self.publishButton pointInside:newPoint withEvent:event]) {
           return self.publishButton;
       }
   }
    return [super hitTest:point withEvent:event];
}

这样,这个中间凸起的按钮就做好了!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在uni-app实现TabBar中间凸起的方法如下: 1. 在 `pages.json` 文件配置 `custom-tab-bar` 为自定义的 TabBar 组件: ```json { "tabBar": { "custom": true, "color": "#999", "selectedColor": "#007aff", "backgroundColor": "#fff", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/tabbar/home.png", "selectedIconPath": "static/tabbar/home-active.png" }, { "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "static/tabbar/mine.png", "selectedIconPath": "static/tabbar/mine-active.png" }, { "pagePath": "pages/release/release", "text": "", "iconPath": "static/tabbar/release.png", "selectedIconPath": "static/tabbar/release-active.png" }, { "pagePath": "pages/message/message", "text": "消息", "iconPath": "static/tabbar/message.png", "selectedIconPath": "static/tabbar/message-active.png" }, { "pagePath": "pages/order/order", "text": "订单", "iconPath": "static/tabbar/order.png", "selectedIconPath": "static/tabbar/order-active.png" } ] } } ``` 2. 在 TabBar 组件添加中间凸起按钮,例如: ```html <template> <view class="custom-tab-bar"> <view class="custom-tab-bar-item" v-for="(item, index) in list" :key="index" @click="switchTab(index)"> <view class="icon"> <image :src="index === current ? item.selectedIconPath : item.iconPath"></image> </view> <view class="text" :class="{ 'text-active': index === current }">{{ item.text }}</view> </view> <view class="custom-tab-bar-center" @click="goReleasePage"> <image src="static/tabbar/release.png"></image> </view> </view> </template> ``` 3. 在 TabBar 组件的样式文件设置中间凸起按钮样式,例如: ```css .custom-tab-bar { display: flex; flex-direction: row; justify-content: space-between; align-items: center; position: fixed; bottom: 0; left: 0; right: 0; height: 98rpx; box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1); background-color: #fff; } .custom-tab-bar-item { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; } .custom-tab-bar-item .icon { width: 40rpx; height: 40rpx; } .custom-tab-bar-item .icon image { width: 100%; height: 100%; } .custom-tab-bar-item .text { font-size: 22rpx; color: #999; margin-top: 4rpx; } .custom-tab-bar-item .text-active { color: #007aff; } .custom-tab-bar-center { position: absolute; top: -30rpx; left: 50%; transform: translateX(-50%); width: 80rpx; height: 80rpx; border-radius: 50%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); background-color: #007aff; display: flex; justify-content: center; align-items: center; } .custom-tab-bar-center image { width: 60rpx; height: 60rpx; } ``` 这样,就可以在 uni-app 实现 TabBar 中间凸起的效果了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值