Android click WebView to achieve picture zooming and sliding browsing effect

A recent project requires that the HTML displayed in WebView needs to be zoomed in, zoomed and scrolled when clicking on the image. My first thought is that this is a matter of interacting with JS, but I don't know how to obtain the URL of the image in HTML and save it for display, so I checked the information, Finally, the solution is found: blog address: image browsing and zoom effect in Android WebView

First, let's talk about the idea of dealing with this requirement. First, we need to obtain the URLs of all pictures in HTML and save them to the collection. When clicking the picture, we jump to an activity and display it with viewpager, so as to realize the effect of sliding browsing. As for the scaling of pictures, we need to use the third open source library photoview

The first is the setting of WebView:

Then, get the picture URL in HTML, save and open it (the most important thing is to inject JS function to listen and get the URLs of all pictures). Here, I found that the picture was added twice when adding the picture, so I de duplicated the elements in the list collection:

Next, show the code in showwebimageactivity. Because showwebimageactivity needs to slide browse pictures, it needs to use viewpager, so @ R_ 419_ 2410 @ created a viewpager to handle touch events, and then pasted the code:

Custom viewpager:

Related layout files: there is only one simple WebView in the mainactivity layout; The viewpageractivity layout is just a hackviewpager; Layout of each view in hackviewpager: View_ pager_ item.xml:

A @ string / viewpager is used_ Indicator is

Final effect:

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.