Android customized avatarimageview to achieve avatar display effect

Look at the renderings:

The avatar display in our project is generally circular, but sometimes various styles (not necessarily a regular shape) are not excluded. For example, the UI gave me a circle last time, and a piece is missing below it. There are three ways to implement custom shape graphics: porterduffxfermode, bitmapshader and clippath. I will explain the first method I use here (the implementation is still relatively simple).

1.PorterDuffXfermode

This is an image conversion mode named by Tomas proter and Tom Duff. It has 16 enumeration values to control the interaction between the upper and lower layers of canvas (the first layer is on the lower layer).

(the blue one is on the upper layer)

1. The drawing of porterduff.mode.clear will not be submitted to the canvas 2. Porterduff.mode.src displays the drawing picture of the upper layer 3. Porterduff.mode.dst displays the drawing picture of the lower layer 4. Porterduff.mode.src_ Over normal drawing shows that the upper and lower layers draw overlaps. 5.PorterDuff.Mode.DST_ Upper and lower layers of over are displayed. Displayed on the lower floor. 6.PorterDuff.Mode.SRC_ In takes two layers to draw the intersection. Display the upper layer. 7.PorterDuff.Mode.DST_ In takes two layers to draw the intersection. Displays the lower layer. 8.PorterDuff.Mode.SRC_ Out takes the upper layer and draws the non intersecting part. 9.PorterDuff.Mode.DST_ Out takes the lower layer and draws the non intersecting part. 10.PorterDuff.Mode.SRC_ Atop takes 11.porterduff.mode.dst of the non intersection part of the lower layer and the intersection part of the upper layer_ Atop takes the non intersection part of the upper layer and the intersection part of the lower layer 12. Porterduff.mode.xor XOR: remove the intersection part of the two layers 13. Porterduff.mode.darken takes all the areas of the two layers, and the color of the intersection part is deepened 14. Porterduff.mode.lighten takes all the two layers, Turn on the color of the intersection part 15. Porterduff.mode.multiple take the color of the intersection part of the two layers after superposition 16. Porterduff.mode.screen take all the areas of the two layers, and the intersection part becomes transparent

1.1 ideas

Friends who can play PS must know that if there are two layers, we want to cut the upper layer into the shape of the lower layer. We just need to adjust the selection of the lower layer, and then select the upper layer to mask it. Then we can use the SRC of porterduff. Mode_ In or DST_ In to get the intersection of the two layers, so as to cut the image into various styles we want. We need a shape layer and a display layer. And the display layer should fully cover the shape layer.

1.2 realization

Inheriting ImageView, the four SETIMAGE methods of ImageView are copied (for better compatibility), and the foreground image is obtained in the setimagedrawable method.

Get the background layer, and invalidate () will call the OnDraw method to redraw.

Of course, you need to obtain the height and width of the view in onmeasure to scale the two layers (generally speaking, the avatar display view is a square).

Then, use porterduffxfermode to make the two layers interact to get the final bitmap.

Start redrawing (mainly zooming and drawing the final image on the view).

Paste tool function

Is it very simple, and then it is used,

1.3 use

There are no new attribute values. Use the following in the layout.

① Android: background here defines our shape layer, which can be a XXX_ The layout file of shape.xml, such as.

It can also be a picture (note xx.png, which can contain transparent pixels, such as)

② Android: SRC defines the avatar we want to display

@L_ 502_ 0@

2.BitmapShader

We can call it "shader", and we can get a shader through the following code.

mBitmapShader = new BitmapShader(mBitmap,Shader.TileMode.CLAMP,Shader.TileMode.CLAMP);

parameter

① Mbitmap: the picture you want to draw

② Emun shader.tilemode defines three shading modes: clamp stretch repeat repeat mirror image, just like the three methods you choose when you set a picture with a resolution different from the computer screen as wallpaper. We can set a shader for the brush so that the brush can draw our picture mbitmap on the corresponding shape of the canvas.

Of course, we generally set the mode to clamp stretch (stretch when the width and height of the image mbitmap are less than view), but we generally do not stretch (deform), so we generally need to set a matrix for the shader to appropriately enlarge or shrink the image.

2.1 source code analysis of circleimageview

The famous project circleimageview is implemented with shaders. The implementation idea has been mentioned above. The code has detailed comments, which should be no problem to understand.

3.ClipPath

As we know, you can create a new path, and then get a path through the path. Addxxx () method.

Then we can trim the canvas to the shape of our path area, that is, the canvas shape has been determined, and finally just draw the graphics.

The following code can draw the graphic bitmap on a circle to get a circular head.

This method is obviously the simplest. You can also add coordinate points one by one to form a path. However, in the case of complex shape, the first one is more convenient to implement.

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.