一個可指定任意角爲圓角的ImageView

這次帶來一個繼承ImageView控件，可以顯示圓形，也可以顯示圓角矩形，並且可以指定任意一個角爲圓角。口說無憑，先來看一下效果吧。

                                         

說起來這控件原本是在我剛學android的時候，爲了實現圓形圖片的效果在網上找，並且一直在用，後來在一個項目裏有個圖片

左上角和左下角是圓角，兩外兩個角不是圓角的設計，我就在這基礎上改了一下，就是現在的這個控件。由於年代太久遠加之我

改動得比較多，原博主的博客找不着了，非常抱歉。

 

又廢話了一大堆，趕緊上源碼吧。

 

首先控件支持直接在佈局文件裏設置屬性，所以我們需要先自定義一些屬性資源。在values文件夾下的attrs.xml文件（如果沒有

就自己新建一個）裏，添加如下代碼：

<declare-styleable name="RoundImageView">
    <attr name="type" />
    <attr name="scale" />
    <attr name="borderRadius" />
    <attr name="top_left" />
    <attr name="top_right" />
    <attr name="bottom_left" />
    <attr name="bottom_right" />
</declare-styleable>

<attr name="borderRadius" format="dimension" />
<attr name="type">
    <enum name="circle" value="0" />
    <enum name="round" value="1" />
</attr>
<attr name="scale">
    <enum name="crop" value="0" />
    <enum name="fit" value="1" />
</attr>

<attr name="top_left" format="boolean" />
<attr name="top_right" format="boolean" />
<attr name="bottom_left" format="boolean" />
<attr name="bottom_right" format="boolean" />

然後就可以上控件本體了，控件名叫RoundImageView，如下：

RoundImageView.java：

public class RoundImageView extends ImageView {
    public static final int TYPE_CIRCLE = 0;
    public static final int TYPE_ROUND = 1;

    public static final int SCALE_TYPE_CROP = 0;
    public static final int SCALE_TYPE_FIT = 1;

    private static final int BODER_RADIUS_DEFAULT = 10;

    private static final String STATE_INSTANCE = "state_instance";
    private static final String STATE_TYPE = "state_type";
    private static final String STATE_BORDER_RADIUS = "state_border_radius";

    // 左上角是否爲圓角
    private boolean corners_top_left = true;

    // 右上角是否爲圓角
    private boolean corners_top_right = true;

    // 左下角是否爲圓角
    private boolean corners_bottom_left = true;

    // 右下角是否爲圓角
    private boolean corners_bottom_right = true;

    // 顯示類型，可選項：圓形，圓角矩形
    private int type = TYPE_CIRCLE;

    // 填充類型，可選項：充滿，剪裁
    private int scaleType = SCALE_TYPE_CROP;

    // 圓角半徑
    private int borderRadius;

    private int width;
    private int radius;

    private Paint bitmapPaint;
    private RectF roundRect;
    private Matrix matrix;
    private BitmapShader bitmapShader;

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

    public RoundImageView(Context context, AttributeSet attrs) {
        this(context, attrs, -1);
    }

    public RoundImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        matrix = new Matrix();
        bitmapPaint = new Paint();
        bitmapPaint.setAntiAlias(true);
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RoundImageView);
        type = array.getInt(R.styleable.RoundImageView_type, TYPE_CIRCLE);
        scaleType = array.getInt(R.styleable.RoundImageView_scale, SCALE_TYPE_FIT);

        corners_top_left = array.getBoolean(R.styleable.RoundImageView_top_left, true);
        corners_top_right = array.getBoolean(R.styleable.RoundImageView_top_right, true);
        corners_bottom_left = array.getBoolean(R.styleable.RoundImageView_bottom_left, true);
        corners_bottom_right = array.getBoolean(R.styleable.RoundImageView_bottom_right, true);

        borderRadius = array.getDimensionPixelSize(R.styleable.RoundImageView_borderRadius,
                (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, BODER_RADIUS_DEFAULT,
                        getResources().getDisplayMetrics()));
        array.recycle();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (type == TYPE_CIRCLE) {
            width = Math.min(getMeasuredWidth(), getMeasuredHeight());
            radius = width / 2;
            setMeasuredDimension(width, width);
        }
    }

    /**
     * 顯示圖片
     */
    private void setUpShader() {
        Drawable drawable = getDrawable();
        if (drawable == null) {
            return;
        }
        Bitmap bitmap = drawableToBitamp(drawable);
        bitmapShader = new BitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP);
        float scale = 1.0f;
        if (type == TYPE_CIRCLE) {
            scale = width * 1.0f / Math.min(bitmap.getWidth(), bitmap.getHeight());
            matrix.setScale(scale, scale);
        } else if (type == TYPE_ROUND) {
            float scaleWidth = getWidth() * 1.0f / bitmap.getWidth();
            float scaleHeight = getHeight() * 1.0f / bitmap.getHeight();
            scale = scaleWidth != scaleHeight ? Math.max(scaleWidth, scaleHeight) : 1f;
            if (scaleType == SCALE_TYPE_CROP) {
                matrix.setScale(scale, scale);
            } else if (scaleType == SCALE_TYPE_FIT) {
                matrix.setScale(scaleWidth, scaleHeight);
            }
        }
        bitmapShader.setLocalMatrix(matrix);
        bitmapPaint.setShader(bitmapShader);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (getDrawable() == null) {
            return;
        }
        setUpShader();

        // 圓角模式下剪裁相應的角
        if (type == TYPE_ROUND) {
            canvas.drawRoundRect(roundRect, borderRadius, borderRadius, bitmapPaint);
            if (!corners_top_left) {
                canvas.drawRect(0, 0, borderRadius, borderRadius, bitmapPaint);
            }
            if (!corners_top_right) {
                canvas.drawRect(roundRect.right - borderRadius, 0, roundRect.right, borderRadius, bitmapPaint);
            }
            if (!corners_bottom_left) {
                canvas.drawRect(0, roundRect.bottom - borderRadius, borderRadius, roundRect.bottom, bitmapPaint);
            }
            if (!corners_bottom_right) {
                canvas.drawRect(roundRect.right - borderRadius, roundRect.bottom - borderRadius, roundRect.right, roundRect.bottom, bitmapPaint);
            }
        } else {
            canvas.drawCircle(radius, radius, radius, bitmapPaint);
        }
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (type == TYPE_ROUND) {
            roundRect = new RectF(0, 0, w, h);
        }
    }

    private Bitmap drawableToBitamp(Drawable drawable) {
        if (drawable instanceof BitmapDrawable) {
            BitmapDrawable bd = (BitmapDrawable) drawable;
            return bd.getBitmap();
        }
        int w = drawable.getIntrinsicWidth();
        int h = drawable.getIntrinsicHeight();
        Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, w, h);
        drawable.draw(canvas);
        return bitmap;
    }

    @Override
    protected Parcelable onSaveInstanceState() {
        Bundle bundle = new Bundle();
        bundle.putParcelable(STATE_INSTANCE, super.onSaveInstanceState());
        bundle.putInt(STATE_TYPE, type);
        bundle.putInt(STATE_BORDER_RADIUS, borderRadius);
        return bundle;
    }

    @Override
    protected void onRestoreInstanceState(Parcelable state) {
        if (state instanceof Bundle) {
            Bundle bundle = (Bundle) state;
            super.onRestoreInstanceState(((Bundle) state).getParcelable(STATE_INSTANCE));
            this.type = bundle.getInt(STATE_TYPE);
            this.borderRadius = bundle.getInt(STATE_BORDER_RADIUS);
        } else {
            super.onRestoreInstanceState(state);
        }

    }

    /**
     * 設置圓角半徑
     *
     * @param borderRadius 半徑，單位dp
     */
    public void setBorderRadius(int borderRadius) {
        this.borderRadius = dp2px(borderRadius);
        invalidate();
    }

    /**
     * 設置填充類型
     *
     * @param scaleType 填充類型，可選項：SCALE_TYPE_CROP、SCALE_TYPE_FIT
     */
    public void setScaleType(int scaleType) {
        if (scaleType != SCALE_TYPE_CROP && scaleType != SCALE_TYPE_FIT) {
            return;
        }
        this.scaleType = scaleType;
        invalidate();
    }

    /**
     * 設置顯示類型
     *
     * @param type 顯示類型，可選項：TYPE_CIRCLE（圓形）、TYPE_ROUND（圓角）
     */
    public void setType(int type) {
        if (this.type != TYPE_ROUND && this.type != TYPE_CIRCLE) {
            return;
        }
        this.type = type;
        invalidate();
    }

    private int dp2px(int dpVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpVal, getResources().getDisplayMetrics());
    }
}

上佈局文件：

activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <com.min.roundimageview.RoundImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:src="@drawable/test" />

    <com.min.roundimageview.RoundImageView
        android:layout_width="200dp"
        android:layout_height="80dp"
        android:layout_margin="10dp"
        android:src="@drawable/test"
        app:type="round" />

    <com.min.roundimageview.RoundImageView
        android:layout_width="200dp"
        android:layout_height="80dp"
        android:layout_margin="10dp"
        android:src="@drawable/test"
        app:scale="crop"
        app:type="round" />

    <com.min.roundimageview.RoundImageView
        android:layout_width="120dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:src="@drawable/test"
        app:borderRadius="30dp"
        app:bottom_left="false"
        app:bottom_right="false"
        app:top_left="false"
        app:top_right="false"
        app:type="round" />

    <com.min.roundimageview.RoundImageView
        android:layout_width="120dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:src="@drawable/test"
        app:borderRadius="30dp"
        app:bottom_right="false"
        app:top_right="false"
        app:type="round" />

    <com.min.roundimageview.RoundImageView
        android:layout_width="120dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:src="@drawable/test"
        app:borderRadius="30dp"
        app:bottom_left="false"
        app:top_right="false"
        app:type="round" />

</LinearLayout>

用到的圖片也放一下吧：

test.jpg：

主文件MainActivity裏什麼都沒寫，這裏就不放了。

運行一下，就能看到開頭所示的效果了。下面重點解釋一下用法：

<com.min.roundimageview.RoundImageView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    android:src="@drawable/test" />

最簡單的用法就像上面這樣，引用一下控件什麼都不用設置，此時顯示爲圓形，半徑爲長寬的較小者。

<com.min.roundimageview.RoundImageView
    android:layout_width="200dp"
    android:layout_height="80dp"
    android:layout_margin="10dp"
    android:src="@drawable/test"
    app:type="round" />

上述代碼添加了type="round" 的屬性，設置顯示形狀爲圓角矩形，默認四個角全爲圓角，圓角半徑爲10dp。

<com.min.roundimageview.RoundImageView
    android:layout_width="200dp"
    android:layout_height="80dp"
    android:layout_margin="10dp"
    android:src="@drawable/test"
    app:scale="crop"
    app:type="round" />

上述代碼添加了app:scale="crop" 設置填充類型爲crop，即視圖的長寬與圖片本身的長寬不一致時，保持原圖比例，剪裁原圖的一部分來顯示，設置app:scale="fit"或不設置，則拉伸或壓縮原圖片來充滿視圖長寬。

<com.min.roundimageview.RoundImageView
    android:layout_width="120dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    android:src="@drawable/test"
    app:borderRadius="30dp"
    app:bottom_left="false"
    app:bottom_right="false"
    app:type="round" />

上述代碼添加了app:borderRadius="30dp"設置圓角半徑爲30dp，app:bottom_left="false"和app:bottom_right="false"表

示指定左下角和右下角不爲圓角，其中，bottom_left表示左下角，bottom_right表示右下角，top_left表示左上角，top_right

表示右上角，不設置時默認全爲true，需要指定某個角爲圓角時只要將不需要爲圓角的角對應的屬性設置爲false即可。

 

總的來說用法還是很簡單的，希望對大家有用。

最後附上源碼地址：點擊打開鏈接

 

這次的內容就到這裏，我們下次再見。