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

Source: Internet
Author: User
Tags ellipse drawing repetition xmlns

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);

}
}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.