底部標(biāo)籤導(dǎo)航可以鏈接多個(gè)頁(yè)面，實(shí)現(xiàn)各頁(yè)面平級(jí)切換的效果，在我們製作App時(shí)經(jīng)常作為做菜單使用。不過(guò)對(duì)標(biāo)籤的設(shè)計(jì)很多同學(xué)卻把握不準(zhǔn)尺寸和效果，下面來(lái)跟大家分享幾點(diǎn),底部標(biāo)籤的製作技巧。

一、計(jì)算好標(biāo)籤的尺寸

一般建議設(shè)計(jì)標(biāo)籤導(dǎo)航條的總寬度是750像素(製作頁(yè)面中控件屬性數(shù)值設(shè)置的寬度最大為375,因此可以得出圖片的實(shí)際尺寸應(yīng)該是在製作頁(yè)面設(shè)置數(shù)值的2倍)，所以你要做多少個(gè)標(biāo)籤，決定了每個(gè)標(biāo)籤的寬度是多少，例如添加4個(gè)標(biāo)籤，那麼每個(gè)標(biāo)籤的寬度就是750/4=187像素。假如你要做5個(gè)標(biāo)籤的話，那就是750/5=150像素，以此計(jì)算即可。標(biāo)籤的高度只要一致就可以，但也要適中，一般在50—100像素之間效果最佳。這裏用的是69像素(製作頁(yè)面中控件屬性數(shù)值設(shè)置的高度就該為69，你也可以自己設(shè)計(jì)的實(shí)際高度加高或者調(diào)低一些。

二、每個(gè)標(biāo)籤製作2種效果用於切換

我們?cè)谑謾C(jī)中點(diǎn)擊按鈕，按下時(shí)都會(huì)有切換效果，這裏也不例外哦，標(biāo)籤導(dǎo)航允許分別設(shè)置【點(diǎn)擊前】和【點(diǎn)擊后】的效果。所以我們就按照步驟一計(jì)算好的尺寸（150×69像素），為每個(gè)標(biāo)籤製作2張小圖，如下圖所示，點(diǎn)擊前的標(biāo)籤按鈕圖片都是灰色，點(diǎn)擊后每個(gè)選項(xiàng)的上方都出現(xiàn)了一個(gè)白色的三角形，這樣在手機(jī)中里點(diǎn)擊時(shí)效果就比較明顯了。具體圖片製作方法這兒不說(shuō)了，大家用photoshop簡(jiǎn)單搞定（實(shí)在不會(huì)的同學(xué)可以去下載一些對(duì)比明顯的素材圖裁剪成對(duì)應(yīng)尺寸也可以哦）。做好這10張小圖后將它們上傳到圖片庫(kù)里，然後在控件屬性欄中分別設(shè)置每個(gè)標(biāo)籤的【圖片】和【按下圖片】。因?yàn)檫@裏的標(biāo)籤按鈕我們已經(jīng)在圖片上做好文字了，所以要把“文字顯示”去掉。如果圖片上沒(méi)有文字,可以自己輸入。

到這一步，這個(gè)底部標(biāo)籤就做好了，在模擬器中點(diǎn)擊它們，可以看到點(diǎn)擊前和點(diǎn)擊后的效果~

三、可用不同方法設(shè)置標(biāo)籤導(dǎo)航

讓標(biāo)籤導(dǎo)航達(dá)到如下效果，我們可以用兩種方法來(lái)設(shè)置。

第一種方法：設(shè)計(jì)一個(gè)帶背景的750*69像素的導(dǎo)航條，然後將它切成150*69像素的5等份上傳。

第二種方法：設(shè)計(jì)5個(gè)PNG格式的透明按鈕上傳，再為整個(gè)標(biāo)籤設(shè)置一個(gè)背景。

方法二相比方法一多操作了一步，但更換背景效果更靈活哦，大家可以自行選擇。

備註：

1.製作頁(yè)面中所有上傳的圖片尺寸一般應(yīng)該為在控件屬性中設(shè)置數(shù)值的2倍。如在控件屬性中，將一個(gè)圖片控件高度設(shè)置為120，寬度設(shè)置為150，那麼實(shí)際在裁剪圖片時(shí)，圖片應(yīng)該裁剪為高度為240px，寬度為300px。這樣在手機(jī)上顯示時(shí)才會(huì)是高清版的。

2.標(biāo)籤導(dǎo)航中所鏈接的相關(guān)頁(yè)面，必須是同一個(gè)層級(jí)的頁(yè)面，不能跨層級(jí)鏈接。

相關(guān)問(wèn)題：

Q我需要給我的每個(gè)頁(yè)面都單獨(dú)做一個(gè)“歷史導(dǎo)航/標(biāo)籤導(dǎo)航”嗎？

A您只需要在製作頁(yè)面右上方的“已有導(dǎo)航”中選擇除了顯示名稱不同外，其他結(jié)構(gòu)大小設(shè)計(jì)相同的導(dǎo)航，直接拖入需要使用的頁(yè)面即可。比如我的“製作首頁(yè)”已經(jīng)有了一個(gè)帶返回鍵的歷史導(dǎo)航，我在製作“教程”頁(yè)面時(shí)，需要一個(gè)除了顯示名稱不同外同樣的歷史導(dǎo)航，那我就可以直接在已有導(dǎo)航里，選擇類似導(dǎo)航，直接拖入製作區(qū)域即可。

Q我添加了底部標(biāo)籤導(dǎo)航，為什麼我的蘋(píng)果手機(jī)客戶端在使用時(shí)，點(diǎn)擊底部標(biāo)籤，發(fā)現(xiàn)跳轉(zhuǎn)的不是我之前鏈接的頁(yè)面,而在安卓機(jī)上卻沒(méi)有問(wèn)題？

A這個(gè)問(wèn)題和iOS系統(tǒng)的辨別機(jī)制有關(guān)，在蘋(píng)果客戶端中，底部標(biāo)籤導(dǎo)航所鏈接的頁(yè)面必須是同一個(gè)層級(jí)關(guān)係，並且同一個(gè)層級(jí)中只能使用一個(gè)底部標(biāo)籤導(dǎo)航控件，不能在一個(gè)標(biāo)籤導(dǎo)航控件中，鏈接不同層級(jí)的頁(yè)面。

關(guān)於層級(jí)關(guān)係，請(qǐng)閱讀以下內(nèi)容。

http://www.apppark.cn/infomanage_getInfoDetail.action?visitType=c&id=35