Il modo più semplice per utilizzare SVG in Android?


165

Ho trovato una miriade di librerie per utilizzare svg in Android ed evitare la frustrante creazione di risoluzioni diverse e la caduta di file per ogni risoluzione, questo diventa molto fastidioso quando l'app ha molte icone o immagini.

Qualcuno può essere così gentile da fornire un processo passo passo della libreria più semplice da usare per utilizzare SVG in Android, sono sicuro che questo aiuterà anche molti altri.

Inoltre uso Android Studio e Illustrator per generare icone e immagini.



Breve video su come importare svg in Android Studio: youtube.com/watch?v=8e3I-PYJNHg
Zohab Ali

Risposte:


337

Per prima cosa devi importare i svgfile seguendo semplici passaggi.

  1. Fare clic con il tasto destro su drawable
  2. Clicca nuovo
  3. Seleziona risorsa vettoriale

Se l'immagine è disponibile sul tuo computer, seleziona il svgfile locale . Successivamente seleziona il percorso dell'immagine e un'opzione per modificare la dimensione dell'immagine è disponibile anche sul lato destro della finestra di dialogo, se lo desideri. in questo modo l' svgimmagine viene importata nel progetto. Successivamente, per utilizzare questa immagine, utilizzare la stessa procedura

@drawable/yourimagename

5
Risposta breve e utile, senza mal di testa quando si importano file svg esterni nel progetto.
CodeToLife

2
esattamente quello che stavo cercando :)
Mohamed Nageh,

5
il Nextpulsante è sempre disabilitato. qualche idea del perché?
mrid

Quindi, come possiamo cambiare il colore dello svg?
Oniya Daniel,

Funziona come un fascino. Bello!
sud007,

19

AGGIORNAMENTO: NON usare questa vecchia risposta, meglio usare questa: https://stackoverflow.com/a/39266840/4031815

Ok dopo alcune ore di ricerca ho scoperto che svg-android è abbastanza facile da usare, quindi lascio qui istruzioni passo per passo:

  1. scarica la lib da: https://code.google.com/p/svg-android/downloads/list L' ultima versione al momento della stesura di questo è:svg-android-1.1.jar

  2. Metti il ​​vaso in libdir.

  3. Salvare il file * .svg in res/drawabledir (in Illustrator è facile come premere Salva con nome e selezionare svg)

  4. Codice quanto segue nella tua attività utilizzando la libreria svg:

    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());



È possibile ridurre il codice del boilerplate in questo modo

Molto facile ho creato una classe semplice per contenere il codice passato e ridurre il codice del boilerplate, in questo modo:

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());
    }
}

Ora posso chiamarlo così in attività:

    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
Dovresti considerare di contrassegnare la tua risposta come accettata invece della precedente
Cliff Burton

1
Quando provo ad aggiungere file SVG ricevo un errore che dice: Errore: il nome del file deve terminare con .xml o .png
Sujay ONU

1
Perché lo è imageView static? Vedo una bandiera bug rossa hugh qui. 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 fa riferimento contiene thunderImageView
DSchmidt

@DSchmidt che è solo un puntatore all'immagine. Se fosse il mio codice renderei statica l'intera classe con un metodo chiamato LoadSVG. e come puoi vedere non ha senso caricare dati su variabili private a cui non è possibile accedere.
Nasreddine Galfout,



3

Prova il plug-in SVG2VectorDrawable. Vai su Preferenze-> Plugin-> Sfoglia plugin e installa SVG2VectorDrawable. Ottimo per convertire file sag in disegni vettoriali. Una volta installato, troverai un'icona per questo nella sezione della barra degli strumenti a destra dell'icona della guida (?).


Per me non funziona - il percorso del file SVG non viene nemmeno caricato nel plugin. La migliore risposta sopra è molto più semplice e porta a termine il lavoro.
DaveNOTDavid

Ottimo plugin - convertito rapidamente molti svg in disegnabili vettoriali!
Morten Holmgaard,

2
  1. è necessario convertire SVG in XML da utilizzare nel progetto Android.

1.1 puoi farlo con questo sito: http://inloop.github.io/svg2android/ ma non supporta tutte le funzionalità di SVG come alcuni gradienti.

1.2 è possibile convertire tramite Android Studio, ma potrebbe utilizzare alcune funzionalità che supportano solo API 24 e successive che consentono di eseguire l'app in dispositivi meno recenti.

e aggiungi il vectorDrawables.useSupportLibrary = truefile gradle e usalo in questo modo:

<android.support.v7.widget.AppCompatImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:srcCompat="@drawable/ic_item1" />
  1. utilizzare questa libreria https://github.com/MegatronKing/SVG-Android che supporta queste funzionalità: https://github.com/MegatronKing/SVG-Android/blob/master/support_doc.md

aggiungi questo codice nella classe dell'applicazione:

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

e usa SVG in questo modo:

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

Perché usare un caricatore SVG quando hai l'approccio diretto di @ Pallavi? C'è qualche vantaggio nell'usare un caricatore?
Taslim Oseni,

@Taslim le funzionalità supportate sono più del solito. puoi vedere le funzionalità supportate e vedere.
sajad abbasi,

0

1) Fare clic con il pulsante destro del mouse su Directory disegnabile, quindi andare su nuovo quindi andare su risorse vettoriali 2) cambiare tipo di risorsa da ClipArt a locale 3) sfogliare il file 4) dare dimensione 5) quindi fare clic su Avanti quindi fatto Il tuo svg utilizzabile verrà generato in disegnabile elenco

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.