Implementation method of Android imitation wechat and QQ multi graph merging framework (similar to group avatar)

preface

Now it is a very common phenomenon to join chat in most apps, and wechat and QQ are the ancestors of the communication field. If the product manager is considering chat design, most of them will refer to it.

You often hear that wechat and QQ do this. Just do it. Although there are 10000 unhappy psychological problems, who calls us a programmer with pursuit.

Therefore, the requirement of the product is to realize group avatars similar to wechat.

Similar as follows

As a programmer, I will first evaluate the workload. In the eyes of products, it's just to synthesize pictures together. Is there any difficulty? So working hours determine what you can do

Scheme analysis:

Scheme 1. Write the layout directly, and then load different numbers of pictures according to different layouts. The common image loading schemes are asynchronous loading. In this way, when loading, they will be merged into a picture. Since the current picture frames have caches, the second time will be much better.

Advantages: fast implementation

Disadvantages: very low, not a forced programmer, and the effect is not good.

Scheme 2: customize a control or download all pictures asynchronously. Add a counter in the control to ensure that all pictures are displayed synchronously after downloading.

Advantages: moderate difficulty

Disadvantages: poor scalability. Which day does the product want to change a synthesis scheme

Scheme 3: use the native control to merge the group images to generate a new image, and then cache the original image. Abstract the merge algorithm into an interface.

Advantages: easy to expand, better experience

Disadvantages: spend more time

Of course, as a programmer with dreams and qualifications, we should consider implementing scheme 3 and benefiting some fellow programmers tortured by products.

Next, let me talk about the main ideas and key codes.

Realization idea

In fact, the overall idea is relatively simple, which can be summarized by a flow chart.

Implementation method

First, we know that the input parameter of the program should be an ImageView control and a URLs list.

ImageView image view is directly inherited from the view class. Its main function is to display pictures. In fact, it can not only be used to display pictures, but any drawable object can be displayed using ImageView. ImageView can be applied to any layout, and Android provides some operations for scaling and coloring.

Of course, there is also a merge callback function to customize the merge method.

According to the idea, we need to generate a new key based on URLs to cache the merged image, which can be loaded directly from the cache next time. After all, merging avatars is a time-consuming operation

Here's just a simple example. Splice all URLs, and then MD5

Cache processing is the most critical step, which involves the cache of single linked pictures and the cache of merged pictures. For the cache system, a single graph and multiple graphs are treated the same, and each key corresponds to a cache object. Only the rules of key are slightly different.

The cache scheme is also a secondary cache implemented by the general disklrucache and memorylrucache, which can keep the cache efficient. (about LRU algorithm, it is a simple least recently used, that is, the principle of recent use. Please Baidu for details)

Let's take a look at the core code of displayimages, which is to find the memory cache first, and then the disk cache. If there is none, we will find all single images synchronously

If loading from the cache fails, we will start a thread to perform avatar merging. The avatar merging is a synchronous operation. You need to get the objects that need to merge avatars. How do you get them? Let's continue to look at the code

It shows that the image is returned through the loadbitmap() function, and the core method of this function is

You can clearly see that the same caching idea is applied in the logic of the displayimages () method. Let's go back to the execution method of loadbitmaptask thread, in which an important logic is

This mergecallback method is an image merging method that users need to implement themselves. Pass in a list bitmap, and then return a merge graph object. Finally, we add the merge to the cache. You can find it directly from the cache next time.

The next focus is image merging technology. I added the group avatars of wechat and QQ into the code. Next, let's briefly talk about the wechat merger scheme and QQ merger scheme. You can see the code yourself.

First, let's look at the implementation of mergecallback

Let's look at the implementation of combimebitmap

Finally, calling getCombineBitmaps to synthesize images, the key to composite images is achieved through Bitmap.createBitmap.

All the key logic has been noted in the code.

If you want to see the complete effect and complete code, you can click here: mutiimgloader. Of course, you can download it locally.

summary

The above is the whole content of this article. I hope the content of this article has a certain reference value for your study or work. If you have any questions, you can leave a message. Thank you for your support for programming tips.