底部標簽導航可以鏈接多個頁面，實現各頁面平級切換的效果，在我們制作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系統的辨別機制有關，在蘋果客戶端中，底部標簽導航所鏈接的頁面必須是同一個層級關系，并且同一個層級中只能使用一個底部標簽導航控件，不能在一個標簽導航控件中，鏈接不同層級的頁面。

關于層級關系，請閱讀以下內容。

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