Android自定義弧形[方形加弧形]IamgeView並新增高斯模糊

Jersay發表於2018-01-24
AndroidView

先上圖，上半部分是矩形、下半部分是弧形，如圖所示：

Android自定義弧形[方形加弧形]IamgeView並新增高斯模糊

上圖是實現的效果，在實現弧形ImageView後用Glide的BlurTransformation新增了高斯模糊，這種弧形圖片一般都像這樣用於個人中心或者使用者中心頂部。

第一步：繪製圖中形狀的ImageView

1、設定Path

Path path = new Path();
path.moveTo(0, 0);
path.lineTo(0, getHeight() / 3 * 2);
path.quadTo(getWidth() / 2, getHeight() / 3 * 2 + 2 * mArcHeight, getWidth(), getHeight() / 3 * 2);
path.lineTo(getWidth(), 0);
path.close();
複製程式碼

2、裁剪圖片

/*
下邊這行程式碼防鋸齒，在沒有Paint的情況下使用，但感覺沒什麼卵用，後期改進
*/
canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));
canvas.clipPath(path);
super.onDraw(canvas);//注意此行程式碼的位置
複製程式碼

備註：如註釋所示，設定防鋸齒後還是有鋸齒感，希望知道原因或者有解決辦法的大佬幫忙看看。

主要就是一個路徑繪製和畫布裁剪，附上全部程式碼：

public class ArcImageView extends AppCompatImageView {

    /*
     *弧形高度
     */
    private int mArcHeight;
    private static final String TAG = "ArcImageView";

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

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

    public ArcImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ArcImageView);
        mArcHeight = typedArray.getDimensionPixelSize(R.styleable.ArcImageView_arcHeight, 0);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Path path = new Path();
        path.moveTo(0, 0);
        path.lineTo(0, getHeight() / 3 * 2);
        path.quadTo(getWidth() / 2, getHeight() / 3 * 2 + 2 * mArcHeight, getWidth(), getHeight() / 3 * 2);
        path.lineTo(getWidth(), 0);
        path.close();
        /*
        下邊這行程式碼防鋸齒，在沒有Paint的情況下使用，但感覺沒什麼卵用，後期改進
         */
        canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));
        canvas.clipPath(path);
        super.onDraw(canvas);
    }
}
複製程式碼

Attribute屬性：

<attr name="arcHeight" format="dimension"/>
<declare-styleable name="ArcImageView">
    <attr name="arcHeight"/>
</declare-styleable>
複製程式碼

第二步：使用這個自定義ImageView

<packagename.ArcImageView
        android:id="@+id/iv_head_bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:arcHeight="@dimen/space_55"
        android:scaleType="centerCrop"
        android:src="@color/mainYellow"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true" />
複製程式碼

第三步：新增高斯模糊

1、引入Glide

compile 'com.github.bumptech.glide:glide:3.7.0'
compile 'jp.wasabeef:glide-transformations:2.0.0'
複製程式碼

2、新增高斯模糊

ArcImageView ivHeadBg = helper.getView(R.id.iv_head_bg);
            Glide.with(mContext)
                .load(url)
                .dontAnimate()
                .error(R.drawable.icon_default_head)
                //設定高斯模糊
                .bitmapTransform(new BlurTransformation(mContext, 14, 3))
                .into(ivHeadBg);
複製程式碼

由於還得趕專案，時間匆忙，回頭整理成一個小Demo發出來。

感謝閱讀和指正。

相關文章