+86-0755-27805158

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

一、計算好標籤的尺寸

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

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

我們在手機中點擊按鈕，按下時都會有切換效果，這裏也不例外哦，標籤導航允許分別設置【點擊前】和【點擊后】的效果。所以我們就按照步驟一計算好的尺寸（150×69像素），為每個標籤製作2張小圖，如下圖所示，點擊前的標籤按鈕圖片都是灰色，點擊后每個選項的上方都出現了一個白色的三角形，這樣在手機中里點擊時效果就比較明顯了。具體圖片製作方法這兒不說了，大家用photoshop簡單搞定（實在不會的同學可以去下載一些對比明顯的素材圖裁剪成對應尺寸也可以哦）。做好這10張小圖后將它們上傳到圖片庫里，然後在控件屬性欄中分別設置每個標籤的【圖片】和【按下圖片】。因為這裏的標籤按鈕我們已經在圖片上做好文字了，所以要把“文字显示”去掉。如果圖片上沒有文字,可以自己輸入。

到這一步，這個底部標籤就做好了，在模擬器中點擊它們，可以看到點擊前和點擊后的效果~

三、可用不同方法設置標籤導航

讓標籤導航達到如下效果，我們可以用兩種方法來設置。

第一種方法：設計一個帶背景的750*69像素的導航條，然後將它切成150*69像素的5等份上傳。

第二種方法：設計5個PNG格式的透明按鈕上傳，再為整個標籤設置一個背景。

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

備註：

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

2.標籤導航中所鏈接的相關頁面，必須是同一個層級的頁面，不能跨層級鏈接。

相關問題：

Q我需要給我的每個頁面都單獨做一個“歷史導航/標籤導航”嗎？

A您只需要在製作頁面右上方的“已有導航”中選擇除了显示名稱不同外，其他結構大小設計相同的導航，直接拖入需要使用的頁面即可。比如我的“製作首頁”已經有了一個帶返回鍵的歷史導航，我在製作“教程”頁面時，需要一個除了显示名稱不同外同樣的歷史導航，那我就可以直接在已有導航里，選擇類似導航，直接拖入製作區域即可。

Q我添加了底部標籤導航，為什麼我的蘋果手機客戶端在使用時，點擊底部標籤，發現跳轉的不是我之前鏈接的頁面,而在安卓機上卻沒有問題？

A這個問題和iOS系統的辨別機制有關，在蘋果客戶端中，底部標籤導航所鏈接的頁面必須是同一個層級關係，並且同一個層級中只能使用一個底部標籤導航控件，不能在一個標籤導航控件中，鏈接不同層級的頁面。

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

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