Android custom view imitates QQ discussion group avatar effect

First, let's take a look at the renderings we imitated. I believe they are not unfamiliar to people who have used QQ. The renderings are as follows:

In a previous project, it was necessary to implement a control similar to QQ discussion group avatars, but the number and layout of avatars were slightly different: first, the number of avatars was 4, and the layout was horizontal when the number of avatars was 2. In fact, there were similar open source controls on GitHub at that time, but the control will create some new bitmap objects every time it draws the view, which is certainly undesirable. Moreover, the control avatar inputs bitmap objects, which does not meet the requirements. So I can only realize one by myself. There is no excessive consideration in the implementation. Even if the incoming avatar drawable objects are arranged and displayed according to the number, the incoming image must be circular, which is very limited and does not have universality at all. Therefore, in order to realize the control with certain universality like the head of QQ discussion group, we have to redesign and implement it.

Let's begin to realize it.

layout

The first thing to be solved is the layout of avatars. When the number of avatars is 1 to 5 respectively, define the layout and arrangement of avatars, and calculate the size and position of images. First draw the layout:

layout

The black square is the display area of view, and the blue circle is the avatar. The known condition is the size of view, let's set it to D, and the number of avatars n. find the radius R and center position of the blue circle. Isn't this a geometry problem? Open the math textbook of junior middle school - hook three strands, four strings and five... It seems that it's not enough

The auxiliary lines are drawn and scratched, and the scalp is scratched and scratched, α,θ, OMG... Sin, cos, sh * t... Finally calculate the relationship between R and D and N:

Formula 1

In fact, when n = 3, the radius is the same as when n = 4, but considering that there is an offset dy on the y-axis when n = 3,5, and R and Dy have a general formula when n = 3,5, they are combined. Formula for calculating the offset dy:

Formula 2

Where R is the radius of the large red circle in the layout.

With the formula, the code is easy to write. The code for calculating the size and position of each avatar is as follows:

draw

After calculating the size and position of each avatar, you can draw them. But before that, we have to solve a problem - how to make the avatar image round? Because there are no restrictions on entering drawable objects.

In the layoutdrawables method above, there are two lines of code:

The first line is to add a circular path, which is the path of the blue circle in the layout diagram, and the second line is to set the filling mode of the path. The default filling mode is to fill the inside of the path, and invert_ Winding mode is to fill the outside of the path, and then cooperate with paint.setxfermode (New porterduffxfermode (porterduff. Mode. Clear)) to draw a circular image. The same goes for the gap in the avatar. (PS: there are many online introductions about path. Filltype and porterduff. Mode, which will not be introduced in detail here)

Let's take a look at the OnDraw method:

Drawable support

Since the input is a drawable object, it can't be drawn like bitmap, unless you don't plan to support some functions of drawable, such as self update, animation, status, etc.

1. Drawable self updating and animation

Self updating of drawable and animation drawable (such as animationdrawable, animated vectordrawable, etc.) depend on the drawable. Callback interface. It is defined as follows:

Therefore, to support drawable self updating and animated drawable, you have to set the implementation object of the drawable. Callback interface through the drawable. Setcallback (drawable. Callback) method. Fortunately, android.view.view has implemented this interface. When setting drawable, just call drawable.setcallback (MyView. This). However, it should be noted that when android.view.view implements the drawable.callback interface, it calls view.verifydrawable (drawable) to verify whether the drawable to be updated is its own drawable, and its implementation only verifies the view's own background and Prospect:

Therefore, if the callback is only set, the view will not update and redraw when the drawable content changes and needs to be redrawn, and the animation will not succeed when it needs to plan the next frame or cancel a plan. Therefore, we also have to verify our drawable:

At this time, the support of drawable self update and animation drawable are basically completed. Of course, when the view is invisible and ondetachedfromwindow(), you should pause or stop the animation. I won't talk about these here. You can look at the source code (there is a link at the end of the article), mainly calling the drawable.setvisible (Boolean, Boolean) method.

The following shows the effect:

2. Status

Some drawable are stateful. It can change its display content according to the state of view (press, select, activate, etc.), such as statelistdrawable. To support view state, in fact, just extend the view. Drawablestatechanged() and view. Jumpdrawablestocurrentstate() methods to update the drawable state when the view state changes:

effect:

Well, here we are.

Other effect display:

Effect 1

Effect 2

Project home page: https://github.com/YiiGuxing/CompositionAvatar

Local download: http://xiazai.jb51.net/201704/yuanma/CompositionAvatar-master (jb51.net).rar

summary

The above is the whole content of this article. I hope the content of this article can bring some help to your study or work. If you have any questions, you can leave a message. Thank you for your support for programming tips.