[关闭]
@coder-pig 2015-10-25T07:07:02.000000Z 字数 5357 阅读 1667

Android基础入门教程——8.3.6 Paint API之—— Xfermode与PorterDuff详解(三)

Android基础入门教程

本节引言：

上一节，我们学习了Xfermode中的三儿子：PorterDuffXfermode构造方法中的为一个参数：
PorterDuff.Mode，我们在观看了16种图片混排模式后，又自己写代码来验证了一下文档中
18种不同的混排模式，18种是新增了ADD和OVERLAY两种模式！当然，仅仅验证知道是不够的，
本节我们来写个例子，帮助我们熟悉下实际当中我们如何去使用PorterDuff.Mode为我们提供的
这些混排模式！本节带来的例子是：圆形&圆角图形的实现！
在Android基础入门教程——2.3.4 ImageView(图像视图)我们最后就讲解了一个最简单
绘制圆形ImageView的实现，原理是在图片上调用clipPath切出一个圆形！
而这节则是利用PorterDuff.Mode中的DST_IN模式来实现,话不多说，开始本节内容！
PS：本节例子采自弘洋大神的——Android Xfermode 实战 实现圆形、圆角图片
另外，还是要贴下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：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <declare-styleable name="CircleImageView">
  4.         <attr name="Radius" format="dimension"/>
  5.         <attr name="type">
  6.             <enum name="circle" value="0"/>
  7.             <enum name="round" value="1"/>
  8.         </attr>
  9.     </declare-styleable>
  10. </resources>

接着是自定义ImageView：CircleImageView.java：

  1. /**
  2.  * Created by Jay on 2015/10/25 0025.
  3.  */
  4. public class CircleImageView extends ImageView {
  6.     private Paint mPaint;
  7.     private Xfermode mXfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
  8.     private Bitmap mMaskBitmap;
  9.     private WeakReference<Bitmap> mWeakBitmap;
  11.     //图片相关的属性
  12.     private int type;                           //类型，圆形或者圆角
  13.     public static final int TYPE_CIRCLE = 0;
  14.     public static final int TYPE_ROUND = 1;
  15.     private static final int BODER_RADIUS_DEFAULT = 10;     //圆角默认大小值
  16.     private int mBorderRadius;                  //圆角大小
  19.     public CircleImageView(Context context) {
  20.         this(context, null);
  21.     }
  23.     public CircleImageView(Context context, AttributeSet attrs) {
  24.         super(context, attrs);
  25.         mPaint = new Paint();
  26.         mPaint.setAntiAlias(true);
  27.         //取出attrs中我们为View设置的相关值
  28.         TypedArray tArray = context.obtainStyledAttributes(attrs, R.styleable.CircleImageView);
  29.         mBorderRadius = tArray.getDimensionPixelSize(R.styleable.CircleImageView_Radius, BODER_RADIUS_DEFAULT);
  30.         type = tArray.getInt(R.styleable.CircleImageView_type, TYPE_CIRCLE);
  31.         tArray.recycle();
  32.     }
  34.     public CircleImageView(Context context, AttributeSet attrs, int defStyleAttr) {
  35.         super(context, attrs, defStyleAttr);
  36.     }
  39.     @Override
  40.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  41.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  42.         if (type == TYPE_CIRCLE) {
  43.             int width = Math.min(getMeasuredWidth(), getMeasuredHeight());
  44.             setMeasuredDimension(width, width);    //设置当前View的大小
  45.         }
  46.     }
  48.     @Override
  49.     protected void onDraw(Canvas canvas) {
  51.         //在缓存中取出bitmap
  52.         Bitmap bitmap = mWeakBitmap == null ? null : mWeakBitmap.get();
  53.         if (bitmap == null || bitmap.isRecycled()) {
  54.             //获取图片宽高
  55.             Drawable drawable = getDrawable();
  56.             int width = drawable.getIntrinsicWidth();
  57.             int height = drawable.getIntrinsicHeight();
  59.             if (drawable != null) {
  60.                 bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
  61.                 Canvas drawCanvas = new Canvas(bitmap);
  62.                 float scale = 1.0f;
  63.                 if (type == TYPE_ROUND) {
  64.                     scale = Math.max(getWidth() * 1.0f / width, getHeight()
  65.                             * 1.0f / height);
  66.                 } else {
  67.                     scale = getWidth() * 1.0F / Math.min(width, height);
  68.                 }
  69.                 //根据缩放比例，设置bounds，相当于缩放图片了
  70.                 drawable.setBounds(0, 0, (int) (scale * width),
  71.                         (int) (scale * height));
  73.                 drawable.draw(drawCanvas);
  74.                 if (mMaskBitmap == null || mMaskBitmap.isRecycled()) {
  75.                     mMaskBitmap = getBitmap();
  76.                 }
  78.                 mPaint.reset();
  79.                 mPaint.setFilterBitmap(false);
  80.                 mPaint.setXfermode(mXfermode);
  82.                 //绘制形状
  83.                 drawCanvas.drawBitmap(mMaskBitmap, 0, 0, mPaint);
  85.                 //bitmap缓存起来，避免每次调用onDraw，分配内存
  86.                 mWeakBitmap = new WeakReference<Bitmap>(bitmap);
  88.                 //绘制图片
  89.                 canvas.drawBitmap(bitmap, 0, 0, null);
  90.                 mPaint.setXfermode(null);
  92.             }
  93.         }
  94.         if (bitmap != null) {
  95.             mPaint.setXfermode(null);
  96.             canvas.drawBitmap(bitmap, 0.0f, 0.0f, mPaint);
  97.             return;
  98.         }
  99.     }
  101.     //缓存Bitmap，避免每次OnDraw都重新分配内存与绘图
  102.     @Override
  103.     public void invalidate() {
  104.         mWeakBitmap = null;
  105.         if (mWeakBitmap != null) {
  106.             mMaskBitmap.recycle();
  107.             mMaskBitmap = null;
  108.         }
  109.         super.invalidate();
  110.     }
  112.     //定义一个绘制形状的方法
  114.     private Bitmap getBitmap() {
  115.         Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(),
  116.                 Bitmap.Config.ARGB_8888);
  118.         Canvas canvas = new Canvas(bitmap);
  119.         Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);   //抗锯齿
  120.         paint.setColor(Color.BLACK);
  121.         if (type == TYPE_ROUND) {
  122.             canvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()),
  123.                     mBorderRadius, mBorderRadius, paint);
  124.         } else {
  125.             canvas.drawCircle(getWidth() / 2, getWidth() / 2, getWidth() / 2, paint);
  126.         }
  127.         return bitmap;
  128.     }
  129. }

最后在布局文件那里调用下:activity_main.xml：

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:app="http://schemas.android.com/apk/res-auto"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:orientation="vertical">
  7.     <com.jay.xfermodedemo1.CircleImageView
  8.         android:layout_width="160dp"
  9.         android:layout_height="240dp"
  10.         android:layout_margin="10dp"
  11.         android:src="@mipmap/ic_bg_meizi2"
  12.         app:type="circle" />
  14.     <com.jay.xfermodedemo1.CircleImageView
  15.         android:layout_width="160dp"
  16.         android:layout_height="280dp"
  17.         android:layout_margin="10dp"
  18.         android:src="@mipmap/ic_bg_meizi1"
  19.         app:Radius="30dp"
  20.         app:type="round" />
  22. </LinearLayout>

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

3.本节代码示例下载：

XfermodeDemo1.zip

本节小结：

本节我们讲解了Xfermode与PorterDuff的第一个应用例子，设置DST_IN模式来实现
圆形和圆角图片ImageView的定制，相信大家对PorterDuff的简单应用已经有些眉目了，
打铁趁热，下一节我们同一会写个例子练练手~好的，就说这么多，谢谢~

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注