Share
În acest tutorial, vom lucra prin elementele de bază ale utilizării unui WebView pentru afișarea imaginilor în aplicația dvs., configurarea comenzilor automate de interacțiune din cadrul codului dvs. Java. De asemenea, vom explora diferite opțiuni pentru importarea imaginilor într-un WebView, incluzând încărcarea imaginilor din locațiile Web, din Galeria dispozitivului și din cadrul structurii de directoare a aplicației.
Dacă nu aveți deja o aplicație cu care lucrați, începeți un nou proiect Android în Eclipse. În clasa principală a activității aplicației dvs. sau orice activitate pe care doriți să o afișați în interiorul acesteia, adăugați următoarele declarații de import înainte de a deschide linia de deschidere a declarației de clasă:
importă android.app.Activity; import șiroid.content.Intent; import android.database.Cursor; importul android.net.Uri; import android.os.Bundle; import android.provider.MediaStore; import șiroid.view.View; importă android.view.View.OnClickListener; import șiroid.webkit.WebView; import șiroid.widget.Button;
Este posibil să nu aveți nevoie de toate acestea în funcție de modul în care intenționați să încărcați imaginile. Dacă intenționați să încărcați imaginile pe Web, trebuie să adăugați permisiunea de Internet pentru proiectul Manifest. Deschideți Manifestul și adăugați următoarea linie oriunde în interiorul elementului părinte "manifest":
Vom folosi un singur WebView într-un layout liniar pentru a explora afișarea imaginilor. În interiorul fișierului principal al aspectului XML al proiectului dvs. sau oricare dintre cele pe care doriți să îl utilizați pentru activitatea în cauză, adăugați următoarea schiță a aspectului:
În interiorul acestei linii principale, adăugați mai întâi WebView după cum urmează:
Vom folosi atributul ID pentru a identifica WebView în Java. Deoarece aspectul va include alte elemente, specificăm o greutate împreună cu proprietățile generale ale aspectului. Pentru a demonstra încărcarea imaginilor din trei locații diferite, vom adăuga, de asemenea, trei butoane. Dacă intenționați să utilizați una dintre metodele de încărcare, nu ezitați să modificați acest lucru. După ce WebView este încă în interiorul liniei principale, adăugați următoarea structură liniară suplimentară:
Aici includem trei butoane în interiorul unui al doilea aspect liniar, cu atributele ID, astfel încât să putem implementa clicurile de butoane în Java. De asemenea, va trebui să adăugați următoarele în fișierul dvs. Strings XML, pe care ar trebui să-l găsiți în directorul "res / values" al aplicației:
Galerie Web App
În clasa Activitate aplicație, modificați linia de declarație a clasei de deschidere pentru a implementa ascultătorii de clic după cum urmează:
clasa publică PictureViewerActivity se extinde Activitatea implementează OnClickListener
Modificați numele clasei pentru a se potrivi cu dvs. Acum adăugați următoarele în declarația de clasă, înainte de metoda "onCreate":
privat WebView picView;
Metoda "onCreate" ar trebui să fie deja acolo, dar dacă nu o adăugați după cum urmează:
@Override publice void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.main);
Acesta este codul standard pentru a crea Activitatea. În interiorul acestei metode, după codul existent, preluați o referință la WebView și modificați culoarea afișajului după cum urmează:
picView = (WebView) findViewById (R.p.pic_view); picView.setBackgroundColor (0);
Acest lucru ne va permite să încărcăm imagini în WebView în timp ce aplicația rulează. WebView afișează în mod implicit un fundal alb, pe care îl suprascriu aici. După metoda "onCreate", încă în declarația de clasă, adăugați schița metodei "onClick" după cum urmează:
public void onClick (Vizualizare v)
Vom adăuga codul pentru a face față fiecărui buton în interiorul acestei metode.
Să începem prin a permite utilizatorului să încarce o imagine din Galerie pe propriul dispozitiv. Mai întâi, adăugați o variabilă de instanță în declarația de clasă, dar înainte de metoda "onCreate":
finală privată int IMG_PICK = 1;
Acest lucru ne va permite să răspundem la returnarea utilizatorului din Galerie după alegerea unei imagini. În cadrul metodei "onCreate", după codul existent adăugați următoarele pentru a prelua o trimitere la butonul "pick" și a atribui un ascultător de clic:
Butonul pickBtn = (buton) findViewById (R.id.pick_btn); pickBtn.setOnClickListener (aceasta);
Acum putem răspunde la clicurile pe butoane. În cadrul metodei "onClick", adăugați următoarele:
dacă (v.getId () == R.id.pick_btn) Intenție pickIntent = intenție nouă (); pickIntent.setType ( "image / *"); pickIntent.setAction (Intent.ACTION_GET_CONTENT); // vom gestiona datele returnate în onActivityResult startActivityForResult (Intent.createChooser (pickIntent, "Select Picture"), IMG_PICK);
Aceasta va duce utilizatorul la o altă aplicație pentru a selecta o imagine. În funcție de aplicațiile pe care le-au instalat, ar putea fi necesar să selectați o aplicație dintr-o listă. De exemplu, pe dispozitivul meu primesc două opțiuni la apăsarea butonului "alege":
Când utilizatorul alege o imagine, ei se vor întoarce la aplicație, iar metoda "onActivityResult" va declanșa focalizarea. Adăugați-o în declarația de clasă după cum urmează:
protejat void onActivityResult (int requestCode, int resultCode, date intelect) if (resultCode == RESULT_OK)
În interiorul instrucțiunii "if", adăugați următoarele pentru a verifica dacă utilizatorul se întoarce din intenția pe care am pornit-o pentru a alege o imagine:
dacă (requestCode == IMG_PICK)
În această declarație "if", putem prelua datele returnate din aplicația Galerie, care va fi URI-ul imaginii pe care utilizatorul le-a ales:
Uri selectatUri = data.getData ();
Vom construi un șir reprezentând calea pentru imagine, pe care trebuie să o încărcăm în WebView. Folosim aceeași tehnică explorată mai detaliat în Afișarea imaginilor cu o galerie îmbunătățită. Adăugați următorul cod:
String imagePath = ""; String [] imgData = MediaStore.Images.Media.DATA; Cursor imgCursor = managedQuery (selectateUri, imgData, null, null, null); dacă (imgCursor! = null) int index = imgCursor.getColumnIndexOrThrow (MediaStore.Images.Media.DATA); imgCursor.moveToFirst (); imagePath = imgCursor.getString (index); altceva imagePath = pickedUri.getPath ();
Acum avem o referință la locația imaginii și o putem încărca în WebView:
picView.loadUrl ( "file: ///" + ImagePath);
Puteți rula aplicația acum pentru a testa încărcarea imaginii Gallery - este posibil să fie necesar să o executați pe un dispozitiv real, deoarece emulatorul nu are în mod obișnuit imagini stocate pe ea.
Înainte de a explora opțiunile de configurare pentru WebView, vom analiza încărcarea de pe Web și din directorul de aplicații.
Acum, pentru o opțiune mai simplă. Pentru a încărca o imagine de pe Web, avem nevoie pur și simplu de URL-ul. Mai întâi, înapoi în metoda "onCreate", puneți clic pe butonul "încărcare" după cum urmează:
Butonul loadBtn = (butonul) findViewById (R.id.load_btn); loadBtn.setOnClickListener (aceasta);
În metoda "onClick", după instrucțiunea "if" în care am tratat butonul "pick", adăugați următoarele, modificând-o astfel încât să se potrivească propriei dvs. adrese URL imagine:
Accentsconagua
altfel dacă (v.getId () == R.id.load_btn) picView.loadUrl ("http://developer.android.com/images/brand/google_play_logo_450.png"); Aici pur și simplu încărcăm una dintre resursele de imagine Google Play pentru demonstrație, dar, desigur, o puteți modifica pentru a reflecta o imagine pe care o alegeți. Dacă doriți ca utilizatorul să introducă imaginea aleasă, puteți adăuga un câmp text editabil pentru a captura acest lucru. Imaginea se va încărca furnizând dispozitivul o conexiune de internet funcțională:
Este posibil să aveți imagini în pachetul de aplicații pe care doriți să le afișați într-un WebView. Vom explora două modalități posibile de a realiza acest lucru. Mai întâi, înapoi în metoda "onCreate", faceți clic pe butoanele butoanelor:
Butonul appBtn = (buton) findViewById (R.id.app_btn); appBtn.setOnClickListener (aceasta);
Adăugați o altă ramură la instrucțiunile "if" și "else" în metoda "onClick" după cum urmează:
altfel dacă (v.getId () == R.id.app_btn)
Pentru a afișa numai o imagine în WebView, puteți să specificați adresa URL:
picView.loadUrl ( "images_22 / image-display și interacțiunea cu-android-webviews.jpg");
Încărcarea unui fișier imagine JPEG stocat în folderul "active" al aplicației și numit "mypicture.jpg".
WebView este conceput în mod natural pentru a afișa conținutul HTML, astfel încât este posibil să doriți să afișați imaginea ca element "img" HTML împreună cu alte marcări Web. Pentru a face acest lucru, puteți salva un fișier HTML în dosarul "active" al aplicației cu un element "img" în el, de exemplu:
Puteți include un alt conținut HTML în acest fișier dacă doriți să fie afișat în WebView împreună cu imaginea. Pentru a încărca HTML, modificați linia "loadURL" după cum urmează:
picView.loadUrl ( "fișier: ///android_asset/imagepage.html");
Acest lucru funcționează pentru un fișier HTML salvat ca "imagepage.html" în dosarul "active", astfel încât acesta să fie modificat pentru a se potrivi cu numele propriului fișier. Acest cod este tot ceea ce aveți nevoie pentru a încărca imaginea în fișierul HTML.
Puteți seta câteva detalii despre modul în care utilizatorul interacționează cu imaginea dvs. în interiorul WebView din codul Activitate Java. În metoda "onCreate", după codul ascultătorului butonului, adăugați următoarele:
. PicView.getSettings () setBuiltInZoomControls (true); . PicView.getSettings () setUseWideViewPort (true);
Aceasta instruiește aplicația să utilizeze comenzile de zoom standard și portul panoramic pentru WebView. Există și alte opțiuni pe care le puteți explora aici, cum ar fi setarea nivelului implicit de mărire. Acum, atunci când utilizatorul interacționează cu WebView-ul dvs., acesta poate să atingă dublu-ul și să-l prindă pentru a mări, precum și cu ajutorul butoanelor și alunecare pentru derulare / panoramare:
Utilizarea resurselor implicite Android, cum ar fi WebView, vă permite să exploatați rapid modelele de interacțiune cu care vor fi familiarizați utilizatorii dvs., precum și să vă concentrați asupra aspectelor unice ale aplicațiilor dvs. WebView redă pagini HTML, astfel încât să puteți îmbunătăți și aplicațiile utilizând tehnologii Web precum CSS și JavaScript. După cum puteți vedea din exemplul de mai sus, puteți integra în mod eficient WebView cu alte elemente UI Android.
