Android realizes the functions of clicking on the picture in the WebView interface to slide browse and save the picture

1、 Implementation requirements

Recently, the requirements encountered in the company's projects are as follows:

1. Click the picture on the WebView page to open the view picture mode, that is, you can display the clicked picture, and then slide to display the next picture.

3. Long press the WebView page picture pop-up dialog box, you can choose to save the long press picture to the local album.

The author's first response to this requirement was that he had not done WebView related interaction, and he even couldn't tell whether the server needs to cooperate to complete the mutual calls between Java and JavaScript.

In this case, the author's solution is generally divided into two directions:

1. Find a well-known client with similar functions, and then Google search, imitation XXXX. First, take a rough look at whether there is a ready-made demo for reference. For example, for my need, first search "Android imitation wechat circle of friends browsing picture effect" (this search keyword is very key), but the author did not find a demo that meets the need.

2. When the first scheme is difficult to work, we have no reference, so we have to think about the general implementation idea, and then split the requirements one by one. So the thinking is as follows:

(1) If you want to display a picture, you have to get the picture first. There are only two possibilities to get the picture. The first possibility is that WebView caches the picture itself. We read the picture in the cache for display, but think about it. If there is no Internet when we browse the microblog to see the picture, we can't click the picture at this time, so this possibility is denied; So the only second possibility is to get the URL corresponding to the image when clicking the image, and then we go to the network to load the image for display, so we get this point.

(2) To slide the picture to display the next one, we need to get the URLs of all the pictures to be displayed, and then put them into an array. Each time we slide, we load a picture, that is, we get the URLs of all webviews containing pictures at one time. This is not obtained when we click the picture, But after the WebView is loaded, how can I get it? Think again. When WebView loads and displays, it actually loads the string of HTML (such as the file in the assets directory) text, and then renders and displays it. Therefore, the HTML text file contains the image URL we want. Let's take a look at the following screenshot, which is a partial screenshot of the HTML text file loaded by WebView with pictures,

The content of the label SRC object is the image URL we want, so here we have an idea. We first get the HTML content loaded by WebView, and then extract the URL I want from HTML.

(3) Now that we can get the URL corresponding to all the pictures, it's easy to slide the picture to display the next one. We can directly use a viewpager to slide and load the picture.

In conclusion, we need to do the following work to achieve this goal:

Let's follow the above steps to realize the functions we want.

2、 Main content

2.1 get the corresponding addresses of all pictures on the WebView page

2.1.1 parsing HTML text files loaded on WebView pages

Define an interactive interface for JavaScript calls

WebView starts JavaScript script execution and calls JavaScript code

2.1.2 extract the address objects corresponding to all pictures of the page from the obtained HTML text file

Here we have obtained the URL addresses corresponding to all image objects in the WebView page. The next step is to respond to the click event when clicking the image in the WebView interface, and then pass the corresponding URL address to the viewpager for display.

2.2 respond to the click event of WebView interface image

2.2.1 define interactive interfaces for JavaScript calls

2.2.2 WebView starts JavaScript script execution and calls JavaScript code

Here, we have completed the first two steps. Take all the URL addresses corresponding to the WebView interface image and the click events in response to the WebView interface image. The following is simple. Use the viewpager to slide and display each image. Before we go to the last step, we will realize another function, that is, long press the WebView interface image to pop up the dialog box, Then you can select the function of saving pictures, and the code is as follows:

Long click event handling of pictures in WebView

2.3 viewpager slides and displays each picture, and photoview realizes the function of free zoom

Because this part of the code is relatively simple, some of the code will be posted directly here. The demo code used in the article will eventually be uploaded to GitHub. If you are interested, you can have a look at the complete code. Here are a few classes. Showimagefromwebactivity.java. This class contains a viewpager and two buttons. Viewpager is used to slide and display each picture, The button is used to display the number of sliding pages and realize the function of clicking to save pictures. The code is as follows:

XML file corresponding to showimagefromwebactivity.java

The imagebrowseradapter.java class code is as follows:

The above code is also very simple, that is, load the display picture according to the URL, and then use photoview to zoom.

The above is the content of this study. If there are any mistakes, please correct them. Thank you!

The demo in the article has been uploaded on GitHub with the address showimagefromwebview. You can also download it locally

summary

The above is the whole content of this article. I hope the content of this article can bring some help to Android developers. If you have any questions, you can leave a message. Thank you for your support for programming tips.