Android uses Bitmapshader graphics rendering to implement rounded, rounded, and oval custom picture view

I. Overview

Android implements rounded rectangles, circles, or ellipses, typically a custom view plus the use of Xfermode implementations. The method of realizing fillet picture is actually quite many, common is to use Xfermode,shader. This article directly inherits the 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 come to draw out extrapolate.

Second, the effect chart:

Iii. Bitmapshader Introduction

Bitmapshader is a Shader subclass that can be set by Paint.setshader (Shader Shader),

Here we focus only 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 pattern on the bitmap

Tiley the tiling mode for Y to draw the bitmap in. The Y-direction tile pattern on the 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

The code is as follows	Copy Code
@Override protected void onmeasure (int widthmeasurespec, int heightmeasurespec) { TODO auto-generated Method Stub Super.onmeasure (Widthmeasurespec, Heightmeasurespec); If you are drawing a circle, force a wide-height uniform size if (mtype = = type_circle) { Mwidth = Math.min (Getmeasuredwidth (), Getmeasuredheight ()); Mradius = MWIDTH/2; Setmeasureddimension (Mwidth, mwidth); } }

2, set bitmapshader and brush paint

The code is as follows

Copy Code

/** * Set Bitmapshader */ private void Setbitmapshader () { drawable drawable = getdrawable (); if (null = = drawable) { Return } Bitmap Bitmap = Drawabletobitmap (drawable); 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 a bitmap wide or high 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 proportions that need to be scaled; the width of the scaled picture must be greater than the width of our view; So here we take the big value; Scale = Math.max (getwidth () * 1.0f/bitmap.getwidth (), getheight () * 1.0f/bitmap.getheight ()); } Shader transformation matrix, where we're mainly used to zoom in or out. Mmatrix.setscale (scale, scale); Set Transformation matrix Mbitmapshader.setlocalmatrix (Mmatrix); Mpaint.setshader (Mbitmapshader); }

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

The code is as follows	Copy Code
@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 very simple, 3 custom view:

The code is as follows

Copy Code

<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"          android:gravity= "Center_horizontal"          android:layout_margintop= "5DP"         android:layout_marginbottom= "25DP"         android:orientation= "vertical"         <com.czm.viewdrawtest.xcroundandovalimageview              android:id= "@+id/cicleimageview"              android:layout_width= "200DP"              android:layout_height= "200DP"              android:src= "@drawable/img1"/>         <com.czm.viewdrawtest.xcroundandovalimageview              android:id= "@+id/roundrectimageview"              android:layout_width= "200DP"              android:layout_height= "240DP"              android:layout_margintop= "5DP"              android:src= "@drawable/img2"/> <com.czm.viewdrawtest.xcroundandovalimageview 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 view that is drawn directly above is finished, the following is the use of this view, using the same method as ordinary ImageView, as a normal control to use.

The code is as follows

Copy Code

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 Xcroundandovalimageview circleimageview;//Circular picture Private Xcroundandovalimageview roundrectimageview;//rounded rectangular picture Private Xcroundandovalimageview ovalimageview;//Oval picture @Override protected void OnCreate (Bundle savedinstancestate) { Super.oncreate (savedinstancestate); Set no title 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.cicleimageview); 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); } }