固定底部 布局_你不知道的秘密，苹果移动应用的底部栏原来是这样布局的

底部栏(Tab Bar)，也就是我们日常使用的手机应用底部的操作栏

常规的移动应用底部栏

相信各位UI设计师们都非常熟悉。那么，你知道iPhone上的应用底部栏，开发小哥们是怎么布局的吗？

苹果官方提供的底部栏布局其实就一种，那就是固定间隙布局：

以一倍图375px为例，最左侧及最右侧距离页面两边是各2px的间隙，中间的各个tab间的间隙是4px的间隙，tab的宽度则是均等分。而所谓的固定间隙，指的就是无论底部栏是三个tab，还是四个、五个tab，间隙都是固定的这个值。

苹果的底部栏固定间隙布局

当然，这是常规的底部栏，身为设计师，我们怎么可能满足于这么简单、常见的设计呢？我们要的是个性、是天马行空的想象、是人间那不一样的烟火！！

于是，在我们设计师们的不懈努力下，出现了如下的底部栏设计

看到这些设计，相信开发小哥们已经哭晕在厕所了

那么，像这样的设计，开发小哥们又是如何布局的呢？万能的开发小哥哥们自然是有办法搞定啦。

特殊样式的底部栏大致布局思路

如上图所示，开发小哥哥们会将底部栏分为6个tab，中间两个空着(具体会视中间按钮大小决定，如果中间按钮不是特别大，也有可能是分5个tab)，然后单独放一个按钮在底部栏上，并把按钮位置往上偏移。

就是这么神奇！

对于我们设计师来讲，自己的设计能被开发出来，自然也是很开心的。

当然，虽然开发小哥们都是万能的，但是我们设计师，在设计的时候去了解一下开发小哥们的布局思路，对于我们的设计以及跟开发小哥们的对接，也是相当有帮助的。