Share
In diesem Lernprogramm werden die Grundlagen der Verwendung von WebView zum Anzeigen von Bildern in Ihrer App erläutert. Dabei werden die Steuerelemente für die automatisierte Interaktion in Ihrem Java-Code konfiguriert. Wir werden außerdem verschiedene Optionen zum Importieren von Bildern in eine WebView erkunden, einschließlich des Ladens von Bildern von Web-Standorten, aus der Gerätegalerie und aus der Verzeichnisstruktur der App.
Wenn Sie noch keine App haben, mit der Sie arbeiten, starten Sie ein neues Android-Projekt in Eclipse. Fügen Sie in der Hauptaktivitätsklasse Ihrer App oder in welcher Aktivität Sie Bilder anzeigen möchten, die folgenden Importanweisungen vor der Eröffnungszeile der Klassendeklaration hinzu:
import android.app.Activity; import android.content.Intent; import android.database.Cursor; import android.net.Uri; import android.os.Bundle; import android.provider.MediaStore; Import android.view.View; import android.view.View.OnClickListener; import android.webkit.WebView; import android.widget.Button;
Abhängig davon, wie Sie Ihre Bilder laden möchten, benötigen Sie möglicherweise nicht alle. Wenn Sie Ihre Bilder über das Web laden möchten, müssen Sie Ihrem Projektmanifest die Internet-Berechtigung hinzufügen. Öffnen Sie das Manifest und fügen Sie die folgende Zeile an einer beliebigen Stelle im übergeordneten Element "manifest" ein:
Wir werden eine einzige WebView in einem linearen Layout verwenden, um die Anzeige von Bildern zu erkunden. Fügen Sie in der Haupt-XML-Layoutdatei Ihres Projekts oder in der von Ihnen gewünschten Aktivität für die betreffende Aktivität die folgende Layout-Gliederung hinzu:
Fügen Sie in diesem Hauptlinearen Layout zuerst Ihr WebView hinzu:
Wir verwenden das ID-Attribut, um die WebView in Java zu identifizieren. Da das Layout andere Elemente enthalten wird, legen wir zusammen mit den allgemeinen Layout-Eigenschaften eine Gewichtung fest. Um das Laden der Bilder von drei verschiedenen Orten aus zu demonstrieren, fügen wir drei Schaltflächen hinzu. Wenn Sie nur eine der Lademethoden verwenden möchten, können Sie dies jederzeit ändern. Fügen Sie nach der WebView immer noch im linearen Hauptlayout das folgende zusätzliche lineare Layout hinzu:
Hier haben wir drei Schaltflächen in einem zweiten linearen Layout mit ID-Attributen, sodass wir Schaltflächenklicks in Java implementieren können. Sie müssen der XML-Strings-Datei außerdem Folgendes hinzufügen, die Sie im Verzeichnis "res / values" der App finden sollten:
Galerie Netz App
Ändern Sie in Ihrer App-Aktivitätsklasse Ihre Eröffnungsklassendeklarationszeile, um Klicklistener folgendermaßen zu implementieren:
public class PictureViewerActivity erweitert Activity implementiert OnClickListener
Ändern Sie den Klassennamen nach Ihren Wünschen. Fügen Sie nun in der Klassendeklaration vor der Methode "onCreate" Folgendes hinzu:
private WebView picView;
Ihre "onCreate" -Methode sollte bereits vorhanden sein, aber fügen Sie sie wie folgt hinzu:
@Override public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.main);
Dies ist der Standardcode zum Erstellen der Aktivität. Rufen Sie in dieser Methode nach dem vorhandenen Code einen Verweis auf Ihr WebView ab und ändern Sie die Anzeigefarbe wie folgt:
picView = (WebView) findViewById (R.id.pic_view); picView.setBackgroundColor (0);
Dies ermöglicht es uns, Bilder während der Ausführung der App in das WebView zu laden. Das WebView wird standardmäßig mit einem weißen Hintergrund angezeigt, den wir hier überschreiben. Fügen Sie nach der "onCreate" -Methode, die sich noch in der Klassendeklaration befindet, die Gliederung Ihrer "onClick" -Methode wie folgt hinzu:
public void onClick (Ansicht v)
Wir werden Code hinzufügen, um mit jedem Klicken auf diese Schaltfläche umzugehen.
Beginnen wir damit, dass der Benutzer ein Bild aus der Galerie auf sein eigenes Gerät laden kann. Fügen Sie zunächst eine Instanzvariable in Ihre Klassendeklaration ein, jedoch vor der Methode "onCreate":
private final int IMG_PICK = 1;
Dadurch können wir auf den Benutzer reagieren, der nach der Auswahl eines Bildes aus der Galerie zurückkehrt. Fügen Sie in der Methode "onCreate" nach dem vorhandenen Code Folgendes hinzu, um einen Verweis auf die Schaltfläche "pick" abzurufen, und weisen Sie ihm einen Klicklistener zu:
Schaltfläche pickBtn = (Schaltfläche) findViewById (R.id.pick_btn); pickBtn.setOnClickListener (this);
Jetzt können wir auf Tastenklicks reagieren. Fügen Sie in der "onClick" -Methode Folgendes hinzu:
Accentsconagua
if (v.getId () == R.id.pick_btn) Intent pickIntent = new Intent (); pickIntent.setType ("image / *"); pickIntent.setAction (Intent.ACTION_GET_CONTENT); // wir behandeln die zurückgegebenen Daten in onActivityResult startActivityForResult (Intent.createChooser (pickIntent, "Select Picture"), IMG_PICK); Dadurch gelangt der Benutzer zu einer anderen Anwendung, um ein Bild auszuwählen. Abhängig von den installierten Apps müssen sie möglicherweise eine App aus einer Liste auswählen. Auf meinem Gerät erhalte ich zum Beispiel zwei Optionen, wenn Sie auf die Schaltfläche "Auswählen" drücken:
Wenn der Benutzer ein Bild auswählt, kehrt er zur App zurück und die "onActivityResult" -Methode wird ausgelöst. Fügen Sie es Ihrer Klassendeklaration wie folgt hinzu:
geschützt void onActivityResult (int requestCode, int resultCode, Intent-Daten) if (resultCode == RESULT_OK)
Fügen Sie in der "if" -Anweisung Folgendes hinzu, um zu überprüfen, ob der Benutzer aus der von uns begonnenen Absicht zurückkehrt, damit er ein Bild auswählen kann:
if (requestCode == IMG_PICK)
In dieser "if" -Anweisung können wir die von der Galerie-App zurückgegebenen Daten abrufen. Dies ist der URI des vom Benutzer ausgewählten Bildes:
Uri pickUri = data.getData ();
Wir erstellen einen String, der den Pfad für das Image darstellt, den wir zum Laden des Images in die WebView benötigen. Wir verwenden dieselbe Technik, die im Abschnitt Anzeigen von Bildern mit einer erweiterten Galerie ausführlicher beschrieben wird. Fügen Sie den folgenden Code hinzu:
String imagePath = ""; String [] imgData = MediaStore.Images.Media.DATA; Cursor imgCursor = managedQuery (selectedUri, imgData, null, null, null); if (imgCursor! = null) int index = imgCursor.getColumnIndexOrThrow (MediaStore.Images.Media.DATA); imgCursor.moveToFirst (); imagePath = imgCursor.getString (Index); else imagePath = selectedUri.getPath ();
Jetzt haben wir einen Verweis auf den Image-Speicherort und können ihn in das WebView laden:
picView.loadUrl ("file: ///" + imagePath); Sie können Ihre App jetzt ausführen, um zu testen, ob das Galerie-Bild geladen wird. Möglicherweise müssen Sie sie auf einem tatsächlichen Gerät ausführen, da der Emulator normalerweise keine Bilder enthält.
Als Nächstes behandeln wir das Laden aus dem Web und dem App-Verzeichnis, bevor wir die Konfigurationsoptionen für das WebView untersuchen.
Nun zu einer einfacheren Option. Um ein Bild aus dem Web zu laden, benötigen wir lediglich die URL. Als Erstes implementieren Sie mit der Methode "onCreate" die Schaltfläche "load" wie folgt:
Schaltfläche loadBtn = (Schaltfläche) findViewById (R.id.load_btn); loadBtn.setOnClickListener (this);
Fügen Sie in der "onClick" -Methode nach der "if" -Anweisung, in der wir die Schaltfläche "pick" behandelt haben, Folgendes hinzu, und ändern Sie sie entsprechend Ihrer eigenen Bild-URL:
else if (v.getId () == R.id.load_btn) picView.loadUrl ("http://developer.android.com/images/brand/google_play_logo_450.png"); Hier laden wir einfach eine der Android Google Play-Bildressourcen zur Demonstration, aber Sie können sie natürlich ändern, um ein Bild Ihrer Wahl wiederzugeben. Wenn Sie möchten, dass der Benutzer das gewünschte Bild eingibt, können Sie ein bearbeitbares Textfeld hinzufügen, um dieses Bild aufzunehmen. Das Image wird geladen, sofern das Gerät über eine funktionierende Internetverbindung verfügt:
In Ihrem Anwendungspaket können Bilder enthalten sein, die Sie in einer WebView anzeigen möchten. Wir werden zwei mögliche Wege untersuchen, um dies zu erreichen. Bearbeiten Sie zunächst in Ihrer "onCreate" -Methode die Klicks der Schaltflächen:
Schaltfläche appBtn = (Schaltfläche) findViewById (R.id.app_btn); appBtn.setOnClickListener (this);
Fügen Sie den Anweisungen "if" und "else" in Ihrer "onClick" -Methode einen weiteren Zweig hinzu:
else if (v.getId () == R.id.app_btn)
Um nur ein Bild in der WebView anzuzeigen, können Sie einfach die URL angeben:
picView.loadUrl ("images_22 / image-display-and -action-with-android-webviews.jpg"); Dadurch wird eine JPEG-Bilddatei geladen, die im "Assets" -Ordner der App gespeichert ist und "mypicture.jpg" heißt..
Das WebView ist natürlich für die Anzeige von HTML-Inhalten ausgelegt. Daher möchten Sie das Bild möglicherweise als HTML-Element "img" zusammen mit anderen Web-Markups anzeigen. Dazu können Sie eine HTML-Datei im "Assets" -Ordner der App mit einem "img" -Element speichern, zum Beispiel:
Sie können anderen HTML-Inhalt in diese Datei aufnehmen, wenn er zusammen mit dem Bild in Ihrer WebView angezeigt werden soll. Um das HTML zu laden, ändern Sie die Zeile "loadURL" wie folgt:
picView.loadUrl ("file: ///android_asset/imagepage.html"); Dies funktioniert für eine HTML-Datei, die als "imagepage.html" im "Assets" -Ordner gespeichert wird. Ändern Sie sie daher entsprechend dem Namen Ihrer eigenen Datei. Dieser Code reicht aus, um das Bild in die HTML-Datei zu laden.
Sie können einige Details zur Interaktion des Benutzers mit Ihrem Bild in der WebView über Ihren Java-Aktivitätscode festlegen. Fügen Sie in der "onCreate" -Methode nach dem Code für den Tastenlistener Folgendes hinzu:
picView.getSettings (). setBuiltInZoomControls (true); picView.getSettings (). setUseWideViewPort (true);
Dadurch wird die App angewiesen, die standardmäßigen Zoomsteuerelemente und den Wide View Port für Ihre WebView zu verwenden. Es gibt weitere Optionen, die Sie hier erkunden können, z. B. das Einstellen der Standard-Zoomstufe. Wenn der Benutzer jetzt mit Ihrem WebView interagiert, können Sie doppelt tippen und drücken, um zu zoomen, sowie die Schaltflächen verwenden und zum Scrollen / Verschieben verschieben:
Durch die Verwendung von Android-Standardressourcen wie WebView können Sie schnell Interaktionsmodelle nutzen, mit denen Ihre Benutzer bereits vertraut sind, und Sie können sich auf die einzigartigen Aspekte Ihrer Anwendungen konzentrieren. In WebView werden HTML-Seiten dargestellt, sodass Sie Ihre Apps auch mithilfe von Webtechnologien wie CSS und JavaScript verbessern können. Wie Sie im obigen Beispiel sehen können, können Sie WebView effektiv in andere Elemente der Android-Benutzeroberfläche integrieren.
