關於Android引導畫面的多解析度適配

　　本文並非關於引導畫面該採用何種形式、該如何定義資訊、有什麼注意事項方面的介紹。

　　本文描述的是，引導畫面該如何才能較好的適配各種解析度，瞭解此處有助於更好的定義引導畫面，以及保持同設計師、工程師的良好溝通。

　　作為產品人員，需要向不同方向延伸瞭解一些知識，這些知識能讓溝通更順暢。

　　這些所瞭解的知識，可能會有一些錯誤，當發現問題時，隨時更新自己的知識體系。

　　一、本文提到的引導畫面的形式

　　類似下圖，一個引導畫面是一屏，左右拖動來切換

　　圖1： 有道雲筆記Android 1.2.0引導畫面

　　圖2：有道雲筆記Android 2.0.0引導畫面

　　二、實現方式之一：底色配合圖片縮放

　　需要知道的是，同一DPI的裝置也有不同的解析度，比如Hdpi最常見的就有480×800和480×854的解析度，還有其他的，比如480×640、600×1024….

　　因此，想對不同dpi做一種解析度的方法，會存在問題。

　　我嘗試用圖來說明一下一張圖片，如果不做處理在不同機器和不同解析度上的顯示樣式：

　　以Galaxy Nexus為例，螢幕解析度為720×1280，狀態列為50px，下方虛擬鍵盤欄為96px，所以實際中間圖片大小為720×1134

　　2.1 在不同解析度下的顯示樣式

　　讓我們類比下此720×1134的引導圖在720×1280解析度的裝置上的顯示樣式如下圖：

　　圖A：720×1134的引導圖在720×1280裝置的顯示樣式

　　當我們在一台480×800解析度的裝置上顯示時，圖片會縮小為480px的寬度顯示，此時高度對應會等比縮小為756px顯示，假設此時狀態列標準高度為38px，則會空餘16px的空間。如果我們設定背景顏色為紅色，則此時顯示狀態如下圖：

　　圖B：720×1134的引導圖在480×800裝置的顯示樣式

　　同理，當我們在一台320×480解析度的裝置上顯示時，假設此時狀態列標準高度為25px，等比縮放後，圖片會縮小為455px(480-25) 的高度顯示，此時寬度對應會等比縮小為289px顯示，則會空餘31px的空間。如果我們設定背景顏色為紅色，則此時顯示狀態如下圖：

　　圖C：720×1134的引導圖在320×480裝置的顯示樣式

　　不再繼續多舉例了。

　　2.2 適配方案

　　從上述的例子來看，大圖自動縮放後，最大的問題是上下、或左右會留出一些無法填充的位置。

　　所以，在邊緣為純色的情況下，我們只需要將背景填充為和邊緣顏色一樣的色值即可。

　　而且，我們只需要準備較大解析度的一套，這樣可以更好的保證在不同解析度裝置上的效果。

　　2.3 缺陷

　　下圖是在240×320的ldpi裝置上的顯示效果，如果仔細看，可以看到左右兩側豎向的顏色和中間部分的顏色有一些不一致。

　　原因還不確定，暫時未有明確結論，猜測可能和android的映像縮小顯示機制有關係。

　　3.4 樣本

　　(1) 有道雲筆記Android 2.0.0的引導畫面切圖

　　(2) Android 2.0.0中的適配

　　√ 圖片的周邊保證是純色的，這樣才能有效進行不同解析度的適配。

　　√ 指定了720×1280的機器為標準參照裝置，切出去除了虛擬鍵盤和狀態列的部分

　　√ 設定引導介面的背景色為和邊緣色一致的顏色

　　三、實現方式之二：9-Patch

　　3.1 適配方案

　　前提：

　　√ 為了保證四邊的縮放效果，邊緣需要設定為純色。

　　√ 為保證縮放效果，採用xhdpi的圖片素材來做9-Patch的原始圖片

　　適配：

　　√ 在draw 9-patch中，設定圖片頂部的左側和右側一個像素為展開地區，設定圖片右側的頂部和底部一個像素為展開地區。

　　結果：

　　√ 類似實現方式一的映像樣本，只是適配中出現的紅色部分，會因為設定了展開地區而自動用設定的展開地區去填充，從而達到適配效果

　　3.2 缺陷

　　目前發現當圖片較大時，9-Patch的圖片縮放會出現問題，未能按照預期縮放。

　　3.3 樣本

　　有道雲筆記Android 1.2.0的引導畫面採用9-Patch的方式實現，見圖1

　　四、實現方式之三：透明引導圖

　　4.1 適配方案

　　√ 提供背景透明的引導圖

　　√ 提供背景的色值

　　√ 填充背景色，並放置背景透明的引導圖

　　4.2 缺陷

　　png的圖會比jpg的圖大一些

　　五、小結

　　方式三是目前傾向採用的方式，本文如有進一步的實踐資訊，再予以補充。

　　上述描述和理解中，可能存在錯誤和問題，如有不當，敬請指出。 (完)

　　文章來源：penddy.com