Android Basics Getting Started tutorial--8.3.6 Paint API--xfermode and Porterduff detailed (iii)

Android Basics Getting Started tutorial--8.3.6 Paint API--xfermode and Porterduff detailed (iii)

tags (space delimited): Android Basics Getting Started Tutorial

Introduction to this section:

In the previous section, we learned about the three sons in Xfermode: The Porterduffxfermode constructor method is a parameter:
Porterduff.mode, after watching 16 images in mixed mode, we wrote the code to verify the document
18 different mix modes, 18 new Add and overlay two modes! Of course, just verifying that knowing is not enough,
In this section we will write an example to help us familiarize ourselves with how we use Porterduff.mode to provide us with the
These mixed patterns! Examples of this section are: Round & rounded graphics implementation!
Getting Started with Android Basics Tutorial--2.3.4 ImageView (Image view) We finally explained one of the simplest
Draw the implementation of the circular imageview, the principle is called on the picture Clippath cut out a circle!
And this section is the use of Porterduff.mode in the dst_in model to achieve, say not much, start this section content!
PS: The example of this section is taken from the--android xfermode of the Great God of Hongdae to realize round, rounded pictures
In addition, the Porterduff.mode should be affixed:

1. To achieve and implement the process analysis:

after the run :

Well, the above is an effect we want to achieve through this PorterDuff.Mode.DST_IN mode!
Let us analyze the analysis implementation process:

• Step 1 :
  Xfermode is nothing more than a two-layer diagram, first drawn by the DST diagram (the target map), after the map called SRC (the original), we want to implement the
  round or rounded corners, We can first draw out the pictures to be displayed (DST), here we set by the SRC properties,
  then draw the circle and fillet (SRC), we want to show the part where they intersect, and is the content of the picture section,
  So select: dst_ In mode!
• Step 2 :
  Well, I know the principle, then we have to consider the custom ImageView related issues:
  
  • We want to draw a view that is rounded or rounded, it needs to be added attributes, and the fillet also requires a
    parameter of the fillet radius, so we can remove the
    parameters by customizing the properties (Attrs.xml) and then customizing the view's construction Method! The
  • is then calculated for the size of the image:
    First If we set a circle, we need to make the width and height consistent, whichever is the minimum, we can call getmeasuredxxx at the Onmesure () method
    . () Get a wide height, see who is smaller, call Setmeasureddimension (x, x); Set the width high!
    then , we get the picture width height in the OnDraw () method, then according to the picture width height, as well as the view width height, calculates the scale ratio,
    The false piece width height and the view's width height does not match, the crime picture width height must be bigger than the view width height , so, take the big value!
  • and then to draw the picture, define a method for drawing the drawing, and then after initializing the brush, set Setxfermode to
    PorterDuff.Mode.DST_IN, first draw the picture, Drawing the graphic
  • Last is something about the picture cache, which uses WeakReference to cache images, avoid allocating memory
    and redraw each time OnDraw, and finally cache in invalidate!

The general implementation process, such as the above, know the process and look at the code is much easier!

2. Code implementation:

Custom control properties:res/attrs.xml:

<?xml version= "1.0" encoding= "Utf-8"?><resources>    <declare-styleable name="Circleimageview">        <attr name="Radius" format="Dimension"/>        <attr name="type">            <enum name="Circle" value="0"/>            <enum name="Round" value="1"/>        </attr>    </declare-styleable></Resources>

Then the custom ImageView:Circleimageview.java:

/** * Created by Jay on 2015/10/25 0025. * * Public  class circleimageview extends ImageView {    PrivatePaint Mpaint;PrivateXfermode Mxfermode =NewPorterduffxfermode (PorterDuff.Mode.DST_IN);PrivateBitmap Mmaskbitmap;PrivateWeakreference<bitmap> Mweakbitmap;//Picture-related properties    Private intType//type, round or rounded corners     Public Static Final intType_circle =0; Public Static Final intType_round =1;Private Static Final intBoder_radius_default =Ten;//fillet default size value    Private intMborderradius;//Fillet size     Public Circleimageview(Context context) { This(Context,NULL); } Public Circleimageview(context context, AttributeSet attrs) {Super(context, attrs); Mpaint =NewPaint (); Mpaint.setantialias (true);//Remove the relevant values we set for the view in the AttrsTypedArray Tarray = context.obtainstyledattributes (Attrs, R.styleable.circleimageview);        Mborderradius = Tarray.getdimensionpixelsize (R.styleable.circleimageview_radius, BODER_RADIUS_DEFAULT);        Type = Tarray.getint (R.styleable.circleimageview_type, type_circle);    Tarray.recycle (); } Public Circleimageview(context context, AttributeSet attrs,intDEFSTYLEATTR) {Super(Context, attrs, defstyleattr); }@Override    protected void onmeasure(intWidthmeasurespec,intHEIGHTMEASURESPEC) {Super. Onmeasure (Widthmeasurespec, Heightmeasurespec);if(type = = type_circle) {intwidth = math.min (Getmeasuredwidth (), Getmeasuredheight ()); Setmeasureddimension (width, width);//Set the size of the current view}    }@Override    protected void OnDraw(Canvas canvas) {//Remove the bitmap in the cacheBitmap Bitmap = Mweakbitmap = =NULL?NULL: Mweakbitmap.get ();if(Bitmap = =NULL|| Bitmap.isrecycled ()) {//Get picture width highdrawable drawable = getdrawable ();intwidth = Drawable.getintrinsicwidth ();intHeight = drawable.getintrinsicheight ();if(Drawable! =NULL) {bitmap = Bitmap.createbitmap (GetWidth (), GetHeight (), Bitmap.Config.ARGB_8888); Canvas Drawcanvas =NewCanvas (bitmap);floatScale =1.0Fif(type = = Type_round) {scale = Math.max (getwidth () *1.0F/width, GetHeight () *1.0F/height); }Else{scale = GetWidth () *1.0F/math.min (width, height); }//According to the scale, set bounds, which is equivalent to zooming the picture.Drawable.setbounds (0,0, (int) (Scale * width), (int) (scale * height)); Drawable.draw (Drawcanvas);if(Mmaskbitmap = =NULL||                Mmaskbitmap.isrecycled ()) {Mmaskbitmap = Getbitmap ();                } mpaint.reset (); Mpaint.setfilterbitmap (false); Mpaint.setxfermode (Mxfermode);//Draw ShapesDrawcanvas.drawbitmap (Mmaskbitmap,0,0, Mpaint);//bitmap Cache, avoid each call to OnDraw, allocate memoryMweakbitmap =NewWeakreference<bitmap> (BITMAP);//Draw picturesCanvas.drawbitmap (Bitmap,0,0,NULL); Mpaint.setxfermode (NULL); }        }if(Bitmap! =NULL) {Mpaint.setxfermode (NULL); Canvas.drawbitmap (Bitmap,0.0F0.0F, Mpaint);return; }    }//cache bitmap, avoid re-allocating memory and drawing every time OnDraw    @Override     Public void Invalidate() {Mweakbitmap =NULL;if(Mweakbitmap! =NULL) {mmaskbitmap.recycle (); Mmaskbitmap =NULL; }Super. Invalidate (); }//Define a method for drawing shapes    PrivateBitmapGetbitmap() {Bitmap Bitmap = Bitmap.createbitmap (GetWidth (), GetHeight (), Bitmap.Config.ARGB_8888); Canvas Canvas =NewCanvas (bitmap); Paint paint =NewPaint (Paint.anti_alias_flag);//anti-aliasingPaint.setcolor (Color.Black);if(type = = Type_round) {Canvas.drawroundrect (NewRECTF (0,0, GetWidth (), GetHeight ()), Mborderradius, Mborderradius, paint); }Else{canvas.drawcircle (getwidth ()/2, getwidth ()/2, getwidth ()/2, paint); }returnBitmap }}

Finally in the layout file there is called under:activity_main.xml:

<linearlayout xmlns:android="Http://schemas.android.com/apk/res/android"xmlns:app="Http://schemas.android.com/apk/res-auto"Android:layout_width="Match_parent"android:layout_height="Match_parent"android:orientation="Vertical"> <com. Jay. Xfermodedemo1. CircleimageviewAndroid:layout_width="160DP"android:layout_height="240DP"android:layout_margin="10DP"Android:src="@mipmap/ic_bg_meizi2"App:type="Circle"/> <com. Jay. Xfermodedemo1. CircleimageviewAndroid:layout_width="160DP"android:layout_height="280DP"android:layout_margin="10DP"Android:src="@mipmap/ic_bg_meizi1"app:radius="30DP"App:type="Round"/></linearlayout>

OK, the code once can not understand, see more than two times to understand the ~

3. This section of the code sample download:

Xfermodedemo1.zip

This section summarizes:

In this section we explain the first application example of Xfermode and Porterduff, setting the dst_in mode to achieve
Round and rounded picture imageview of the custom, I believe that the simple application of porterduff has some clues,
Strike while, the next section we will write an example to practice practiced hand ~ good, say so much, thank you ~

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Android Basics Getting Started tutorial--8.3.6 Paint API--xfermode and Porterduff detailed (iii)