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 ...
随机推荐
- POJ 2318 TOYS/POJ 2398 Toy Storage
计算几何终于开坑了... 叉积+二分. #include<iostream> #include<cstdio> #include<cstring> #include ...
- [Linux命令]tar命令
tar 命令的解释: tar(bsdtar): manipulate archive files First option must be a mode specifier: -c Create -r ...
- 一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- Android -------- 从一个Fragment跳转到另一个Fragment
一.直接getActivity,使用activity的fragmenttransation的replace方法替换 private void changeToAnotherFragment(){ // ...
- git 笔记记录
分布式版本控制系统Git 是一套内容寻址文件系统,从核心上来看不过是简单地存储键值对.一: git 本地clone 一个仓库 1. 直接clone一个仓库: $: git clon ...
- (一)chrome扩展 - API小记
browserAction 设置browser action的badge文字,badge 显示在图标上面 chrome.browserAction.setBadgeText({text:"i ...
- RMQ问题
关于RMQ的问题我就直接截取刘汝佳的<算法竞赛训练指南>上的解释了
- 使用“bulk insert ”进行批量插入数据
本文转自csdn中文章,再次感谢他给我们分享. Bulk Insert命令详细 BULK INSERT以用户指定的格式复制一个数据文件至数据库表或视图中.语法: BULK INSERT [ [ 'da ...
- 阿里大鱼simplexmlelement object 取值PHP
SimpleXMLElement Object( [code] => 15 [msg] => Remote service error [sub_code] => ...
- python比较两个列表
两个列表,随机产生4个不相等的数,计算一下,相同位置上的元素相等的个数,用k1表示. b列表中的元素在a列表中,但位置不相同,有多少个,用k2表示. 例如: a=[0, 4, 7, 3]b=[7, 1 ...