Android 圆形 ImageView

原创 2013年12月04日 16:42:07

      公司最近项目需求上,需要添加圆形的ImageView,最开始的思路是用Canvas.clipPath 来实现圆形,基本上能实现,但是却出现了锯齿,用了很多方法(包括在百度搜索很多demo,都是一样)却始终解决不了切割Canvas出现的锯齿,如果有哪位大神看见这篇文章请指点一下,谢谢!

   言归正传,那么如何实现一个锯齿,同时比较圆润的圆形ImageView呢?先看看第一步实现的效果图:




   

     效果确实出现了,如何做到的呢:

   @Override
protected void onDraw(Canvas canvas) {

Drawable drawable = getDrawable();

if (drawable == null) {
return;
}

if (getWidth() == 0 || getHeight() == 0) {
return;
}
Bitmap b = ((BitmapDrawable) drawable).getBitmap();
Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
int w = getWidth(), h = getHeight();

Bitmap roundBitmap = getCroppedBitmap(bitmap, w);
canvas.drawBitmap(roundBitmap, 0, 0, null);


}

public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
Bitmap sbmp;
if (bmp.getWidth() != radius || bmp.getHeight() != radius)
sbmp = Bitmap.createScaledBitmap(bmp, radius, radius, false);
else
sbmp = bmp;
Bitmap output = Bitmap.createBitmap(sbmp.getWidth(), sbmp.getHeight(),
Config.ARGB_8888);
Canvas canvas = new Canvas(output);

final int color = 0xffa19774;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, sbmp.getWidth(), sbmp.getHeight());

paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(Color.parseColor("#BAB399"));
canvas.drawCircle(sbmp.getWidth() / 2 + 0.7f,
sbmp.getHeight() / 2 + 0.7f, sbmp.getWidth() / 2 + 0.1f, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(sbmp, rect, rect, paint);

return output;
}


效果是出来了。用的Paint.setXfermode方法,貌似确实达到了不出现锯齿。但是不够立体,太平面了。看见google+的头像,外边有阴影,而且看起来舒服,于是又来想办法,搜了一下stackoverflow。原来有现成的。非常感谢Pkmmte的帮助,直接贴源码:

 private void setup()
    {
        // init paint
        paint = new Paint();
        paint.setAntiAlias(true);

        paintBorder = new Paint();
        setBorderColor(Color.WHITE);
        paintBorder.setAntiAlias(true);
        this.setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);
        paintBorder.setShadowLayer(4.0f, 0.0f, 2.0f, Color.BLACK);
    }

    public void setBorderWidth(int borderWidth)
    {
        this.borderWidth = borderWidth;
        this.invalidate();
    }

    public void setBorderColor(int borderColor)
    {
        if (paintBorder != null)
            paintBorder.setColor(borderColor);

        this.invalidate();
    }

    private void loadBitmap()
    {
        BitmapDrawable bitmapDrawable = (BitmapDrawable) this.getDrawable();
        if (bitmapDrawable != null)
            image = bitmapDrawable.getBitmap();
    }

    @SuppressLint("DrawAllocation")
    @Override
    public void onDraw(Canvas canvas)
    {
        // load the bitmap
        loadBitmap();

        // init shader
        if (image != null)
        {
            shader = new BitmapShader(Bitmap.createScaledBitmap(image, canvas.getWidth(), canvas.getHeight(), false), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            paint.setShader(shader);
            int circleCenter = viewWidth / 2;

            // circleCenter is the x or y of the view's center
            // radius is the radius in pixels of the cirle to be drawn
            // paint contains the shader that will texture the shape
            canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter + borderWidth - 4.0f, paintBorder);
            canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter - 4.0f, paint);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        int width = measureWidth(widthMeasureSpec);
        int height = measureHeight(heightMeasureSpec, widthMeasureSpec);


        viewWidth = width - (borderWidth * 2);
        viewHeight = height - (borderWidth * 2);

        setMeasuredDimension(width, height);
    }


    private int measureWidth(int measureSpec)
    {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        if (specMode == MeasureSpec.EXACTLY)
        {
            // We were told how big to be
            result = specSize;
        }
        else
        {
            // Measure the text
            result = viewWidth;
        }
        return result;
    }

    private int measureHeight(int measureSpecHeight, int measureSpecWidth)
    {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpecHeight);
        int specSize = MeasureSpec.getSize(measureSpecHeight);


        if (specMode == MeasureSpec.EXACTLY)
        {
            // We were told how big to be
            result = specSize;
        }
        else
        {
            // Measure the text (beware: ascent is a negative number)
            result = viewHeight;
        }
        return (result + 2);
    }

效果图为:

   


  源码地址:

      http://download.csdn.net/detail/wushu2011/6656945

      

android自定义view-打造圆形ImageView(一)

前言: 大家在很多应用不难发现,用户的头像那一块的imageview是圆形的,可是我们并没有现成的圆形ImageView调用,那么最常见的思路就是自己去写一个属于自己的圆形ImageView,基于这样...
  • SmartIceberg
  • SmartIceberg
  • 2016年03月29日 11:02
  • 5128

Android开发之自定义圆形的ImageView的实现

android中的ImageView只能显示矩形的图片,这样一来不能满足我们其他的需求,比如要显示圆形的图片,这个时候,我们就需要自定义ImageView了,其原理就是首先获取到图片的Bitmap,然...
  • Happy_Develop_
  • Happy_Develop_
  • 2016年12月28日 18:14
  • 1894

android开源系列:CircleImageView自定义圆形控件的使用

1.自定义圆形控件github地址:https://github.com/hdodenhof/CircleImageView主要的类:package de.hdodenhof.circleimagev...
  • NUPTboyZHB
  • NUPTboyZHB
  • 2014年05月02日 20:52
  • 21892

Android ImageView圆形头像 图片完全解析

转载http://m.oschina.net/blog/321024 Android ImageView圆形头像 图片完全解析  我们在做项目的时候会用到圆形的图片,比如用户头像,类似QQ...
  • feixiangdexin123087
  • feixiangdexin123087
  • 2014年12月22日 10:28
  • 19768

Android中快速自定义圆形ImageView图形!

一、问题在哪里? 问题来源于app开发中一个很常见的场景——用户头像要展示成圆的:        二、怎么搞? 机智的我,第一想法就是,切一张中间圆形透明、四周与底色相同...
  • JavaAndroid730
  • JavaAndroid730
  • 2016年11月12日 22:36
  • 9686

自定义ImageView完成圆形头像自定义

1、自定义圆形ImageView 2、调用系统相机、相册、裁剪功能 3、使用PopupWindow弹出对话框...
  • wuyinlei
  • wuyinlei
  • 2016年03月10日 20:53
  • 4614

Android 简单实现圆形ImageView添加双层圆形边框

项目需要,研究了下,欢迎指正。 大体思路:1.首先实现圆形ImageView,需要自定义ImageView。                   2.利用shap属性实现双层边框 所用素...
  • wblyuyang
  • wblyuyang
  • 2015年02月07日 10:44
  • 2191

android-自定义ImageView-圆形图片绘制代码详解

andorid中圆形图片很早就有啦,今天算是搞了一把,自己写了出来,并且可以实际使用的代码。 先看效果图: 图片的原图是: 先看看xml的布局文件是怎么样的: ...
  • u010156024
  • u010156024
  • 2015年10月18日 20:35
  • 3109

自定义圆形ImageView控件的两种方法

这样摘录的目的在于,学习自定义控件的时候可以对比着看看同一种效果不同的写法有什么差异 第一种,写在自己项目中的自定义圆形Imageview import android.content.Context...
  • languobeibei
  • languobeibei
  • 2017年04月01日 17:44
  • 629

自定义imageview 实现圆角 甚至圆形imageview(并不是将图片变圆角)

最近遇到新需求   不论用户上传什么形状的头像  展示的时候都要显示成圆形  且头像背后是有背景图的   。 于是想到了 将控件变圆  这样可以任意适配了 先上效果图 下图为方形头像...
  • wuhongqi0012
  • wuhongqi0012
  • 2013年12月16日 12:45
  • 3059
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 圆形 ImageView
举报原因:
原因补充:

(最多只允许输入30个字)