Einfachste Möglichkeit, SVG in Android zu verwenden?


164

Ich habe eine Vielzahl von Bibliotheken gefunden, um svg in Android zu verwenden und die frustrierende Erstellung unterschiedlicher Auflösungen und das Löschen von Dateien für jede Auflösung zu vermeiden. Dies wird sehr ärgerlich, wenn die App viele Symbole oder Bilder enthält.

Kann jemand so freundlich sein, einen schrittweisen Prozess der am einfachsten zu verwendenden Bibliothek für die Verwendung von SVG in Android zu geben? Ich bin sicher, dass dies auch vielen anderen helfen wird.

Außerdem verwende ich Android Studio und Illustrator zum Generieren meiner Symbole und Bilder.



Kurzes Video zum Importieren von SVG in Android Studio: youtube.com/watch?v=8e3I-PYJNHg
Zohab Ali

Antworten:


336

Zuerst müssen Sie svgDateien importieren , indem Sie die folgenden einfachen Schritte ausführen.

  1. Klicken Sie mit der rechten Maustaste auf Drawable
  2. Klicken Sie auf Neu
  3. Wählen Sie Vector Asset

Wenn das Bild auf Ihrem Computer verfügbar ist, wählen Sie die lokale svgDatei aus. Danach wählen Sie den Bildpfad und eine Option zum Ändern der Bildgröße ist auch auf der rechten Seite des Dialogfelds verfügbar, wenn Sie möchten. Auf diese Weise wird das svgBild in Ihr Projekt importiert. Gehen Sie danach zur Verwendung dieses Bildes genauso vor

@drawable/yourimagename

5
Kurze und nützliche Antwort ohne Kopfschmerzen, wenn Sie externe SVG-Dateien in das Projekt importieren.
CodeToLife

2
genau das, wonach ich gesucht habe :)
Mohamed Nageh

5
Die NextSchaltfläche ist immer deaktiviert. Irgendeine Idee warum?
Mrid

Wie ändern wir die Farbe des SVG?
Oniya Daniel

Klappt wunderbar. Nett!
Sud007

19

UPDATE: Verwenden Sie diese alte Antwort NICHT , sondern besser: https://stackoverflow.com/a/39266840/4031815

Ok, nach einigen Stunden der Recherche fand ich, dass svg-android ziemlich einfach zu bedienen ist, also gehe ich hier Schritt für Schritt Anweisungen:

  1. Laden Sie die Bibliothek herunter von: https://code.google.com/p/svg-android/downloads/list Die neueste Version zum Zeitpunkt des Schreibens ist:svg-android-1.1.jar

  2. Stellen Sie das Glas in libdir.

  3. Speichern Sie Ihre * .svg-Datei im Verzeichnis res/drawable(In Illustrator können Sie ganz einfach auf Speichern unter klicken und svg auswählen.)

  4. Codieren Sie Folgendes in Ihrer Aktivität mithilfe der SVG-Bibliothek:

    ImageView imageView = (ImageView) findViewById(R.id.imgView);
    SVG svg = SVGParser.getSVGFromResource(getResources(), R.drawable.example);
    //The following is needed because of image accelaration in some devices such as samsung
    imageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    imageView.setImageDrawable(svg.createPictureDrawable());



Sie können den Boilerplate-Code wie folgt reduzieren

Sehr einfach Ich habe eine einfache Klasse erstellt, um früheren Code zu enthalten und den Boilerplate-Code wie folgt zu reduzieren:

import android.app.Activity;
import android.view.View;
import android.widget.ImageView;

import com.larvalabs.svgandroid.SVG;
import com.larvalabs.svgandroid.SVGParser;

public class SvgImage {

    private static ImageView imageView;
    private Activity activity;
    private SVG svg;
    private int xmlLayoutId;
    private int drawableId;


    public SvgImage(Activity activity, int layoutId, int drawableId) {
        imageView = (ImageView) activity.findViewById(layoutId);
        svg = SVGParser.getSVGFromResource(activity.getResources(), drawableId);
        //Needed because of image accelaration in some devices such as samsung
        imageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        imageView.setImageDrawable(svg.createPictureDrawable());
    }
}

Jetzt kann ich es in Aktivität so nennen:

    SvgImage rainSVG = new SvgImage(MainActivity.this, R.id.rainImageView, R.drawable.rain);
    SvgImage thunderSVG = new SvgImage(MainActivity.this, R.id.thunderImageView, R.drawable.thunder);
    SvgImage oceanSVG = new SvgImage(MainActivity.this, R.id.oceanImageView, R.drawable.ocean);
    SvgImage fireSVG = new SvgImage(MainActivity.this, R.id.fireImageView, R.drawable.fire);
    SvgImage windSVG = new SvgImage(MainActivity.this, R.id.windImageView,R.drawable.wind);
    SvgImage universeSVG = new SvgImage(MainActivity.this, R.id.universeImageView,R.drawable.universe);

3
Sie sollten erwägen, Ihre eigene Antwort als akzeptiert zu markieren, anstatt die vorherige
Cliff Burton

1
Wenn ich versuche, SVG-Dateien hinzuzufügen, erhalte ich die Fehlermeldung: Fehler: Der Dateiname muss mit .xml oder .png enden
Sujay UN

1
Warum ist imageView static? Ich sehe hier eine riesige rote Käferfahne. SvgImage rainSVG = new SvgImage(MainActivity.this, R.id.rainImageView, R.drawable.rain); SvgImage thunderSVG = new SvgImage(MainActivity.this, R.id.thunderImageView, R.drawable.thunder); rainSVG Referenz enthält thunderImageView
DSchmidt

@DSchmidt das ist nur ein Zeiger auf die Bildansicht. Wenn es mein Code wäre, würde ich die gesamte Klasse mit einer Methode namens LoadSVG statisch machen. und wie Sie sehen, gibt es keinen Grund, Daten in private Variablen zu laden, auf die nicht zugegriffen werden kann.
Nasreddine Galfout



3

Probieren Sie das SVG2VectorDrawable Plugin aus. Gehen Sie zu Einstellungen-> Plugins-> Plugins durchsuchen und installieren Sie SVG2VectorDrawable. Ideal zum Konvertieren von Sag-Dateien in Vektor-Zeichen. Nach der Installation finden Sie ein Symbol dafür in der Symbolleiste rechts neben dem Hilfesymbol (?).


Funktioniert bei mir nicht - der SVG-Dateipfad wird nicht einmal in das Plugin hochgeladen. Die beste Antwort oben ist viel einfacher und erledigt die Arbeit.
DaveNOTDavid

Tolles Plugin - schnell konvertierte viele SVGs in Vektor-Drawables!
Morten Holmgaard

2
  1. Sie müssen SVG in XML konvertieren, um es in einem Android-Projekt zu verwenden.

1.1 Sie können dies mit dieser Site tun: http://inloop.github.io/svg2android/ aber es unterstützt nicht alle Funktionen von SVG wie einige Farbverläufe.

1.2 Sie können über Android Studio konvertieren, aber es kann einige Funktionen verwenden, die nur API 24 und höher unterstützen, die Ihre App auf älteren Geräten zerstören.

und vectorDrawables.useSupportLibrary = truein Gradle-Datei hinzufügen und wie folgt verwenden:

<android.support.v7.widget.AppCompatImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:srcCompat="@drawable/ic_item1" />
  1. Verwenden Sie diese Bibliothek https://github.com/MegatronKing/SVG-Android , die diese Funktionen unterstützt: https://github.com/MegatronKing/SVG-Android/blob/master/support_doc.md

Fügen Sie diesen Code in der Anwendungsklasse hinzu:

public void onCreate() {
    SVGLoader.load(this)
}

und verwenden Sie die SVG wie folgt:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_android_red"/>

Warum einen SVG-Loader verwenden, wenn Sie @ Pallavis direkten Ansatz haben? Gibt es einen Vorteil bei der Verwendung eines Laders?
Taslim Oseni

@Taslim die unterstützten Funktionen sind mehr als der übliche Weg. Sie können die unterstützten Funktionen sehen und sehen.
Sajad Abbas

0

1) Klicken Sie mit der rechten Maustaste auf das zeichnbare Verzeichnis, gehen Sie zu "Neu" und dann zu "Vektor-Assets". 2) Ändern Sie den Asset-Typ von "ClipArt" in "Lokal". 3) Durchsuchen Sie Ihre Datei. 4) Geben Sie die Größe an. 5) Klicken Sie dann auf "Weiter" Verzeichnis

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.