為不同的dpi創建drawable的最佳方法是什么

Question

你是先創建MDPI drawable，然后根據photoshop中的像素按比例縮放到.075 / 1.00 / 1.50/2比例，還是重新創建每個可繪制的？

從高質量的圖像開始並開始縮小圖像或從MDPI圖像開始並擴展它也是更好的方法嗎？

這是我做的：

在photoshop中創建一個mdpi圖像，320x480 porportions和160分辨率。 只需輸入120,160,240或320作為分辨率，即可保存4張圖像並更改分辨率。

Answer 1

從Android設計指南：

策略

那么在設計多個屏幕時你從哪里開始呢？ 一種方法是在基本標准（中等大小，MDPI）中工作，並將其擴展或縮小以用於其他桶。 另一種方法是從具有最大屏幕尺寸的設備開始，然后按比例縮小並找出您需要在較小屏幕上進行的UI妥協。

有關此主題的更多詳細信息，請查看支持多個屏幕。

Answer 2

“ 圖標設計指南”中的設計師提示部分提出以下建議：

盡可能使用矢量形狀
如果可能，使用矢量形狀，以便在需要時，可以按比例放大資產，而不會丟失細節和邊緣清晰度。

從大型畫板開始
因為您需要為不同的屏幕密度創建資源，所以最好在尺寸為目標圖標大小的倍數的大型畫板上啟動圖標設計。 例如，啟動器圖標的寬度為96,72,48或36像素，具體取決於屏幕密度。 如果您最初在864x864畫板上繪制啟動器圖標，則在將畫板縮小到最終資產創建的目標尺寸時，調整圖標將更容易，更清晰。

該部分還有許多其他不錯的提示。 我認為這對其他可繪制類型也很好（菜單圖標，背景等）。

Answer 3

我通常從大開始，然后變小。

我發現powerpoint實際上是一個非常好的工具，可以為我的應用程序創建資源。 所有圖形都是矢量圖，因此它們可以向上和向下擴展而不會有任何質量損失。

如果沒有其他原因，我傾向於從大的開始，而不是更容易使用看起來更大的東西。 當我移動到較小的那些我通常放大一些來補償。

powerpoint中的任何圖形對象都允許您右鍵單擊它並選擇“另存為圖片”，它將為您輸出一個png文件。 如果需要，唯一剩下的就是將它放入draw9patch。

Answer 4

我使用Inkscape，也使用矢量圖像，然后導出到各種分辨率所需的光柵大小。 我寫的關於從Inkscape生成圖標的文章可以在https://tekeye.uk/android/android-launcher-icons-using-inkscape找到。

Answer 5

最佳方法：創建高分辨率圖像，然后縮小它們。

如果你使用Photoshop，它將是一塊蛋糕！

我的分叉版本的Output Android Assets.jsx腳本自動執行所有dpi的縮減過程 :-)

只需點擊一下，它就會創建 ：

• 所有的drawable - ???? 文件夾
• 所有psd或png高分辨率文件的所有縮小圖像版本。

因此，只需創建xxxhdpi圖像，然后使用腳本縮小它們。

創建初始高分辨率圖像寬度和高度為16的倍數是明智的，因為它們將正確縮小 ，如下表所示：

ldpi   mdpi   tvdpi     hdpi    xhdpi   xxhdpi  xxxhdpi
0,75   1      1,33     1,5     2       3       4

3      4      5,33     6       8       12      16
6      8      10,67    12      16      24      32
9      12     16       18      24      36      48
12     16     21,33    24      32      48      64
15     20     26,67    30      40      60      80
18     24     32       36      48      72      96
21     28     37,33    42      56      84      112
24     32     42,67    48      64      96      128
27     36     48       54      72      108     144
30     40     53,33    60      80      120     160
etc....

希望這可以幫助

注意：

tvdpi是一種罕見的情況，所以我真的不關心它有時縮小到“ 無整數 ”值。

積分：

我在此處和此處提供了此腳本的舊版本，我添加了xxxhdpi和xxhdpi支持

Answer 6

我建議在PowerShell中為Inkscape編寫一個小腳本。

示例：

將Inkscape放在“c：\\ bin \\ inkscape”（dir沒有任何空格）中，並以mdpi（1x）分辨率繪制所有圖像。

在Inkscape對象屬性框（即xml中的id）中，為要在png中導出的每個對象提供Id名稱。

將SVG保存到“C：\\ users \\ rone \\ Pictures \\ design-MyApps-forscript.svg”

創建一個目錄“d：\\ temp”。

並將此腳本放在“C：\\ app \\ scripts \\”中

---

Powershell腳本名稱為“inkscape_to_png.ps1”：

param (
    $inkscape_dir="C:\bin\Inkscape\",
    $inkscape_bin="inkscape.exe",
    $img_id="",
    $fichier_svg="C:\Users\rone\Pictures\design-MyMap-forscript.svg",
    $tmp_dir="d:\temp\"
)

$inkscape=$(Resolve-Path "$inkscape_dir\$inkscape_bin")


function getWidthHeight($img_id) {
    $size=@{}

    $old_pwd=$pwd.path

    cd $inkscape_dir

    write-host -foreground yellow "détermine la taille de $img_id"

    $size.width=invoke-command {./inkscape --file=$fichier_svg --query-id=$img_id --query-width 2>$null}
    $size.height=invoke-command {./inkscape --file=$fichier_svg --query-id=$img_id --query-height 2>$null}

    write-host -foreground yellow "width : $($size.width)"
    write-host -foreground yellow "height : $($size.height)"

    cd $old_pwd

    return $size
}

function convertTo($size, $format) {
    $rsize=@{}

    if ($format -eq "MDPI") {
        $rsize.width=[int]$size.width*1
        $rsize.height=[int]$size.height*1
    } elseif ($format -eq "LDPI") {
        $rsize.width=[int]$size.width*0.75
        $rsize.height=[int]$size.height*0.75
    } elseif ($format -eq "HDPI") {
        $rsize.width=[int]$size.width*1.5
        $rsize.height=[int]$size.height*1.5
    } elseif ($format -eq "XHDPI") {
        $rsize.width=[int]$size.width*2
        $rsize.height=[int]$size.height*2
    } elseif ($format -eq "XXHDPI") {
        $rsize.width=[int]$size.width*3
        $rsize.height=[int]$size.height*3   
    } elseif ($format -eq "XXXHDPI") {
        $rsize.width=[int]$size.width*4
        $rsize.height=[int]$size.height*4
    }

    write-host -foreground yellow "après conversion : $format"

    write-host -foreground yellow "width : $($rsize.width)"
    write-host -foreground yellow "height : $($rsize.height)"

    return $rsize
}

function inkscape_convert() {

    $mdpi_size=getWidthHeight $img_id

    write-host -foreground gray "----------------------------------------"
    "MDPI,LDPI,HDPI,XHDPI,XXHDPI,XXXHDPI" -split ","|% {


        $new_size=convertTo $mdpi_size $_
        if ($new_size.width -eq 0 -or $new_size.height -eq 0) {
            write-host -foreground red "erreur lors de la recherche de la taille de l'image"
            exit
        }
        $w=$new_size.width
        $h=$new_size.height
        $dir="$tmp_dir\drawable-$($_.toLower())"
        if (-not $(test-path $dir)) {
            write-host -foreground yellow "création du répertoire $dir"
            mkdir $dir
        }
        $new_file_name="$dir\$($img_id).png"
        $cmd="$inkscape -z -i $img_id -j -f $fichier_svg -w $w -h $h -e $new_file_name"
        write-host -foreground gray $cmd
        invoke-expression -command $cmd
        if ($? -eq $true) {
            write-host -foreground yellow "conversion OK"
        }

    }
    write-host -foreground gray "----------------------------------------"

}


inkscape_convert

---

現在，將此腳本稱為此示例：

@("btn_button_name_1","btn_button_name_3","btn_other", "btn_zoom", "btn_dezoom", "btn_center", "btn_wouwou", "im_abcdef", "ic_half", "ic_star", "ic_full") | % { C:\\app\\scripts\\inkscape_to_png.ps1 -img $_ -f design-MyMap-forscript.svg }

腳本將在d：\\ temp \\ drawable-xyz中以所有分辨率（ldpi，mdpi，hdpi，xhdpi，xxhdpi，xxxhdpi）創建所有可繪制的...

這樣節省了很多時間。

Answer 7

從Android L開始，有一個VectorDrawable，它類似於SVG中的SHAPE，但是采用Android的XML風格

看Android文檔：

https://developer.android.com/training/material/drawables.html#VectorDrawables

Answer 8

看起來Android Studio中有一個工具：

在項目視圖中展開項目文件夾>右鍵單擊應用程序 >新建>圖像資源

圖標類型：操作欄和選項卡圖標

資產類型：圖像

選擇原始圖像的路徑 （它應該很大）

形狀：無（使背景透明）

它將在適當的可繪制文件夾中生成圖像。