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

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

最后在布局文件那里调用下: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">
  6. <com.jay.xfermodedemo1.CircleImageView
  7. android:layout_width="160dp"
  8. android:layout_height="240dp"
  9. android:layout_margin="10dp"
  10. android:src="@mipmap/ic_bg_meizi2"
  11. app:type="circle" />
  12. <com.jay.xfermodedemo1.CircleImageView
  13. android:layout_width="160dp"
  14. android:layout_height="280dp"
  15. android:layout_margin="10dp"
  16. android:src="@mipmap/ic_bg_meizi1"
  17. app:Radius="30dp"
  18. app:type="round" />
  19. </LinearLayout>

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


3.本节代码示例下载:

XfermodeDemo1.zip


本节小结:

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

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