Share
Dans ce didacticiel, nous allons expliquer les bases de l’utilisation de WebView pour afficher des images dans votre application, en configurant les contrôles d’interaction automatisés à partir de votre code Java. Nous explorerons également diverses options pour importer des images dans une vue Web, notamment le chargement d'images à partir d'emplacements Web, de la Galerie de l'appareil et de la structure de répertoires de l'application..
Si vous ne travaillez pas déjà avec une application, démarrez un nouveau projet Android dans Eclipse. Dans la classe d'activité principale de votre application ou dans l'activité dans laquelle vous souhaitez afficher des images, ajoutez les instructions d'importation suivantes avant la ligne d'ouverture de votre déclaration de classe:
importer android.app.Activity; importer android.content.Intent; importer android.database.Cursor; importer android.net.Uri; importer android.os.Bundle; importer android.provider.MediaStore; importer android.view.View; importer android.view.View.OnClickListener; importer android.webkit.WebView; importer android.widget.Button;
Vous n’avez peut-être pas besoin de tous ces éléments, selon la manière dont vous envisagez de charger vos images. Si vous envisagez de charger vos images sur le Web, vous devez ajouter une autorisation Internet à votre manifeste de projet. Ouvrez le manifeste et ajoutez la ligne suivante n'importe où dans l'élément parent "manifeste":
Nous allons utiliser une seule vue Web dans une mise en page linéaire pour explorer l'affichage d'images. Dans le fichier de présentation XML principal de votre projet ou dans celui que vous souhaitez utiliser pour l'activité en question, ajoutez le plan de présentation suivant:
Dans cette disposition linéaire principale, ajoutez d'abord votre WebView comme suit:
Nous allons utiliser l'attribut ID pour identifier WebView en Java. Étant donné que la présentation va inclure d'autres éléments, nous spécifions une pondération ainsi que les propriétés générales de la présentation. Pour illustrer le chargement des images à partir de trois emplacements différents, nous allons également ajouter trois boutons. Si vous envisagez d'utiliser uniquement l'une des méthodes de chargement, n'hésitez pas à le modifier. Après la vue Web, toujours dans la disposition linéaire principale, ajoutez la disposition linéaire supplémentaire suivante:
Ici, nous incluons trois boutons dans une deuxième mise en page linéaire, avec des attributs ID, de manière à pouvoir implémenter des clics de bouton en Java. Vous devrez également ajouter les éléments suivants à votre fichier XML Strings, que vous trouverez dans le répertoire "res / values" de l'application:
Galerie Web App
Dans la classe d'activité de votre application, modifiez votre ligne de déclaration de classe d'ouverture pour implémenter les écouteurs de clic comme suit:
Classe publique PictureViewerActivity extend Activity implémente OnClickListener
Modifiez le nom de la classe en fonction de vos besoins. Maintenant, ajoutez ce qui suit dans la déclaration de classe, avant la méthode "onCreate":
WebView privé picView;
Votre méthode "onCreate" devrait déjà être là, mais sinon, ajoutez-la comme suit:
@Override public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.main);
C'est le code standard pour créer l'activité. Dans cette méthode, après le code existant, récupérez une référence à votre WebView et modifiez sa couleur d'affichage comme suit:
picView = (WebView) findViewById (R.id.pic_view); picView.setBackgroundColor (0);
Cela nous permettra de charger des images dans WebView pendant l'exécution de l'application. La WebView affiche par défaut un arrière-plan blanc, ce que nous allons remplacer ici. Après la méthode "onCreate", toujours dans la déclaration de classe, ajoutez le contour de votre méthode "onClick" comme suit:
vide publique onClick (View v)
Nous allons ajouter du code pour gérer chaque clic de bouton dans cette méthode.
Commençons par permettre à l'utilisateur de charger une image de la Galerie sur son propre appareil. Tout d'abord, ajoutez une variable d'instance dans votre déclaration de classe, mais avant la méthode "onCreate":
finale privée int IMG_PICK = 1;
Cela nous permettra de répondre au retour de l'utilisateur de la Galerie après avoir choisi une image. Dans la méthode "onCreate", après le code existant, ajoutez ce qui suit pour récupérer une référence au bouton "pick" et lui affecter un écouteur de clic:
Bouton pickBtn = (Bouton) findViewById (R.id.pick_btn); pickBtn.setOnClickListener (this);
Nous pouvons maintenant répondre aux clics sur les boutons. Dans la méthode "onClick", ajoutez ce qui suit:
Accentsconagua
if (v.getId () == R.id.pick_btn) Intent pickIntent = new Intent (); pickIntent.setType ("image / *"); pickIntent.setAction (Intent.ACTION_GET_CONTENT); // nous allons gérer les données retournées dans onActivityResult startActivityForResult (Intent.createChooser (pickIntent, "Select Picture"), IMG_PICK); Cela conduira l'utilisateur à une autre application pour sélectionner une image. Selon les applications qu'ils ont installées, ils peuvent avoir besoin de sélectionner une application dans une liste. Par exemple, sur mon appareil, je reçois deux choix en appuyant sur le bouton "Choisir":
Lorsque l'utilisateur choisit une image, il retourne à l'application et la méthode "onActivityResult" se déclenche. Ajoutez-le à votre déclaration de classe comme suit:
onActivityResult void protégé (int requestCode, int resultCode, données d'intention) if (resultCode == RESULT_OK)
Dans l'instruction "if", ajoutez ce qui suit pour vérifier que l'utilisateur revient de l'intention que nous avons commencée pour lui permettre de choisir une image:
if (requestCode == IMG_PICK)
Dans cette instruction "if", nous pouvons récupérer les données renvoyées depuis l'application Gallery, qui seront l'URI de l'image sélectionnée par l'utilisateur:
Uri pickUri = data.getData ();
Nous allons construire une chaîne représentant le chemin d'accès à l'image, dont nous avons besoin pour charger l'image dans la vue Web. Nous utilisons la même technique que celle explorée plus en détail dans Afficher des images avec une galerie améliorée. Ajoutez le code suivant:
String imagePath = ""; String [] imgData = MediaStore.Images.Media.DATA; Curseur 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 = pickUri.getPath ();
Nous avons maintenant une référence à l’emplacement de l’image et nous pouvons la charger dans WebView:
picView.loadUrl ("file: ///" + imagePath); Vous pouvez exécuter votre application maintenant pour la tester en chargeant l'image de la Galerie. Vous devrez peut-être l'exécuter sur un périphérique réel, car les images ne sont normalement pas stockées dans l'émulateur..
Ensuite, nous allons gérer le chargement à partir du Web et du répertoire de l'application, avant d'explorer les options de configuration pour WebView..
Maintenant, pour une option plus simple. Pour charger une image à partir du Web, nous avons simplement besoin de l'URL. Tout d’abord, dans la méthode "onCreate", le bouton "Implémenter" clique sur votre bouton "Charger" comme suit:
Bouton loadBtn = (Button) findViewById (R.id.load_btn); loadBtn.setOnClickListener (this);
Dans la méthode "onClick", après l'instruction "if" dans laquelle nous avons géré le bouton "pick", ajoutez ce qui suit, en le modifiant pour l'adapter à votre propre URL d'image:
else if (v.getId () == R.id.load_btn) picView.loadUrl ("http://developer.android.com/images/brand/google_play_logo_450.png"); Ici, nous chargeons simplement l’une des ressources d’image Android Google Play pour la démonstration, mais vous pouvez bien sûr la modifier pour refléter une image de votre choix. Si vous voulez que l'utilisateur entre l'image choisie, vous pouvez ajouter un champ de texte éditable pour capturer cela. L'image se charge à condition que le périphérique dispose d'une connexion Internet fonctionnelle:
Vous pouvez avoir des images dans votre package d'application que vous souhaitez afficher dans une WebView. Nous allons explorer deux manières possibles d’y parvenir. Tout d’abord, dans votre méthode "onCreate", gérez les clics sur les boutons:
Button appBtn = (Button) findViewById (R.id.app_btn); appBtn.setOnClickListener (this);
Ajoutez une autre branche aux instructions "if" et "else" dans votre méthode "onClick" comme suit:
else if (v.getId () == R.id.app_btn)
Pour afficher uniquement une image dans WebView, vous pouvez simplement spécifier son URL:
picView.loadUrl ("images_22 / image-affichage-et-interaction-avec-android-webviews.jpg"); Cela charge un fichier image JPEG stocké dans le dossier "assets" de l'application et nommé "mypicture.jpg"..
La WebView est naturellement conçue pour afficher du contenu HTML. Vous pouvez donc afficher l’image sous forme d’élément HTML "img" avec d’autres balises Web. Pour ce faire, vous pouvez enregistrer un fichier HTML dans le dossier "assets" de l'application avec un élément "img" à l'intérieur, par exemple:
Vous pouvez inclure un autre contenu HTML dans ce fichier si vous souhaitez qu'il s'affiche dans votre WebView avec l'image. Pour charger le code HTML, modifiez la ligne "loadURL" comme suit:
picView.loadUrl ("fichier: ///android_asset/imagepage.html"); Cela fonctionne pour un fichier HTML enregistré sous le nom "imagepage.html" dans le dossier "assets", donc modifiez-le en fonction du nom de votre propre fichier. Ce code est tout ce dont vous avez besoin pour charger l'image dans le fichier HTML.
Vous pouvez définir certains détails de la manière dont l'utilisateur interagit avec votre image dans WebView à partir de votre code d'activité Java. Dans la méthode "onCreate", après votre code d'écoute de bouton, ajoutez ce qui suit:
picView.getSettings (). setBuiltInZoomControls (true); picView.getSettings (). setUseWideViewPort (true);
Cela indique à l'application d'utiliser les commandes de zoom standard et le port d'affichage large pour votre vue Web. Vous pouvez explorer d'autres options ici, telles que la définition du niveau de zoom par défaut. Désormais, lorsque l'utilisateur interagit avec votre WebView, il peut taper deux fois et pincer pour zoomer, ainsi qu'en utilisant les boutons et en glissant pour faire défiler / déplacer:
L'utilisation des ressources Android par défaut telles que WebView vous permet d'exploiter rapidement les modèles d'interaction avec lesquels vos utilisateurs seront déjà familiarisés, tout en vous permettant de vous concentrer sur les aspects uniques de vos applications. La vue Web affiche les pages HTML afin que vous puissiez également améliorer vos applications en utilisant des technologies Web telles que CSS et JavaScript. Comme vous pouvez le constater dans l'exemple ci-dessus, vous pouvez intégrer efficacement WebView à d'autres éléments de l'interface utilisateur Android..
