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
BitmapShader
is 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.