美文网首页personAndroid开发程序员
实现圆形/圆角ImageView最简单的方法

实现圆形/圆角ImageView最简单的方法

作者: Wang_Yi | 来源:发表于2017-01-07 18:08 被阅读780次

以前在需要用圆形的ImageView时,通常的做法是利用Xfermode或者BitmapShader来实现的,要写的代码比较多。
如果我的这种方式来实现一个圆形的ImageView核心代码就4行。
原理如下图,就是给一个正常的ImageView加上一层遮罩而已,不过这种方式会让部分区域过度绘制。


重写ImageView的onDraw方法:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int radius = Math.min(getWidth(), getHeight()) / 2;
        mPath.addRect(0, 0, getWidth(), getHeight(), Path.Direction.CCW);
        mPath.addCircle(getWidth() / 2, getHeight() / 2, radius, Path.Direction.CW);
        canvas.drawPath(mPath, mPaint);
    }

首先创建一个Path 然后添加一个ImageView大小矩形路径,然后添加一个圆形的路径,最后绘制出这个Path。绘制用的Paint的颜色设置成ImageView的背景颜色就好。
这里最关键的是Path.Direction这个参数,Path.Direction表示Path的闭合方向,有CCW和CW两个可取的值,CCW表示逆时针方向闭合,CW表示顺时针方向闭合。
借用两张图来感受下:

Path.Direction.CCW Path.Direction.CW

那么实现圆角的ImageView也是很简单的:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        RectF rectf = new RectF(0, 0, getWidth(), getHeight());
        mPath.addRect(rectf, Path.Direction.CCW);
        mPath.addRoundRect(rectf, mRadius, mRadius, Path.Direction.CW);
        canvas.drawPath(mPath, mPaint);
    }

Path有个addRoundRect的方法就是添加一个圆角的矩形。

最终效果如下,把ImageView父布局颜色改成白色,这样就看起来一点也不违和感了。

ada.png

全部代码已上传到Github

相关文章

网友评论

  • 徐影魔:厉害
  • AmazingMiracle:看到Gakki才进来的。。。
  • app海外创收老李:恩,不错哦,这是一种方法吧,不过现在的APP开发,背景一般不是纯色的,有的时候就是渐变色的,用这种方法的就有点捉衣见肘啦!:smile:
    Wang_Yi:@J仔的Coder之路 是的😄😄
  • Seven鑫洋:底色如果不是白色呢?啥效果?
    hfk: @Wang_Yi 底色设置为透明如何?
    Wang_Yi: @浮生漫记 额 这本身是一种偷懒的方法。 你把颜色设置成和背景色一样就好了
  • addqian:看到新恒结衣,过来评论下:clap:
  • SmartSean:glide直接可以把方形图片显示成圆形,很方便的
    dc36981ec4e1: @Coding_css 面试的时候人问你实现原理呢?你知道吗
    霁雪清虹: @Coding_css 工具固然方便,但是自己实现才能掌握原理

本文标题:实现圆形/圆角ImageView最简单的方法

本文链接:https://www.haomeiwen.com/subject/otmfbttx.html