文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Android 心形图片心形ImageView、带边框的的心形图片和圆形图片

2022-06-06 13:43

关注

源码地址:心形图片、心形ImageView、圆形图片、圆形ImageView

实际效果如下:

一、思路

1、图片尺寸:加载的图片尺寸不会完全统一,可以是正方形,长方形等,这里不需要考虑正方形,因为一般的头像是正方形,需要考虑的是长方形,需要取长方形中边长的最大的居中的正方形,否则会拉伸,不好看。

2、心形边框:可以通过画笔或者一个心形的图片

3、细节:心形边框覆盖在图片上,并且只显示心形里面的部分图片,心形以外的图片不显示

二、实现

        结合思路中第二点和第三点,心形边框部分不可以使用心形边框图片遮盖图片。因为这样限制性太大,不同背景颜色的页面需要做对应颜色的心形边框图片。这样太费劲了,不能这么做。我们很懒!!!

        那么,我们需要自定义view用画笔 paint 来绘制一个心形边框,并且需要满足“心形边框覆盖在图片上,并且只显示心形里面的部分图片,心形以外的图片不显示”这样的需求。

涉及技术关键词:

贝赛尔曲线 : 参考 安卓自定义View进阶-Path之贝塞尔曲线  学习贝塞尔曲线的基础用法和适用场景

Paint Xfermode :参考 Android Paint Xfermode 学习paint.setXfermode的用途

三、代码

attrs.xml


HeartImageView.java



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);
	}
	
	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);
	}
	
	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 (squareBitmap.getWidth() != diameter
				|| squareBitmap.getHeight() != diameter) {
			//从图中截取正中间的正方形部分。
			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;
	}
	
	public static Bitmap centerSquareScaleBitmap(Bitmap bitmap, int edgeLength)
	{
		if(null == bitmap || edgeLength  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
    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  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 源码


作者:Derek_Yan_


阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯