Android implements circular, rounded, and elliptical custom image views (using BitmapShader Graphics Rendering Method)

Android implements circular, rounded, and elliptical custom image views (using BitmapShader Graphics Rendering Method)
I. Overview Android implements rounded rectangle, circle, and elliptical shapes. Generally, it is implemented by adding a custom View and Xfermode. There are actually many methods to achieve the rounded corner image. The common method is to use Xfermode and Shader. This article inherits the ImageView directly and uses the BitmapShader method to draw circles, rounded corners, and rectangles. After reading the methods in this article, other similar shapes can be drawn in turn. II. III. Introduction to BitmapShader is a Shader subclass. setShader (Shader shader) is set. Here we only focus on BitmapShader. Construction Method: mBitmapShader = new BitmapShader (bitmap, TileMode. CLAMP, TileMode. CLAMP); parameter 1: bitmap parameter 2, parameter 3: TileMode; TileMode value three: CLAMP stretch REPEAT duplicate MIRROR image if you set screen saver for the computer screen, if the image is too small, you can choose to repeat, stretch, and image. Repeat: the bitmap image is repeated horizontally and vertically: the screen saver mode should be somewhat different from the screen saver mode of the computer. This stretching is the last pixel of the image; the last horizontal pixel is rampant, constantly repeating A column of pixels keeps repeating. public BitmapShader (Bitmap bitmap, Shader. TileMode tileX, Shader. TileMode tileY) calls this method to generate a Renderer with a Bitmap ). Bitmap tileX The tiling mode for x to draw the bitmap in The Renderer. tileY The tiling mode for y to draw the bitmap in. tileMode: (three in total) CLAMP: If the Renderer exceeds the original boundary range, the inner edge of the replication range is stained. REPEAT: Specifies the horizontal and vertical repeated Renderer image, tiled. MIRROR: the portrait and landscape repeated Renderer image. This is not the same as REPEAT. It is tiled as an image. IV. Implementation of image views with custom circles, rounded corners, and ovans 1. measure the View Size @ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {// TODO Auto-generated method stub super. onMeasure (widthMeasureSpec, heightMeasureSpec); // if it is to draw a circle, the forced width and height are consistent if (mType = TYPE_CIRCLE) {mWidth = Math. min (getMeasuredWidth (), getMeasuredHeight (); mRadius = mWidth/2; setMeasuredDimension (mWidth, mWidth);} 2. Set BitmapShader and brush Paint/*** set BitmapShader */private void setBitmapShader () {Drawable drawable = getDrawable (); if (null = drawable) {return ;} bitmap bitmap = drawableToBitmap (drawable); // uses bitmap as the coloring tool to create a BitmapShader mBitmapShader = new BitmapShader (bitmap, TileMode. CLAMP, TileMode. CLAMP); float scale = 1.0f; if (mType = TYPE_CIRCLE) {// get the bitmap width or height of the small value int bSize = Math. min (bitmap. getWidth (), bitmap. getH Eight (); scale = mWidth * 1.0f/bSize;} else if (mType = TYPE_ROUND | mType = TYPE_OVAL) {// If the width or height of the image does not match the width and height of the view, calculate the scale to be scaled. The width and height of the scaled image are calculated, it must be larger than the width and height of our view. Therefore, we should take measures here; scale = Math. max (getWidth () * 1.0f/bitmap. getWidth (), getHeight () * 1.0f/bitmap. getHeight ();} // The shader transformation matrix. Here we mainly use it to zoom in or out of mMatrix. setScale (scale, scale); // sets the transform matrix mBitmapShader. setLocalMatrix (mMatrix); mPaint. setShader (mBit MapShader);} 3. the last step is to draw a rounded corner, circle, and elliptical image. It must be in onDraw. The fundamental principle is to use the paint brush rendered by the above mBitmapShader to draw @ Override protected void onDraw (Canvas canvas Canvas) {if (null = getDrawable () {return;} setBitmapShader (); if (mType = TYPE_CIRCLE) {canvas. drawCircle (mRadius, mPaint);} else if (mType = TYPE_ROUND) {mPaint. setColor (Color. RED); canvas. drawRoundRect (mRect, mRoundRadius, mRoundRadius, mPaint);} e Lse if (mType = TYPE_OVAL) {canvas. drawOval (mRect, mPaint);} 5. view layout implementation this is very simple, that is, three custom views: <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_conten T "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: l Ayout_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> 6. Use and test the custom View drawn on the custom View, the following is how to use this Vi Ew. The usage is the same as that of an ordinary ImageView, and can be used as a common control. 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 image private XCRoundAndOvalImageView roundRectImageView; // private XCRoundAndOvalImageView ovalImageView; // oval image @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); // you can specify the value of requestWindowFeature (Window. FEATURE_NO_TITLE); // sets 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 );}}