android圖片的圓形圓角圖片的設計有多種方式

1、使用框架

2、自定義元件

3、圖片剪下

下面從最簡單的框架開始介紹

1、使用框架，

Fresco是Facebook提供的開源圖片載入庫，Fresco中實現了各種載入過程以及載入後的圖片繪製，整體都很強大。

下面簡單介紹Fresco的使用。（當然你也可以使用其他框架）

https://www.fresco-cn.org/docs/getting-started.html

1.1 新增依賴

 compile 'com.facebook.fresco:fresco:0.14.1'

1.2 自定義一個application初始化

public class MyApplication extends Application{
    @Override
    public void onCreate() {
        super.onCreate();
        Fresco.initialize(this);
    }
}

//新建好MyApplication後在 AndroidManifest.xml的Application標籤中新增
android:name=".MyApplication"
//記得申請號網路許可權
<uses-permission android:name="android.permission.INTERNET"/>
 

1.3在佈局中新增一個元件，該元件就是用來處理後的圖片的

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/img1"
        android:layout_width="80dp"
        android:layout_height="80dp"
        fresco:roundBottomLeft="true"
        fresco:roundBottomRight="true"
        fresco:roundTopLeft="true"
        fresco:roundTopRight="true"
        fresco:roundedCornerRadius="20dp" />

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/img2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        fresco:roundAsCircle="true"
        fresco:roundedCornerRadius="20dp" />
 

圓角，圓形圖片的實現很簡單，img1為圓角圖片圓角大小20dp。img2為圓形圖片。

在MainActivity中載入網路上的圖片。over

        SimpleDraweeView img1= (SimpleDraweeView) findViewById(R.id.id_main_sdv);
        Uri uri = Uri.parse("http://www.pptok.com/wp-content/uploads/2012/08/xunguang-9.jpg");
        //draweeView.setImageURI(uri);
        DraweeController controller = Fresco.newDraweeControllerBuilder()
                .setUri(uri)
                .setAutoPlayAnimations(true)
                .build();
        img1.setController(controller);

        SimpleDraweeView img2= (SimpleDraweeView) findViewById(R.id.drawee_img);
        uri = Uri.parse("http://www.pptok.com/wp-content/uploads/2012/08/xunguang-9.jpg");
        //draweeView.setImageURI(uri);
        controller = Fresco.newDraweeControllerBuilder()
                .setUri(uri)
                .setAutoPlayAnimations(true)
                .build();
        img2.setController(controller);

2、自定義元件圓形圓角元件

2.1首先自定義一個元件類CircleImageView 

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.support.v7.widget.AppCompatImageView;

/**
 * Created by 林亮 on 2019/1/13
 */

public class CircleImageView extends AppCompatImageView {
    private float width;
    private float height;
    private float radius;
    private Paint paint;
    private Matrix matrix;

    public CircleImageView(Context context) {
        this(context, null);
    }

    public CircleImageView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        paint = new Paint();
        paint.setAntiAlias(true);   //設定抗鋸齒
        matrix = new Matrix();      //初始化縮放矩陣
    }

    /**
     * 測量控制元件的寬高，並獲取其內切圓的半徑
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getMeasuredWidth();
        height = getMeasuredHeight();
        radius = Math.min(width, height) / 2;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Drawable drawable = getDrawable();
        if (drawable == null) {
            super.onDraw(canvas);
            return;
        }
        if (drawable instanceof BitmapDrawable) {
            paint.setShader(initBitmapShader((BitmapDrawable) drawable));//將著色器設定給畫筆
            canvas.drawCircle(width / 2, height / 2, radius, paint);//使用畫筆在畫布上畫圓
            return;
        }
        super.onDraw(canvas);
    }

    /**
     * 獲取ImageView中資源圖片的Bitmap，利用Bitmap初始化圖片著色器,通過縮放矩陣將原資源圖片縮放到鋪滿整個繪製區域，避免邊界填充
     */
    private BitmapShader initBitmapShader(BitmapDrawable drawable) {
        Bitmap bitmap = drawable.getBitmap();
        BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        float scale = Math.max(width / bitmap.getWidth(), height / bitmap.getHeight());
        matrix.setScale(scale, scale);//將圖片寬高等比例縮放，避免拉伸
        bitmapShader.setLocalMatrix(matrix);
        return bitmapShader;
    }
}

在佈局檔案中直接使用 改元件即可

    <com.zhengyuan.imageload.CircleImageView
        android:id="@+id/image1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:scaleType="centerCrop"
        android:src="@drawable/image" />

2.2實現了自定義圓形圖片元件，接下來自定義圓角圖片元件

package com.zhengyuan.imageload;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.ImageView;
import android.support.v7.widget.AppCompatImageView;

/**
 * Created by 林亮 on 2019/1/13
 */

public class RoundRectImageView extends AppCompatImageView {
    private Paint paint;

    public RoundRectImageView(Context context) {
        this(context,null);
    }

    public RoundRectImageView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public RoundRectImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        paint  = new Paint();
    }

    /**
     * 繪製圓角矩形圖片
     * @author caizhiming
     */
    @Override
    protected void onDraw(Canvas canvas) {

        Drawable drawable = getDrawable();
        if (null != drawable) {
            Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();
            Bitmap b = getRoundBitmap(bitmap, 20);
            final Rect rectSrc = new Rect(0, 0, b.getWidth(), b.getHeight());
            final Rect rectDest = new Rect(0,0,getWidth(),getHeight());
            paint.reset();
            canvas.drawBitmap(b, rectSrc, rectDest, paint);

        } else {
            super.onDraw(canvas);
        }
    }

    /**
     * 獲取圓角矩形圖片方法
     * @param bitmap
     * @param roundPx,圓角的弧度
     * @return Bitmap
     * @author caizhiming
     */
    private Bitmap getRoundBitmap(Bitmap bitmap, int roundPx) {
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
                bitmap.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xff424242;

        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        final RectF rectF = new RectF(rect);
        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        int x = bitmap.getWidth();

        canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);
        return output;
    }
}

直接在佈局檔案中使用該元件即可，

    <com.zhengyuan.imageload.RoundRectImageView
        android:id="@+id/roundRectImageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:src="@drawable/image" />

注意測試過程中儘量使用小圖，我就遇到了OOM的問題

3、圖片剪下實現圓形圖片

待續。。。