Android (Android) sharing a text-led picture _android

Objective

Think of our commonly used NetEase cloud music, allow us to the lyrics even with the pictures of the song together into a picture, we will share this picture out of the good.

So, the content of this article is to do a text with a picture.

The context is also recorded here, because of a lost and found app, when someone has handed in the Lost property, you can share the message, this message contains information and pictures of items, and micro-letter SDK can not be done, just want to put the article information embedded in the picture to share out, put an effect chart:

This shared out picture is very simple, above is the picture, below is the text to combine together .

First of all, the principle of the scheme is to operate a bitmap based on the canvas to do , the idea is very simple:

① make the canvas work on the bitmap.

② a picture taken from above the canvas

③ draw text below the picture drawn by ②

The first step is very simple, we just need to construct a Bitmap and load into the Canvas can be, assuming the picture is named Bitmap, then the code is as follows:

Bitmap.config Config = Bitmap.getconfig ();
Bitmap Sharebitmap = Bitmap.createbitmap (Bitmap.getwidth (), bitmap.getheight (), config);
Canvas Canvas = new Canvas (SHAREBITMAP);

Here we have to think, this picture of the height should be set more reasonable? The code above is set to be the same as the resulting picture, that is, if you need to add text again, the text will only appear on the picture. At this time, if the color of the picture is rich, then the text stacked on top will be difficult to see clearly. According to my image above, it is to add some space under the picture to draw the text, the height should be set to a greater degree. And how big it will be we'll discuss it later.

The second step is to draw the resulting picture in the canvas, which is simple enough to have this code directly:

Canvas.drawbitmap (bitmap, 0, 0, paint);

Then there is the third step, and the hardest part. You cannot directly call the DrawText method directly in canvas to draw Text! Why? Because our text content may be larger than the width of the picture, when the text is wider than the picture, the use of DrawText is unable to change the text content, so that the text was truncated.

The solution is to use textpaint this Paint subclass. This class also needs to work with Staticlayout to draw the text, and let's look at its usage:

Paint Paint = new Paint ();
Paint.setcolor (Color.Black); Brush color
Textpaint textpaint = new Textpaint (paint);
Textpaint.settextsize (TEXTSIZE); Literal size
Textpaint.setantialias (TRUE);//anti-aliasing
staticlayout title_layout = new Staticlayout (Title.gettext (). ToString (), Textpaint, Sourcebitmapwidth, Layout.Alignment.ALIGN_CENTER, 1f, 1f, true);

Create a textpaintdirectly through our Paint object, then set anti-aliasing and text size. Next, you create a staticlayout object in which you want to pass in parameters such as text content, Textpaint object, text width, alignment, line spacing, leading addends, and whether the inner margin is included. The important thing here is to set the width of the text, which wraps when the text is wider than this value.

Once we have constructed this staticlayout , we can position the canvas and then draw the text out:

Canvas.translate (0, sourcebitmapheight); Move the position below the picture
Title_layout.draw (canvas);//Draw text in canvas

After completing these steps, the Bitmap in theCanvas will have pictures and text.

But our problem has not been solved.

① What is the height of this shared Bitmap ? Above we skipped the question, in fact already has the answer, we can let its height for the picture content plus we create the staticlayout height to be possible. This way the height of the picture will follow how much text content changes. The height of getting staticlayout is relatively simple:

Title_layout.getheight ()

② this time, if we directly in the app show this picture, there is no problem, but if we share the image of the micro-letter, you will find that the text part of the picture is completely black, even the text can not see. The solution here is also very simple, when drawing, first to the entire picture to draw a white background:

Canvas.drawcolor (Color.White);

Here is basically completed, the code also give us a reference to the following bar:

The resulting picture is Imagebitmap private Bitmap getshareingbitmap (int textsize) {Bitmap.config Config = Imagebitmap.getconfi
    g ();
    int sourcebitmapheight = Imagebitmap.getheight ();
    int sourcebitmapwidth = Imagebitmap.getwidth ();
    Paint Paint = new Paint (); Paint.setcolor (Color.Black);
    Brush color Textpaint textpaint = new Textpaint (paint); Textpaint.settextsize (TEXTSIZE); Literal size Textpaint.setantialias (true); Anti-aliasing Staticlayout title_layout = new Staticlayout (Title.gettext (). toString (), Textpaint, Sourcebitmapwidth,
    Layout.Alignment.ALIGN_CENTER, 1f, 1f, true); Staticlayout desc_layout = new Staticlayout ("article Description:" +description.gettext (). toString (), Textpaint, Sourcebitmapwidth
    , Layout.Alignment.ALIGN_NORMAL, 1f, 1f, true); Staticlayout phone_layout = new Staticlayout ("Contact Tel:" +phone.gettext (). toString (), Textpaint, Sourcebitmapwidth, Lay Out.
    Alignment.align_normal, 1f, 1f, true); Bitmap Share_bitmap = Bitmap.createbitmap (SourcebitmaPWidth, Sourcebitmapheight + title_layout.getheight () + desc_layout.getheight () + phone_layout.getheight (),
    config);
    Canvas Canvas = new Canvas (SHARE_BITMAP);
    Canvas.drawcolor (Color.White); Canvas.drawbitmap (imagebitmap, 0, 0, paint);
    Draw picture Canvas.translate (0, sourcebitmapheight);

    Title_layout.draw (canvas);
    Canvas.translate (0, Title_layout.getheight ());

    Phone_layout.draw (canvas);
    Canvas.translate (0, Phone_layout.getheight ());
    Desc_layout.draw (canvas);
  return share_bitmap; }

Summarize

First calculate the height of all the text content, and then build the size of the picture, draw a white background, draw a picture, draw the text under the photo. The above is the entire content of this article, I hope that the development of Android for everyone to help.