android圆角ImageView的几种实现方式

前言

好长一段时间没写博客，继续吧。今天突然想起金三银四的时候，面试遇到的一个问题：如何实现圆角imageView。所在公司只用了其中一种方式，今天总结一下：

第一种：Glide加载图片自带api

如果使用Glide加载图片，那么，这个库提供了自己自带的圆角方式：bitmapTransform

//加载原始图片和其他形状的图片形状作为对比。Glide.with(this).load(imgUrl).centerCrop().into(image1); //标准圆形图片。Glide.with(this).load(imgUrl).apply(RequestOptions.bitmapTransform(new CircleCrop())).into(image2); //四周都是圆角的圆角矩形图片。Glide.with(this).load(imgUrl).apply(RequestOptions.bitmapTransform(new RoundedCorners(50))).into(image3);

第二种：BitmapShader

首先简单了解下BitmapShader，BitmapShader是Shader的子类，Shader在三维软件中我们称之为着色器，所以通俗的理解，Shader的作用是给图像着色或者上色，BitmapShader允许我们载入一张图片来给图像着色，具体不做过多的解释，结尾贴出关于Shader的具体使用的文章。

也就是，drawRoundRect的时候，把定义的bitmapShader赋给paint。

@Override    protected void onDraw(Canvas canvas) {        if (getDrawable() == null){            return;        }        Bitmap bitmap = drawableToBitamp(getDrawable());        mBitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);        float scale = 1.0f;        if (!(bitmap.getWidth() == getWidth() && bitmap.getHeight() == getHeight()))        {            // 如果图片的宽或者高与view的宽高不匹配，计算出需要缩放的比例；缩放后的图片的宽高，一定要大于我们view的宽高；所以我们这里取大值；            scale = Math.max(getWidth() * 1.0f / bitmap.getWidth(),                    getHeight() * 1.0f / bitmap.getHeight());        }        // shader的变换矩阵，我们这里主要用于放大或者缩小        mMatrix.setScale(scale, scale);        // 设置变换矩阵        mBitmapShader.setLocalMatrix(mMatrix);        // 设置shader        mPaint.setShader(mBitmapShader);        canvas.drawRoundRect(new RectF(0,0,getWidth(),getHeight()), mBorderRadius, mBorderRadius,                mPaint);    }

第三种：一刀切，ClipPath

ClipPath是Canvas提供对画布裁剪的方法之一，除了ClipPath还有clipRect方法，画布裁剪后后面的Canvas操作，都会在对裁剪后的画布进行操作。

所以呢，只要绘出一个圆角矩形的路径，然后用ClipPath裁剪，那么得到的画布就是圆角矩形的，那么后面的绘制自然也就是圆角矩形的了，解释很清楚了，直接上代码了：

    @Override    protected void onDraw(Canvas canvas) {        if (width > 12 && height > 12) {            Path path = new Path();            path.moveTo(12, 0);            path.lineTo(width - 12, 0);            path.quadTo(width, 0, width, 12);            path.lineTo(width, height - 12);            path.quadTo(width, height, width - 12, height);            path.lineTo(12, height);            path.quadTo(0, height, 0, height - 12);            path.lineTo(0, 12);            path.quadTo(0, 0, 12, 0);            canvas.clipPath(path);        }        super.onDraw(canvas);    }

看吧，就是画一个圆角矩形的路线，然后一刀切。

图片效果跟第二个差不多，就不加了。

总结

当然，还有其他方式实现圆角ImageView，但是嘛，知道这么一两种，弄懂原理，自定义view也够了。推荐用继承imageView实现圆角的方式，毕竟加载图片的时候，不一定都是用glide加载。

关于BitmapShader

关于clipPach

前言

第一种：Glide加载图片自带api

第二种：BitmapShader

第三种：一刀切，ClipPath

总结

更多相关文章

随机推荐