先看下效果图

我们再来看一张CSDN的圆角图片

从布局能够看出csdn app 的头像也是圆角的Image,但能够看到。有明显的毛刺感。不知道是csdn 程序猿的疏忽还是 我手机的问题,本人手机(小米note)。

不知道其它的小伙伴显示效果也是这样。

好回到主题。事实上实现圆角Image的方式有非常多,今天所讲的是我觉得比較简单的一种。首先我们须要了解Xfermode属性,什么意思呢?看一张图你就明确了

这是Xfermode属性的几种模式和效果。简单说明一下

Src和Dst各自是一张矩形和原型图片。当我们设置不同的模式。显示的效果就如上图所看到的。关于Xfermode这里只是多阐述,免得把大家绕晕了,我们这里仅仅须要关注当中的SrcIn模式,能够看到这个模式取的是两张图片的交集部分。

这就好办了,我们通常拿到img图片都是矩形。我们能够利用canvas画一个圆。然后利用SrcIn属性,取img和圆的交集,那么圆角ImageView是不是就轻易实现了呢?

这里先理一下思路。1、自己定义两个属性来设置圆角的弧度。以及当前是否画纯圆。2、设置Xfermode属性为SrcIn 。

就这简单两步圆角ImageView就实现了,接下来直接上代码。


import wu.han.himan_library.R;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView; /**
*
* @author Mr.Himan
* @version 1.0<br>
* 2015年12月16日 09:28:25<br>
* 图片圆角实现
*
*/
public class CustomImageView extends ImageView {
private Paint paint;
private Paint paintBorder;
private Bitmap mSrcBitmap;
/**
* 圆角的弧度
*/
private float mRadius;
private boolean mIsCircle; public CustomImageView(final Context context) {
this(context, null);
} public CustomImageView(Context context, AttributeSet attrs) {
this(context, attrs, R.attr.customImageViewStyle);
} public CustomImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
TypedArray ta = context.obtainStyledAttributes(attrs,
R.styleable.CustomImageView, defStyle, 0);
mRadius = ta.getDimension(R.styleable.CustomImageView_radius, 0);
mIsCircle = ta.getBoolean(R.styleable.CustomImageView_circle, false);
int srcResource = attrs.getAttributeResourceValue(
"http://schemas.android.com/apk/res/android", "src", 0);
if (srcResource != 0)
mSrcBitmap = BitmapFactory.decodeResource(getResources(),
srcResource);
ta.recycle();
paint = new Paint();
paint.setAntiAlias(true);
paintBorder = new Paint();
paintBorder.setAntiAlias(true);
} @Override
public void onDraw(Canvas canvas) {
int width = canvas.getWidth() - getPaddingLeft() - getPaddingRight();
int height = canvas.getHeight() - getPaddingTop() - getPaddingBottom();
Bitmap image = drawableToBitmap(getDrawable());
if (mIsCircle) {
Bitmap reSizeImage = reSizeImageC(image, width, height);
canvas.drawBitmap(createCircleImage(reSizeImage, width, height),
getPaddingLeft(), getPaddingTop(), null); } else { Bitmap reSizeImage = reSizeImage(image, width, height);
canvas.drawBitmap(createRoundImage(reSizeImage, width, height),
getPaddingLeft(), getPaddingTop(), null);
}
} /**
* 画圆角
*
* @param source
* @param width
* @param height
* @return
*/
private Bitmap createRoundImage(Bitmap source, int width, int height) {
Paint paint = new Paint();
paint.setAntiAlias(true);
Bitmap target = Bitmap.createBitmap(width, height, Config.ARGB_8888);
Canvas canvas = new Canvas(target);
RectF rect = new RectF(0, 0, width, height);
canvas.drawRoundRect(rect, mRadius, mRadius, paint);
// 核心代码取两个图片的交集部分
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(source, 0, 0, paint);
return target;
} /**
* 画圆
*
* @param source
* @param width
* @param height
* @return
*/
private Bitmap createCircleImage(Bitmap source, int width, int height) { Paint paint = new Paint();
paint.setAntiAlias(true);
Bitmap target = Bitmap.createBitmap(width, height, Config.ARGB_8888);
Canvas canvas = new Canvas(target);
canvas.drawCircle(width / 2, height / 2, Math.min(width, height) / 2,
paint);
// 核心代码取两个图片的交集部分
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(source, (width - source.getWidth()) / 2,
(height - source.getHeight()) / 2, paint);
return target; } @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
setMeasuredDimension(width, height);
} /**
* drawable转bitmap
*
* @param drawable
* @return
*/
private Bitmap drawableToBitmap(Drawable drawable) {
if (drawable == null) {
if (mSrcBitmap != null) {
return mSrcBitmap;
} else {
return null;
}
} else if (drawable instanceof BitmapDrawable) {
return ((BitmapDrawable) drawable).getBitmap();
}
Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(),
drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
drawable.draw(canvas);
return bitmap;
} /**
* 重设Bitmap的宽高
*
* @param bitmap
* @param newWidth
* @param newHeight
* @return
*/
private Bitmap reSizeImage(Bitmap bitmap, int newWidth, int newHeight) {
int width = bitmap.getWidth();
int height = bitmap.getHeight();
// 计算出缩放比
float scaleWidth = ((float) newWidth) / width;
float scaleHeight = ((float) newHeight) / height;
// 矩阵缩放bitmap
Matrix matrix = new Matrix(); matrix.postScale(scaleWidth, scaleHeight);
return Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
} /**
* 重设Bitmap的宽高
*
* @param bitmap
* @param newWidth
* @param newHeight
* @return
*/
private Bitmap reSizeImageC(Bitmap bitmap, int newWidth, int newHeight) {
int width = bitmap.getWidth();
int height = bitmap.getHeight();
int x = (newWidth - width) / 2;
int y = (newHeight - height) / 2;
if (x > 0 && y > 0) {
return Bitmap.createBitmap(bitmap, 0, 0, width, height, null, true);
} float scale = 1; if (width > height) {
// 依照宽度进行等比缩放
scale = ((float) newWidth) / width; } else {
// 依照高度进行等比缩放
// 计算出缩放比
scale = ((float) newHeight) / height;
}
Matrix matrix = new Matrix();
matrix.postScale(scale, scale);
return Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
}
}

attr.xml

<?xml version="1.0" encoding="utf-8"?

>
<resources> <declare-styleable name="Theme">
<attr name="customImageViewStyle" format="reference" />
</declare-styleable>
<!-- 自己定义圆角ImageView -->
<declare-styleable name="CustomImageView">
<attr name="circle" format="boolean" />
<attr name="radius" format="dimension" />
</declare-styleable> </resources>

到这里圆角ImageView就实现了。代码比較简单,相同的我们能够依据Xfermode设置不痛的模式。来实现不同的效果。

须要注意的是。在上面代码中我做了图片的压缩和缩放操作。当我们有时在载入网络图片的时候。图片宽高往往是不确定的。所以这里的压缩和缩放处理,须要大家依据自己的业务需求进行对应的修改

Android自己定义圆角ImageView 支持网络图片的更多相关文章

  1. Android自己定义圆角ImageView

    我们常常看到一些app中能够显示圆角图片.比方qq的联系人图标等等,实现圆角图片一种办法是直接使用圆角图片资源,当然假设没有圆角图片资源.我们也能够自己通过程序实现的,以下介绍一个自己定义圆角Imag ...

  2. Android 自己定义ImageView实现圆角/圆形 附加OnTouchListener具体凝视以及Button圆角

    转载请注明出处:王亟亟的大牛之路 平时要用一些非方方正正的button之类的小伙伴们是怎样实现的?RadioButton? ImageButton? 还是其它? 今天亟亟上的是ImageView来实现 ...

  3. Android使用ImageView显示网络图片

    本案例使用ImageView 简单的实现了网络图片的调用.当中注意事项.由于用到了网络,这里採用了HttpClient方法訪问网络联接,关于怎样使用,可參照文章 Android中使用HttpClien ...

  4. Android 自己定义UI圆角button

    Android实际开发中我们一般须要圆角的button,普通情况下我们能够让美工做出来对应的button图片.然后放上去就可以,另外我们能够在布局文件里直接设置,也能够达到一样的效果. 以下解说在布局 ...

  5. Android笔记之使用ImageView加载网络图片以及保存图片到本地并更新图库

    ImageView显示网络图片 findViewById(R.id.btnLoad).setOnClickListener(new View.OnClickListener() { @Override ...

  6. 自定义控件之 圆形 / 圆角 ImageView

    一.问题在哪里? 问题来源于app开发中一个很常见的场景——用户头像要展示成圆的:       二.怎么搞? 机智的我,第一想法就是,切一张中间圆形透明.四周与底色相同.尺寸与头像相同的蒙板图片,盖在 ...

  7. android 自己定义视频播放器之2/1

    非常久没更新博客,相信大家年后都比較忙. 今天给大家带来了一款视频播放器,首先确认的得有几点. 1.首先得有个播放视频的view. 2.加点额外功能进去左边上下滑动调节亮度,右边上下滑动调节声量: 3 ...

  8. Android可伸缩布局-FlexboxLayout(支持RecyclerView集成)

    Android可伸缩布局-FlexboxLayout(支持RecyclerView集成) 1 . 前言 前几天看到Google官方的博客介绍了Google开源的一个强大的布局-FlexboxLayou ...

  9. 【转】Android开发笔记——圆角和边框们

    原文地址:http://blog.xianqu.org/2012/04/android-borders-and-radius-corners/ Android开发笔记——圆角和边框们 在做Androi ...

随机推荐

  1. Python 批处理文本文件、进行查找

    去年换了一部手机,老手机终于光荣退休了,但是里面的便签里还存有很多文字记录,这个手机还不能备份到云,只能将每个便签保留为一个个的文本文件,我想要把所有的文本文件归到一个文本文件中,手动操作太麻烦了,刚 ...

  2. ArcGIS api for javascript——地图配置-滑动器的刻度线、方向、大小的改变

    描述 本例展示了如果删除缩放等级滑动器的刻度线.通过设置esriConfig里的sliderLabel为null来实现: esriConfig.defaults.map.sliderLabel = n ...

  3. 【图像配准】基于互信息的图像配准算法:MI、EMI、ECC算法

    简单介绍: 基于互信息的图像配准算法以其较高的配准精度和广泛的适用性而成为图像配准领域研究的热点之中的一个.而基于互信息的医学图像配准方法被觉得是最好的配准方法之中的一个.基于此.本文将介绍简单的基于 ...

  4. Java编程手冊-Collection框架(下)

    建议先看Java编程手冊-Collection框架(上) 5.  Set<E>接口与实现 Set<E>接口表示一个数学的集合,它不同意元素的反复,仅仅能包括一个null元素. ...

  5. An internal error occurred during: &quot;Checking tomcat state&quot;. Error while reading server.xml

    An internal error occurred during: "Checking tomcat state". Error while reading server.xml ...

  6. Linux 下UVC&amp;V4L2技术简单介绍(二)

    通过前文Linux 下UVC&V4L2技术简单介绍(一)我们了解了UVC和V4L2的简单知识. 这里是USB设备的文档描写叙述:http://www.usb.org/developers/do ...

  7. FPGA设计中的电源管理(转载)

    过去,FPGA设计者主要关心时序和面积使用率问题.但随着FPGA不断取代ASSP和ASIC器件,设计者们现正期望能够开发低功耗设计,在设计流程早期就能对功耗进行正确估算,以及管理和对与FPGA相关的各 ...

  8. centos 7.3 配置vnc 服务 图形界面登录

    1.检查系统是否有安装tigervnc-server软件包 rpm -qa |grep vnc 默认的系统未装tigervnc-server软件包 2.安装tigervnc-server软件包 yum ...

  9. XML之序列化C#实体类,DataTable,List

    1. static void Main(string[] args) { #region 实体类 Request patientIn = new Request(); patientIn.System ...

  10. ES6学习笔记(四)数值的扩展

    1.二进制和八进制表示法 ES6 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示. 0b111110111 === 503 // true 0o767 === 503 ...