分享一个自定义的中间凸起的tabBar

最新推荐文章于 2022-06-27 13:38:28 发布
最新推荐文章于 2022-06-27 13:38:28 发布
阅读量5.2k 收藏 1
点赞数 1
分类专栏： ios 文章标签： CustomTabBar 自定义tabbar
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013561113/article/details/19122269
版权

曾经遇到这样的需求，为了凸显中央选项卡的重要性，需要将tabbar的最中间的选项卡高度与其他的不同。

为了实现这样的需求，用系统自带的tabbar是不能实现的。首先想过底部用自带的tabbar，然后中间放一个高出一块的图片button来实现，可是后来发现不可行，无法做到使选项卡栏隐藏后同步消失的问题。于是就重写了一个tabbar来实现上述的功能。

这个demo我放到了github上

https://github.com/MagicLGD/CustomTabBar

互联部落
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
uniapp开发小程序-实现中间凸起的 tabbar
weixin_48596030的博客
08-01 2314
【代码】uniapp开发小程序-实现中间凸起的 tabbar。
uni-app 实现凸起的 tabbar 底部导航栏
最新发布
UserGuan的博客
09-28 3955
- 自定义底部导航栏 -->
几代码实现导航栏透明渐变、实现TabBar中间凸起
11-19
几代码实现导航栏透明渐变、实现TabBar中间凸起；可自定义
实现Tabbar的中间按钮向上突出的两种方法
启程的博客
02-23 1万+
1.设置 UITabBarController //  初始化菜单栏     UITabBarController *tabC = [[UITabBarController alloc]init];     UINavigationController *main_NV = [[UINavigationController alloc]initWithRootViewCo
用CSS制作凸出按钮效果
热门推荐
wurichengn的博客
07-04 2万+
本文包含HTML效果，阅读原文以体验最佳效果：原文 按钮在各种软件的开发中几乎都是少不了的部分，好看的按钮有很多。今天我们来试着使用CSS制作简单的凸出按钮。 凸出按钮，顾名思义就是让用户觉得它是凸出于网页这个平面的，点击的时候会把它戳进去。 很多按钮都会有这样的效果，因为这的确是不错的用户体验。我们要做的是以CSS3为基础的简单凸出按钮。 文字凸出按钮 目标效果
自定义凸起TabBar
07-09
自定义凸起TabBar，解决TabBar背景色，描边黑线问题，解决原生UITabBarItem覆盖在自定义TabBar上问题，解决凸起部分点击无响应问题github地址：https://github.com/zk1947/CustomTaBar博客：...
swift-这是一个自定义的TabBar样式实现TabBar中间凸起“”按钮
08-15
这是一个自定义的TabBar样式，实现TabBar中间凸起“ ”按钮
微信小程序自定义tabBar,中间圆形凸起
05-31
微信小程序原生的自定义tabBar组件，中间圆形凸起。支持darkMode，深色主题自适应 支持iPhoneX底部横线自适应
uniapp 微信小程序tabbar凸起的显示
08-25
uniapp 微信小程序tabbar凸起的显示，不闪烁。
ios自定义tabbar 中间按钮突出
07-27
ios不完全自定义的tabar 中间按钮突出，可以切换页面 ，
底部导航栏中间圆形按钮凸起效果demo
07-04
这是一个使用RelativeLayout+RadiouGroup+ImageView制作的中间凸起的按钮效果，代码简单易懂，避免了使用自定义控件带来的繁琐问题。
ios tabbar中间凸起_移动端开发基础【21】tabBar 配置
weixin_39713841的博客
11-25 421
taBar配置如果应用是一个多 tab 应用，则可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。Tips(1)当设置 position 为 top 时，将不会显示 icon(2)tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。(3)tabbar 切换第一次加载时可能渲染不及时，可...
uniapp-tabBar中间凸起按钮
qq_34227291的博客
12-29 1万+
前言：以下是使用的是原生方法，兼容会比绘制按钮的好，不用写更多代码去让图标固定到tabBar位置。官网有提到“中间按钮 仅在 list 项为偶数时有效”，这需要注意，另外在中间按钮的图标有的凸出的部分的图标有个描边的边框之类的，这点在当前uniapp版本已经自动适应了，在之前的开发版本是不会自适应的。比如在安卓上面能够自适应凸出部分的描边可以刚刚好跟tabBar水平对齐，但是在苹果上面是不会的。 ...
记录微信小程序之自定义凸起tabBar
yh0016的博客
10-17 2563
微信小程序自定义底部TabBar 想要呈现的效果图： 将TabBar封装成一个组件： 下面是tabbar.wxml的代码： <view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}"> <block wx:for="{{tabbar.list}}" wx:key="{{item.pagePath}}"> &l
实现底部导航栏中间凸起，（点击中间凸出按钮弹出菜单）
Keep Do It
04-07 1万+
看图，代码不是很复杂。 Github：https://github.com/1023459494/EasyApp
iOS开发之实现TabBar中间凸起“+”按钮（自定义TabBar）
weixin_30877181的博客
08-10 439
参考：http://www.jianshu.com/p/46f61bc7a938，https://github.com/Mringkang/KBCustomCenterTabbar 效果： PS：这里需要用到UIView一个分类的一些属性，参考http://www.cnblogs.com/guitarandcode/p/5758995.html ，图标素材等自行上网找或者自己设计，这里...
实现底部导航栏中间凸起
11-02 7606
【Android】神奇的android:clipChildren属性 转载于：博客园：http://www.cnblogs.com/      农民伯伯： http://www.cnblogs.com/over140/ 正文 一、效果图 二、实现代码 xml version="1.0" encoding="utf-8"?> LinearLayout xmlns:andr
自定义中间有突出按钮的tabbar栏
biliPS的博客
06-27 1131
基于vant二次封装的，带有突出按钮的自定义tabbar栏
微信小程序怎么自定义tabbar让中间凸起
07-11
要自定义微信小程序的 tabbar，并让中间凸起，可以按照以下步骤进行操作： 1. 在小程序的项目根目录下找到 app.json 文件，添加 "custom": true 字段，表示开启自定义 tabBar。 ```json { "custom": true, "tabBar": { "color": "#999999", "selectedColor": "#1296db", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/home/home", "text": "首页", "iconPath": "images/tabbar/home.png", "selectedIconPath": "images/tabbar/home-selected.png" }, // 其他 tabbar item ] } } ``` 2. 创建一个自定义的 tabBar 组件，例如在根目录下创建一个名为 custom-tab-bar 的文件夹，并在其中创建一个 custom-tab-bar 组件的文件 custom-tab-bar.wxml，可以在该文件中编写自定义的 tabBar 布局。 3. 在 app.json 中的 tabBar 配置中使用自定义的 tabBar 组件路径。 ```json { "custom": true, "tabBar": { "custom": true, "color": "#999999", "selectedColor": "#1296db", "backgroundColor": "#ffffff", "customTabBar": "/custom-tab-bar/custom-tab-bar" } } ``` 这样就可以实现自定义的 tabBar，并且使中间的 tabBarItem 凸起。 请注意，以上步骤仅提供了实现的思路，具体的样式和布局需要根据你的需求进行调整和修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值