Shulou(Shulou.com)06/03 Report--

This article will explain in detail how Android customizes the function of drawing circular avatars on View. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Custom RoundImageView inherits from ImageView

Public class RoundImageView extends ImageView {public RoundImageView (Context context) {super (context);} public RoundImageView (Context context, @ Nullable AttributeSet attrs) {super (context, attrs);} public RoundImageView (Context context, @ Nullable AttributeSet attrs, int defStyleAttr) {super (context, attrs, defStyleAttr);}}

I wonder if you have noticed that whenever we inherit from View, we are prompted to overwrite four constructors. Here we only overwrite three constructors, and then we begin to initialize them in each constructor. Is it true that all constructors are called every time? if not, when will these three constructors be called? Let's verify it through an example.

There are only two ways to use custom View, the first is to use it directly in the xml layout, and the other is to new it in Activity. Here we use the above two methods respectively, in order to observe that we add a line to print in the three construction methods.

First of all, we use it directly in xml, and run the print as follows:

Com.example.roundimageview D/RoundImageView: RoundImageView: construction method of two parameters

And then we new a RoundImageView in Activity.

RoundImageView = RoundImageView (this@MainActivity) roundImageView = RoundImageView (this@MainActivity, null) roundImageView = RoundImageView (this@MainActivity, null,0)

Run the print log as follows:

Conclusion: when custom View is used in xml, the second constructor is used. When used in Activity, several parameters are passed in to call the constructor with several parameters.

The idea of realizing a round head portrait

I always think that the difficulty of custom View lies only in its implementation ideas, usually when we encounter problems, it is not that Google is less than, but simply do not know how to Google this problem, if we know the cause of the problem, in fact, the problem has been easily solved, the most fear is that we do not know why the problem will arise.

The idea of realizing a circular avatar can be represented by a simple picture.

The rectangular area is the complete picture, and the circular area is the avatar area that we finally display, so it's very simple. The circular region intersects the rectangular region and merges the region. Draw a circle in a rectangle that is tangent to the length or width of the rectangle, and the diameter of the circle is the shorter side of the length or width.

Coding implementation

Get the bitmap of the original avatar

First of all, we need to get the bitmap for setting the avatar. We can get the set image resources directly through API.

Drawable = this.getDrawable ()

Then convert the picture resources into bitmap

First of all, we determine whether the drawable is empty. If it is empty, it means that the user has not set it, and an exception that cannot be found by the resource is thrown.

If (drawable = = null) {throw new Resources.NotFoundException ("Image resource not set");}

If it is not empty, we create a bitmap equal to the size of the image resource, and draw the bitmap. The code is as follows:

Bitmap = Bitmap.createBitmap (drawable.getIntrinsicWidth (), drawable.getIntrinsicHeight (), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas (bitmap); drawable.setBounds (0,0, drawable.getIntrinsicWidth (), drawable.getIntrinsicHeight ()); drawable.draw (canvas)

Draw a circular bitmap

Through the above code, we get the original bitmap image, and then we need to draw a circular bitmap, similar to the above, first create a bitmap that is the same size as bitmap

CircleBitmap = Bitmap.createBitmap (bitmap.getWidth (), bitmap.getHeight (), Bitmap.Config.ARGB_8888)

Let's draw a rectangle as big as bitmap.

Paint paint = new Paint (); Rect rect = new Rect (0,0, bitmap.getWidth (), bitmap.getHeight ()); canvas.drawRect (rect,paint); RectF rectF = new RectF (rect)

Set the radius of the circle on the shorter side

Float roundRa = 0.0f _ if (bitmap.getWidth () > bitmap.getHeight ()) {roundRa = bitmap.getHeight () / 2.0f;} else {roundRa = bitmap.getWidth () / 2.0f;}

Set the paint and canvas properties

Paint.setAntiAlias (true); canvas.drawARGB (0,0,0,0); paint.setColor (Color.WHITE); paint.setXfermode (new PorterDuffXfermode (PorterDuff.Mode.SRC_IN))

Canvas.drawARGB makes paint cropping transparent, and the PorterDuffXfermode class in paint.setXfermode is powerful, which we will explain in a separate article.

Finally, we can redraw the bitmap.

Canvas.drawBitmap (bitmap, rect, rect, paint)

The drawing part of the complete code is as follows:

* get bitmap * * @ param bitmap original bitmap * / private Bitmap getCircleBitmap (Bitmap bitmap) {circleBitmap = Bitmap.createBitmap (bitmap.getWidth (), bitmap.getHeight (), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas (circleBitmap); Paint paint = new Paint (); Rect rect = new Rect (0,0, bitmap.getWidth (), bitmap.getHeight ()); RectF rectF = new RectF (rect); float roundRa = 0.0f If (bitmap.getWidth () > bitmap.getHeight ()) {roundRa = bitmap.getHeight () / 2.0f;} else {roundRa = bitmap.getWidth () / 2.0f;} paint.setAntiAlias (true); canvas.drawARGB (0,0,0,0); paint.setColor (Color.GRAY); canvas.drawRoundRect (rectF, roundRa, roundRa, paint); paint.setXfermode (new PorterDuffXfermode (PorterDuff.Mode.SRC_IN); canvas.drawBitmap (bitmap, rect, rect, paint); return circleBitmap;}

Set the final bitmap

After we get the bitma, we can reset it directly and display it.

SetImageBitmap (getCircleBitmap (bitmap))

On "Android how to customize the View drawing round avatar function" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.