Share
In questo tutorial, lavoreremo attraverso le basi dell'utilizzo di una WebView per visualizzare le immagini all'interno della tua app, configurando i controlli di interazione automatica dal tuo codice Java. Esploreremo anche varie opzioni per l'importazione di immagini in una WebView, incluso il caricamento di immagini da posizioni Web, dalla Galleria dispositivo e dalla struttura di directory dell'app..
Se non hai già un'app con cui stai lavorando, avvia un nuovo progetto Android in Eclipse. Nella classe di attività principale della tua app o in qualsiasi attività in cui desideri visualizzare le immagini, aggiungi le seguenti istruzioni di importazione prima della riga di apertura della dichiarazione della classe:
importare android.app.Activity; import android.content.Intent; import android.database.Cursor; import android.net.Uri; importare android.os.Bundle; import android.provider.MediaStore; importa android.view.View; import android.view.View.OnClickListener; import android.webkit.WebView; importa android.widget.Button;
Potresti non aver bisogno di tutto questo a seconda di come pensi di caricare le tue immagini. Se si prevede di caricare le immagini sul Web, è necessario aggiungere l'autorizzazione Internet al manifesto del progetto. Apri il manifest e aggiungi la seguente riga ovunque all'interno dell'elemento "manifest" principale:
Utilizzeremo una singola WebView all'interno di un layout lineare per esplorare la visualizzazione delle immagini. All'interno del file di layout XML principale del tuo progetto o di quello che desideri utilizzare per l'attività in questione, aggiungi il seguente schema di layout:
All'interno di questo layout lineare, per prima cosa aggiungi la tua WebView come segue:
Useremo l'attributo ID per identificare il WebView in Java. Poiché il layout includerà altri elementi, specificiamo un peso insieme alle proprietà generali del layout. Per dimostrare di caricare le immagini da tre posizioni diverse, aggiungeremo anche tre pulsanti. Se pensi di utilizzare solo uno dei metodi di caricamento, sentiti libero di modificarlo. Dopo la visualizzazione Web, sempre all'interno del layout lineare principale, aggiungere il seguente layout lineare:
Qui includiamo tre pulsanti all'interno di un secondo layout lineare, con attributi ID in modo da poter implementare i clic sui pulsanti in Java. Dovrai inoltre aggiungere quanto segue al file XML di Strings, che dovresti trovare nella directory "res / values" dell'app:
Galleria web App
Nella classe di attività dell'app, modificare la riga di dichiarazione della classe di apertura per implementare gli listener di clic come segue:
classe pubblica PictureViewerActivity estende Activity implementa OnClickListener
Modificare il nome della classe in base alle proprie esigenze. Ora aggiungi quanto segue all'interno della dichiarazione della classe, prima del metodo "onCreate":
PicView WebView privato;
Il tuo metodo "onCreate" dovrebbe già essere lì, ma se non lo aggiungi come segue:
@Override public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.main);
Questo è un codice standard per creare l'attività. All'interno di questo metodo, dopo il codice esistente, recuperare un riferimento alla tua WebView e alterarne il colore di visualizzazione come segue:
picView = (WebView) findViewById (R.id.pic_view); picView.setBackgroundColor (0);
Questo ci consentirà di caricare le immagini in WebView durante l'esecuzione dell'app. La visualizzazione Web viene visualizzata con uno sfondo bianco per impostazione predefinita, che qui sovrascriviamo. Dopo il metodo "onCreate", ancora all'interno della dichiarazione della classe, aggiungi la struttura del tuo metodo "onClick" come segue:
public void onClick (Visualizza v)
Aggiungeremo il codice per gestire ogni clic del pulsante all'interno di questo metodo.
Iniziamo consentendo all'utente di caricare un'immagine dalla Galleria sul proprio dispositivo. Innanzitutto, aggiungi una variabile di istanza all'interno della dichiarazione della classe, ma prima del metodo "onCreate":
private final int IMG_PICK = 1;
Questo ci consentirà di rispondere all'utente che torna dalla Galleria dopo aver scelto un'immagine. All'interno del metodo "onCreate", dopo il codice esistente, aggiungi quanto segue per recuperare un riferimento al pulsante "Scegli" e assegna ad esso un listener di clic:
Button pickBtn = (Button) findViewById (R.id.pick_btn); pickBtn.setOnClickListener (questo);
Ora possiamo rispondere ai clic sui pulsanti. All'interno del metodo "onClick", aggiungi quanto segue:
if (v.getId () == R.id.pick_btn) Intent pickIntent = new Intent (); pickIntent.setType ( "image / *"); pickIntent.setAction (Intent.ACTION_GET_CONTENT); // gestiremo i dati restituiti in onActivityResult startActivityForResult (Intent.createChooser (pickIntent, "Seleziona immagine"), IMG_PICK);
Questo porterà l'utente a un'altra applicazione per selezionare un'immagine. A seconda delle app che hanno installato, potrebbe essere necessario selezionare un'app da un elenco. Ad esempio, sul mio dispositivo ricevo due scelte premendo il pulsante "Scegli":
Quando l'utente sceglie un'immagine, tornerà all'app e verrà attivato il metodo "onActivityResult". Aggiungilo alla dichiarazione della tua classe come segue:
protected void onActivityResult (int requestCode, int resultCode, Intent data) if (resultCode == RESULT_OK)
All'interno dell'istruzione "if", aggiungi quanto segue per verificare che l'utente stia tornando dall'Intento per iniziare a scegliere un'immagine:
if (requestCode == IMG_PICK)
All'interno di questa istruzione "se", possiamo recuperare i dati restituiti dall'app Galleria, che sarà l'URI dell'immagine selezionata dall'utente:
Uri pickedUri = data.getData ();
Costruiremo una stringa che rappresenta il percorso per l'immagine, che dobbiamo caricare l'immagine nel WebView. Stiamo utilizzando la stessa tecnica esplorata in modo più dettagliato in Visualizzazione di immagini con una Galleria avanzata. Aggiungi il seguente codice:
String imagePath = ""; String [] imgData = MediaStore.Images.Media.DATA; Cursor imgCursor = managedQuery (pickedUri, imgData, null, null, null); if (imgCursor! = null) int index = imgCursor.getColumnIndexOrThrow (MediaStore.Images.Media.DATA); imgCursor.moveToFirst (); imagePath = imgCursor.getString (index); else imagePath = pickedUri.getPath ();
Ora abbiamo un riferimento alla posizione dell'immagine e può caricarlo in WebView:
picView.loadUrl ( "file: ///" + imagePath);
Ora puoi eseguire la tua app per testarla caricando l'immagine della Gallery - potrebbe essere necessario eseguirla su un dispositivo reale in quanto l'emulatore di solito non contiene immagini memorizzate su di esso.
Successivamente gestiremo il caricamento dal Web e dalla directory dell'app, prima di esplorare le opzioni di configurazione per WebView.
Ora per una più semplice opzione. Per caricare un'immagine dal Web, abbiamo semplicemente bisogno dell'URL. Per prima cosa, torna al metodo "onCreate", attua i clic sul pulsante "carica" come segue:
Button loadBtn = (Button) findViewById (R.id.load_btn); loadBtn.setOnClickListener (questo);
Nel metodo "onClick", dopo l'istruzione "if" in cui abbiamo gestito il pulsante "Scegli", aggiungi quanto segue, modificandolo per adattarlo all'URL dell'immagine:
Accentsconagua
else if (v.getId () == R.id.load_btn) picView.loadUrl ("http://developer.android.com/images/brand/google_play_logo_450.png"); Qui stiamo semplicemente caricando una delle risorse di immagini di Google Play per Android per la dimostrazione, ma puoi ovviamente modificarla per riflettere un'immagine a tua scelta. Se si desidera che l'utente inserisca l'immagine scelta, è possibile aggiungere un campo di testo modificabile per catturarlo. L'immagine verrà caricata a condizione che il dispositivo abbia una connessione Internet funzionante:
È possibile che all'interno del pacchetto dell'applicazione siano presenti immagini che si desidera visualizzare in una WebView. Esploreremo due possibili modi per raggiungere questo obiettivo. Per prima cosa, torna al tuo metodo "onCreate", gestisci i clic sui pulsanti:
Button appBtn = (Button) findViewById (R.id.app_btn); appBtn.setOnClickListener (questo);
Aggiungi un altro ramo alle istruzioni "if" e "else" nel tuo metodo "onClick" come segue:
else if (v.getId () == R.id.app_btn)
Per visualizzare solo un'immagine nella WebView, puoi semplicemente specificare il suo URL:
picView.loadUrl ( "/ images_22 immagine-display-e-interazione-con-android-webviews.jpg");
Carica un file immagine JPEG memorizzato nella cartella "assets" dell'app e denominato "mypicture.jpg".
Il WebView è naturalmente progettato per visualizzare contenuti HTML, quindi potresti voler visualizzare l'immagine come elemento "img" HTML insieme ad altri markup Web. Per fare ciò, puoi salvare un file HTML nella cartella "assets" dell'app con un elemento "img" al suo interno, ad esempio:
Puoi includere altri contenuti HTML in questo file se vuoi che vengano visualizzati nella tua WebView insieme all'immagine. Per caricare l'HTML, modifica la linea "loadURL" come segue:
picView.loadUrl ( "file: ///android_asset/imagepage.html");
Questo funziona per un file HTML salvato come "imagepage.html" nella cartella "assets", quindi modificalo per adattarlo al nome del tuo file. Questo codice è tutto ciò che serve per caricare l'immagine all'interno del file HTML.
È possibile impostare alcuni dettagli di come l'utente interagisce con l'immagine all'interno di WebView dal codice attività Java. Nel metodo "onCreate", dopo il codice del listener dei pulsanti, aggiungi quanto segue:
. PicView.getSettings () setBuiltInZoomControls (true); . PicView.getSettings () setUseWideViewPort (true);
In questo modo l'app utilizza i controlli zoom standard e la Wide View Port per la tua WebView. Ci sono altre opzioni che puoi esplorare qui, come ad esempio l'impostazione del livello di zoom predefinito. Ora, quando l'utente interagisce con la tua WebView, può toccare due volte e pizzicare per zoomare, oltre a usare i pulsanti e scorrere per scorrere / scorrere:
L'utilizzo di risorse Android predefinite come WebView consente di sfruttare rapidamente modelli di interazione con cui gli utenti saranno già familiari e di concentrarsi sugli aspetti unici delle applicazioni. La WebView esegue il rendering di pagine HTML, quindi puoi anche migliorare le tue app utilizzando tecnologie Web come CSS e JavaScript. Come puoi vedere dall'esempio precedente, puoi integrare efficacemente la WebView con altri elementi dell'interfaccia utente Android.
