Android实现底部tabbar按钮突出效果

在某些情况下，我们可能需要使底部tabbar的中间按派运烂钮突出，即类似于如下的效果：

在android要实现该效果，十分简单，只需要在按钮的父布局将android:clipChildren属性设置为false：

并设置按尘漏钮的layout_gravity为bottom:

示例布局文件如下：

其中android:clipChildren属性的作用为 是否限制子View不超悄码过父布局，默认情况下是为true。当该属性为true时，子View超出父布局的部分会被裁剪。 因此，将该属性设置为false，父布局不再裁剪子View超出父布局的部分，就能实现突出按钮的效果了。

分享一个完整的微信小程序自定义 Tabbar ，tabbar按钮可以设置为跳转页面，也可以设置为功能按钮。懒得看文字的可以耐老直接去底部，博主分享了GitHub地址。

由于微信小程昌段升序自带的 Tabbar 功能比较单一，比如要做到中间是一个突出的圆形扫一扫按钮，就需要自定义 Tabbar 了。

博主创建了一个 Tabbar 组件，自己写的样燃汪式，在需要用到的页面引入组件。

组件使用了 position: fixed 定位到底部，所以在用到组件的页面，需要给 page 加上 margin-bottom 样式。

交互是通过在组件上定义的 bindtap 事件，来进行跳转页面或者触发功能模块，其中路由跳转是用的 wx.switchTab 。事件以及传参可以通过 triggerEvent ；

文件目录

引用组件

组件的data

组件的路由跳转

源码GitHub地址：https://github.com/pdd11997110103/ComponentWarehouse

如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；

END

往期文章

个人主页

uni-app自带的底部导航栏虽然也好者很好用，但是遇到中间需要有一个自定义按钮的需求的时候如果使用自带的midButton，就只支持App，小程序什么都者袜正不支持。

ADTabbar自定义底部导航栏支持App、小程序的中间自定义按钮，可以自己设置css让他凸起。

注：配合该组件的根页面（也就是每个底部菜单对应的第一个页面），需要用到自定义组件模式，详细用首悔法可以看Demo工程

暂不支持nvue

还有不足的地方会及时优化，也欢迎提出建议！

Demo工程

在 template 中使用组件

---