Android SDK: A lavoro con Picasso

In questo articolo veloce, diamo un piccolo sguardo ad una popolare libreria Android per immagini, Picasso. È una libreria semplice e pratica creata e mantenuta da Square. È perfetta per lavorare con immagini nei tuoi progetti Android.

1. Introduzione

Picasso è una libreria per la gestione di immagini per Android. È creata e mantenuta da Square e provvede al caricamento e al processo delle immagini.  Semplifica il processo di visualizzazione delle immagini caricate da posizioni remote. In molti casi sono richieste solo poche righe di codice per implementare questa eccezionale libreria.

Picasso eccelle nella visualizzazione di immagini caricate da remoto.  La libreria gestisce ogni stadio del processo: dalla richiesta HTTP iniziale al caching dell'immagine. Scrivere codice da sé per portare a termine queste operazioni, può risultare abbastanza lungo. In questo breve articolo diamo uno sguardo ad alcuni casi d'uso comune.

2. Installazione

Inizia con lo scaricare il file JAR dal sito di Picasso. L'installazione viene fatta nella maniera solita. Se hai bisogno d'aiuto con questo passaggio, dai uno sguardo a questo tutorial di Shane Condor e Lauren Darcey.

Se stai usando Android Studio, puoi aggiungere compile 'com.squareup.picasso:picasso:2.3.3' al file build.gradle nella sezione dependency.

3. Al lavoro

Passo 1: Crea un nuovo progetto

Crea un nuovo progetto nel tuo IDE preferito. Assicurati di selezionare una Activity vuota, se stai usando Android Studio.

Passo 2: Widget dell'immagine

Apri il file del layout per l'activity principale. Dobbiamo aggiungere un ImageView al layout. Non sono necessari fronzoli. Il codice di seguito ti mostra cosa intendo.

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

Passo 3: Aggiungere Picasso

Apri il file dell'Activity principale. Aggiungi il seguente blocco di codice al metodo onCreate.

ImageView imageView = (ImageView) findViewById(R.id.imageView);

        Picasso.with(this)
                .load("https://cms-assets.tutsplus.com/uploads/users/21/posts/19431/featured_image/CodeFeature.jpg")
                .into(imageView);

Nella prima riga ci procuriamo un riferimento all'instanza di ImageView nel file di layout. Poi vi carichiamo un'immagine all'interno usando la libreria Picasso. Specifichiamo per primo il contesto invocando with e passando il contesto. Chiamiamo poi il metodo load fornendo l'indirizzo dell'immagine, un URL in questo caso. Infine, diciamo a Picasso dove dovrebbe mostrare l'immagine una volta che viene recuperata chiamando into e passandogli all'interno l'oggetto imageView.

Il tuo IDE ti chiederà di importare la libreria Picasso. In ogni caso per farlo manualmente, aggiungi una direttiva import prima della classe dell'Activity.

import com.squareup.picasso.Picasso;

Passo 4: Permessi

Affiché Picasso possa fare il proprio lavoro, assicurati di aggiungere <uses-permission android:name="android.permission.INTERNET" /> al file manifest del tuo progetto.

Passo 5: Build ed Esecuzione

E questo è quanto. Se fai il build dell'applicazione e la esegui, dovresti vedere l'immagine caricata sullo schermo.

4. Altri Esempi

Picasso ha molti altri trucchetti su per la sua manica. Nell'esempio seguente, usiamo Picasso per recuperare un'immagine da remoto e ridimensionarla prima di mostrarla nell'image view.

 Picasso.with(this)
  .load(https://cms-assets.tutsplus.com/uploads/users/21/posts/19431/featured_image/CodeFeature.jpg)
  .resize(100, 100)
  .into(imageView)

Picasso supporta anche altre trasformazioni come ad esempio la rotazione. Nello stralcio di codice seguente, recuperiamo un'immagine da remoto e la ruotiamo di 180 gradi prima di mostrarla.

Picasso.with(this)
    .load("https://cms-assets.tutsplus.com/uploads/users/21/posts/19431/featured_image/CodeFeature.jpg")
    .rotate(180)
    .into(imageView);

Se la tua applicazione dipende da risorse in remoto, allora è importante aggiungere un'alternativa di ripiego come un placeholder. L'immagine placeholder viene immediatamente mostrata e rimpiazzata dall'immagine remota appena Picasso ha finito di scaricarla.

Picasso.with(this)
    .load(https://cms-assets.tutsplus.com/uploads/users/21/posts/19431/featured_image/CodeFeature.jpg)
    .placeholder(R.drawable.image_name)
    .into(imageView);

Picasso supporta due tipi di immagini placeholder. Abbiamo già visto come funziona il metodo placeholder, ma c'è anche un metodo error che accetta un'immagine placeholder. Picasso proverà a scaricare l'immagine da remoto tre volte e mostrerà l'immagine placeholder d'errore se non è stato possibile recuperare la risorsa in remoto.

Picasso.with(this)
    .load(https://cms-assets.tutsplus.com/uploads/users/21/posts/19431/featured_image/CodeFeature.jpg)
    .error(R.drawable.image_name)
    .into(imageView);

Nota che puoi anche avere una combinazione dei metodi placeholder ed error, come mostra il seguente blocco:

Picasso.with(this)
    .load(https://cms-assets.tutsplus.com/uploads/users/21/posts/19431/featured_image/CodeFeature.jpg)
    .placeholder(R.drawable.image_name_default)
    .error(R.drawable.image_name_error)
    .into(imageView);

Conclusione

Dal momento che Picasso è davvero facile da utilizzare, merita sicuramente trenta minuti del tuo tempo. Se stai creando un'app che carica immagini di frequente, allo Picasso può davvero rendere la tua vita un po' più semplice.