Share
In deze zelfstudie zullen we de basisprincipes van het gebruik van een WebView doornemen om afbeeldingen in uw app weer te geven en de geautomatiseerde interactiebesturingselementen vanuit uw Java-code configureren. We zullen ook verschillende opties onderzoeken voor het importeren van afbeeldingen in een WebView, inclusief het laden van afbeeldingen van weblocaties, vanuit de apparaatgalerij en vanuit de directorystructuur van de app.
Als u nog geen app hebt waarmee u werkt, start u een nieuw Android-project in Eclipse. In de belangrijkste activiteitsklasse van uw app, of in een andere activiteit waarin u afbeeldingen wilt weergeven, voegt u de volgende importinstructies toe vóór de openingszin van uw klassedatum:
import android.app.Activity; importeer android.content.Intent; import android.database.Cursor; import android.net.Uri; import android.os.Bundle; importeer android.provider.MediaStore; import android.view.View; import android.view.View.OnClickListener; importeer android.webkit.WebView; importeer android.widget.Button;
Mogelijk hebt u deze niet allemaal nodig, afhankelijk van hoe u uw afbeeldingen wilt laden. Als u van plan bent uw afbeeldingen over het web te laden, moet u internetrechten toevoegen aan uw projectmanifest. Open het manifest en voeg de volgende regel ergens toe binnen het bovenliggende "manifest" -element:
We gaan één WebView gebruiken in een lineaire lay-out om te onderzoeken hoe afbeeldingen worden weergegeven. In het XML-lay-outbestand van uw project, of welke u ook voor de betreffende activiteit wilt gebruiken, voegt u de volgende lay-outopmaak toe:
In deze hoofdlay-out voegt u eerst uw WebView toe als volgt:
We zullen het ID-kenmerk gebruiken om de WebView in Java te identificeren. Omdat de lay-out andere elementen zal bevatten, specificeren we een gewicht samen met de algemene lay-outeigenschappen. Om aan te geven dat de afbeeldingen vanaf drie verschillende locaties moeten worden geladen, gaan we ook drie knoppen toevoegen. Als u alleen van plan bent om een van de laadmethoden te gebruiken, kunt u dit wijzigen. Na WebView, nog steeds in de hoofdlay-out, voegt u de volgende extra lineaire lay-out toe:
Hier voegen we drie knoppen toe aan een tweede lineaire lay-out, met ID-kenmerken zodat we knopklikken in Java kunnen implementeren. U moet ook het volgende toevoegen aan uw Strings XML-bestand, dat u moet vinden in de map "res / values" van de app:
Galerij Web App
Wijzig in de Activiteitsklasse van uw app uw openingsklasse-declaratieregel om klik luisteraars als volgt te implementeren:
public class PictureViewerActivity breidt activiteiten uit OnClickListener
Verander de klassenaam die bij u past. Voeg nu het volgende toe aan de klassendeclaratie, vóór de methode "onCreate":
privé WebView picView;
Uw "onCreate" -methode zou er al moeten zijn, maar als deze niet als volgt wordt toegevoegd:
@Override public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.main);
Dit is een standaardcode om de activiteit te maken. Binnen deze methode haalt u na de bestaande code een verwijzing naar uw WebView op en wijzigt u de weergavekleur als volgt:
picView = (WebView) findViewById (R.id.pic_view); picView.setBackgroundColor (0);
Hiermee kunnen we afbeeldingen laden in WebView terwijl de app wordt uitgevoerd. De WebView wordt standaard weergegeven met een witte achtergrond, die we hier terzijde schuiven. Na de methode "onCreate", nog steeds in de klasseverklaring, voegt u de omtrek van uw "onClick" -methode als volgt toe:
openbare ongeldig onClick (View v)
We zullen code toevoegen om elke knopklik binnen deze methode te verwerken.
Laten we beginnen door de gebruiker toe te staan een afbeelding van de galerij op zijn eigen apparaat te laden. Voeg eerst een instantievariabele toe aan uw klassedeclaratie, maar vóór de methode "onCreate":
private finale int IMG_PICK = 1;
Hierdoor kunnen we reageren op de gebruiker die terugkeert uit de Galerij nadat hij een afbeelding heeft gekozen. Gebruik binnen de methode "onCreate", na de bestaande code, het volgende om een verwijzing naar de knop "picken" op te halen en hieraan een kliklistener toe te wijzen:
Button pickBtn = (Button) findViewById (R.id.pick_btn); pickBtn.setOnClickListener (deze);
Nu kunnen we reageren op knopklikken. Voeg binnen de "onClick" -methode het volgende toe:
if (v.getId () == R.id.pick_btn) Intent pickIntent = new Intent (); pickIntent.setType ( "image / *"); pickIntent.setAction (Intent.ACTION_GET_CONTENT); // we zullen de geretourneerde gegevens afhandelen in onActivityResult startActivityForResult (Intent.createChooser (pickIntent, "Select Picture"), IMG_PICK);
Hierdoor gaat de gebruiker naar een andere applicatie om een afbeelding te selecteren. Afhankelijk van de apps die ze hebben geïnstalleerd, moeten ze mogelijk een app uit een lijst selecteren. Op mijn apparaat krijg ik bijvoorbeeld twee keuzes bij het indrukken van de knop "kiezen":
Wanneer de gebruiker een afbeelding kiest, keren deze terug naar de app en wordt de methode "onActivityResult" geactiveerd. Voeg het als volgt toe aan uw klassenverklaring:
protected void onActivityResult (int requestCode, int resultCode, Intent data) if (resultCode == RESULT_OK)
Voeg in de "if" -instructie het volgende toe om te controleren of de gebruiker terugkeert van de Intent waarmee we begonnen om een afbeelding te kiezen:
if (requestCode == IMG_PICK)
Binnen deze 'als'-verklaring kunnen we de gegevens ophalen die worden geretourneerd door de app Galerij, die de URI is van de door de gebruiker gekozen afbeelding:
Uri pickedUri = data.getData ();
We zullen een string maken die het pad voor de afbeelding vertegenwoordigt, die we nodig hebben om de afbeelding in WebView te laden. We gebruiken dezelfde techniek die we gedetailleerder hebben onderzocht in Afbeeldingen weergeven met een verbeterde galerij. Voeg de volgende code toe:
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 ();
Nu hebben we een verwijzing naar de afbeeldingslocatie en kunnen deze in de WebView laden:
picView.loadUrl ( "file: ///" + ImagePath);
U kunt uw app nu uitvoeren om te testen hoe de galerijafbeelding wordt geladen. Mogelijk moet u deze op een daadwerkelijk apparaat uitvoeren, omdat de emulator normaal gesproken geen afbeeldingen op de app heeft opgeslagen.
Vervolgens zullen we laden vanaf het web en de app-map afhandelen, voordat we de configuratie-opties voor WebView gaan verkennen.
Nu voor een eenvoudiger optie. Om een afbeelding van internet te laden, hebben we gewoon de URL nodig. Begin, terug in de "onCreate" -methode, implementeer knopklikken op uw "load" -knop als volgt:
Knop loadBtn = (Knop) findViewById (R.id.load_btn); loadBtn.setOnClickListener (deze);
Gebruik in de "onClick" -methode, na de "if" -instructie waarin we de "pick" -knop hebben behandeld, het volgende en pas het aan aan uw eigen afbeelding-URL:
Accentsconagua
else if (v.getId () == R.id.load_btn) picView.loadUrl ("http://developer.android.com/images/brand/google_play_logo_450.png"); Hier laden we eenvoudigweg een van de Android Google Play-beeldbronnen in voor demonstratie, maar u kunt deze natuurlijk wijzigen om een afbeelding van uw keuze weer te geven. Als u wilt dat de gebruiker de gekozen afbeelding invoert, kunt u een bewerkbaar tekstveld toevoegen om dit vast te leggen. De afbeelding wordt geladen als het apparaat een werkende internetverbinding heeft:
Mogelijk hebt u afbeeldingen in uw toepassingspakket die u in een WebView wilt weergeven. We zullen twee mogelijke manieren onderzoeken om dit te bereiken. Begin, terug in uw "onCreate" -methode, met klikken op de knop:
Knop appBtn = (Knop) findViewById (R.id.app_btn); appBtn.setOnClickListener (deze);
Voeg als volgt een andere branch toe aan de "if" - en "else" -instructies in uw "onClick" -methode:
else if (v.getId () == R.id.app_btn)
Als u alleen een afbeelding in WebView wilt weergeven, kunt u eenvoudig de bijbehorende URL opgeven:
picView.loadUrl ( "images_22 / beeldweergevende-en-interactie-with-android-webviews.jpg");
Hiermee wordt een JPEG-afbeeldingbestand geladen dat is opgeslagen in de map "assets" van de app en de naam "mypicture.jpg".
De WebView is natuurlijk ontworpen om HTML-inhoud weer te geven, dus misschien wilt u de afbeelding weergeven als een HTML "img" -element samen met andere Web-markeringen. Om dit te doen, kunt u een HTML-bestand opslaan in de map "assets" van de app met een "img" -element erin, bijvoorbeeld:
U kunt in dit bestand andere HTML-inhoud opnemen als u deze samen met de afbeelding in uw WebView wilt weergeven. Om de HTML te laden, wijzigt u de regel "loadURL" als volgt:
picView.loadUrl ( "file: ///android_asset/imagepage.html");
Dit werkt voor een HTML-bestand opgeslagen als "imagepage.html" in de map "assets", dus verander het naar de naam van uw eigen bestand. Deze code is alles wat je nodig hebt om de afbeelding in het HTML-bestand te laden.
U kunt enkele details instellen over hoe de gebruiker met uw afbeelding binnen WebView omgaat met uw Java-activiteitscode. Voer in de methode "onCreate", na uw listenercode voor de knop, het volgende in:
. PicView.getSettings () setBuiltInZoomControls (true); . PicView.getSettings () setUseWideViewPort (true);
Hiermee geeft u de app opdracht om de standaardzoomknoppen en de brede weergavepoort voor uw WebView te gebruiken. Er zijn nog andere opties die u hier kunt verkennen, zoals het instellen van het standaard zoomniveau. Wanneer de gebruiker nu met uw WebView communiceert, kunnen ze dubbel tikken en knijpen om in te zoomen, maar ook met behulp van de knoppen en schuiven om te scrollen / pannen:
Door gebruik te maken van standaard Android-bronnen, zoals de WebView, kunt u snel gebruikmaken van interactiemodellen die al bekend zijn bij uw gebruikers, en kunt u zich concentreren op de unieke aspecten van uw toepassingen. De WebView rendert HTML-pagina's, dus u kunt uw apps ook verbeteren met behulp van webtechnologieën zoals CSS en JavaScript. Zoals u kunt zien aan de hand van het bovenstaande voorbeeld, kunt u de WebView effectief integreren met andere Android UI-items.
