源碼地址：心形圖片、心形ImageView、圓形圖片、圓形ImageView
實際效果如下：
一、思路
1、圖片尺寸：加載的圖片尺寸不會完全統一，可以是正方形，長方形等，這裏不需要考慮正方形，因爲一般的頭像是正方形，需要考慮的是長方形，需要取長方形中邊長的最大的居中的正方形，否則會拉伸，不好看。
2、心形邊框：可以通過畫筆或者一個心形的圖片
3、細節：心形邊框覆蓋在圖片上，並且只顯示心形裏面的部分圖片，心形以外的圖片不顯示
二、實現
結合思路中第二點和第三點，心形邊框部分不可以使用心形邊框圖片遮蓋圖片。因爲這樣限制性太大，不同背景顏色的頁面需要做對應顏色的心形邊框圖片。這樣太費勁了，不能這麼做。我們很懶！！！
那麼，我們需要自定義view用畫筆 paint 來繪製一個心形邊框，並且需要滿足“心形邊框覆蓋在圖片上，並且只顯示心形裏面的部分圖片，心形以外的圖片不顯示”這樣的需求。
涉及技術關鍵詞：
貝賽爾曲線 ： 參考 安卓自定義View進階-Path之貝塞爾曲線 學習貝塞爾曲線的基礎用法和適用場景
Paint Xfermode ：參考 Android Paint Xfermode 學習paint.setXfermode的用途
三、代碼
attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="heartimageview">
<attr name="border_size" format="dimension" />
<attr name="in_border_color" format="color" />
<attr name="out_border_color" format="color"/>
<attr name="shape_type" format="string"/>
</declare-styleable>
<declare-styleable name="CircleImageView">
<attr name="civ_border_width" format="dimension" />
<attr name="civ_border_color" format="color" />
<attr name="civ_border_overlay" format="boolean" />
<attr name="civ_circle_background_color" format="color" />
</declare-styleable>
</resources>
HeartImageView.java
/**
* 心形ImageView 可以設置邊框
* @author DerekYan
*/
public class HeartImageView extends ImageView {
private Context mContext;
private int border_size = 0;// 邊框厚度
private int in_border_color = 0;// 內圓邊框顏色
private int out_border_color = 0;// 外圓邊框顏色
private int defColor = 0xFFFFFFFF;// 默認顏色
private int width = 0;// 控件的寬度
private int height = 0;// 控件的高度
private String shape_type;// 形狀的類型
public HeartImageView(Context context) {
super(context);
// TODO Auto-generated constructor stub
this.mContext = context;
}
public HeartImageView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
this.mContext = context;
setAttributes(attrs);
}
public HeartImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// TODO Auto-generated constructor stub
this.mContext = context;
setAttributes(attrs);
}
/**
* 獲得自定義屬性
*
* @param attrs
*/
private void setAttributes(AttributeSet attrs) {
// TODO Auto-generated method stub
TypedArray mArray = mContext.obtainStyledAttributes(attrs,
R.styleable.heartimageview);
// 得到邊框厚度，否則返回0
border_size = mArray.getDimensionPixelSize(
R.styleable.heartimageview_border_size, 0);
// 得到內邊框顏色，否則返回默認顏色
in_border_color = mArray.getColor(
R.styleable.heartimageview_in_border_color, defColor);
// 得到外邊框顏色，否則返回默認顏色
out_border_color = mArray.getColor(
R.styleable.heartimageview_out_border_color, defColor);
// 得到形狀的類型
shape_type = mArray.getString(R.styleable.heartimageview_shape_type);
mArray.recycle();// 回收mArray
}
@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
// super.onDraw(canvas); 必須去掉該行或註釋掉，否則會出現兩張圖片
// 得到傳入的圖片
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}
if (getWidth() == 0 || getHeight() == 0) {
return;
}
this.measure(0, 0);
if (drawable.getClass() == NinePatchDrawable.class) {// 如果該傳入圖片是.9格式的圖片
return;
}
// 將圖片轉爲位圖
Bitmap mBitmap = ((BitmapDrawable) drawable).getBitmap();
Bitmap cpBitmap = mBitmap.copy(Bitmap.Config.ARGB_8888, true);
// 得到畫布寬高
width = getWidth();
height = getHeight();
//
int radius = 0;//
radius = (width < height ? width : height) / 2;
//
Bitmap shapeBitmap = drawShapeBitmap(cpBitmap, radius);
canvas.drawBitmap(shapeBitmap, width / 2 - radius, height / 2 - radius,
null);
}
/**
* 畫出指定形狀的圖片
*
* @param radius
* @return
*/
private Bitmap drawShapeBitmap(Bitmap bmp, int radius) {
// TODO Auto-generated method stub
Bitmap squareBitmap;// 根據傳入的位圖截取合適的正方形位圖
Bitmap scaledBitmap;// 根據diameter對截取的正方形位圖進行縮放
Log.i("HeartImageView", "radius:" + radius);
int diameter = radius * 2;
// 位圖的寬高
int w = bmp.getWidth();
int h = bmp.getHeight();
// 爲了防止寬高不相等，造成圓形圖片變形，因此截取長方形中處於中間位置最大的正方形圖片
squareBitmap = bmp;
// 對squareBitmap進行縮放爲diameter邊長的正方形位圖
if (w != diameter
|| h != diameter) {
if (w < diameter || h < diameter) {
//位圖寬高沒有ImageView的寬高大 需要放大
float scale; //縮放倍數
scale = 1f * diameter / (Math.min(w, h));
Matrix matrix = new Matrix();
matrix.postScale(scale,scale);
squareBitmap = Bitmap.createBitmap(squareBitmap,0,0,w,h,matrix,false);
if (w != h) {
//從矩形圖中截取正中間的正方形部分。
scaledBitmap = centerSquareScaleBitmap(squareBitmap, diameter);
} else {
scaledBitmap = squareBitmap;
}
} else {
//從矩形圖中截取正中間的正方形部分。
scaledBitmap = centerSquareScaleBitmap(squareBitmap, diameter);
}
} else {
scaledBitmap = squareBitmap;
}
Bitmap outputbmp = Bitmap.createBitmap(scaledBitmap.getWidth(),
scaledBitmap.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(outputbmp);// 創建一個相同大小的畫布
Paint paint = new Paint();// 定義畫筆
paint.setAntiAlias(true);// 設置抗鋸齒
paint.setFilterBitmap(true);
paint.setDither(true);
canvas.drawARGB(0, 0, 0, 0);
//設置邊框
Paint borderPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
borderPaint.setColor(out_border_color);
borderPaint.setStyle(Paint.Style.STROKE);
borderPaint.setStrokeWidth(border_size);
Path path = new Path();
//右心形
path.moveTo(diameter / 2f, diameter / 7f);
path.cubicTo((diameter /6f) * 5 , 0 - ( diameter / 5f), (diameter / 5f) * 7 , (diameter / 5f) * 2 , diameter / 2f, diameter- border_size );
//左心形
path.moveTo(diameter / 2f, diameter / 7f);
path.cubicTo(diameter / 6f , 0 - ( diameter / 5f), 0 - (diameter / 5f) * 2, (diameter / 5f) * 2, diameter / 2f, diameter - border_size );
canvas.drawPath(path, paint);
// 設置Xfermode的Mode
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(scaledBitmap, 0, 0, paint);
canvas.drawPath(path, borderPaint);
bmp = null;
squareBitmap = null;
scaledBitmap = null;
return outputbmp;
}
/**
* @param bitmap 原圖
* @param edgeLength 希望得到的正方形部分的邊長
* @return 縮放截取正中部分後的位圖。
*/
public static Bitmap centerSquareScaleBitmap(Bitmap bitmap, int edgeLength)
{
if(null == bitmap || edgeLength <= 0)
{
return null;
}
Bitmap result = bitmap;
int widthOrg = bitmap.getWidth();
int heightOrg = bitmap.getHeight();
if(widthOrg > edgeLength && heightOrg > edgeLength)
{
//壓縮到一個最小長度是edgeLength的bitmap
int longerEdge = (int)(edgeLength * Math.max(widthOrg, heightOrg) / Math.min(widthOrg, heightOrg));
int scaledWidth = widthOrg > heightOrg ? longerEdge : edgeLength;
int scaledHeight = widthOrg > heightOrg ? edgeLength : longerEdge;
Bitmap scaledBitmap;
try{
scaledBitmap = Bitmap.createScaledBitmap(bitmap, scaledWidth, scaledHeight, true);
}
catch(Exception e){
return null;
}
//從圖中截取正中間的正方形部分。
int xTopLeft = (scaledWidth - edgeLength) / 2;
int yTopLeft = (scaledHeight - edgeLength) / 2;
try{
result = Bitmap.createBitmap(scaledBitmap, xTopLeft, yTopLeft, edgeLength, edgeLength);
scaledBitmap.recycle();
}
catch(Exception e){
return null;
}
}
return result;
}
}
CircleImageView.java
public class CircleImageView extends ImageView {
private static final ImageView.ScaleType SCALE_TYPE = ImageView.ScaleType.CENTER_CROP;
private static final Bitmap.Config BITMAP_CONFIG = Bitmap.Config.ARGB_8888;
private static final int COLORDRAWABLE_DIMENSION = 2;
private static final int DEFAULT_BORDER_WIDTH = 0;
private static final int DEFAULT_BORDER_COLOR = Color.BLACK;
private static final int DEFAULT_CIRCLE_BACKGROUND_COLOR = Color.TRANSPARENT;
private static final int DEFAULT_IMAGE_ALPHA = 255;
private static final boolean DEFAULT_BORDER_OVERLAY = false;
private final RectF mDrawableRect = new RectF();
private final RectF mBorderRect = new RectF();
private final Matrix mShaderMatrix = new Matrix();
private final Paint mBitmapPaint = new Paint();
private final Paint mBorderPaint = new Paint();
private final Paint mCircleBackgroundPaint = new Paint();
private int mBorderColor = DEFAULT_BORDER_COLOR;
private int mBorderWidth = DEFAULT_BORDER_WIDTH;
private int mCircleBackgroundColor = DEFAULT_CIRCLE_BACKGROUND_COLOR;
private int mImageAlpha = DEFAULT_IMAGE_ALPHA;
private Bitmap mBitmap;
private Canvas mBitmapCanvas;
private float mDrawableRadius;
private float mBorderRadius;
private ColorFilter mColorFilter;
private boolean mInitialized;
private boolean mRebuildShader;
private boolean mDrawableDirty;
private boolean mBorderOverlay;
private boolean mDisableCircularTransformation;
public CircleImageView(Context context) {
super(context);
init();
}
public CircleImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CircleImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleImageView, defStyle, 0);
mBorderWidth = a.getDimensionPixelSize(R.styleable.CircleImageView_civ_border_width, DEFAULT_BORDER_WIDTH);
mBorderColor = a.getColor(R.styleable.CircleImageView_civ_border_color, DEFAULT_BORDER_COLOR);
mBorderOverlay = a.getBoolean(R.styleable.CircleImageView_civ_border_overlay, DEFAULT_BORDER_OVERLAY);
mCircleBackgroundColor = a.getColor(R.styleable.CircleImageView_civ_circle_background_color, DEFAULT_CIRCLE_BACKGROUND_COLOR);
a.recycle();
init();
}
private void init() {
mInitialized = true;
super.setScaleType(SCALE_TYPE);
mBitmapPaint.setAntiAlias(true);
mBitmapPaint.setDither(true);
mBitmapPaint.setFilterBitmap(true);
mBitmapPaint.setAlpha(mImageAlpha);
mBitmapPaint.setColorFilter(mColorFilter);
mBorderPaint.setStyle(Paint.Style.STROKE);
mBorderPaint.setAntiAlias(true);
mBorderPaint.setColor(mBorderColor);
mBorderPaint.setStrokeWidth(mBorderWidth);
mCircleBackgroundPaint.setStyle(Paint.Style.FILL);
mCircleBackgroundPaint.setAntiAlias(true);
mCircleBackgroundPaint.setColor(mCircleBackgroundColor);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
setOutlineProvider(new OutlineProvider());
}
}
@Override
public void setScaleType(ImageView.ScaleType scaleType) {
if (scaleType != SCALE_TYPE) {
throw new IllegalArgumentException(String.format("ScaleType %s not supported.", scaleType));
}
}
@Override
public void setAdjustViewBounds(boolean adjustViewBounds) {
if (adjustViewBounds) {
throw new IllegalArgumentException("adjustViewBounds not supported.");
}
}
@SuppressLint("CanvasSize")
@Override
protected void onDraw(Canvas canvas) {
if (mDisableCircularTransformation) {
super.onDraw(canvas);
return;
}
if (mCircleBackgroundColor != Color.TRANSPARENT) {
canvas.drawCircle(mDrawableRect.centerX(), mDrawableRect.centerY(), mDrawableRadius, mCircleBackgroundPaint);
}
if (mBitmap != null) {
if (mDrawableDirty && mBitmapCanvas != null) {
mDrawableDirty = false;
Drawable drawable = getDrawable();
drawable.setBounds(0, 0, mBitmapCanvas.getWidth(), mBitmapCanvas.getHeight());
drawable.draw(mBitmapCanvas);
}
if (mRebuildShader) {
mRebuildShader = false;
BitmapShader bitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
bitmapShader.setLocalMatrix(mShaderMatrix);
mBitmapPaint.setShader(bitmapShader);
}
canvas.drawCircle(mDrawableRect.centerX(), mDrawableRect.centerY(), mDrawableRadius, mBitmapPaint);
}
if (mBorderWidth > 0) {
canvas.drawCircle(mBorderRect.centerX(), mBorderRect.centerY(), mBorderRadius, mBorderPaint);
}
}
@Override
public void invalidateDrawable(@NonNull Drawable dr) {
mDrawableDirty = true;
invalidate();
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
updateDimensions();
invalidate();
}
@Override
public void setPadding(int left, int top, int right, int bottom) {
super.setPadding(left, top, right, bottom);
updateDimensions();
invalidate();
}
@Override
public void setPaddingRelative(int start, int top, int end, int bottom) {
super.setPaddingRelative(start, top, end, bottom);
updateDimensions();
invalidate();
}
public int getBorderColor() {
return mBorderColor;
}
public void setBorderColor(@ColorInt int borderColor) {
if (borderColor == mBorderColor) {
return;
}
mBorderColor = borderColor;
mBorderPaint.setColor(borderColor);
invalidate();
}
public int getCircleBackgroundColor() {
return mCircleBackgroundColor;
}
public void setCircleBackgroundColor(@ColorInt int circleBackgroundColor) {
if (circleBackgroundColor == mCircleBackgroundColor) {
return;
}
mCircleBackgroundColor = circleBackgroundColor;
mCircleBackgroundPaint.setColor(circleBackgroundColor);
invalidate();
}
/**
* @deprecated Use {@link #setCircleBackgroundColor(int)} instead
*/
@Deprecated
public void setCircleBackgroundColorResource(@ColorRes int circleBackgroundRes) {
setCircleBackgroundColor(getContext().getResources().getColor(circleBackgroundRes));
}
public int getBorderWidth() {
return mBorderWidth;
}
public void setBorderWidth(int borderWidth) {
if (borderWidth == mBorderWidth) {
return;
}
mBorderWidth = borderWidth;
mBorderPaint.setStrokeWidth(borderWidth);
updateDimensions();
invalidate();
}
public boolean isBorderOverlay() {
return mBorderOverlay;
}
public void setBorderOverlay(boolean borderOverlay) {
if (borderOverlay == mBorderOverlay) {
return;
}
mBorderOverlay = borderOverlay;
updateDimensions();
invalidate();
}
public boolean isDisableCircularTransformation() {
return mDisableCircularTransformation;
}
public void setDisableCircularTransformation(boolean disableCircularTransformation) {
if (disableCircularTransformation == mDisableCircularTransformation) {
return;
}
mDisableCircularTransformation = disableCircularTransformation;
if (disableCircularTransformation) {
mBitmap = null;
mBitmapCanvas = null;
mBitmapPaint.setShader(null);
} else {
initializeBitmap();
}
invalidate();
}
@Override
public void setImageBitmap(Bitmap bm) {
super.setImageBitmap(bm);
initializeBitmap();
invalidate();
}
@Override
public void setImageDrawable(Drawable drawable) {
super.setImageDrawable(drawable);
initializeBitmap();
invalidate();
}
@Override
public void setImageResource(@DrawableRes int resId) {
super.setImageResource(resId);
initializeBitmap();
invalidate();
}
@Override
public void setImageURI(Uri uri) {
super.setImageURI(uri);
initializeBitmap();
invalidate();
}
@Override
public void setImageAlpha(int alpha) {
alpha &= 0xFF;
if (alpha == mImageAlpha) {
return;
}
mImageAlpha = alpha;
// This might be called during ImageView construction before
// member initialization has finished on API level >= 16.
if (mInitialized) {
mBitmapPaint.setAlpha(alpha);
invalidate();
}
}
@Override
public int getImageAlpha() {
return mImageAlpha;
}
@Override
public void setColorFilter(ColorFilter cf) {
if (cf == mColorFilter) {
return;
}
mColorFilter = cf;
// This might be called during ImageView construction before
// member initialization has finished on API level <= 19.
if (mInitialized) {
mBitmapPaint.setColorFilter(cf);
invalidate();
}
}
@Override
public ColorFilter getColorFilter() {
return mColorFilter;
}
private Bitmap getBitmapFromDrawable(Drawable drawable) {
if (drawable == null) {
return null;
}
if (drawable instanceof BitmapDrawable) {
return ((BitmapDrawable) drawable).getBitmap();
}
try {
Bitmap bitmap;
if (drawable instanceof ColorDrawable) {
bitmap = Bitmap.createBitmap(COLORDRAWABLE_DIMENSION, COLORDRAWABLE_DIMENSION, BITMAP_CONFIG);
} else {
bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), BITMAP_CONFIG);
}
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
drawable.draw(canvas);
return bitmap;
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
private void initializeBitmap() {
mBitmap = getBitmapFromDrawable(getDrawable());
if (mBitmap != null && mBitmap.isMutable()) {
mBitmapCanvas = new Canvas(mBitmap);
} else {
mBitmapCanvas = null;
}
if (!mInitialized) {
return;
}
if (mBitmap != null) {
updateShaderMatrix();
} else {
mBitmapPaint.setShader(null);
}
}
private void updateDimensions() {
mBorderRect.set(calculateBounds());
mBorderRadius = Math.min((mBorderRect.height() - mBorderWidth) / 2.0f, (mBorderRect.width() - mBorderWidth) / 2.0f);
mDrawableRect.set(mBorderRect);
if (!mBorderOverlay && mBorderWidth > 0) {
mDrawableRect.inset(mBorderWidth - 1.0f, mBorderWidth - 1.0f);
}
mDrawableRadius = Math.min(mDrawableRect.height() / 2.0f, mDrawableRect.width() / 2.0f);
updateShaderMatrix();
}
private RectF calculateBounds() {
int availableWidth = getWidth() - getPaddingLeft() - getPaddingRight();
int availableHeight = getHeight() - getPaddingTop() - getPaddingBottom();
int sideLength = Math.min(availableWidth, availableHeight);
float left = getPaddingLeft() + (availableWidth - sideLength) / 2f;
float top = getPaddingTop() + (availableHeight - sideLength) / 2f;
return new RectF(left, top, left + sideLength, top + sideLength);
}
private void updateShaderMatrix() {
if (mBitmap == null) {
return;
}
float scale;
float dx = 0;
float dy = 0;
mShaderMatrix.set(null);
int bitmapHeight = mBitmap.getHeight();
int bitmapWidth = mBitmap.getWidth();
if (bitmapWidth * mDrawableRect.height() > mDrawableRect.width() * bitmapHeight) {
scale = mDrawableRect.height() / (float) bitmapHeight;
dx = (mDrawableRect.width() - bitmapWidth * scale) * 0.5f;
} else {
scale = mDrawableRect.width() / (float) bitmapWidth;
dy = (mDrawableRect.height() - bitmapHeight * scale) * 0.5f;
}
mShaderMatrix.setScale(scale, scale);
mShaderMatrix.postTranslate((int) (dx + 0.5f) + mDrawableRect.left, (int) (dy + 0.5f) + mDrawableRect.top);
mRebuildShader = true;
}
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouchEvent(MotionEvent event) {
if (mDisableCircularTransformation) {
return super.onTouchEvent(event);
}
return inTouchableArea(event.getX(), event.getY()) && super.onTouchEvent(event);
}
private boolean inTouchableArea(float x, float y) {
if (mBorderRect.isEmpty()) {
return true;
}
return Math.pow(x - mBorderRect.centerX(), 2) + Math.pow(y - mBorderRect.centerY(), 2) <= Math.pow(mBorderRadius, 2);
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
private class OutlineProvider extends ViewOutlineProvider {
@Override
public void getOutline(View view, Outline outline) {
if (mDisableCircularTransformation) {
ViewOutlineProvider.BACKGROUND.getOutline(view, outline);
} else {
Rect bounds = new Rect();
mBorderRect.roundOut(bounds);
outline.setRoundRect(bounds, bounds.width() / 2.0f);
}
}
}
}
源碼地址:github 源碼