Custom circular Picture

Circular picture must be the project development is also a lot of use of a knowledge point it.

So here to learn simple to make a circular picture, mainly using the knowledge of Bitmapshader class to achieve

First, to understand the Bitmapshader class

Bitmapshader is a subclass of Shader and can be set by Paint.setshader (Shader Shader)

Take a look at how the Bitmapshader is constructed.

New Bitmapshader (Bitmap,tilemode, Tilemode);

Call this method to produce a renderer that draws a bitmap (Shader)

See Parameters

Bitmap is the bitmap within the renderer

Tilemode, divided into three categories

1, CLAMP: If the renderer exceeds the original boundary range, it replicates the range of edge staining, that is, stretching

2, REPEAT: Horizontal and vertical duplicate renderer picture, tile, that is, repeat

3, MIRROR: horizontal and vertical repeated renderer picture, this and repeat repetition way, he is tiled in a mirrored manner, similar to the Lake objects and reflections in the lake

The purpose of using this class is to set its object to paint, and paint will draw bitmaps based on Tilemode.

Second, the realization of circular picture steps

First, ImageView and ImageButton need pictures,

There are two ways to create a circular picture

1. Custom view inheritance ImageView, ImageButton

2, imageview.setxxx ();

Look at the settings of the ImageView image method:

1 New ImageView (this); 2 3 imageview.setimagedrawable ();  The parameter is a drawable object 4imageview.setimageresource ();  parameter is a resource file 5 imageview.setimagebitmap ();    parameter is a Bitmap object

Then we implement this method for custom inheritance drawable class, using imageview.setimagedrawable (); Set up a circular picture

Implementation steps:

1. Create a new class to inherit drawable

To add a member variable

Private paint paint;     Custom Required Brush class private  Bitmap Bitmap;   Convert bitmap to drawable,privateint  width;       The width of the circular picture is privateint  height;      The height of the circular picture privateint Radiu;       Radius of a circular picture

2. Overriding the construction method

1  PublicCircleimageview (Bitmap Bitmap) {2          This. Bitmap =bitmap;3Bitmapshader Bitmapshader =4                 NewBitmapshader (Bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);5 6Paint =NewPaint ();7         //anti-aliasing makes the edges smooth8Paint.setantialias (true);9         //Get the width height of the bitmap bitmapTenwidth =bitmap.getwidth (); OneHeight =bitmap.getheight (); A        //gets the minimum value of the wide high School of the bitmap bitmap as the radius of the circular picture -Radiu =math.min (Bitmap.getwidth (), Bitmap.getheight ())/2; -  the         //Set Shader - Paint.setshader (bitmapshader); -}

3. Rewriting other necessary methods

@Override Public voidDraw (canvas canvas) {//with the center point of the bitmap, the length and width of the smallest edge is the radius of the circle, the bitmap is filled into the circleCanvas.drawcircle (width/2, height/2, Radiu,paint); }    //Set Transparency@Override Public voidSetalpha (inti) {paint.setalpha (i); }    //Set Color@Override Public voidSetcolorfilter (Colorfilter colorfilter) {paint.setcolorfilter (colorfilter); } @Override Public intgetopacity () {returnpixelformat.translucent; } @Override Public intgetintrinsicheight () {returnwidth; } @Override Public intgetintrinsicwidth () {returnwidth; }

Full code:

1 Package Com.xqx.CircleImageView;2 3Import android.graphics.*;4 import android.graphics.drawable.Drawable;5 6 7  Public classCircleimageview extends drawable {8 9     Privatepaint paint;Ten     PrivateBitmap Bitmap; One     Private intwidth; A     Private intheight; -     Private intRadiu; -  the      PublicCircleimageview (Bitmap Bitmap) { -          This. Bitmap =bitmap; -Bitmapshader Bitmapshader = -                 NewBitmapshader (Bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); +  -Paint =NewPaint (); +         //anti-aliasing makes the edges smooth APaint.setantialias (true); at         //gets the minimum value of the bitmap bitmap for the wide high school, as a circular picture of the -width =bitmap.getwidth (); -Height =bitmap.getheight (); -Radiu =math.min (Bitmap.getwidth (), Bitmap.getheight ())/2; -  -         //Set Shader in Paint.setshader (bitmapshader); -     } to  + @Override -      Public voidDraw (canvas canvas) { the         //with the center point of the bitmap, the length and width of the smallest edge is the radius of the circle, the bitmap is filled into the circle *Canvas.drawcircle (width/2, height/2, radiu,paint); $     }Panax Notoginseng  -     //Set Transparency the @Override +      Public voidSetalpha (inti) { A Paint.setalpha (i); the     } +  -     //Set Color $ @Override $      Public voidSetcolorfilter (Colorfilter colorfilter) { - Paint.setcolorfilter (colorfilter); -     } the  - @OverrideWuyi      Public intgetopacity () { the         returnpixelformat.translucent; -     } Wu  -  About @Override $      Public intgetintrinsicheight () { -         returnwidth; -     } -  A @Override +      Public intgetintrinsicwidth () { the         returnwidth; -     } $}

Circleimageview

4. Use

1 Package Com.xqx.CircleImageView;2 3 import android.app.Activity;4Import android.graphics.*;5 import Android.os.Bundle;6 import Android.widget.ImageView;7 8  Public classMainactivity extends Activity {9     PrivateImageView ImageView;Ten @Override One      Public voidonCreate (Bundle savedinstancestate) { A super.oncreate (savedinstancestate); - Setcontentview (r.layout.main); -ImageView =(ImageView) Findviewbyid (r.id.img); the         Bitmap Bitmap = Bitmapfactory.decoderesource (Getresources (), R.drawable.icon), imageview.setimagedrawable (new Circleimageview (bitmap)); -     } -}

：

Circular Picture Original

As you can see, the resulting circular picture coordinates dot is the center point of the original, and the diameter is the length of the edge of the shorter one in the original length and width

---------------------------------------------------------------------------------------------

Learning Source: cirledrawimage fillet pictures

On this basis to make some changes, ideas or code if there is a problem, welcome to point out.

Summarize the disadvantages of this approach:

1, the method can not scale the original image, Wakahara the width of the picture is not consistent, the display is not good, can not display the longer side of the part of the content

2, the effect of circular picture has certain loss, the effect is poor

It is suitable for the requirement of not high picture fineness.

Custom View inheritance ImageView is a better solution to these problems, so I can summarize them later.

Custom circular Picture