Easy Tutorial
❮ Cpp Static Const Verilog Process Assign ❯

This is an English translation of the provided Chinese text:


8.3.6 Paint API — Xfermode and PorterDuff Detailed Explanation (Part Three)

Category Android Basic Tutorial

Introduction to This Section:

>

In the previous section, we studied the third child of Xfermode: PorterDuffXfermode, which has a single parameter in its constructor: PorterDuff.Mode. After observing 16 image blending modes, we also wrote code to verify the 18 different blending modes documented, with 18 being the addition of ADD and OVERLAY modes! Of course, merely verifying is not enough; in this section, we will write an example to help us become familiar with how to use the blending modes provided by PorterDuff.Mode in practice! The example in this section is the implementation of circular and rounded-corner shapes!

In 2.3.4 ImageView (Image View), we explained the simplest implementation of a circular ImageView, which is based on the principle of calling clipPath to cut out a circle from the image!

This section, however, uses the DST_IN mode in PorterDuff.Mode to achieve the effect. Without further ado, let's start the content of this section! PS: The example in this section is taken from Hong Yang's great work — Android Xfermode Practical Implementation of Circular and Rounded Images. In addition, we still need to post the effect diagram of PorterDuff.Mode:


1. The Effect Diagram and Implementation Process Analysis to be Achieved:

The effect diagram after running :

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

>

The general implementation process is as described above. Knowing the process makes it much easier to look at the code!


2. Code Implementation:

Custom control attribute: res/attrs.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    &lt;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>
&lt;/resources
mWeakBitmap = new WeakReference<Bitmap>(bitmap);

// Draw the image
canvas.drawBitmap(bitmap, 0, 0, null);
mPaint.setXfermode(null);

}
if (bitmap != null) {
    mPaint.setXfermode(null);
    canvas.drawBitmap(bitmap, 0.0f, 0.0f, mPaint);
    return;
}
}

// Cache Bitmap to avoid reallocating memory and redrawing every OnDraw
@Override
public void invalidate() {
    mWeakBitmap = null;
    if (mWeakBitmap != null) {
        mMaskBitmap.recycle();
        mMaskBitmap = null;
    }
    super.invalidate();
}

// Define a method for drawing shapes

private Bitmap getBitmap() {
    Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(),
            Bitmap.Config.ARGB_8888);

    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);   // Anti-aliasing
    paint.setColor(Color.BLACK);
    if (type == TYPE_ROUND) {
        canvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()),
                mBorderRadius, mBorderRadius, paint);
    } else {
        canvas.drawCircle(getWidth() / 2, getWidth() / 2, getWidth() / 2, paint);
    }
    return bitmap;
}
}

Finally, call it in the layout file: **activity_main.xml** :

```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">

    &lt;com.jay.xfermodedemo1.CircleImageView
        android:layout_width="160dp"
        android:layout_height="240dp"
        android:layout_margin="10dp"
        android:src="@mipmap/ic_bg_meizi2"
        app:type="circle" />

    &lt;com.jay.xfermodedemo1.CircleImageView
        android:layout_width="160dp"
        android:layout_height="280dp"
        android:layout_margin="10dp"
        android:src="@mipmap/ic_bg_meizi1"
        app:Radius="30dp"
        app:type="round" />

</LinearLayout>

Well, if you can't understand the code at first glance, you will after a few more looks~


3. Download this section's code example:

XfermodeDemo1.zip


Summary of this section:

>

In this section, we discussed the first application example of Xfermode and PorterDuff, setting the DST_IN mode to achieve custom ImageViews for circular and rounded corner images. I believe everyone has a basic understanding of the simple application of PorterDuff. Strike while the iron is hot, and in the next section, we will write an example to practice together~ Alright, that's all for now, thank you~

-1.0 Android Basic Tutorial Introduction

-1.0.1 Latest Android Basic Tutorial Catalog for 2015

-1.1 Background and System Architecture Analysis

-1.2 Development Environment Setup

-1.2.1 Developing Android APPs with Eclipse + ADT + SDK

-1.2.2 Developing Android APPs with Android Studio

-1.3 Solving SDK Update Issues

-1.4 Genymotion Emulator Installation

-1.5.1 Git Tutorial on Basic Operations of Local Repositories

-1.5.2 Git: Using GitHub to Set Up a Remote Repository

-1.6 How to Play with 9-patch Images

-1.7 Interface Prototype Design

-1.8 Project-Related Analysis (Various Files, Resource Access)

-1.9 Android Program Signing and Packaging

-1.11 Decompiling APK to Retrieve Code & Resources

-2.1 The Concept of View and ViewGroup

-[2.2.1 LinearLayout (Linear Layout)](android-tutorial-linearlayout

WeChat Follow

❮ Cpp Static Const Verilog Process Assign ❯