免責(zé)聲明
這一答案是從2013年開始的,已經(jīng)嚴(yán)重過時。截至Android3.2,現(xiàn)在有6組屏幕密度。這個答案將盡快更新,但沒有ETA。參考正式文件對于目前所有的密度(雖然有關(guān)特定像素大小的信息總是很難找到)。
這是tl/dr版本
這樣,Android將為設(shè)備的圖像密度選擇合適的文件,然后按照9補(bǔ)丁標(biāo)準(zhǔn)擴(kuò)展圖像。
Tl;Dr.前面的全員員額
我在回答問題的設(shè)計(jì)方面。我不是開發(fā)人員,所以我無法為實(shí)現(xiàn)所提供的許多解決方案提供代碼。唉,我的意圖是幫助那些在我?guī)椭_發(fā)我的第一個Android應(yīng)用程序時迷失了方向的設(shè)計(jì)師們。
適合各種尺寸
使用Android,公司可以開發(fā)幾乎任何大小的移動電話和表格,幾乎可以使用他們想要的任何分辨率。由于這一點(diǎn),沒有“正確的圖像大小”的飛濺屏幕,因?yàn)闆]有固定的屏幕分辨率。這對那些想要實(shí)現(xiàn)飛濺屏幕的人來說是個問題。
你的用戶真的想看到一個飛濺的屏幕嗎?
(順便提一句,在可用性方面,Splash屏幕在某種程度上是不受歡迎的。有人認(rèn)為,用戶已經(jīng)知道他使用的是什么應(yīng)用程序,因此沒有必要在屏幕上給你的形象貼上標(biāo)簽,因?yàn)樗粫谩皬V告”來打斷用戶的體驗(yàn)。但是,它應(yīng)該用于初始化時需要大量加載的應(yīng)用程序(5s+),包括游戲之類的,這樣用戶就不會懷疑應(yīng)用程序是否崩潰)。
屏幕密度;4級
因此,考慮到市場上手機(jī)的屏幕分辨率有這么多不同,谷歌實(shí)現(xiàn)了一些替代方案和可以提供幫助的優(yōu)秀解決方案。你要知道的第一件事是全屏幕分為4種不同的屏幕密度:
- 低密度(ldpi~120 dpi)
- 中等密度(MDPI~160 dpi)
- 高密度(hdpi~240 dpi)
- 超高密度(xhdpi~320 dpi)(這些dpi值是近似的,因?yàn)槎ㄖ频脑O(shè)備具有不同的dpi值)。
你(如果你是一個設(shè)計(jì)師)需要知道的是,Android基本上是從4張圖片中選擇要顯示的,這取決于設(shè)備。因此,您基本上必須設(shè)計(jì)4種不同的圖像(雖然更多的可以開發(fā)為不同的格式,如寬屏,縱向/景觀模式,等等)。
記住這一點(diǎn):除非您為Android中使用的每一個分辨率設(shè)計(jì)一個屏幕,否則您的圖像將伸展到適合屏幕大小。除非你的圖像基本上是一個梯度或模糊,你會得到一些不想要的扭曲與拉伸。所以基本上有兩個選項(xiàng):為每個屏幕大小/密度組合創(chuàng)建一個圖像,或者創(chuàng)建4個9補(bǔ)丁圖像。
最難的解決方案是為每一個分辨率設(shè)計(jì)一個不同的飛濺屏幕。的末尾,您可以按照表中的決議開始。本頁)還有更多。例:960x720沒有列出)。假設(shè)圖像中有一些小細(xì)節(jié),比如小文本,你必須為每個分辨率設(shè)計(jì)多個屏幕。例如,在中等屏幕上顯示的480x800圖像可能看起來不錯,但在較小的屏幕上(密度更高/dpi),徽標(biāo)可能變得太小,或者某些文本可能變得不可讀。
9-貼片圖像
另一個解決辦法是創(chuàng)建一個9補(bǔ)丁映像..它基本上是一個1像素透明的邊框圍繞著你的圖像,通過在這個邊框的頂部和左邊繪制黑色像素,你可以定義你的圖像的哪一部分將被允許伸展。我不會詳細(xì)討論9片圖像是如何工作的,但簡而言之,與頂部和左側(cè)區(qū)域的標(biāo)記對齊的像素是重復(fù)使用的像素,以拉伸圖像。
幾條基本規(guī)則
- 您可以在Photoshop(或任何能夠準(zhǔn)確創(chuàng)建透明PNG的圖像編輯軟件)中制作這些圖像。
- 1像素的邊框必須是完全透明的。
- 1像素的透明邊框必須圍繞在你的圖像周圍,而不僅僅是頂部和左邊。
- 您只能在此區(qū)域繪制黑色(#000000)像素。
- 上邊框和左邊框(定義圖像拉伸)只能有一個點(diǎn)(1pxx1px)、兩個點(diǎn)(都是1px1px)或一條連續(xù)線(寬度x1px或1pxx高度)。
- 如果您選擇使用2個點(diǎn),圖像將按比例展開(因此,每個點(diǎn)將輪流擴(kuò)展,直到達(dá)到最終的寬度/高度)。
- 1px邊框必須加上預(yù)期的基本文件尺寸。因此,一個100x1009補(bǔ)丁圖像實(shí)際上必須有102x102(100x100+1px在上、下、左和右)。
- 9-補(bǔ)丁圖像必須以*.9 png結(jié)尾
因此,您可以在徽標(biāo)的兩側(cè)(頂部邊框)放置1個點(diǎn),在其上方和下面(左側(cè)邊框)放置1個點(diǎn),而這些標(biāo)記的行和列將是唯一要拉伸的像素。
例
下面是一個9補(bǔ)丁映像,102x102px(100x100最終大小,用于應(yīng)用程序):
下面是相同圖像的200%縮放:
注意頂部和左邊的1px標(biāo)記,表示哪些行/列將展開。
下面是這個應(yīng)用程序中的100x100圖片的樣子:
如果擴(kuò)展到460x140,下面是它想要的:
最后一件事要考慮。這些圖像在你的屏幕上和大多數(shù)手機(jī)上看起來都很好,但是如果設(shè)備的圖像密度很高,那么圖像看起來就太小了。可能仍然清晰,但在一臺分辨率為1920x1200的平板電腦上,這幅圖像在中間會出現(xiàn)一個非常小的方形。那么解決辦法是什么?設(shè)計(jì)了4個不同的9補(bǔ)丁發(fā)射器圖像,每個為不同的密度集.為了確保不會發(fā)生收縮,您應(yīng)該為每個密度類別設(shè)計(jì)最低的公共分辨率。收縮在這里是不可取的,因?yàn)?補(bǔ)丁只占拉伸,所以在收縮過程中,小文本和其他元素可能會失去可讀性。
下面列出了每個密度類別的最小、最常見的分辨率:
- XLarge(Xhdpi):640x960
- 大型(Hdpi):480x800
- 培養(yǎng)基(MDPI):320x480
- 小(Ldpi):240x320
因此,在上面的分辨率中設(shè)計(jì)四個飛濺屏幕,展開圖像,在畫布周圍放置一個1px透明邊框,并標(biāo)記哪些行/列是可伸縮的。請記住,這些圖像將用于任何設(shè)備屬于密度類別,因此您的ldpi圖像(240x320)可能會被拉伸到1024x600,在一個超大的小圖像密度平板上(~120 dpi)。因此,9補(bǔ)丁是最好的拉伸解決方案,只要你不想要一張照片或復(fù)雜的圖形飛濺屏幕(請記住這些限制,因?yàn)槟銊?chuàng)建的設(shè)計(jì))。
同樣,要避免這種拉伸發(fā)生,唯一的方法是設(shè)計(jì)每個分辨率的一個屏幕(或者每個分辨率-密度組合,如果你想避免圖像在高/低密度設(shè)備上變得太小/太大),或者告訴圖像不要拉伸,并讓背景顏色出現(xiàn)在任何可能發(fā)生拉伸的地方(還請記住,Android引擎呈現(xiàn)的特定顏色可能與Photoshop呈現(xiàn)的同一特定顏色不同,因?yàn)轭伾渲梦募?。
我希望這是有意義的。祝好運(yùn)!