應用公園3.0版標簽導（dǎo）航使用教（jiāo）程（chéng）

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

一、計算好標簽的（de）尺（chǐ）寸

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

二、每個標簽製作2種（zhǒng）效果用於切換

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

到這一步，這個底部標簽就做好了，在（zài）模擬器中點擊它們（men），可以看到點擊前和點擊後的效果~

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

讓標簽導航達到如下效果，我們可以（yǐ）用兩種方法來（lái）設置。

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

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

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

備注：

1.製作頁麵中（zhōng）所（suǒ）有上傳的圖片尺寸一般應該為在控件屬性（xìng）中設置數值的2倍。如在控件屬（shǔ）性中，將一（yī）個圖片（piàn）控件高度設置為120，寬度設置（zhì）為150，那麽實際（jì）在裁剪圖片時，圖片應該裁剪為高度為240px，寬度為300px。這樣在手機上顯示時才會是高清版的。

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

相（xiàng）關問題：

Q我需要給我的每個頁麵都單獨做（zuò）一個“曆史導航/標簽（qiān）導航”嗎？

A您隻需要在製作（zuò）頁麵右上方的“已有導航”中選擇除了顯示名稱不同外，其他結構大小（xiǎo）設計相同的導航，直接拖入需（xū）要使（shǐ）用的頁麵即可。比如（rú）我的“製（zhì）作首頁”已經（jīng）有了一個帶返回鍵的曆史導航，我（wǒ）在製作“教程”頁麵時，需要一個除了顯示名稱不同外同樣的曆史導航，那我就可以直接在已有導航裏，選擇類似導航，直（zhí）接拖入（rù）製作區域即可。

Q我添加（jiā）了底部標簽導航，為什麽我的蘋（píng）果（guǒ）手機客戶（hù）端在使用時，點擊底（dǐ）部標簽，發現跳轉的（de）不是我之前鏈接的頁麵,而在安（ān）卓機上卻沒有問題？

A這（zhè）個問題和ioses係統的辨別機製有（yǒu）關（guān），在蘋果客戶端中，底部標簽導航所鏈接的頁麵必須是同一個（gè）層（céng）級關係（xì），並且同一個層級中隻能使用一個底部標簽導航控件，不能在一個標簽導航控件中，鏈接不同層級的頁麵。

關（guān）於層級關係（xì），請閱讀以（yǐ）下內容。

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

更新時間 2016-12-16 16:36:42