底部标签导航可以链接多个页面，实现各页面平级切换的效果，在我们制作App时经常作为做菜单使用。不过对标签的设计很多同学却把握不准尺寸和效果，下面来跟大家分享几点,底部标签的制作技巧~
一、计算好标签的尺寸
我们知道，屏幕（模拟器）的总宽度是确定的（640像素），所以你要做多少个标签，决定了每个标签的宽度是多少，例如添加4个标签，那么每个标签的宽度就是640/3=160像素。假如你要做5个标签的话，那就是640/5=128像素，以此计算即可。标签的高度只要一致就可以，但也要适中，一般在50~100像素之间效果最佳。这里用的是88像素，你也可以加高或者调低一些。
二、每个标签制作2种效果用于切换
我们在手机中点击按钮，按下时都会有切换效果，这里也不例外哦，标签导航允许分别设置【点击前】和【点击后】的效果。所以我们就按照步骤一计算好的尺寸（160×88像素），为每个标签制作2张小图，如下图所示，点击前的标签按钮图片都是灰色，点击后变为绿色配白色，这样在手机中里点击时效果就比较明显了。具体图片制作方法这儿不说了，大家用photoshop简单搞定（实在不会的同学可以去下载一些对比明显的素材图裁剪成对应尺寸也可以哦）。做好这8张小图后将它们上传到图片库里，然后在控件属性栏中分别设置每个标签的【图片】（用灰底灰钮的）和【按下图片】（用绿底白钮的）。还要记得把标签文字框都去掉哦，因为这里的标签按钮我们已经做好文字了。
到这一步，这个底部标签就做好了，在模拟器中点击它们，可以看到点击前和点击后的效果~
让标签导航达到如下效果，我们可以用两种方法来设置。
第一种方法：设计一个带背景的640*88像素的导航条，然后将它切成160*88像素的4等份上传。
第二种方法：设计4个PNG格式的透明按钮上传，再为整个标签设置一个背景。
方法二相比方法一多操作了一步，但更换背景效果更灵活哦，大家可以自行选择。
大家对底部标签的制作有何疑问欢迎回复和我们讨论~下次再教大家滑动效果的标签导航制作~
更新时间 2017-03-17 17:17:51
沪公网安备 310112200886699号