Sharing pictures with text developed by Android

preface

Think about our commonly used Netease cloud music, which allows us to put the lyrics together with the picture of the song into a picture. Let's share this picture again.

Then, the content of this article is to make a picture with text.

The context is also recorded here, because we have made an app for lost and found. When someone handed in the lost and found, they can share the message. The message content includes the information and pictures of the item, but the wechat SDK has always been unable to do so. They want to embed the item information into the picture and share it. First put an effect picture:

This shared picture is very simple. The picture above and the text below are combined together.

First of all, the principle of the scheme is achieved by operating a canvas based on bitmap. The idea is very simple:

① Let the canvas act on the bitmap

② Draw the captured picture above the canvas

③ Draw text under the picture drawn in ②

The first step is very simple. We only need to construct a bitmap and load it into canvas. Assuming that the captured image is called bitmap, the code is as follows:

Here we have to think about how to set the width and height of this picture reasonably? The above code is set to be the same as the picture taken, that is, if you need to add text, the text can only be displayed on the picture. At this time, if the color of the picture is rich, it will be difficult to see the text stacked on it clearly. According to the above picture, I add some space to draw text under the taken picture. The height to be set here should be a little larger. We'll discuss how big it is later.

The second step is to draw the captured picture on the canvas. Here is a simple code:

Then comes the third step, which is also the most difficult part. Here, you can't directly call the DrawText method in canvas to draw text! Why? Because our text content may be wider than the picture, when the text is wider than the picture, using DrawText cannot wrap the text content, so the text is truncated.

The solution is to use textpaint, a subclass of paint. This class also needs to cooperate with staticlayout to draw text. Let's see its usage:

Create a textpaint directly from our paint object, and then set the anti aliasing and text size. Then create a staticlayout object. The parameters to be passed in by the construction method are: text content, textpaint object, text width, alignment, line spacing multiple, line spacing plus and whether to include inner margin. The important thing here is to set the text width. When the text width is greater than this value, it will wrap automatically.

After we have constructed the staticlayout, we can position the canvas and draw the text:

After completing these steps, the bitmap in canvas will have pictures and text.

But our problem has not been solved.

① What is the height of the shared bitmap? We skipped this question above. In fact, we already have the answer. We can make its height equal to the content of the picture plus the height of the staticlayout we created. In this way, the height of the picture will change with the text content. It is easy to get the height of staticlayout:

② At this time, if we directly display this picture in the app, there is no problem, but if we share the picture with wechat, you will find that the text part of the picture has completely turned black, and you can't even see the text. The solution here is also very simple. When drawing, draw a white background for the whole picture:

This is basically completed, and the code is also given. Let's refer to it:

summary

First calculate the height of all text content, then build the size of the picture, draw the white background, draw the captured picture, and draw the text under the captured picture. The above is the whole content of this article. I hope it will help you develop Android.