Android enables WebView to click on pictures to view large picture list and save pictures

In the daily development process, sometimes you need to embed web pages in the app. At this time, WebView is used to achieve the effect, but by default, you can't click the picture to view the large picture, let alone save the picture. This paper will explain the implementation of this series of problems.

Illustration:

Knowledge points of the project:

How to capture the image click event in the web page after loading the web page;

After obtaining the clicked picture resources, display the pictures and obtain all the pictures of the whole page;

Support to view the previous and next pictures and zoom the pictures;

Save the picture;

Others: image cache processing (you don't have to reload the viewed images every time)

Project code structure:

Preliminary preparation (add permission, dependency and confusion settings):

Add permissions:

Add dependency:

Obfuscate file settings:

Code parsing:

Mainactivity is very simple. The code is as follows:

Obviously, this is the basic initialization operation of WebView. 1. The mjavascriptinterface class is customized to realize JS calling local methods; 2. Customize mywebviewclient to monitor and manage WebView.

Mywebviewclient code is as follows:

This class inherits from webviewclient. Set the listening method of addimageclicklistener in onpagefinished method ― > after the entire WebView page is loaded, set the listening event for each image ― > which means that clicking is invalid when the entire page is not loaded. The code implementation of addimageclicklistener is also very simple. Find the corresponding img tag through JS, so that you can know that it is an image, and then set click listening events for these images - > call the custom openimage (URL) method whenever you click. This openimage (URL) method and the corresponding method in mjavascriptinterface complement each other, thus forming a JS call local method.

Mjavascriptinterface code (mainly the implementation of local methods corresponding to JS):

It can be seen that the logic implemented by the openimage (URL) method is to jump to the photobrowseractivity by passing the URL of the current picture and the picture list (imageurls) of the whole WebView page. Photobrowseractivity is a page used to display a list of large pictures.

Here's the question: how do you get imageurls?

Method: 1. The server directly combines all the pictures in WebView into a string array in order and passes it; 2. Or directly pass all HTML codes containing img tags, so that the client can parse the string array composed of all picture addresses. (here is the second one. You can download the source code to see how to parse it.)

OK, here is the first point of the project knowledge points: 1. How to capture the picture click event in the web page after loading the web page;

Next, we will explain the following points:

2. After obtaining the clicked picture resources, display the pictures and obtain all the pictures of the whole page;

3. Support to view the previous and next pictures and zoom the pictures;

4. Save the pictures;

All other implementations are implemented in photobrowseractivity. The code is as follows: mainly put the picture into viewpager for display:

1. First, use the returnclickedposition method to obtain the position of which picture the user clicked, and set the current page ― > obtain by traversing the current URL and matching all URLs;

2. Monitor page sliding events through addonpagechangelistener - > this is mainly used to process the logic of setting the position, animation and page number display of the current page;

3. Implementation of pageradapter - > initialization of each page content, mainly instantiateitem. The core code is dragged out again as follows;

General idea:

1. Realize the telescopic display of pictures through photoview; 2. Load pictures and other processing through glide;

What is photoview ― > is a picture component, which handles the scaling, dynamic effect and caching of pictures. Click the address to view the introduction to GitHub > >:

What is gilde? > the picture loading library recommended by Google. The reason for using it here is easy to use and simple. Click the address to view the introduction to GitHub > >:

Simplified form of glide - > glide. With (...). Load (picture address). Override (size of loaded picture). Listener (set listening method). Into (a component, here is photoview). Here is the original image loading. There are two callback methods in the listening method:

Onexception and onresourceready. The processing done here in onresourceready is to call ― > when the resource is loaded, and then cancel the display of the loaded animation.

The display of "page number" and "saved" components in the page is realized by writing in the layout file of the whole activity, rather than by writing these components in each page. The following is the code for obtaining the image resource object:

Because you need to know which page you are currently on when downloading pictures, you set a tag for each page when viewpager initializes display and sliding. At this time, it comes in handy - > mpager.findviewwithtag obtains the layout object in the current page, then obtains the corresponding photoview object, and finally obtains the bitmap object after processing. This is very simple. Next, just save the bitmap object locally. The code is as follows:

How to save the picture is shown in the code, but it should be noted that the saved picture needs to be broadcast to inform the database to update ― > in this way, you can immediately enter wechat or click to send the picture, and you can see the picture just saved.

Cache processing:

One of the advantages of using glide is that the picture will be cached by default. When you need to clear the cache, you only need to execute the following code (put it in mainactivity here, and clear the cache when you exit the page):

Special attention:

1. If targetsdkversion is specified as more than 22 in the project configuration, the module of dynamic permission application shall be added. Otherwise, failure will be prompted when saving!

2. The JS interface class exposed in the project: mjavascriptinterface cannot be confused, and the declaration of the method it calls cannot be confused, so the following confusion setting code should be added (the code changes due to the package name):

The source code has been uploaded to GitHub. Click here to view > >

The above is what Xiaobian introduced to you. Android realizes the WebView click picture to view the large picture list and picture saving function. I hope it will be helpful to you. If you have any questions, please leave me a message, and Xiaobian will reply to you in time. Thank you very much for your support for the programming tips website!