Share
I denna handledning kommer vi att arbeta igenom grunderna för att använda en WebView för att visa bilder i din app, konfigurera de automatiska interaktionskontrollerna från din Java-kod. Vi kommer också att utforska olika alternativ för att importera bilder till en WebView, inklusive laddning av bilder från webbplatser, från enhetens galleri och från appens katalogstruktur.
Om du inte redan har en app du jobbar med, starta ett nytt Android-projekt i Eclipse. I din App: s huvudsakliga Aktivitetsklass eller vilken aktivitet du vill visa bilder inom, lägg till följande importansökningar innan din öppningsrad för klassdeklaration:
importera android.app.Activity; importera android.content.Intent; importera android.database.Cursor; importera android.net.Uri; importera android.os.Bundle; importera android.provider.MediaStore; importera android.view.View; importera android.view.View.OnClickListener; importera android.webkit.WebView; importera android.widget.Button;
Du kanske inte behöver alla dessa beroende på hur du planerar att ladda bilderna. Om du planerar att ladda upp dina bilder via webben måste du lägga till Internet-behörighet för ditt projekt Manifest. Öppna manifestet och lägg till följande rad var som helst inom moderen "manifest" -elementet:
Vi ska använda en enda WebView i en linjär layout för att utforska visande bilder. Inuti projektets huvudsakliga XML-layoutfil, eller vilken som du vill använda för aktuell aktivitet, lägg till följande layoutschema:
Inuti denna huvudsakliga linjära layout lägger du först till din WebView enligt följande:
Vi använder ID-attributet för att identifiera WebView i Java. Eftersom layouten ska inkludera andra element, specificerar vi en vikt tillsammans med de allmänna layoutegenskaperna. För att visa bilderna från tre olika ställen kommer vi också att lägga till tre knappar. Om du bara planerar att använda en av belastningsmetoderna, var god och ändra det här. Efter WebView, fortfarande inom huvudlinjär layout, lägg till följande extra linjär layout:
Här inkluderar vi tre knappar inom en andra linjär layout med ID-attribut så att vi kan implementera knapptryckningar i Java. Du måste också lägga till följande i din Strings XML-fil, som du borde hitta i appens "res / values" -katalog:
Galleri webb App
I din app Aktivitetsklass, ändra din öppnings klassens deklarationslinje för att implementera klicka lyssnare enligt följande:
public class PictureViewerActivity utökar Aktivitetsverktyg OnClickListener
Ändra klassnamnet så att det passar ditt eget. Lägg nu till följande i klassdeklarationen, före "onCreate" -metoden:
privat WebView picView;
Din "onCreate" -metod borde redan finnas där, men om du inte lägger till den enligt följande:
@Override public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.main);
Detta är standardkoden för att skapa aktiviteten. Inuti denna metod, efter den befintliga koden, hämta en referens till din WebView och ändra dess bildfärg enligt följande:
picView = (WebView) findViewById (R.id.pic_view); picView.setBackgroundColor (0);
Detta gör att vi kan ladda bilder i WebView medan appen körs. WebView visas som standard med en vit bakgrund, vilket vi övertygar här. Efter "onCreate" -metoden, som fortfarande finns i klassdeklarationen, lägger du till översikten av din "onClick" -metod enligt följande:
offentligt ogiltigt onClick (Visa v)
Vi lägger till kod för att hantera varje knapp, klicka på den här metoden.
Låt oss börja med att låta användaren ladda en bild från galleriet på egen enhet. Lägg först till en instansvariabel i din klassdeklaration, men före "onCreate" -metoden:
privat slutlig int IMG_PICK = 1;
Detta gör att vi kan svara på användaren som återvänder från galleriet efter att ha valt en bild. Inne i "onCreate" -metoden, efter den befintliga koden, lägg till följande för att hämta en referens till "plocka" -knappen och tilldela en klicklarmare till den:
Button pickBtn = (Button) findViewById (R.id.pick_btn); pickBtn.setOnClickListener (detta);
Nu kan vi svara på knappklick. Innehållet "onClick" -metoden lägger till följande:
om (v.getId () == R.id.pick_btn) Intent pickIntent = new Intent (); pickIntent.setType ( "image / *"); pickIntent.setAction (Intent.ACTION_GET_CONTENT); // vi hanterar den returnerade data i onActivityResult startActivityForResult (Intent.createChooser (pickIntent, "Select Picture"), IMG_PICK);
Detta kommer att ta användaren till en annan applikation för att välja en bild. Beroende på vilka appar de har installerat, kan de behöva välja en app från en lista. Till exempel, på min enhet får jag två val på att trycka på "plocka" -knappen:
När användaren väljer en bild kommer de att återvända till appen och metoden "onActivityResult" kommer att elda. Lägg till den i din klassdeklaration enligt följande:
skyddad tomgång onActivityResult (int requestCode, int resultCode, Intent data) om (resultCode == RESULT_OK)
Inne i "if" -satsen lägger du till följande för att kontrollera att användaren återvänder från avsiktet vi började för att de ska välja en bild:
om (requestCode == IMG_PICK)
Inne i det här "if" -förklaringen kan vi hämta data som returneras från Galleri-appen, som kommer att vara URI av bilden som användaren plockade:
Uri pickedUri = data.getData ();
Vi kommer att bygga en sträng som representerar sökvägen för bilden, vilket vi behöver ladda bilden i WebView. Vi använder samma teknik som utforskas närmare i Visa bilder med ett förbättrat galleri. Lägg till följande kod:
String imagePath = ""; String [] imgData = MediaStore.Images.Media.DATA; Markör imgCursor = managedQuery (plockadUri, imgData, null, null, null); om (imgCursor! = null) int index = imgCursor.getColumnIndexOrThrow (MediaStore.Images.Media.DATA); imgCursor.moveToFirst (); imagePath = imgCursor.getString (index); else imagePath = pickedUri.getPath ();
Nu har vi en referens till bildplatsen och kan ladda den till WebView:
picView.loadUrl ( "file: ///" + Imagepath);
Du kan köra din app nu för att testa den för att ladda upp Galleri-bilden - det kan hända att du behöver köra den på en faktisk enhet, eftersom emulatorn normalt inte har bilder lagrade på den.
Därefter hanterar vi lastning från webben och appkatalogen innan du utforskar konfigurationsalternativ för WebView.
Nu för ett enklare alternativ. För att ladda en bild från webben behöver vi helt enkelt webbadressen. Först tillbaka i "onCreate" -metoden, implementera knappen klickar på din "laddning" -knapp enligt följande:
Knapp loadBtn = (Button) findViewById (R.id.load_btn); loadBtn.setOnClickListener (detta);
I "onClick" -metoden, efter "if" -förklaringen där vi hanterade "plocka" -knappen, lägg till följande, ändra det så att det passar din egen bildadress:
Accentsconagua
annars om (v.getId () == R.id.load_btn) picView.loadUrl ("http://developer.android.com/images/brand/google_play_logo_450.png"); Här laddar vi helt enkelt en av Google Play-bildresurserna för demonstration, men du kan naturligtvis ändra den för att återspegla en bild av ditt val. Om du vill att användaren ska ange sin valda bild kan du lägga till ett redigerbart textfält för att fånga det här. Bilden laddas om enheten har en fungerande Internetanslutning:
Du kan ha bilder i ditt applikationspaket som du vill visa i en WebView. Vi kommer att undersöka två möjliga sätt att uppnå detta. Först, tillbaka i din "onCreate" -metod, hantera knapptryck:
Knapp appBtn = (Button) findViewById (R.id.app_btn); appBtn.setOnClickListener (detta);
Lägg till en annan fil i "if" och "else" -sättningarna i din "onClick" -metod enligt följande:
annars om (v.getId () == R.id.app_btn)
Om du bara vill visa en bild i WebView kan du enkelt ange dess webbadress:
picView.loadUrl ( "images_22 / bild-display-och-interaktion-med-android-webviews.jpg");
Detta laddar upp en JPEG-bildfil som lagras i appens "tillgångar" -mapp och heter "mypicture.jpg".
WebView är naturligt utformad för att visa HTML-innehåll, så du kanske vill visa bilden som ett HTML-img-element tillsammans med annan webbmarkering. För att göra det kan du spara en HTML-fil i appens "assets" -mapp med ett "img" -element inuti det, till exempel:
Du kan inkludera annat HTML-innehåll i den här filen om du vill att den ska visas i din WebView tillsammans med bilden. För att ladda HTML-filen, ändra linjen "loadURL" enligt följande:
picView.loadUrl ( "file: ///android_asset/imagepage.html");
Detta fungerar för en HTML-fil som sparas som "imagepage.html" i "assets" -mappen, så ändra den så att den passar namnet på din egen fil. Den här koden är allt du behöver för att ladda bilden i HTML-filen.
Du kan ange några detaljer om hur användaren interagerar med din bild i WebView från din Java Aktivitetskod. I "onCreate" -metoden, lägg till följande:
. PicView.getSettings () setBuiltInZoomControls (true); . PicView.getSettings () setUseWideViewPort (true);
Detta instruerar appen att använda standardzoomkontrollerna och den breda visningsporten för din WebView. Det finns andra alternativ du kan utforska här, till exempel att ställa in standard zoomnivån. Nu när användaren interagerar med din WebView kan de dubbelklicka och nypa för att zooma, samt använda knapparna och glida för att bläddra / panorera:
Med hjälp av standard Android-resurser som WebView kan du snabbt utnyttja interaktionsmodeller som dina användare redan känner till, samt låta dig fokusera på de unika aspekterna av dina applikationer. WebView gör HTML-sidor, så du kan också förbättra dina appar genom att använda webbtekniker som CSS och JavaScript. Som du kan se från ovanstående exempel kan du effektivt integrera WebView med andra Android-användargränssnitt.
