Was ist der beste Weg, um erstellen Sie drawables für verschiedene dpi

Tipps für Designer-Abschnitt der Icon-Design Richtlinien hat den folgenden Rat:

, Vektor-Formen, wo möglich

Wenn möglich, verwenden Sie Vektor-Formen, so dass, wenn die Notwendigkeit entsteht, Vermögenswerte können skaliert werden ohne Verlust von detail-und edge-Schärfe.

Starten mit großen Zeichenflächen

Da müssen Sie zum erstellen von assets für verschiedene Bildschirmauflösungen, ist es am besten zu Ihrem icon-designs entworfen, die auf große Zeichenflächen mit den Abmessungen, die ein Vielfaches der Ziel-Symbol-Größen. Zum Beispiel die launcher-icons sind 96, 72, 48 oder 36 Pixel breit, je nach Bildschirmauflösung. Wenn Sie zunächst zeichnen Sie die launcher-icons auf ein 864x864 Zeichenfläche, wird es einfacher und sauberer zu optimieren, werden die Symbole bei der Skalierung der Zeichenfläche nach unten, um die Ziel-Größen für die endgültige asset Erstellung.

Gibt es eine Reihe von anderen guten Tipps in diesem Abschnitt. Ich denke, es ist guter Rat für andere drawable-Art (Menü-icons, Hintergründe, etc.).

Benutze ich Inkscape und die Arbeit mit Vektor-Bilder, dann exportieren, um das erforderliche raster Größe für die verschiedenen Auflösungen. Einen Artikel, den ich schrieb, auf die Herstellung von Ikonen aus Inkscape finden Sie unter https://tekeye.uk/android/android-launcher-icons-using-inkscape

Schlage ich ein kleines Skript schreiben, in der powershell für Inkscape.

Beispiel :

Setzen Inkscape in "c:\bin\inkscape" (dir ohne Leerzeichen) und ziehen Sie alle Ihre Bilder in mdpi (1x) Auflösung.

in Inkscape-Objekteigenschaften-box (ich.e id in xml), geben Sie einen Id-Namen für jedes Objekt, für das Sie exportieren in png.

Speichern Sie Ihre SVG zu "C:\users\rone\Pictures\design-MyApps-forscript.svg"

Erstellen dir "d:\temp".

Und legen Sie dieses Skript in "C:\app\scripts\"

Powershell-Skript-name ist "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

nun rufen Sie das Skript wie in diesem Beispiel :

@("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 }

Und das Skript wird alle Ihre drawables in allen Auflösungen (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) in d:\temp\drawable-xyz ...

So eine komfortable Zeitersparnis.

Sieht aus wie es gibt ein tool in Android Studio:

Erweitern Sie Ihre Projekt-Ordner in der Projekt-Ansicht - > Rechtsklick auf app > Neue > Bild-Asset -

Symbol Typ: Aktionsleiste und Tab Icons

Asset-Typ: Bild

Wählen Sie die Pfad für original-Bild (er sollte groß sein)

Form: Keine (hintergrund transparent machen)

Und es generiert die Bilder in die entsprechenden drawable-Ordner.