Android官方底部Tab栏设计规范

   <p>上一篇<a href="http://www.open-open.com/lib/view/open1461912783576.html">《仿微信底部Tab栏》</a>中粗略的讲了下底部Tab栏的封装，不少同学在实际运用中发现了一些问题，比如我demo中的title用了actionbar，所以如果新建的Activity的Theme不包含actionbar就回出现空指针；再比如假如底部的Tab对应的并不全都是Fragment，而是一部分Fragment，一部分Activity，就不适用了，但办法总比困难多，这个也是可以解决的；还有一个很常见的需求，就是底部有些Tab可能会有个小红点，之前的Demo并没有把这些问题包含进去，后续有时间再优化，今天来介绍下Google官方的Bottom navigation bars。</p>    <p>首先官方并没有一个叫Bottom navigation bars的控件，但是却出了一套关于Bottom navigation bars的标准，可见官方并不推荐把APP设计成这个样子。如果你非要设计成底部Tab栏的方式，我们也不横加干涉，我出一套标准，参照我的标准来，但官方不提供控件支持，这大概就是Google的内心独白了。</p>    <p>下面我们看看Bottom navigation bars的设计标准吧。</p>    <p><strong>位置</strong></p>    <p>可以放在底部，也可以放在侧边栏。一般是APP的首页。<br> <img alt="这里写图片描述" src="https://simg.open-open.com/show/ae350ab10eb1f4e48cc237e6d454d611.png"><br> <img alt="这里写图片描述" src="https://simg.open-open.com/show/ec44106658f613c18309816ad505b181.png"></p>    <p><strong>Tab个数</strong></p>    <p>（√）推荐底部可以放置3到5个。</p>    <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/1c1e06bd304b44c3d91dfbdae6ba0502.png"><br> <img alt="这里写图片描述" src="https://simg.open-open.com/show/3685bb794b057a7d635362b2ede11436.png"><br> （×）下面这种2个或者6个是不推荐使用的。</p>    <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/8b318f758069890eaaa5aeb43823f4f5.png"><br> <img alt="这里写图片描述" src="https://simg.open-open.com/show/99cfa2ce5f391752c0c9caf3adbb479a.png"></p>    <p><strong>Icons and text</strong></p>    <p>When the <strong>view is in focus</strong>, display that view’s icon and text label<br> When there are only <strong>three actions</strong>, display both icons and text labels at all times<br> If there are <strong>four or five actions</strong>, display inactive views as icons only<br> 选中的Tab同时显示icon和text。<br> 如果只有三个Tab，无论选中未选中，一直显示icon和文字。<br> 如果有四到五个Tab，选中的Tab显示文字和icon，未选中的Tab只显示icon。</p>    <p><strong>颜色</strong></p>    <p>（√）推荐选中的图标或者文字为APP的主色调，如果Tab栏本身就是彩色，推荐黑色和白色作为图标或者文字。</p>    <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/19a251a26aed8c0064acc7434167688a.png"></p>    <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/174ed90cb6e513be933a1e44696a859f.png"><br> （×）彩色图标不推荐使用</p>    <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/d9e98a29f7b4200729cdaa1250e39494.png"><br> <img alt="这里写图片描述" src="https://simg.open-open.com/show/cf962e617e51f632d36e90087936a225.png"></p>    <p><strong>文字</strong></p>    <p>文字要求言简意赅</p>    <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/6508ce84c4fe6be4845941d77a1c515f.png"></p>    <p>（×）这样都是不推荐的</p>    <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/0d95fcb754f8fe3ee09fe8f264f2be2d.png"><br> <img alt="这里写图片描述" src="https://simg.open-open.com/show/8086136bc4844cb4d631410cfd383e1e.png"><br> <img alt="这里写图片描述" src="https://simg.open-open.com/show/e8bd4a32e4c15c39796a669ac1e68993.png"></p>    <p><strong>尺寸</strong></p>    <p>Bottom navigation bars的高度推荐为56dp，icon的尺寸为24*24，这种Google一般推荐使用8的倍数。选中tab的字体大小为14sp,未选中为12sp。</p>    <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/99565a3f09bbd70ba43c02b58051c5c6.png"></p>    <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/09979c036c820811b898e3b1ba2ec151.png"><br> 以上就是相关的规范，具体的详细内容大家可以<a href="/misc/goto?guid=4959671897259245338">看这里</a>，但说了这么多，这么炫酷高颜值的Bottom navigation bars哪里有呢，官方又没有控件，但是<a href="/misc/goto?guid=4959671897350975143">github</a>上有啊。</p>    <p>先上几张图，大家随意感受下。</p>    <p><img alt="" src="https://simg.open-open.com/show/4d0cd34b0ccab53ce2e3b1bb56723e66.gif"></p>    <p><img alt="" src="https://simg.open-open.com/show/a390e45261f328e503e1ebbbcb5b0f4c.gif"></p>    <p><br> 有没有很高颜值，很炫酷。</p>    <p>使用方法也很简单：</p>    <p><strong>Step 1</strong>. Add the JitPack repository to your build file Add it in your root build.gradle at the end of repositories:<br> allprojects {<br> repositories {<br> …<br> maven { url “<a href="/misc/goto?guid=4959671897435288174">https://jitpack.io</a>” }<br> }<br> }<br> <strong>Step 2.</strong> Add the dependency<br> dependencies { compile ‘com.github.RoyWallace:BottomNavigationBar:v0.1’}</p>    <p><strong>Step 3</strong><br> include 布局</p>    <p>具体大家可以<a href="/misc/goto?guid=4959671897350975143">看这里</a>。。。</p>    <p>来自： <a href="/misc/goto?guid=4959671897528735464" rel="nofollow">http://blog.csdn.net/lfdfhl/article/details/51203428</a></p>