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