底部標簽（qiān）導航可以鏈接多（duō）個頁麵，實現各頁麵平級切換的效果，在我們製作App時經常作為做菜單使用（yòng）。不（bú）過對標簽的設計很多同學卻把握不準尺寸和效果，下麵來跟大家分享幾點,底部標簽的製作技巧。

一（yī）、計算好標簽的（de）尺寸

一般建議設（shè）計（jì）標（biāo）簽導航條的總寬度是640像（xiàng）素(製作頁麵中控件屬性數（shù）值設置的寬度最大為（wéi）320,因此可以得出圖片的（de）實際尺寸應該是在（zài）製作頁麵設置數值的2倍)，所以你要做多少個（gè）標簽，決定了每個標簽的寬度（dù）是多少，例如添加4個標簽，那麽（me）每（měi）個標簽的寬度就是640/4=160像素。假如你要做5個標簽的話，那就是640/5=128像素，以此計（jì）算即可。標（biāo）簽的高度隻要一致就（jiù）可以，但也要適中，一般在50—100像素之間效果最佳。這裏用的是98像素(製作頁麵中控件屬性（xìng）數值設置（zhì）的（de）高度就該為49)，你也可以自己設計的實（shí）際高度加高或者調低一些。

二、每個標簽製作2種效果用於切換

我們在手機中點（diǎn）擊按（àn）鈕，按下時都會有切換效果，這裏也不例外哦，標簽導航允許分別設置【點擊前】和【點擊後】的效果。所以我們就按照步驟一計算好（hǎo）的尺寸（128×98像素），為每個標簽製作2張小圖，如下圖所示，點擊前的標簽按鈕圖片都是灰色，點擊後每個選項的（de）上方都出現了（le）一個白色的三角形，這（zhè）樣在手機中裏點擊時（shí）效果就比（bǐ）較明顯了。具（jù）體圖片製作方法這兒不說了，大家用photoshop簡單搞定（實在不（bú）會的同學可以（yǐ）去下載一些對比明顯的素材圖裁剪（jiǎn）成對應尺寸也可以哦）。做好這10張小圖後將它們上傳到圖（tú）片庫裏，然後在控件屬性欄中分別設置（zhì）每個標簽的【圖片】和（hé）【按下圖片】。因為這裏的標簽（qiān）按鈕我們已經在圖片（piàn）上做（zuò）好文字了，所以要（yào）把“文（wén）字（zì）顯（xiǎn）示”去掉。如果圖片上沒有文字,可以自己輸（shū）入。

到這一步（bù），這個（gè）底部標簽就做好了，在模擬器中點擊它們，可以看到點擊前和點擊後的效果（guǒ）~

三、可（kě）用不同方法設置標簽（qiān）導航（háng）

讓標簽導（dǎo）航達到（dào）如下效果，我們可以用兩種方法來設置。

第一種方法：設計一個帶背景的（de）640*88像素的導航條，然後將（jiāng）它切成160*88像素的4等（děng）份上傳。

第二種方法：設計4個PNG格式的（de）透明按鈕上傳，再為整個標簽（qiān）設置一個背景。

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

備注：

1.製作（zuò）頁麵中所有上傳的圖片尺寸一般應該為在控件屬性中設置數值的2倍。如在控件屬性中，將一個圖片控件高度設置為120，寬度設（shè）置為150，那麽實際在裁剪圖片時，圖片應該（gāi）裁剪為高度為240px，寬（kuān）度為300px。這（zhè）樣在手機上顯示時才會是高清版的。

2.標簽導航中所鏈接的（de）相關頁麵，必須是同一個層級的頁麵（miàn），不能跨層級鏈（liàn）接。

相關問題：

Q我需要給我（wǒ）的（de）每個頁麵都（dōu）單獨做一個“曆史導航/標簽導航”嗎？

A您隻需要在製作頁麵右上方的（de）“已有導航（háng）”中選擇除了顯示名稱不同（tóng）外，其他結構大小設（shè）計相同的導航，直接拖入需要使用的頁麵即可。比（bǐ）如我的“製（zhì）作首頁”已經有了一個帶（dài）返回鍵（jiàn）的曆史導航，我在製（zhì）作“教程”頁（yè）麵時，需要一（yī）個除了顯示名稱不同外同樣的曆史導航，那（nà）我（wǒ）就可以直接在已有導航裏，選擇類似導航，直接（jiē）拖入製作區域即可。

Q我添（tiān）加了底部標簽導航，為（wéi）什麽我的蘋果手（shǒu）機客戶端在使用時，點擊底部標簽，發現跳轉（zhuǎn）的不是我之前（qián）鏈接的（de）頁麵,而在安卓機上卻沒有問題？

A這個問題和ioses係統的（de）辨別機製有關，在蘋果客戶端中，底部標簽導航所鏈接的頁麵必須是同一個層級關係（xì），並且同一個層級中隻（zhī）能使用一（yī）個底部標簽導航控件，不能在一個標簽導（dǎo）航控件中，鏈接不同（tóng）層級的頁麵。

關於層級關係，請閱讀以下內容。

http://www.xcydp.com/infomanage_getInfoDetail.action?visitType=c&id=35