Android Xfermode 实战 实现圆形、圆角图片
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/42094215,本文出自:【张鸿洋的博客】
1、概述
其实这篇本来准备Android BitmapShader 实战 实现圆形、圆角图片放到一篇里面,结果由于篇幅原因就独立出来了~在很久以前也写过一个利用Xfermode 实现圆形、圆角图片的,但是那个继承的是View,其实继承ImageView能方便点,最起码省去了onMeasure里面自己去策略,以及不需要自己去提供设置图片的方法,最主要的是大家对ImageView的API会比较熟悉,用起来会比较顺手。
好了,本篇就当是个记录了~~~电脑上代码放几天就找不到了,还是放博客里面,有需要自己过来看看~~~
2、原理
原理就不多说了,这张图在我博客里出现的次数大概有3次以上了,我们这次使用的模式DST_IN;也就是先绘制图片,再绘制形状了~~
3、Xfermode实战
1、自定义属性
首先依然是自定义属性,和上篇一致。
- <?xml version="1.0" encoding="utf-8"?>
- <resources>
- <attr name="borderRadius" format="dimension" />
- <attr name="type">
- <enum name="circle" value="0" />
- <enum name="round" value="1" />
- </attr>
- <declare-styleable name="RoundImageViewByXfermode">
- <attr name="borderRadius" />
- <attr name="type" />
- </declare-styleable>
- </resources>
2、构造中获取属性
- public class RoundImageViewByXfermode extends ImageView
- {
- private Paint mPaint;
- private Xfermode mXfermode = new PorterDuffXfermode(Mode.DST_IN);
- private Bitmap mMaskBitmap;
- private WeakReference<Bitmap> mWeakBitmap;
- /**
- * 图片的类型,圆形or圆角
- */
- 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 RoundImageViewByXfermode(Context context)
- {
- this(context,null);
- mPaint = new Paint();
- mPaint.setAntiAlias(true);
- }
- public RoundImageViewByXfermode(Context context, AttributeSet attrs)
- {
- super(context, attrs);
- mPaint = new Paint();
- mPaint.setAntiAlias(true);
- TypedArray a = context.obtainStyledAttributes(attrs,
- R.styleable.RoundImageViewByXfermode);
- mBorderRadius = a.getDimensionPixelSize(
- R.styleable.RoundImageViewByXfermode_borderRadius, (int) TypedValue
- .applyDimension(TypedValue.COMPLEX_UNIT_DIP,
- BODER_RADIUS_DEFAULT, getResources()
- .getDisplayMetrics()));// 默认为10dp
- Log.e("TAG", mBorderRadius+"");
- type = a.getInt(R.styleable.RoundImageViewByXfermode_type, TYPE_CIRCLE);// 默认为Circle
- a.recycle();
- }
获取自定义属性,然后还写些成员变量~~
3、onMeasure
- @Override
- protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
- {
- super.onMeasure(widthMeasureSpec, heightMeasureSpec);
- /**
- * 如果类型是圆形,则强制改变view的宽高一致,以小值为准
- */
- if (type == TYPE_CIRCLE)
- {
- int width = Math.min(getMeasuredWidth(), getMeasuredHeight());
- setMeasuredDimension(width, width);
- }
- }
在onMeasure中,如果是圆形则重新设置view大小。
4、onDraw
- @SuppressLint("DrawAllocation")
- @Override
- protected void onDraw(Canvas canvas)
- {
- //在缓存中取出bitmap
- Bitmap bitmap = mWeakBitmap == null ? null : mWeakBitmap.get();
- if (null == bitmap || bitmap.isRecycled())
- {
- //拿到Drawable
- Drawable drawable = getDrawable();
- //获取drawable的宽和高
- int dWidth = drawable.getIntrinsicWidth();
- int dHeight = drawable.getIntrinsicHeight();
- if (drawable != null)
- {
- //创建bitmap
- bitmap = Bitmap.createBitmap(getWidth(), getHeight(),
- Config.ARGB_8888);
- float scale = 1.0f;
- //创建画布
- Canvas drawCanvas = new Canvas(bitmap);
- //按照bitmap的宽高,以及view的宽高,计算缩放比例;因为设置的src宽高比例可能和imageview的宽高比例不同,这里我们不希望图片失真;
- if (type == TYPE_ROUND)
- {
- // 如果图片的宽或者高与view的宽高不匹配,计算出需要缩放的比例;缩放后的图片的宽高,一定要大于我们view的宽高;所以我们这里取大值;
- scale = Math.max(getWidth() * 1.0f / dWidth, getHeight()
- * 1.0f / dHeight);
- } else
- {
- scale = getWidth() * 1.0F / Math.min(dWidth, dHeight);
- }
- //根据缩放比例,设置bounds,相当于缩放图片了
- drawable.setBounds(0, 0, (int) (scale * dWidth),
- (int) (scale * dHeight));
- drawable.draw(drawCanvas);
- if (mMaskBitmap == null || mMaskBitmap.isRecycled())
- {
- mMaskBitmap = getBitmap();
- }
- // Draw Bitmap.
- mPaint.reset();
- mPaint.setFilterBitmap(false);
- mPaint.setXfermode(mXfermode);
- //绘制形状
- drawCanvas.drawBitmap(mMaskBitmap, 0, 0, mPaint);
- mPaint.setXfermode(null);
- //将准备好的bitmap绘制出来
- canvas.drawBitmap(bitmap, 0, 0, null);
- //bitmap缓存起来,避免每次调用onDraw,分配内存
- mWeakBitmap = new WeakReference<Bitmap>(bitmap);
- }
- }
- //如果bitmap还存在,则直接绘制即可
- if (bitmap != null)
- {
- mPaint.setXfermode(null);
- canvas.drawBitmap(bitmap, 0.0f, 0.0f, mPaint);
- return;
- }
- }
- /**
- * 绘制形状
- * @return
- */
- public 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;
- }
在onDraw中拿到drawable,然后获取drawable的宽和高,根据当前的type和view的宽和高,进行适当的缩放。具体原理:参考上篇的matrix的scale计算,原理一致。
然后就是设置Xfermode,getBitmap会根据type返回图形,直接绘制到内存中的bitmap上即可。最后把bitmap缓存起来,避免每次onDraw都分配内存和重启绘图。
大家可以进行扩展type,绘制心形、三角形什么的,直接在getBitmap里面添加分支就可以。
最后记得invalidate中做一些处理:
- @Override
- public void invalidate()
- {
- mWeakBitmap = null;
- if (mMaskBitmap != null)
- {
- mMaskBitmap.recycle();
- mMaskBitmap = null;
- }
- super.invalidate();
- }
主要是因为我们缓存了,当调用invalidate时,将缓存清除。
4、布局文件及效果图
- <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- xmlns:zhy="http://schemas.android.com/apk/res/com.zhy.variousshapeimageview"
- android:layout_width="match_parent"
- android:layout_height="wrap_content" >
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical" >
- <com.zhy.view.RoundImageViewByXfermode
- android:layout_width="130dp"
- android:layout_height="130dp"
- android:layout_margin="10dp"
- android:src="@drawable/qiqiu" >
- </com.zhy.view.RoundImageViewByXfermode>
- <com.zhy.view.RoundImageViewByXfermode
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_margin="10dp"
- android:src="@drawable/aa"
- zhy:borderRadius="30dp"
- zhy:type="round" >
- </com.zhy.view.RoundImageViewByXfermode>
- <com.zhy.view.RoundImageViewByXfermode
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_margin="10dp"
- android:src="@drawable/aa"
- zhy:type="circle" >
- </com.zhy.view.RoundImageViewByXfermode>
- <com.zhy.view.RoundImageViewByXfermode
- android:layout_width="40dp"
- android:layout_height="40dp"
- android:layout_margin="10dp"
- android:src="@drawable/aa"
- zhy:type="circle" >
- </com.zhy.view.RoundImageViewByXfermode>
- </LinearLayout>
- </ScrollView>
效果图:
好了,比较简单~~
声明下:本例参考了:https://github.com/MostafaGazar/CustomShapeImageView ;不过对其中的部分代码进行了改变,比如CustomShapeImageView如果图片为长方形,但是设置为circle类型,效果依然是矩形;以及会对bitmap比例和view比例不一致的直接进行压缩,类似fitxy的效果~~~主要对这两点进行了修改~~当然了,该案例比本博客功能要强大,看名字也知道,支持很多形状,以及支持SVG~大家自行进行参考~
Android Xfermode 实战 实现圆形、圆角图片的更多相关文章
- Android实现圆形圆角图片
本文主要使用两种方法实现图形圆角图片 自定View加上使用Xfermode实现 Shader实现 自定View加上使用Xfermode实现 /** * 根据原图和变长绘制圆形图片 * * @param ...
- Android 圆形/圆角图片的方法
Android 圆形/圆角图片的方法 眼下网上有非常多圆角图片的实例,Github上也有一些成熟的项目.之前做项目,为了稳定高效都是选用Github上的项目直接用.但这样的结束也是Android开发必 ...
- 安卓图片载入之使用universalimageloader载入圆形圆角图片
前言 话说这universalimageloader载入图片对搞过2年安卓程序都是用烂了再熟悉只是了.就是安卓新手也是百度就会有一大堆东西出来,今天为什么这里还要讲使用universalimagelo ...
- Android BitmapShader 实战 实现圆形、圆角图片
转载自:http://blog.csdn.net/lmj623565791/article/details/41967509 1.概述 记得初学那会写过一篇博客Android 完美实现图片圆角和圆形( ...
- 【转】Android BitmapShader 实战 实现圆形、圆角图片
转载自:http://blog.csdn.net/lmj623565791/article/details/41967509 1.概述 记得初学那会写过一篇博客Android 完美实现图片圆角和圆形( ...
- 【Android】 图片编辑:创建圆角图片
创建圆角图片的方式大同小异,最简单的就是 9.png 美工做出来的就是.这种最省事直接设置就可以. 另外一种就是通过裁剪 这里的剪裁指的是依据原图我们自己生成一张新的bitmap,这个时候指定图片的目 ...
- CircleImageManager——圆形 / 圆角图片的工具类
这个类可以实现圆角,或者是圆形图片的操作. CircleImageManager.java package com.kale.utils; import android.content.Context ...
- Android Xfermode 真实 实现全面、圆角图片
转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/42094215.本文出自:[张鸿洋的博客] 1.概述 事实上这篇本来准备Andro ...
- Android SurfaceView实战 带你玩转flabby bird (上)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/42965779 ,本文出自:[张鸿洋的博客] 1.概述 哈,记得以前写过Andro ...
随机推荐
- web前端之文件上传
前言 最近太忙一直没时间认真的写博客(哈哈哈),最近pm提一个需求,移动端需要一个上传图片的功能,允许多选.删除.预览.点击查看大图并可以滑动.虽然听起来很多,但是这个功能在web上实现过啊,使用we ...
- vb.net转换为C#方法
第一个方法是上面有人说过的,用VB.NET TO C#的在线转换工具.既然你说不好用,那么可以这样:你把VB.NET代码编译了,然后用工具反编译(IL spy,reflector等)成C#代码.
- 自律训练法 John Sehorz
自律训练法,系1932年由德国精神医学医师John Sehorz所创立.他研究人们在催眠催眠状态下,所呈现的生理状态,如:沉重与温暖感.. ,因而,John Sehorz改以「逆向操作」之方式,由自我 ...
- php用get_meta_tags轻松获取网页的meta信息
之前没发现php还有这个函数,get_meta_tags()直接就可以获取文件中meta标签的属性值,返回数组: <?php $metas = get_meta_tags('http://www ...
- SQL如何查询两个表的数据
在进行查询操作时,我们通常需要查询两个关联表的数据,我们可以使用where语句进行查询,如: select Emp.E_Id,Company.C_OraName from Emp,Company wh ...
- 容器 SET part2
(6) insert STL中为什么提供这样的set的insert呢? 这个成员函数存在的目的是为了插入效率的问题.函数参数中的 __position 只是一个提示值,表示在这个位置附近(可前可后 ...
- 接私活,得有套好框架,.net快速开发神器
同一家公司的同事,拿同样的工资,以前他在用肾机,我还在用诺记.吃饭的时候他是买单王,我在想这家伙应该没存什么钱吧.结果前段时间他买了个沃尔沃S60L,可我一套省城小三房的首付都还没凑齐. 他说他经常在 ...
- dos下修复硬盘损坏的文件
点击开始-->运行-->输入cmd,出现DOS状态对话框.在光标处输入有损坏文件的磁盘盘符后回车(如文件夹在D盘就输入D:然后回车),再输入“CHKDSK”,回车即可看到相关检测信息.“C ...
- 枚举类:用enum关键字来定义一个枚举类
1)枚举类的两种定义方法 1>通过构造器 public enum Grade{ A("A", "90-100"),B("B",&quo ...
- Codeforces 596D Wilbur and Trees
http://codeforces.com/contest/596/problem/D 题目大意: 有n棵树排成一排,高度都为h. 主人公要去砍树,每次等概率地随机选择没倒的树中最左边的树或者最右边的 ...