本节导言:

上一节,咱们学习了Xfermode中的三儿子:PorterDuffXfermode结构办法中的为一个参数: PorterDuff.Mode,咱们在观看了16种图片混排形式后,又自己写代码来验证了一下文档中 18种不同的混排形式,18种是新增了ADD和OVERLAY两种形式!当然,只是验证知道是不行的, 本节咱们来写个比如,协助咱们了解下实践傍边咱们怎样去运用PorterDuff.Mode为咱们供给的 这些混排形式!本节带来的比如是:圆形&圆角图形的完结!

2.3.4 ImageView(图画视图)咱们最终就解说了一个最简略 制作圆形ImageView的完结,原理是在图片上调用clipPath切出一个圆形!

而这节则是运用PorterDuff.Mode中的DST_IN形式来完结,话不多说,开端本节内容! PS:本节比如采自弘洋大神的—— 别的,仍是要贴下PorterDuff.Mode的作用图:


1.要完结的作用图以及完结流程剖析:

运转后的作用图

嗯,上述便是咱们要完结的一个作用,经过这个PorterDuff.Mode.DST_IN形式来完结! 咱们来剖析剖析完结流程:

  • Step 1: Xfermode无非是两层图构成,先制作的叫DST图(目标图),后制作的叫SRC图(原图),咱们要完结 圆形或许圆角,咱们能够先把要显现的图片制作出来(DST),这儿咱们经过src的特点进行了设置; 接着再制作出圆形和圆角(SRC),咱们想显现的部分是他们相交的当地,并且是图片部分的内容, 所以挑选:DST_IN形式!
  • Step 2: 嗯,知道了原理,接下来咱们要考虑自界说ImageView相关的问题了:
  • 咱们是想制作的View是圆角或许圆形,那就需求加个特点来判别,而圆角也需求一个圆角半径的 参数,于是乎咱们能够经过自界说特点(attrs.xml)的办法,然后再自界说View的结构办法中,将 这些参数取出来!
  • 接着到图片巨细的核算了: 首要假设咱们设置的是圆形的话,则需求让宽高共同,以最小值为准,咱们能够在onMesure()办法 调用getMeasuredXxx()取得宽高,看谁小一点,调用setMeasuredDimension(x, x);设置宽高! 然后,咱们在onDraw()办法中获取图片宽高,接着依照图片宽高,以及View宽高,核算缩放份额, 假设图片宽高与View的宽高不匹配,所犯后的图片宽高一定要大于View的宽高,so,取大值!
  • 再接着就到图片的制作了,界说一个制作图形的办法,接着初始化画笔后,设置setXfermode为 PorterDuff.Mode.DST_IN,先制作图片,再制作图形
  • 最终是图片缓存的一些东西,这儿用了WeakReference来缓存图片,防止每次onDraw都分配内存 与重绘,最终在invalidate中清楚缓存!

大体的完结流程如上述,知道流程再看代码就简略很多了!


2.代码完结:

自界说控件特点: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>

接着是自界说ImageView:CircleImageView.java

/**
 * Created by Jay on 2015/10/25 0025.
 */
public class CircleImageView extends ImageView {

    private Paint mPaint;
    private Xfermode mXfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
    private Bitmap mMaskBitmap;
    private WeakReference<Bitmap> mWeakBitmap;

    //图片相关的特点
    private int type;                           //类型,圆形或许圆角
    public static final int TYPE_CIRCLE = 0;
    public static final int TYPE_ROUND = 1;
    private static final int BODER_RADIUS_DEFAULT = 10;     //圆角默许巨细值
    private int mBorderRadius;                  //圆角巨细


    public CircleImageView(Context context) {
        this(context, null);
    }

    public CircleImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        //取出attrs中咱们为View设置的相关值
        TypedArray 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, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (type == TYPE_CIRCLE) {
            int width = Math.min(getMeasuredWidth(), getMeasuredHeight());
            setMeasuredDimension(width, width);    //设置当时View的巨细
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {

        //在缓存中取出bitmap
        Bitmap bitmap = mWeakBitmap == null ? null : mWeakBitmap.get();
        if (bitmap == null || bitmap.isRecycled()) {
            //获取图片宽高
            Drawable drawable = getDrawable();
            int width = drawable.getIntrinsicWidth();
            int height = drawable.getIntrinsicHeight();

            if (drawable != null) {
                bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
                Canvas drawCanvas = new Canvas(bitmap);
                float scale = 1.0f;
                if (type == TYPE_ROUND) {
                    scale = Math.max(getWidth() * 1.0f / width, getHeight()
                            * 1.0f / height);
                } else {
                    scale = getWidth() * 1.0F / Math.min(width, height);
                }
                //依据缩放份额,设置bounds,相当于缩放图片了
                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);

                //制作形状
                drawCanvas.drawBitmap(mMaskBitmap, 0, 0, mPaint);

                //bitmap缓存起来,防止每次调用onDraw,分配内存
                mWeakBitmap = new WeakReference<Bitmap>(bitmap);

                //制作图片
                canvas.drawBitmap(bitmap, 0, 0, null);
                mPaint.setXfermode(null);

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

    //缓存Bitmap,防止每次OnDraw都重新分配内存与绘图
    @Override
    public void invalidate() {
        mWeakBitmap = null;
        if (mWeakBitmap != null) {
            mMaskBitmap.recycle();
            mMaskBitmap = null;
        }
        super.invalidate();
    }

    //界说一个制作形状的办法

    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);   //抗锯齿
        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;
    }
}

最终在布局文件那里调用下: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.CircleImageView
        android:layout_width="160dp"
        android:layout_height="240dp"
        android:layout_margin="10dp"
        android:src="@mipmap/ic_bg_meizi2"
        app:type="circle" />

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

好的,代码一次看不懂,看多两次就懂的了~


3.本节代码示例下载:


本节小结:

本节咱们解说了Xfermode与PorterDuff的第一个运用比如,设置DST_IN形式来完结 圆形和圆角图片ImageView的定制,信任咱们对PorterDuff的简略运用现已有些端倪了, 打铁趁热,下一节咱们同一会写个比如练练手~好的,就说这么多,谢谢~