Share
I denne veiledningen vil vi arbeide gjennom det grunnleggende om å bruke en WebView til å vise bilder i appen din, konfigurere de automatiserte samspillskontrollene fra din Java-kode. Vi vil også utforske ulike alternativer for å importere bilder til en WebView, inkludert lasting av bilder fra web-steder, fra enhetens galleri, og fra appens katalogstruktur.
Hvis du ikke allerede har en app du jobber med, start et nytt Android-prosjekt i Eclipse. I appens hovedaktivitetsklasse eller hvilken aktivitet du vil vise bilder i, legg til følgende importopplysninger før åpningslinjen for klassedeklarasjon:
importer android.app.Activity; importer android.content.Intent; importer android.database.Cursor; importer android.net.Uri; importere android.os.Bundle; importer android.provider.MediaStore; importer android.view.View; importer android.view.View.OnClickListener; importer android.webkit.WebView; importer android.widget.Button;
Du trenger kanskje ikke alle disse, avhengig av hvordan du planlegger å laste bildene dine. Hvis du planlegger å laste bildene dine over nettet, må du legge til Internett-tillatelse til prosjektet Manifest. Åpne manifestet og legg til følgende linje hvor som helst i det overordnede "manifest" -elementet:
Vi skal bruke en enkelt WebView i en lineær layout for å utforske visning av bilder. Inne i prosjektets hoved XML-layoutfil, eller hvilken som du vil bruke for den aktuelle aktiviteten, legg til følgende layoutoversikt:
Inne i denne hovedlinjære layouten legger du først WebView-en på følgende måte:
Vi bruker ID-attributtet til å identifisere WebView i Java. Siden utformingen skal inkludere andre elementer, spesifiserer vi en vekt sammen med de generelle layoutegenskapene. For å demonstrere å laste bildene fra tre forskjellige steder, skal vi også legge til tre knapper. Hvis du bare planlegger å bruke en av lastingsmetodene, kan du gjerne endre dette. Etter at WebView, fremdeles inne i hovedlinjærlayouten, legger til følgende ekstra linjær layout:
Her inkluderer vi tre knapper inne i en annen Lineær Layout, med ID-attributter, slik at vi kan implementere knappeklikk i Java. Du må også legge til følgende i Strings XML-filen, som du bør finne i appens "res / values" -katalog:
Galleri web app
I din aktivitetsklasse for app, endrer du åpningsklassens deklarasjonslinje for å implementere klikklyttere som følger:
offentlig klasse PictureViewerActivity utvider Aktivitetsredskaper OnClickListener
Endre klassenavnet slik at det passer deg selv. Legg nå følgende i klassedeklarasjonen, før "onCreate" -metoden:
privat WebView picView;
Din "onCreate" -metode burde allerede være der, men hvis du ikke legger til den som følger:
@Override public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.main);
Dette er standardkode for å opprette aktiviteten. Inne i denne metoden, etter den eksisterende koden, hente en referanse til WebView og endre visningsfargen som følger:
picView = (WebView) findViewById (R.id.pic_view); picView.setBackgroundColor (0);
Dette vil tillate oss å laste bilder inn i WebView mens appen kjører. WebView viser som standard en hvit bakgrunn, som vi overstyrer her. Etter at "onCreate" -metoden, fortsatt inne i klassedeklarasjonen, legger du til oversikten over "onClick" -metoden som følger:
offentlig ugyldig onClick (Vis v)
Vi legger til kode for å håndtere hver knapp, klikk inne i denne metoden.
La oss begynne med å la brukeren laste et bilde fra galleriet på egen enhet. Først legger du til en instansvariabel i klassedeklarasjonen din, men før "onCreate" -metoden:
privat endelig int IMG_PICK = 1;
Dette vil tillate oss å svare på brukeren som kommer tilbake fra Galleri etter å ha valgt et bilde. Inne i "onCreate" -metoden, etter den eksisterende koden, legger du til følgende for å hente en referanse til "velg" -knappen og tilordne en klikklytter til den:
Button pickBtn = (Button) findViewById (R.id.pick_btn); pickBtn.setOnClickListener (this);
Nå kan vi svare på knappeklikk. I tillegg til "onClick" -metoden legger du til følgende:
hvis (v.getId () == R.id.pick_btn) Intent pickIntent = new Intent (); pickIntent.setType ( "image / *"); pickIntent.setAction (Intent.ACTION_GET_CONTENT); // vi vil håndtere de returnerte dataene i onActivityResult startActivityForResult (Intent.createChooser (pickIntent, "Select Picture"), IMG_PICK);
Dette vil ta brukeren til et annet program for å velge et bilde. Avhengig av hvilke apper de har installert, kan de kanskje velge en app fra en liste. For eksempel, på min enhet får jeg to valg ved å trykke på "velg" -knappen:
Når brukeren velger et bilde, kommer de tilbake til appen og "onActivityResult" -metoden vil brann. Legg det til klassedeklarasjonen din som følger:
beskyttet ugyldig onActivityResult (int requestCode, int resultCode, Intent data) hvis (resultCode == RESULT_OK)
Inne i "if" -oppgaven legger du til følgende for å sjekke at brukeren kommer tilbake fra hensikten vi begynte for dem å velge et bilde:
hvis (requestCode == IMG_PICK)
Innenfor denne "if" -oppstillingen kan vi hente dataene som returneres fra Galleri-appen, som vil være URI av bildet brukeren plukket:
Uri pickedUri = data.getData ();
Vi vil bygge en streng som representerer banen for bildet, som vi trenger for å laste bildet inn i WebView. Vi bruker den samme teknikken som er utforsket mer detaljert i Vise bilder med et forbedret galleri. Legg til følgende kode:
String imagePath = ""; String [] imgData = MediaStore.Images.Media.DATA; Markør imgCursor = managedQuery (plukketUri, imgData, null, null, null); hvis (imgCursor! = null) int index = imgCursor.getColumnIndexOrThrow (MediaStore.Images.Media.DATA); imgCursor.moveToFirst (); imagePath = imgCursor.getString (indeks); else imagePath = pickedUri.getPath ();
Nå har vi en referanse til bildeplasseringen og kan laste den inn i WebView:
picView.loadUrl ( "file: ///" + ImagePath);
Du kan kjøre appen din nå for å teste den for å laste inn Galleri-bildet - det kan hende du må kjøre det på en faktisk enhet, da emulatoren vanligvis ikke har bilder lagret på den.
Deretter behandler vi lasting fra nettet og appkatalogen før du undersøker konfigurasjonsalternativer for WebView.
Nå for et enklere alternativ. For å laste et bilde fra nettet trenger vi bare nettadressen. Først, tilbake i "onCreate" -metoden, implementer knappen klikker på "load" -knappen din som følger:
Button loadBtn = (Button) findViewById (R.id.load_btn); loadBtn.setOnClickListener (this);
I "onClick" -metoden, etter "if" -oppgaven der vi håndterte "pek" -knappen, legger du til følgende og endrer den slik at den passer til din egen bildeadresse:
Accentsconagua
ellers hvis (v.getId () == R.id.load_btn) picView.loadUrl ("http://developer.android.com/images/brand/google_play_logo_450.png"); Her laster vi bare et av Android Google Play-bilderessursene til demonstrasjon, men du kan selvfølgelig endre det til å gjenspeile et bilde av ditt valg. Hvis du vil at brukeren skal skrive inn sitt valgte bilde, kan du legge til et redigerbart tekstfelt for å fange dette. Bildet lastes inn under at enheten har en fungerende Internett-tilkobling:
Du kan ha bilder i din programpakke som du vil vise i en WebView. Vi vil utforske to mulige måter å oppnå dette på. Først, tilbake i "onCreate" -metoden, håndterer knappeklikk:
Knapp appBtn = (Button) findViewById (R.id.app_btn); appBtn.setOnClickListener (this);
Legg til en annen gren til "if" og "else" -sagnene i "onClick" -metoden som følger:
ellers hvis (v.getId () == R.id.app_btn)
Hvis du bare vil vise et bilde i WebView, kan du bare angi nettadressen:
picView.loadUrl ( "images_22 / bilde-display-og-interaksjon-med-android-webviews.jpg");
Dette laster en JPEG-bildefil som er lagret i appens "assets" -mappe og heter "mypicture.jpg".
WebView er naturlig utformet for å vise HTML-innhold, så du kan ønske å vise bildet som et HTML "img" -element sammen med andre webmarkeringer. For å gjøre det kan du lagre en HTML-fil i appens "assets" -mappe med et "img" -element inni det, for eksempel:
Du kan inkludere annet HTML-innhold i denne filen hvis du vil at den skal vises i WebView sammen med bildet. For å laste HTML-koden, endre linjen "loadURL" på følgende måte:
picView.loadUrl ( "file: ///android_asset/imagepage.html");
Dette fungerer for en HTML-fil lagret som "imagepage.html" i "assets" -mappen, så endre den slik at den passer til navnet på din egen fil. Denne koden er alt du trenger for å laste bildet i HTML-filen.
Du kan angi noen detaljer om hvordan brukeren samhandler med bildet ditt inne i WebView fra Java Aktivitetskoden. I "onCreate" -metoden, legger du til følgende etter tastelyttekoden:
. PicView.getSettings () setBuiltInZoomControls (true); . PicView.getSettings () setUseWideViewPort (true);
Dette instruerer appen til å bruke standardzoomkontrollene og den brede visningsporten for WebView. Det finnes andre alternativer du kan utforske her, for eksempel å angi standard zoomnivå. Nå når brukeren samhandler med WebView, kan de dobbeltklikke og klemme for å zoome, samt bruke knappene og skyve for å bla / panorere:
Bruk av standard Android-ressurser som WebView gjør at du raskt kan utnytte samhandlingsmodeller som brukerne dine allerede er kjent med, samt lar deg fokusere på de unike aspektene av applikasjonene dine. WebView gjør HTML-sider, slik at du også kan forbedre appene dine ved å bruke webteknologier som CSS og JavaScript. Som du kan se fra eksempelet ovenfor, kan du effektivt integrere WebView med andre Android-brukergrensesnitt.
