UITabBar实现中间大按钮


原理非常简单,把中间tab bart item的图设为一个大图就可以了。
缺点就是超出tab bar的部分是不能点击的。


//设置tab bar 中间item的图为大图标    

UIViewController* vc = [UIViewController new];

UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:vc];

[vcs addObject:nav];

nav.tabBarItem.image = [[UIImage imageNamed:@"jdstreetNew_up"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

nav.tabBarItem.selectedImage = [[UIImage imageNamed:@"jdstreetNew_up"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];


//隐藏tab bar顶部的分隔线。否则顶部的分隔线将压在中间大图标的上面。

{

    //设置tab bar的背景图后setShadowImage才有效。

    {

        CGRect rect = CGRectMake(0, 0, self.view.frame.size.width, 44);

        UIGraphicsBeginImageContext(rect.size);

        CGContextRef context = UIGraphicsGetCurrentContext();

        //CGContextSetFillColorWithColor(context, [[UIColor clearColor] CGColor]);

        CGContextSetFillColorWithColor(context, [[UIColor colorWithRed:247/255.0

                                                                 green:247/255.0

                                                                  blue:247/255.0

                                                                 alpha:1] CGColor]);

        CGContextFillRect(context, rect);

        UIImage *img = UIGraphicsGetImageFromCurrentImageContext();

        UIGraphicsEndImageContext();

        

        [self.tabBar setBackgroundImage:img];

    }


    //将tab bar顶部的分隔线设置为不可见。

[self.tabBar setShadowImage:[UIImage new]];

}



中间tabbar的icon

     


最后的效果:



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在移动端的 tabbar 中,通常会有一个图标或文字凸出来,表示当前页面所在的位置。如果你希望在 tabbar中间没有凸起的页面,可以考虑在设计 tabbar 时,将中间的图标设置为平面的,而不是凸出来的。 例如,在 iOS 中,可以使用 `UITabBarItem` 类的 `selectedImage` 属性来设置 tabbar 中间图标的选中状态,将其设置为与未选中状态相同的图片即可。在 Android 中,可以使用 `TabLayout` 组件的 `setTabRippleColor()` 方法来设置 tabbar 中间图标的涟漪效果颜色,将其设置为透明色即可。 当然,如果你希望在 tabbar 中间没有任何图标或文字,也可以在设计 tabbar 时将中间的位置留空,这样就不会有任何凸起的页面了。 ### 回答2: 移动端的TabBar中间无凸起页面指的是,在一个移动应用的底部导航栏(TabBar)中,通常会有多个选项卡(Tab)供用户选择。而在这些选项卡中,中间的选项卡没有任何凸起或突出的设计,与其他选项卡保持平齐。 这种设计常见于一些移动应用,如社交媒体、在线购物或新闻应用等。这样的设计有以下几点好处: 首先,无凸起的TabBar页面使整个底部导航栏看起来更加整洁和简洁。有了一个统一的水平线,用户可以更容易地注意到每个选项卡,同时不会被某个凸起或突出的选项卡分散注意力。 其次,无凸起的TabBar可以提供一致的用户体验。使用者在操作和浏览不同页面时,不需要适应不同凸起的设计,减少了学习和适应的认知负担。 此外,这种设计可以保持选项卡之间的视觉平衡,使用户在点击不同选项卡时感觉更加自然和流畅。 最后,无凸起的TabBar也可以让背景图或颜色充分展示,提高了应用的美观度。 总结来说,移动端TabBar中间无凸起页面的设计使得底部导航栏更加简洁、统一和易于使用,提供了更好的用户体验,同时增加了应用的美观性。 ### 回答3: 移动端TabBar是手机软件界面中的一个重要组件,通常用于切换不同功能页面。而在TabBar的设计中,中间无凸起页面是一种较为常见的设计方式。 移动端的TabBar一般位于屏幕的底部,并具有若干个标签按钮,每个按钮对应着一个不同的页面。常见的设计风格是:选中的标签按钮状态改变,页面内容相应地切换展示。而中间无凸起页面则是一种与其他方式有所不同的设计,它取消了传统TabBar中选中按钮的凸起效果。 中间无凸起页面的设计方式有以下几点优势: 1. 内容展示更为整洁:通过取消选中按钮的凸起效果,页面的整体视觉效果更为简洁和清爽,用户可以更直观地了解当前所处页面。 2. 操作更加简单:将中间页面取消凸起后,用户在切换页面时只需要点击按钮即可,无需关注按钮外的额外元素,操作更加简单方便。 3. 增加空间利用率:在一些手机屏幕较小的设备上,取消中间页面的凸起可以节省一些页面空间,使得内容的展示更加紧凑,更多的信息可一览无余。 虽然中间无凸起页面有以上的优势,但也需要根据具体应用场景和用户习惯进行权衡和选择。在一些特定的应用中,凸起效果可能对用户体验有着积极的影响,因此,在设计中需要根据具体情况进行综合考虑。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值