Android imitation short book length generates picture effect by article

preface

Students who use Jianshu app know that Jianshu has such a function; When you press the page length of the article, a button to generate picture sharing will appear at the bottom. After clicking, you can generate a long picture of the current article; This picture can be saved locally or shared with friends. At the same time, it can be set into white and black styles, which is very artistic. I've always liked this feature.

However, from a certain version, this function began to have bugs. The generated pictures only have the fixed title at the bottom, but there is no article content, and the long picture has become a small and short picture. After feedback to the brief book, the reply is to click the share button to generate pictures; The function of generating long graphs included in the sharing menu is indeed possible. However, I still miss the function of long press to generate pictures, so as a program ape; With curiosity, I decided to realize such a function myself

Effect preview

Old rules, first look at the effect after implementation; Although there is no simple book as a whole, I still feel very similar.

Article page implementation

content

There is no difficulty in the implementation of article page content. Generally speaking, the layout is very simple, including a LinearLayout containing user information and article information, plus a WebView. The data encapsulates an htmlbean object according to the content required in the layout, and the of this object is obtained by parsing the HTML document content of the current page using jsup (here, the jsup method is used to obtain the simple book Web page content, which is only for personal learning and has no other purpose). See the source code for the specific implementation

Long press menu

Here is the implementation method of long pressing the pop-up button at the bottom. In general, for the implementation of long press effect, we will set the onlongclicklisten event of view to realize the corresponding functions, but the WebView here can be implemented as follows:

Here, monitor when the bottom button is displayed by listening to the ContextMenu of WebView; Also hide the bottom button in the ontouch method.

Click the button at the bottom to jump to the interface of generating the growth graph, and pass the previously obtained htmlbean object.

Realization of long picture effect

First, let's talk about the implementation idea (the idea comes from this).

• first, load a local HTML page through WebView, which contains some fixed and defined tags. Then dynamically replace the content in the static HTML page by executing JavaScript according to the information in the passed mhtmlbean object;

• for the implementation of black and white styles, WebView also executes JS, dynamically replaces CSS styles in HTML, and modifies the background color of WebView to show two different UI effects.

• the current WebView bitmap object can be generated through the capturepicture and canvas of WebView. With this bitmap, you can save the picture.

Well, let's implement the above steps through the code.

HTML page

The content of this HTML page is very simple. A small corner mark is placed in the upper left corner of the whole document, which is the mark when the Jianshu app generates the growth chart

At the same time, a JavaScript method is defined, and the function is very simple, that is, replace the document content in the article tag with the passed parameter content.

Customize WebView

For convenience, let's customize WebView. Here's the core logic:

These methods are the core methods of generating growth charts. In the loaddata method, assemblydata is called first. This method will splice an HTML document according to the data in the mhtmlbean object. In the loadurl method of WebView, the previously defined jianshu.html page will be loaded locally. Then, when the page is loaded, that is, the value of newprogress in the onprogresschanged callback method is equal to 100, call the updateview method; This method will set the background of WebView according to the currently set mode. If it is night mode, a gray div tag will be added to the outside of the document generated in assemblydata, and the whole content will be wrapped in this div tag. Finally, WebView executes JS method changecontent, and the parameters passed are the content we spliced before. In this way, the whole WebView will be refreshed again, and the content of the whole WebView is the article content.

In this way, in the activity, the mfakewebview object can update the current view through the mhtmlbean object passed from the previous page (article page), and the page style can be switched through the RadioButton.

Save picture

From our final goal of generating growth pictures, we can say that we have only completed 50% of the previous work, because so far we have only loaded the whole article content in WebView; Long picture hasn't yet. Therefore, the following work is to generate a growth chart through WebView.

Webveiw is very user-friendly. Through this method, we can obtain the bitmap of the visible and invisible parts of the current WebView view.

In fact, it is not difficult to generate pictures through WebView, but how to save our pictures here; Because we generate a long picture here, as shown in the figure below, the height of this picture is amazing. Therefore, we need the first compression method mentioned in the initial exploration of bitmap to compress the file size. For specific implementation, the code will not be pasted repeatedly. Interested students can refer to GitHub source code at the end of the article.

Here, we have fully realized the function of generating pictures according to Jane's length. Then, looking back, why is there a bug in the long press function of Jianshu app on my mobile phone.

defect

The WebView on the article details page is the system's own WebView. When loading articles with code, there is no special analysis of the content of the code class, so the code cannot be highlighted. Only the most common text is displayed, so the code in the generated long figure is also common text. The Jianshu app is still tall, and the highlighting of the code is great!

Later words

By chance, when trying the function of generating pictures according to the length of the short book, I found that the original short book generates the content of the second page through the area selected by WebView; Therefore, when I long press in the blank area of the article page and click to generate a picture, there must be only blank, only some fixed labels at the bottom. Therefore, this should not be a bug, but provides a more convenient function for everyone to generate more effective long graphs according to their favorite content.

The above is what Xiaobian introduced to you. The Android copywriter generates picture effects according to the article. I hope it will help you. If you have any questions, please leave me a message, and Xiaobian will reply to you in time!