Custom circle image, custom circle

Custom circle image, custom circle

Circular images must be a point of knowledge used in project development.

Here we will learn how to create a circular image, mainly using the knowledge of the BitmapShader class.

 

I. First, let's take a look at the BitmapShader class.

BitmapShader is a subclass of Shader. You can set it through Paint. setShader (Shader shader ).

Let's take a look at the construction method of BitmapShader.

BitmapShader bitmapShader = new BitmapShader(bitmap,TileMode, TileMode);

Call this method to generate a Renderer with a bitmap)

View Parameters

Bitmap is the bitmap in the Renderer.

TileMode, divided into three categories

1. CLAMP: If the Renderer is out of the original boundary range, it will copy the inner edge of the range to dye, that is, stretch

2. REPEAT: REPEAT the horizontal and vertical Renderer images, tiled, that is, repeated

3. MIRROR: Repeated horizontal and vertical Renderer images. This is not the same as REPEAT. It is tiled as images, similar to objects on the lake and reflections on the lake.

 

The purpose of this class is to set its object to Paint, and Paint will draw Bitmap Based on TileMode.

 

2. steps for implementing a circular image

First, ImageView and ImageButton need images,

There are two ways to generate a circular image

1. Custom View inherits ImageView and ImageButton

2. imageView. setXXX ();

Check the image setting method of ImageView:

1 ImageView imageView = new ImageView (this); 2 3 imageView. setImageDrawable (); // The parameter is a Drawable object 4 imageView. setImageResource (); // The parameter is a resource file 5 imageView. setImageBitmap (); // The parameter is a Bitmap object.

 

The implementation method here is to customize the inherited Drawable class, and use imageView. setImageDrawable (); To set the circular image

Steps:

1. Create a new class to inherit Drawable

Add member variables

Private Paint paint; // customize the necessary brush class private Bitmap bitmap; // convert Bitmap to Drawable, private int width; // The width of the circular image private int height; // The height of the circular image private int radiu; // the radius of the circular image

2. Rewrite the constructor

1 public CircleImageView (Bitmap bitmap) {2 this. bitmap = bitmap; 3 BitmapShader bitmapShader = 4 new BitmapShader (bitmap, Shader. tileMode. CLAMP, Shader. tileMode. CLAMP); 5 6 paint = new Paint (); 7 // anti-sawtooth, smooth edge 8 paint. setAntiAlias (true); 9 // obtain the bitmap's width and height (10 width = bitmap. getWidth (); 11 height = bitmap. getHeight (); 12 // obtain the minimum value of the bitmap in width, height, and height. The radius of the circular image is 13 radiu = Math. min (bitmap. getWidth (), bitmap. getHeight ()/2; 14 15 // set shader16 paint. setShader (bitmapShader); 17}

 

3. Rewrite other necessary methods

@ Override public void draw (Canvas canvas) {// The bitmap center is the center, the smallest side of the length and width is the radius of the circle, and the Bitmap is filled into the circle canvas. drawCircle (width/2, height/2, radiu, paint);} // sets the transparency @ Override public void setAlpha (int I) {paint. setAlpha (I);} // set the color @ Override public void setColorFilter (ColorFilter colorFilter) {paint. setColorFilter (colorFilter) ;}@ Override public int getOpacity () {return PixelFormat. TRANSLUCENT ;}@ Override public int getIntrinsicHeight () {return width ;}@ Override public int getIntrinsicWidth () {return width ;}

 

Complete code:

1 package com. xqx. circleImageView; 2 3 import android. graphics. *; 4 import android. graphics. drawable. drawable; 5 6 7 public class CircleImageView extends Drawable {8 9 private Paint paint; 10 private Bitmap bitmap; 11 private int width; 12 private int height; 13 private int radiu; 14 15 public CircleImageView (Bitmap bitmap) {16 this. bitmap = bitmap; 17 BitmapShader bitmapShader = 18 new BitmapShader (bitmap, Shader. tileMode. CLAMP, Shader. tileMode. CLAMP); 19 20 paint = new Paint (); 21 // anti-sawtooth, smooth edge 22 paint. setAntiAlias (true); 23 // obtain the minimum value of the bitmap in width, height, and height, as the 24 width = bitmap of the circular image. getWidth (); 25 height = bitmap. getHeight (); 26 radiu = Math. min (bitmap. getWidth (), bitmap. getHeight ()/2; 27 28 // set shader29 paint. setShader (bitmapShader); 30} 31 32 @ Override33 public void draw (Canvas canvas) {34 // The Circle is centered on the bitmap center, and the smallest side of the length and width is the radius, fill the Bitmap into the circle 35 canvas. drawCircle (width/2, height/2, radiu, paint); 36} 37 38 // set transparency 39 @ Override40 public void setAlpha (int I) {41 paint. setAlpha (I); 42} 43 44 // set color 45 @ Override46 public void setColorFilter (ColorFilter colorFilter) {47 paint. setColorFilter (colorFilter); 48} 49 50 @ Override51 public int getOpacity () {52 return PixelFormat. TRANSLUCENT; 53} 54 55 56 @ Override57 public int getIntrinsicHeight () {58 return width; 59} 60 61 @ Override62 public int getIntrinsicWidth () {63 return width; 64} 65}CircleImageView

 

4. Application

 1 package com.xqx.CircleImageView; 2  3 import android.app.Activity; 4 import android.graphics.*; 5 import android.os.Bundle; 6 import android.widget.ImageView; 7  8 public class MainActivity extends Activity { 9     private ImageView imageView;10     @Override11     public void onCreate(Bundle savedInstanceState) {12         super.onCreate(savedInstanceState);13         setContentView(R.layout.main);14         imageView = (ImageView) findViewById(R.id.img);15         Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.icon);16         imageView.setImageDrawable(new CircleImageView(bitmap));17     }18 }

 

:

 

Circular Image Source

 

 

 

 

 

It can be seen that the generated circular image coordinate dot is the central point of the source image, and the diameter is the length of the shorter side of the source image.

 

 

Bytes ---------------------------------------------------------------------------------------------

Learning Source: CirleDrawImage rounded corner Image

Make some modifications on this basis. If you have any questions about the idea or code, please note.

Summarize the disadvantages of this method:

1. This method cannot scale the source image. If the width and height of the source image are different, the display effect is not good, and part of the content with longer edges cannot be displayed normally.

2. The circular image has a certain loss, and the effect is not good.

Suitable for use with low requirements on image fineness

 

Custom View inherits ImageView to better solve these problems ..