使用Path自定義圓角圖片

簡單實現圓角圖片CircleView

效果:

CircleImageView代碼：

public class CircleImageView extends AppCompatImageView {

    private Path mPath;
    private RectF mRectF;
    private Paint mPaint;
    public CircleImageView(Context context) {
        this(context, null);
    }

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

    public CircleImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }


    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(15);

        mPath  = new Path();

    }
    @Override
    protected void onDraw(Canvas canvas) {
        //設置外框的矩形區域，不可再init()初始化，構造器中width和height還未肯定，可在onMesure()中獲取並設置
        mRectF = new RectF(0,0, getWidth(),getHeight());
        //path劃出一個圓角矩形，容納圖片,圖片矩形區域設置比紅色外框小，不然會覆蓋住外框，隨意控制
        mPath.addRoundRect(new RectF(10, 10, mRectF.right-10,mRectF.bottom-10), 50, 50, Path.Direction.CW);

        canvas.drawRoundRect(mRectF, 50, 50, mPaint); //畫出紅色外框圓角矩形

        canvas.clipPath(mPath);//將canvas裁剪到path設定的區域，日後的繪製都只能在此區域中，

        //這一句應該放在canvas.clipPath(path)以後,canvas.clipPath(path)只對裁剪以後的繪製起做用，
        // 這個方法在ImageView中會畫出xml設置的Drawable,落在剛纔設置的path中
        super.onDraw(canvas);

    }
}

   整個原理就是用Path劃出一個圓角矩形區域，調用super.onDraw(canvas)就可讓Drawable 落在那個區域。

使用，xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.why.traing2.MainActivity">

       <com.example.why.traing2.CircleImageView
           android:id="@+id/img_circle"
           android:layout_width="200dp"
           android:layout_height="200dp"
           android:src="@drawable/gakki"
           android:scaleType="centerCrop"
           app:layout_constraintTop_toTopOf="parent"
           android:layout_marginTop="8dp"
           app:layout_constraintBottom_toBottomOf="parent"
           android:layout_marginBottom="8dp"
           android:layout_marginLeft="8dp"
           app:layout_constraintLeft_toLeftOf="parent"
           app:layout_constraintVertical_bias="0.501"
           android:layout_marginRight="8dp"
           app:layout_constraintRight_toRightOf="parent"
           />

</android.support.constraint.ConstraintLayout>

Activivty:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        CircleImageView circleImageView = (CircleImageView)findViewById(R.id.img_circle);
    }
}

看了些參考資料，發現上篇寫錯了，發現思路比較簡單的，記錄下。也能夠用Shader, Xfermode實現,參考:https://enggm.wordpxress.com/...