美文网首页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才进来的。。。
      • crazyandcoder:恩,不错哦,这是一种方法吧,不过现在的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