底部标签导航可以链接多个页面，实现各页面平级切换的效果，在我们制作App时经常作为做菜单使用。不过对标签的设计很多同学却把握不准尺寸和效果，下面来跟大家分享几点,底部标签的制作技巧。

一、计算好标签的尺寸

一般建议设计标签导航条的总宽度是640像素(制作页面中控件属性数值设置的宽度最大为320,因此可以得出图片的实际尺寸应该是在制作页面设置数值的2倍)，所以你要做多少个标签，决定了每个标签的宽度是多少，例如添加4个标签，那么每个标签的宽度就是640/4=160像素。假如你要做5个标签的话，那就是640/5=128像素，以此计算即可。标签的高度只要一致就可以，但也要适中，一般在50—100像素之间效果最佳。这里用的是98像素(制作页面中控件属性数值设置的高度就该为49)，你也可以自己设计的实际高度加高或者调低一些。

二、每个标签制作2种效果用于切换

我们在手机中点击按钮，按下时都会有切换效果，这里也不例外哦，标签导航允许分别设置【点击前】和【点击后】的效果。所以我们就按照步骤一计算好的尺寸（128×98像素），为每个标签制作2张小图，如下图所示，点击前的标签按钮图片都是灰色，点击后每个选项的上方都出现了一个白色的三角形，这样在手机中里点击时效果就比较明显了。具体图片制作方法这儿不说了，大家用photoshop简单搞定（实在不会的同学可以去下载一些对比明显的素材图裁剪成对应尺寸也可以哦）。做好这10张小图后将它们上传到图片库里，然后在控件属性栏中分别设置每个标签的【图片】和【按下图片】。因为这里的标签按钮我们已经在图片上做好文字了，所以要把“文字显示”去掉。如果图片上没有文字,可以自己输入。

到这一步，这个底部标签就做好了，在模拟器中点击它们，可以看到点击前和点击后的效果~

三、可用不同方法设置标签导航

让标签导航达到如下效果，我们可以用两种方法来设置。

第一种方法：设计一个带背景的640*88像素的导航条，然后将它切成160*88像素的4等份上传。

第二种方法：设计4个PNG格式的透明按钮上传，再为整个标签设置一个背景。

方法二相比方法一多操作了一步，但更换背景效果更灵活哦，大家可以自行选择。

备注：

1.制作页面中所有上传的图片尺寸一般应该为在控件属性中设置数值的2倍。如在控件属性中，将一个图片控件高度设置为120，宽度设置为150，那么实际在裁剪图片时，图片应该裁剪为高度为240px，宽度为300px。这样在手机上显示时才会是高清版的。

2.标签导航中所链接的相关页面，必须是同一个层级的页面，不能跨层级链接。

相关问题：

Q我需要给我的每个页面都单独做一个“历史导航/标签导航”吗？

A您只需要在制作页面右上方的“已有导航”中选择除了显示名称不同外，其他结构大小设计相同的导航，直接拖入需要使用的页面即可。比如我的“制作首页”已经有了一个带返回键的历史导航，我在制作“教程”页面时，需要一个除了显示名称不同外同样的历史导航，那我就可以直接在已有导航里，选择类似导航，直接拖入制作区域即可。

Q我添加了底部标签导航，为什么我的苹果手机客户端在使用时，点击底部标签，发现跳转的不是我之前链接的页面,而在安卓机上却没有问题？

A这个问题和iOS系统的辨别机制有关，在苹果客户端中，底部标签导航所链接的页面必须是同一个层级关系，并且同一个层级中只能使用一个底部标签导航控件，不能在一个标签导航控件中，链接不同层级的页面。

关于层级关系，请阅读以下内容。

https://www.sjdljfh4.com/infomanage_getInfoDetail.action?visitType=c&id=35