Android Custom View implements rounded, rounded, and elliptical pictures (Bitmapshader graphics rendering) _android

First, the preface

Android to achieve rounded rectangles, circles or ellipses and other graphics, generally mainly a custom View plus the use Xfermode of the implementation. The way to achieve fillet picture is actually quite a lot, common is to use Xfermode , Shader . This article directly inherits ImageView , uses the BitmapShader method to realize the circle, the round angle and the ellipse drawing, after everybody sees my this article method, other similar shape also can extrapolate to draw out.

Second, the effect chart:

Iii. Bitmapshader Introduction

BitmapShaderis a Shader subclass that can be Paint.setShader（Shader shader） set,

We only focus here on BitmapShader the construction method:

Mbitmapshader = new Bitmapshader (bitmap, Tilemode.clamp, Tilemode.clamp);

Parameter 1:bitmap

Parameter 2, parameter 3:tilemode;

There are three kinds of values for Tilemode:

Clamp Stretching

REPEAT Repeat

MIRROR Mirroring

If you are setting up screensavers for your computer screen, if the picture is too small, you can choose to repeat, stretch, mirror;

repeat: this bitmap is repeated horizontally, vertically and continuously.

mirroring: Horizontal continuous flip Repeat, longitudinal continuous flip repeat;

Stretch: This and the computer screensaver mode should be a little different, this stretch is the image of the last pixel, horizontal last traverse pixel, continuous repetition, the column of pixels, continuous repetition;

Public Bitmapshader (Bitmap bitmap,shader.tilemode tilex,shader.tilemode Tiley)

This method is invoked to produce a renderer (Shader) with a bitmap drawn.

Bitmap bitmap used within the renderer

Tilex the tiling mode for x to draw the bitmap in. X-direction tile mode on bitmap

Tiley the tiling mode for Y to draw the bitmap in. Y-Direction tile mode on bitmap

Tilemode: (a total of three)

Clamp: If the renderer is outside the original bounds, it will replicate the range of edge staining.

REPEAT: Horizontal and vertical repeating renderer picture, tiled.

MIRROR: Horizontal and vertical repeating renderer picture, which is not the same as the repeat repetition, he is tiled in a mirrored way.

The realization of the picture view of the custom circle, fillet and Ellipse

1. Measure the size of the view

@Override
 protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {
  //TODO auto-generated method Stub
  super.onmeasure (Widthmeasurespec, heightmeasurespec);
  If you are drawing a circle, force the width high size consistent
  if (mtype = type_circle) {
   mwidth = Math.min (Getmeasuredwidth (), Getmeasuredheight ()); C10/>mradius = MWIDTH/2;
   Setmeasureddimension (Mwidth, mwidth);
  }

 

2, set bitmapshader and brush paint

/** * Setting Bitmapshader/private void Setbitmapshader () {drawable drawable = getd
  Rawable ();
  if (null = = drawable) {return;
  } Bitmap Bitmap = Drawabletobitmap (drawable);
  Use bitmap as a shader to create a bitmapshader Mbitmapshader = new Bitmapshader (bitmap, Tilemode.clamp, Tilemode.clamp);
  float scale = 1.0f;
   if (mtype = = type_circle) {//Get bitmap width or height of small value int bsize = Math.min (Bitmap.getwidth (), Bitmap.getheight ());

  Scale = Mwidth * 1.0f/bsize; else if (mtype = = Type_round | | mtype = = type_oval) {//If the width or height of the picture does not match the width of the view, calculate the scale that needs to be scaled; the width of the scaled picture must be greater than the width of our view; so I
  We take large values here; scale = Math.max (getwidth () * 1.0f/bitmap.getwidth (), getheight () * 1.0f/bitmap.getheight ());
  //Shader transformation matrix, where we are mainly used to enlarge or shrink mmatrix.setscale (scale, scale);
  Setting the transformation matrix Mbitmapshader.setlocalmatrix (Mmatrix);

 Mpaint.setshader (Mbitmapshader); }

3. The final is to draw out the rounded corners, round and oval pictures , must be onDraw inside, the fundamental principle is to use the above mBitmapShader rendered brush to draw

@Override
 protected void OnDraw (Canvas Canvas) {

  if (null = Getdrawable ()) {return
   ;
  }
  Setbitmapshader ();
  if (mtype = = type_circle) {
   canvas.drawcircle (Mradius, Mradius, Mradius, mpaint);
  } else if (mtype = = Type_round ) {
   mpaint.setcolor (color.red);
   Canvas.drawroundrect (Mrect, Mroundradius, Mroundradius, mpaint);
  else if (mtype = = type_oval) {
   canvas.drawoval (mrect, mpaint);
  }
 }

V. View layout implementation

This is a simple, 3 custom view :

<scrollview xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http:// Schemas.android.com/tools "android:layout_width=" match_parent "android:layout_height=" Match_parent "Tools:context" =". Mainactivity "> <linearlayout android:layout_width=" match_parent "android:layout_height=" Wrap_content "Andro" Id:gravity= "Center_horizontal" android:layout_margintop= "5DP" android:layout_marginbottom= "25DP" Android:o rientation= "vertical" > <com.czm.viewdrawtest.xcroundandovalimageview android:id= "@+id/cicleimageview" Andr Oid:layout_width= "200DP" android:layout_height= "200DP" android:src= "@drawable/img1"/> <com.czm.viewdrawtes T.xcroundandovalimageview android:id= "@+id/roundrectimageview" android:layout_width= "200DP" android:layout_height = "240DP" android:layout_margintop= "5DP" android:src= "@drawable/img2"/> <com.czm.viewdrawtest.xcroundandova Limageview android:id= "@+id/ovalimageview" android:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:layout_margintop= "5DP" android:src= "@drawable Img3 "/> </LinearLayout> </ScrollView>

Vi. using and Testing custom view

The custom drawing directly above View is finished, the following is the use View of this, using the same method as normal ImageView , as a normal control to use.

Package com.czm.viewdrawtest;
Import android.app.Activity;
Import Android.os.Bundle;
Import Android.view.Window;
Import Android.view.WindowManager; /** * Use custom ImageView * @author caizhiming * */public class Mainactivity extends activity {private Xcroundandovalim Ageview circleimageview;//Circular picture private Xcroundandovalimageview roundrectimageview;//rounded rectangular picture private Xcroundandovalimageview ovalimageview;//ellipse picture @Override protected void onCreate (Bundle savedinstancestate) {SUPER.ONCR
  Eate (savedinstancestate); 
  Set Untitled requestwindowfeature (Window.feature_no_title); Set Full-screen GetWindow (). SetFlags (WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_ 
  fullscreen);
  
  Setcontentview (R.layout.activity_main);
 Initviews (); /** * Initialize views */private void Initviews () {Circleimageview = (Xcroundandovalimageview) Findviewbyid (R.id.cicleim
  Ageview);
  Roundrectimageview = (Xcroundandovalimageview) Findviewbyid (R.id.roundrectimageview); OvalimaGeview = (Xcroundandovalimageview) Findviewbyid (R.id.ovalimageview);
  Roundrectimageview.settype (Xcroundandovalimageview.type_round);
  
  Roundrectimageview.setroundradius (100);
  Ovalimageview.settype (Xcroundandovalimageview.type_oval);
  
 Ovalimageview.setroundradius (50); }
}

Vii. Summary

This is the entire content of this article, I hope this article content for everyone to develop Android can help.