62.Android之各分辨率定義的圖片規格


轉載:http://www.nljb.net/default/Android%E4%B9%8B%E5%90%84%E5%88%86%E8%BE%A8%E7%8E%87%E5%AE%9A%E4%B9%89%E7%9A%84%E5%9B%BE%E7%89%87%E8%A7%84%E6%A0%BC/

各種規格總結


  1. // 首先闡釋一些術語和概念
  2. 屏幕尺寸(screen size): 屏幕的對角線測量。
  3. 為了方便,Android把所有的屏幕尺寸分為了4個廣義的大小:小、正常、大、更大
  4. 屏幕密度(screen density): 屏幕占據的物理區域所含像素的個數
  5. 通常被稱為dpidots per inch)即每英寸的像素點數
  6. 分辨率(resolution): 屏幕上物理像素的點數
  7. 例如,有一個240px*400px的屏幕,可以理解為在這個屏幕上橫着有400條線,每條線上有240個像素點
  8. 像素(px): 屏幕上的點
  9. dip(dp):Density-independent pixel--->與密度無關的像素(下面將詳細講解)

由於JPG容易失真, 在Android開發中盡量避免使用.jpg圖片, 應該使用.png圖片, 它采用了從LZ77派生的無損數據壓縮算法.


補充

  1. 屏幕:尺寸5.1,分辨率1920X1080
  2. DPI1920^2+1080^2(v)/5.1=2202/5.1=431
  3. mdpi 120dpi ~ 160dpi
  4. hdpi 160dpi ~ 240dpi
  5. xhdpi 240dpi ~ 320dpi
  6. xxhdpi 320dpi ~ 480dpi
  7. xxxhdpi 480dpi ~ 640dpi
  8. 在設計圖標時:
  9. 對於五種主流像素密度(MDIP, HDPI, XHDPI, XXHDPI, XXXHDPI)
  10. 應按照(2:3:4:6:8)的比例進行縮放,(1x, 1.5x, 2x, 3x, 4x)
  11. 例如:
  12. 尺寸為48x48dp的圖標,表示在MDPI的屏幕上其尺寸應為48x48px
  13. HDPI的屏幕上其實際大小是MDPI1.5倍(72x72px)… 依此類推
  14. 字體:
  15. 對於字體的使用,官方不建議使用低於12號字體大小值
  16. 圖片內存占用:
  17. drawable-xxhdpi 11.65M
  18. drawable 74.97M
  19. drawable-mhdpi 74.95M
  20. drawable-hdpi 35.38M
  21. 在圖片密度不匹配的情況下,低分辨率圖片會被拉伸到高分辨率圖片

密度陷阱

  1. 雖然說dp可以去除不同像素密度的問題,使得1dp在不同像素密度上面的顯示效果相同,但是還是由於Android屏幕設備的多樣性
  2. 如果使用dp來作為度量單位,並不是所有的屏幕的寬度都是相同的dp長度
  3. 比如說:
  4. Nexus SNexus One 屬於hdpi 屏幕寬度是320dp
  5. Nexus 5 屬於xxhdpi 屏幕寬度是360dp
  6. Galaxy Nexus 屬於xhdpi 屏幕寬度是384dp
  7. Nexus 6 屬於xxxhdpi 屏幕寬度是410dp
  8. 所以說,光Google自己一家的產品就已經有這么多的標准,而且屏幕寬度和像素密度沒有任何關聯關系
  9. 即使我們使用dp,在320dp寬度的設備和410dp的設備上,還是會有90dp的差別。
  10. 當然,我們盡量使用match_parentwrap_content,盡可能少的用dp來指定控件的具體長寬
  11. 再結合上權重,大部分的情況我們都是可以做到適配的。
  1. 此外還有一個解決辦法,也就是指定所有分辨率密度對應關系
  2. // 下面是生成的一個320*480分辨率的文件
  3. // 因為寬高分割之后總分數和像素數相同
  4. // 所以x1就是1px,以此類推
  5. <?xml version="1.0" encoding="utf-8"?>
  6. <resources><dimen name="x1">1.0px</dimen>
  7. <dimen name="x2">2.0px</dimen>
  8. <dimen name="x3">3.0px</dimen>
  9. <dimen name="x4">4.0px</dimen>
  10. <dimen name="x5">5.0px</dimen>
  11. <dimen name="x6">6.0px</dimen>
  12. <dimen name="x7">7.0px</dimen>
  13. <dimen name="x8">8.0px</dimen>
  14. <dimen name="x9">9.0px</dimen>
  15. <dimen name="x10">10.0px</dimen>
  16. ...省略好多行
  17. <dimen name="x300">300.0px</dimen>
  18. <dimen name="x301">301.0px</dimen>
  19. <dimen name="x302">302.0px</dimen>
  20. <dimen name="x303">303.0px</dimen>
  21. <dimen name="x304">304.0px</dimen>
  22. <dimen name="x305">305.0px</dimen>
  23. <dimen name="x306">306.0px</dimen>
  24. <dimen name="x307">307.0px</dimen>
  25. <dimen name="x308">308.0px</dimen>
  26. <dimen name="x309">309.0px</dimen>
  27. <dimen name="x310">310.0px</dimen>
  28. <dimen name="x311">311.0px</dimen>
  29. <dimen name="x312">312.0px</dimen>
  30. <dimen name="x313">313.0px</dimen>
  31. <dimen name="x314">314.0px</dimen>
  32. <dimen name="x315">315.0px</dimen>
  33. <dimen name="x316">316.0px</dimen>
  34. <dimen name="x317">317.0px</dimen>
  35. <dimen name="x318">318.0px</dimen>
  36. <dimen name="x319">319.0px</dimen>
  37. <dimen name="x320">320px</dimen>
  38. </resources>
  39. // 那么1080*1960分辨率下是什么樣子呢?
  40. // 我們可以看下,由於1080和320是3.37倍的關系
  41. // 所以x1=3.37px
  42. <?xml version="1.0" encoding="utf-8"?>
  43. <resources><dimen name="x1">3.37px</dimen>
  44. <dimen name="x2">6.75px</dimen>
  45. <dimen name="x3">10.12px</dimen>
  46. <dimen name="x4">13.5px</dimen>
  47. <dimen name="x5">16.87px</dimen>
  48. <dimen name="x6">20.25px</dimen>
  49. <dimen name="x7">23.62px</dimen>
  50. <dimen name="x8">27.0px</dimen>
  51. <dimen name="x9">30.37px</dimen>
  52. <dimen name="x10">33.75px</dimen>
  53. ...省略好多行
  54. <dimen name="x300">1012.5px</dimen>
  55. <dimen name="x301">1015.87px</dimen>
  56. <dimen name="x302">1019.25px</dimen>
  57. <dimen name="x303">1022.62px</dimen>
  58. <dimen name="x304">1026.0px</dimen>
  59. <dimen name="x305">1029.37px</dimen>
  60. <dimen name="x306">1032.75px</dimen>
  61. <dimen name="x307">1036.12px</dimen>
  62. <dimen name="x308">1039.5px</dimen>
  63. <dimen name="x309">1042.87px</dimen>
  64. <dimen name="x310">1046.25px</dimen>
  65. <dimen name="x311">1049.62px</dimen>
  66. <dimen name="x312">1053.0px</dimen>
  67. <dimen name="x313">1056.37px</dimen>
  68. <dimen name="x314">1059.75px</dimen>
  69. <dimen name="x315">1063.12px</dimen>
  70. <dimen name="x316">1066.5px</dimen>
  71. <dimen name="x317">1069.87px</dimen>
  72. <dimen name="x318">1073.25px</dimen>
  73. <dimen name="x319">1076.62px</dimen>
  74. <dimen name="x320">1080px</dimen>
  75. </resources>
  1. import java.io.File;
  2. import java.io.FileNotFoundException;
  3. import java.io.FileOutputStream;
  4. import java.io.PrintWriter;
  5. public class MakeXml {
  6. private final static String rootPath =
  7. "C:\\Users\\Administrator\\Desktop\\layoutroot\\values-{0}x{1}\\";
  8. private final static float dw = 320f;
  9. private final static float dh = 480f;
  10. private final static String WTemplate = "<dimen name=\"x{0}\">{1}px</dimen>\n";
  11. private final static String HTemplate = "<dimen name=\"y{0}\">{1}px</dimen>\n";
  12. public static void main(String[] args) {
  13. makeString(320, 480);
  14. makeString(480,800);
  15. makeString(480, 854);
  16. makeString(540, 960);
  17. makeString(600, 1024);
  18. makeString(720, 1184);
  19. makeString(720, 1196);
  20. makeString(720, 1280);
  21. makeString(768, 1024);
  22. makeString(800, 1280);
  23. makeString(1080, 1812);
  24. makeString(1080, 1920);
  25. makeString(1440, 2560);
  26. }
  27. public static void makeString(int w, int h) {
  28. StringBuffer sb = new StringBuffer();
  29. sb.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n");
  30. sb.append("<resources>");
  31. float cellw = w / dw;
  32. for (int i = 1; i < 320; i++) {
  33. sb.append(WTemplate.replace("{0}", i + "").replace("{1}",
  34. change(cellw * i) + ""));
  35. }
  36. sb.append(WTemplate.replace("{0}", "320").replace("{1}", w + ""));
  37. sb.append("</resources>");
  38. StringBuffer sb2 = new StringBuffer();
  39. sb2.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n");
  40. sb2.append("<resources>");
  41. float cellh = h / dh;
  42. for (int i = 1; i < 480; i++) {
  43. sb2.append(HTemplate.replace("{0}", i + "").replace("{1}",
  44. change(cellh * i) + ""));
  45. }
  46. sb2.append(HTemplate.replace("{0}", "480").replace("{1}", h + ""));
  47. sb2.append("</resources>");
  48. String path = rootPath.replace("{0}", h + "").replace("{1}", w + "");
  49. File rootFile = new File(path);
  50. if (!rootFile.exists()) {
  51. rootFile.mkdirs();
  52. }
  53. File layxFile = new File(path + "lay_x.xml");
  54. File layyFile = new File(path + "lay_y.xml");
  55. try {
  56. PrintWriter pw = new PrintWriter(new FileOutputStream(layxFile));
  57. pw.print(sb.toString());
  58. pw.close();
  59. pw = new PrintWriter(new FileOutputStream(layyFile));
  60. pw.print(sb2.toString());
  61. pw.close();
  62. } catch (FileNotFoundException e) {
  63. e.printStackTrace();
  64. }
  65. }
  66. public static float change(float a) {
  67. int temp = (int) (a * 100);
  68. return temp / 100f;
  69. }
  70. }

應用程序圖標 (Icon)應當是一個 Alpha 通道透明的32位 PNG 圖片。

  1. 由於安卓設備眾多,一個應用程序圖標需要設計幾種不同大小,如:
  2. LDPI (Low Density Screen120 DPI),其圖標大小為 36 x 36 px
  3. MDPI (Medium Density Screen, 160 DPI),其圖標大小為 48 x 48 px
  4. HDPI (High Density Screen, 240 DPI),其圖標大小為 72 x 72 px
  5. xhdpi (Extra-high density screen, 320 DPI),其圖標大小為 96 x 96 px
  6. 建議在設計過程中,在四周空出幾個像素點使得設計的圖標與其他圖標在視覺上一致,例如,
  7. 96 x 96 px 圖標可以畫圖區域大小可以設為 88 x 88 px 四周留出4個像素用於填充(無底色)。
  8. 72 x 72 px 圖標可以畫圖區域大小可以設為 68 x 68 px 四周留出2個像素用於填充(無底色)。
  9. 48 x 48 px 圖標可以畫圖區域大小可以設為 46 x 46 px 四周留出1個像素用於填充(無底色)。
  10. 36 x 36 px 圖標可以畫圖區域大小可以設為 34 x 34 px 四周留出1個像素用於填充(無底色)。

  1. 每英寸像素數, 可以反映屏幕的清晰度,用於縮放UI
  2. ldpi (low) ~120dpi
  3. mdpi (medium) ~160dpi
  4. hdpi (high) ~240dpi
  5. xhdpi (extra-high) ~320dpi
  6. xxhdpi (extra-extra-high) ~480dpi
  7. xxxhdpi (extra-extra-extra-high) ~640dpi
  1. drawable-ldpi 放低分辨率的圖片,即QVGA(240×320)
  2. drawable-mdpi 放中分辨率的圖片,即HVGA(320×480)
  3. drawable-hdpi 放高分辨率的圖片,如WVGA(480x800),FWVGA (480x854)。
  4. drawable-xhdpi 放高分辨率的圖片,即720p(1280×720)
  5. drawable-xxhdpi 放高分辨率的圖片,即1080p(1920×1080)

Android設備屏幕尺寸分布

  1. 上圖可以看出
  2. 對應normal尺寸的屏幕范圍集中在常見的35寸屏之間
  3. large尺寸對應的就主要是57寸的nottpad之類的設備,例如三星的NoteNexus7平板等
  4. 接下來是屏幕密度(dpi),需要說明的是,平時所說的屏幕分辨率其實不能作為屏幕適配的依據
  5. 應該依據屏幕密度和屏幕尺寸來換算,屏幕密度是指每英寸屏幕內容納的像素數
  6. 屏幕密度從ldpixhdpi分別對應為120dpi160dpi240dpi320dpi
  7. 屏幕密度越高、分辨率越高、屏幕尺寸越小就產生了視網膜屏幕。

DIP單位詳解

  1. Android規定一個dip的大小相當於160dpi屏幕上的一個像素
  2. 它是系統為“中等的”密度屏設定的基准密度,在不同dpi屏幕上dp對應的像素數是不同的
  3. 需要時,基於當前屏的實際密度,系統會透明地放縮dip單。
  4. dip單位根據公式像素值 = [dip*(dpi/160)](px)(其中px是單位)轉化為屏幕像素。
  5. 根據此公式可以計算出一個dip分別在120dpi160dpi240dpi320dpi
  6. 屏幕中對應的像素數分別為0.7511.52.0,比例為3:4:6:8
  7. 因此,在不同屏幕密度上,以mdpi作為基准,對位圖進行3:4:6:8比例的放縮會達到適配的效果。
  1. dip與一般的px不太一樣,它是獨立於屏幕密度的。什么是獨立於密度?
  2. 先來說下一般的px,如果將一個相同長寬像素的圖片放在不同屏幕密度大小的屏幕中
  3. 那么,在低密度屏幕中圖片會顯示的很大,在高密度屏幕中則會顯示的很小;
  4. 但是,如果使用dip為單位的圖片顯示的效果則是,屏幕密度越大的手機,圖片顯示的像素也相應增大
  5. 這樣在屏幕密度大的手機和屏幕密度小的手機上,圖片看上去大小基本相同。
  6. 有了上文對dip的講解,是否對這個現象有所理解呢?

舉個例子來說一下:

  1. 現在有三個物理長寬分別為3寸、4寸,屏幕密度分別為120dpi160dpi240dpi的手機
  2. 則三個屏幕的分辨率分別為360px*480px480px*640px

  1. 將三個手機屏幕的寬分為三等份,則根據dpi的定義,三個屏幕中每等份分別容納120px160px240px
  2. 現在假設有一個控件imageview 它的長寬分別為160px160px,還有一個160px*160px的圖片資源
  3. 當程序運行時,該圖片在三個屏幕上會呈現以下效果:

  1. 如果將imageview的長寬分別改為160dip160dip,圖片將在三個屏幕上呈現以下效果:

  1. 上文提到在這三種屏幕密度下一個dip分別對應0.75px1px1.5px
  2. 所以在三種屏幕上該圖片占據120px160px240px,各自占屏幕的三分之一,所以看起來是一樣大的。
  1. 由上文可總結出Android在適配不同屏幕密度時,可以用dip作為控件的單位,視情況放縮dip單位。
  2. 當應用沒有指出圖片對應的控件的大小,Android是如何讓圖片適配不同屏幕的呢?
  1. Android2.1之前,開發應用時只有一個放圖片資源的drawable文件夾,這樣程序在不同屏幕密度的手機上運行時
  2. 系統只會從drawable這個文件夾下調圖片資源,並且系統會默認認為這個文件夾下的所有資源是為mdpi屏幕提供的
  3. 所以在hdpi屏幕上系統會按比例將drawable下的圖片擴大為原來的1.5
  4. ldpi屏幕上系統會按比例將drawable下的圖片縮小為原來的0.75
  5. 這樣會大大降低頁面效果。
  6. Android2.1以及之后,出現了drawable-ldpidrawable-mdpidrawable-hdpidrawable-xhdpidrawable-xxhdpi
  7. 在這些文件下提供的圖片大小最好是3:4:6:8:12
  8. 程序在不同的屏幕密度下運行時,會首先去符合當前屏幕密度的文件夾下找對應的資源
  9. 如果沒有,系統會以最省力為前提去別的文件夾下找對應的資源並對其進行相應的縮放
  10. 如果還沒有,就回去默認的drawable文件夾下找,然后按照2.1之前的規則縮放
  11. 如果還沒有找到,應用就會報錯或者直接crash掉了。

舉個例子

  1. 現在有一個ldpi的手機屏幕,有一個應用在其上運行(假如只有ldpimdpihdpi還有drawable四個存放圖片的文件夾)
  2. 並需要調用一個圖片a.png(在下文中用a來代替a.png)。Android系統會經歷以下流程:

  1. hdpi中的圖片大小縮小為原來的一半相比將mdpi中的圖片大小縮小為原來的3/4,計算機要省力,只需進行簡單地右移一位操作。
  2. 所以系統在ldpi下找不到a的時候會首先去hdpi下去找。當存在xhdpixxhdpi時,系統會按相同的規則去調用資源。
  3. Drawable-ldpi 3Drawable-mdpi 4Drawable-hdpi 6中的346指的是同一個圖片在三個文件夾下的大小之比。
  1. Android開發者在做圖片適配時需要注意一下兩點
  2. 盛放圖片的控件要用dip單位來定義其長寬。
  3. 最好在ldpimdpihdpixhdpixxhdpi文件夾下提供大小比例為3:4:6:8:12的圖片。
  4. 當然如果有質量好的.9.png圖片的話,提供一個也可以。



筆記

  1. Google 提供的 PX DP 的公式 ( px * 160 ) / PPI 獲取 DP
  2. 通過測試,Android 系統是使用默認 DP 來作為基數,而不是使用實際手機中的 DPI ,只是取相近的像素值
  3. 比如 5寸手機 1920X1080 分辨率 DP 440 ,但是 Android 手機使用是 480 DP
  4. 1920X1080 為基數 3倍數 1280X720 為基數 2倍數
  5. 所以現在遇到兩個問題,一個設計給的PX我轉換成DP則使用
  6. PX * 160 / 480 后的值作為 像素間距大小 等值
  7. 另外一個就是發現非XML文件中設置DP即使進行了轉換也與設計效果相差很多
  8. 所以在這種情況下使用 百分比進行計算
  9. 讀取手機真是分辨率 / 百分比 / 百分比
  1. dip device independent pixels 設備無關像素(dp就是dip
  2. dpi dots per inch ,密度(一英寸多少個點)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM