自定义圆角圆形图片

最新推荐文章于 2024-02-08 17:06:48 发布
最新推荐文章于 2024-02-08 17:06:48 发布
阅读量451 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZhangXuxiaoqingnian/article/details/81669269
版权

第一种自定义控件NiceImageView

public class NiceImageView extends AppCompatImageView {
    /**
     * 图片的类型，圆形or圆角
     */
    private int type;
    public static final int TYPE_CIRCLE = 0;
    public static final int TYPE_ROUND = 1;
    public static final int TYPE_OVAL = 2;
    /**
     * 描边的颜色、宽度
     */
    private int mBorderColor;
    private float mBorderWidth;
    /**
     * 圆角的大小
     */
    private float mCornerRadius;
    //左上角圆角大小
    private float mLeftTopCornerRadius;
    //右上角圆角大小
    private float mRightTopCornerRadius;
    //左下角圆角大小
    private float mLeftBottomCornerRadius;
    //右下角圆角大小
    private float mRightBottomCornerRadius;

    /**
     * 绘图的Paint
     */
    private Paint mBitmapPaint;
    private Paint mBorderPaint;
    /**
     * 圆角的半径
     */
    private float mRadius;
    /**
     * 3x3 矩阵，主要用于缩小放大
     */
    private Matrix mMatrix;
    /**
     * 渲染图像，使用图像为绘制图形着色
     */
    private BitmapShader mBitmapShader;
    /**
     * view的宽度
     */
    private int mWidth;
    /**
     * 圆角图片区域
     */
    private RectF mRoundRect;

    private Path mRoundPath;


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

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

    public NiceImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.NiceImageView, defStyleAttr, 0);

        type = a.getInt(R.styleable.NiceImageView_type, TYPE_OVAL);
        mBorderColor = a.getColor(R.styleable.NiceImageView_border_color, Color.TRANSPARENT);
        mBorderWidth = a.getDimension(R.styleable.NiceImageView_border_width, 0);
        mCornerRadius = a.getDimension(R.styleable.NiceImageView_corner_radius, dp2px(10));
        mLeftTopCornerRadius = a.getDimension(R.styleable.NiceImageView_leftTop_corner_radius, 0);
        mLeftBottomCornerRadius = a.getDimension(R.styleable.NiceImageView_leftBottom_corner_radius, 0);
        mRightTopCornerRadius = a.getDimension(R.styleable.NiceImageView_rightTop_corner_radius, 0);
        mRightBottomCornerRadius = a.getDimension(R.styleable.NiceImageView_rightBottom_corner_radius, 0);

        a.recycle();

        init();

    }

    private void init() {
        mRoundPath = new Path();
        mMatrix = new Matrix();
        mBitmapPaint = new Paint();
        mBitmapPaint.setAntiAlias(true);
        mBorderPaint = new Paint();
        mBorderPaint.setAntiAlias(true);
        mBorderPaint.setStyle(Paint.Style.STROKE);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        /**
         * 如果类型是圆形，则强制改变view的宽高一致，以小值为准
         */
        if (type == TYPE_CIRCLE) {
            mWidth = Math.min(MeasureSpec.getSize(widthMeasureSpec),
                    MeasureSpec.getSize(heightMeasureSpec));
            mRadius = mWidth / 2 - mBorderWidth / 2;
            setMeasuredDimension(mWidth, mWidth);
        }

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // 圆角图片的范围
        if (type == TYPE_ROUND || type == TYPE_OVAL) {
            mRoundRect = new RectF(mBorderWidth / 2, mBorderWidth / 2, w - mBorderWidth / 2, h - mBorderWidth / 2);
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {

        mBorderPaint.setColor(mBorderColor);
        mBorderPaint.setStrokeWidth(mBorderWidth);

        if (getDrawable() == null) {
            return;
        }
        setUpShader();

        if (type == TYPE_ROUND) {
            setRoundPath();
            canvas.drawPath(mRoundPath, mBitmapPaint);

            //绘制描边
            canvas.drawPath(mRoundPath, mBorderPaint);
        } else if (type == TYPE_CIRCLE) {

            canvas.drawCircle(mRadius + mBorderWidth / 2, mRadius + mBorderWidth / 2, mRadius, mBitmapPaint);

            //绘制描边
            canvas.drawCircle(mRadius + mBorderWidth / 2, mRadius + mBorderWidth / 2, mRadius, mBorderPaint);

        } else {
            canvas.drawOval(mRoundRect, mBitmapPaint);

            canvas.drawOval(mRoundRect, mBorderPaint);
        }
    }


    private void setRoundPath() {
        mRoundPath.reset();

        /**
         * 如果四个圆角大小都是默认值0，
         * 则将四个圆角大小设置为mCornerRadius的值
         */
        if (mLeftTopCornerRadius == 0 &&
                mLeftBottomCornerRadius == 0 &&
                mRightTopCornerRadius == 0 &&
                mRightBottomCornerRadius == 0) {

            mRoundPath.addRoundRect(mRoundRect,
                    new float[]{mCornerRadius, mCornerRadius,
                            mCornerRadius, mCornerRadius,
                            mCornerRadius, mCornerRadius,
                            mCornerRadius, mCornerRadius},
                    Path.Direction.CW);

        } else {
            mRoundPath.addRoundRect(mRoundRect,
                    new float[]{mLeftTopCornerRadius, mLeftTopCornerRadius,
                            mRightTopCornerRadius, mRightTopCornerRadius,
                            mRightBottomCornerRadius, mRightBottomCornerRadius,
                            mLeftBottomCornerRadius, mLeftBottomCornerRadius},
                    Path.Direction.CW);
        }

    }


    /**
     * 初始化BitmapShader
     */
    private void setUpShader() {

        Drawable drawable = getDrawable();
        if (drawable == null) {
            return;
        }

        Bitmap bmp = drawableToBitamp(drawable);
        // 将bmp作为着色器，就是在指定区域内绘制bmp
        mBitmapShader = new BitmapShader(bmp, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        float scale = 1.0f;
        if (type == TYPE_CIRCLE) {
            // 拿到bitmap宽或高的小值
            int bSize = Math.min(bmp.getWidth(), bmp.getHeight());
            scale = mWidth * 1.0f / bSize;
            //使缩放后的图片居中
            float dx = (bmp.getWidth() * scale - mWidth) / 2;
            float dy = (bmp.getHeight() * scale - mWidth) / 2;
            mMatrix.setTranslate(-dx, -dy);

        } else if (type == TYPE_ROUND || type == TYPE_OVAL) {

            if (!(bmp.getWidth() == getWidth() && bmp.getHeight() == getHeight())) {
                // 如果图片的宽或者高与view的宽高不匹配，计算出需要缩放的比例；缩放后的图片的宽高，一定要大于我们view的宽高；所以我们这里取大值；
                scale = Math.max(getWidth() * 1.0f / bmp.getWidth(),
                        getHeight() * 1.0f / bmp.getHeight());
                //使缩放后的图片居中
                float dx = (scale * bmp.getWidth() - getWidth()) / 2;
                float dy = (scale * bmp.getHeight() - getHeight()) / 2;
                mMatrix.setTranslate(-dx, -dy);
            }
        }
        // shader的变换矩阵，我们这里主要用于放大或者缩小
        mMatrix.preScale(scale, scale);

        mBitmapShader.setLocalMatrix(mMatrix);

        // 设置变换矩阵
        mBitmapShader.setLocalMatrix(mMatrix);
        // 设置shader
        mBitmapPaint.setShader(mBitmapShader);
    }


    /**
     * drawable转bitmap
     */
    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;
    }


    /**
     * 设置图片类型:
     * imageType=0 圆形图片
     * imageType=1 圆角图片
     * 默认为圆形图片
     */
    public NiceImageView setType(int imageType) {
        if (this.type != imageType) {
            this.type = imageType;
            if (this.type != TYPE_ROUND && this.type != TYPE_CIRCLE && this.type != TYPE_OVAL) {
                this.type = TYPE_OVAL;
            }
            requestLayout();
        }
        return this;
    }


    /**
     * 设置圆角图片的圆角大小
     */
    public NiceImageView setCornerRadius(int cornerRadius) {
        cornerRadius = dp2px(cornerRadius);
        if (mCornerRadius != cornerRadius) {
            mCornerRadius = cornerRadius;
            invalidate();
        }
        return this;
    }

    /**
     * 设置圆角图片的左上圆角大小
     */
    public NiceImageView setLeftTopCornerRadius(int cornerRadius) {
        cornerRadius = dp2px(cornerRadius);
        if (mLeftTopCornerRadius != cornerRadius) {
            mLeftTopCornerRadius = cornerRadius;
            invalidate();
        }
        return this;
    }

    /**
     * 设置圆角图片的右上圆角大小
     */
    public NiceImageView setRightTopCornerRadius(int cornerRadius) {
        cornerRadius = dp2px(cornerRadius);
        if (mRightTopCornerRadius != cornerRadius) {
            mRightTopCornerRadius = cornerRadius;
            invalidate();
        }
        return this;
    }

    /**
     * 设置圆角图片的左下圆角大小
     */
    public NiceImageView setLeftBottomCornerRadius(int cornerRadius) {
        cornerRadius = dp2px(cornerRadius);
        if (mLeftBottomCornerRadius != cornerRadius) {
            mLeftBottomCornerRadius = cornerRadius;
            invalidate();
        }
        return this;
    }

    /**
     * 设置圆角图片的右下圆角大小
     */
    public NiceImageView setRightBottomCornerRadius(int cornerRadius) {
        cornerRadius = dp2px(cornerRadius);
        if (mRightBottomCornerRadius != cornerRadius) {
            mRightBottomCornerRadius = cornerRadius;
            invalidate();
        }

        return this;
    }


    /**
     * 设置描边宽度
     */
    public NiceImageView setBorderWidth(int borderWidth) {
        borderWidth = dp2px(borderWidth);
        if (mBorderWidth != borderWidth) {
            mBorderWidth = borderWidth;
            invalidate();
        }

        return this;
    }

    /**
     * 设置描边颜色
     */
    public NiceImageView setBorderColor(int borderColor) {
        if (mBorderColor != borderColor) {
            mBorderColor = borderColor;
            invalidate();
        }

        return this;
    }

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

在values下创建attrs.xml,为控件的属性

<resources>
    <declare-styleable name="NiceImageView">
        <!-- 描边宽度-->
        <attr name="border_width" format="dimension" />
        <!-- 描边颜色-->
        <attr name="border_color" format="color" />
        <!--圆角大小-->
        <attr name="corner_radius" format="dimension" />
        <!--左上圆角大小-->
        <attr name="leftTop_corner_radius" format="dimension" />
        <!--右上圆角大小-->
        <attr name="rightTop_corner_radius" format="dimension" />
        <!--左下圆角大小-->
        <attr name="leftBottom_corner_radius" format="dimension" />
        <!--右下圆角大小-->
        <attr name="rightBottom_corner_radius" format="dimension" />
        <!--图片类型：圆角或者圆形-->
        <attr name="type" format="enum">
            <enum name="oval" value="2" />
            <enum name="round" value="1" />
            <enum name="circle" value="0" />
        </attr>
    </declare-styleable>
</resources>

第二种:

public class RoundImageView extends ImageView {

    /**
     * 图片的类型，圆形or圆角
     */
    private int type;
    private static final int TYPE_CIRCLE = 0;
    private static final int TYPE_ROUND = 1;

    /**
     * 圆角大小的默认值
     */
    private static final int BODER_RADIUS_DEFAULT = 10;
    /**
     * 圆角的大小
     */
    private int mBorderRadius;

    /**
     * 绘图的Paint
     */
    private Paint mBitmapPaint;
    /**
     * 圆角的半径
     */
    private int mRadius;
    /**
     * 3x3 矩阵，主要用于缩小放大
     */
    private Matrix mMatrix;
    /**
     * 渲染图像，使用图像为绘制图形着色
     */
    private BitmapShader mBitmapShader;
    /**
     * view的宽度
     */
    private int mWidth;
    private RectF mRoundRect;

    public RoundImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mMatrix = new Matrix();
        mBitmapPaint = new Paint();
        mBitmapPaint.setAntiAlias(true);

        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.RoundImageView);

        mBorderRadius = a.getDimensionPixelSize(
                R.styleable.RoundImageView_borderRadius, (int) TypedValue
                        .applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                                BODER_RADIUS_DEFAULT, getResources()
                                        .getDisplayMetrics()));// 默认为10dp
        type = a.getInt(R.styleable.RoundImageView_type, TYPE_CIRCLE);// 默认为Circle

        a.recycle();
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        Log.e("TAG", "onMeasure");
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        /** 如果类型是圆形，则强制改变view的宽高一致，以小值为准 */
        if (type == TYPE_CIRCLE){
            mWidth = Math.min(getMeasuredWidth(), getMeasuredHeight());
            mRadius = mWidth / 2;
            setMeasuredDimension(mWidth, mWidth);
        }
    }

    /** 初始化BitmapShader */
    private void setUpShader(){
        Drawable drawable = getDrawable();
        if (drawable == null){
            return;
        }

        Bitmap bmp = drawableToBitamp(drawable);
        // 将bmp作为着色器，就是在指定区域内绘制bmp
        mBitmapShader = new BitmapShader(bmp, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        float scale = 1.0f;
        if (type == TYPE_CIRCLE){
            // 拿到bitmap宽或高的小值
            int bSize = Math.min(bmp.getWidth(), bmp.getHeight());
            scale = mWidth * 1.0f / bSize;

        } else if (type == TYPE_ROUND){
            // 如果图片的宽或者高与view的宽高不匹配，计算出需要缩放的比例；缩放后的图片的宽高，一定要大于我们view的宽高；所以我们这里取大值；
            scale = Math.max(getWidth() * 1.0f / bmp.getWidth(), getHeight()
                    * 1.0f / bmp.getHeight());
        }
        // shader的变换矩阵，我们这里主要用于放大或者缩小
        mMatrix.setScale(scale, scale);
        // 设置变换矩阵
        mBitmapShader.setLocalMatrix(mMatrix);
        // 设置shader
        mBitmapPaint.setShader(mBitmapShader);
    }
    /** drawable转bitmap */
    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 void onDraw(Canvas canvas) {
        if (getDrawable() == null) {
            return;
        }
        setUpShader();

        if (type == TYPE_ROUND) {
            canvas.drawRoundRect(mRoundRect, mBorderRadius, mBorderRadius,
                    mBitmapPaint);
        } else {
            canvas.drawCircle(mRadius, mRadius, mRadius, mBitmapPaint);
            // drawSomeThing(canvas);
        }
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // 圆角图片的范围
        if (type == TYPE_ROUND)
            mRoundRect = new RectF(0, 0, getWidth(), getHeight());
    }
    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";

    @Override
    protected Parcelable onSaveInstanceState(){
        Bundle bundle = new Bundle();
        bundle.putParcelable(STATE_INSTANCE, super.onSaveInstanceState());
        bundle.putInt(STATE_TYPE, type);
        bundle.putInt(STATE_BORDER_RADIUS, mBorderRadius);
        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.mBorderRadius = bundle.getInt(STATE_BORDER_RADIUS);
        } else{
            super.onRestoreInstanceState(state);
        }
    }


}
<resources>
<declare-styleable name="RoundImageView">
        <attr name="borderRadius" />
        <attr name="type" />
    </declare-styleable>
</resources>

第一种加载时会有部分图片下半部分模糊问题,但它可设置四角圆角大小和背景圈

第二种显示无问题,就是只能设置圆形和整体圆角,没单个设置的,可分情况使用

谢谢观看，拜~

勤奋的小狼
关注
Glide加载圆形图片和自定义圆角图片
02-24
本篇文章将深入探讨如何使用Glide实现圆形图片和自定义圆角图片的加载。 首先，我们要了解Glide的基本用法。Glide是Square公司开发的一款Android图片加载库，它支持多种图片格式，包括网络图片和本地资源。基本的...
gdi+ 裁剪圆形图片
ckkyjtqlt的专栏
02-04 1556
Image image(strPath); RECT pos = GetPos(); RECT padding = GetPadding(); HRGN rgn = CreateEllipticRgn(pos.left,pos.top,pos.right,pos.bottom); Region region(rgn); Graphics graph(hDC);
图片自定义圆角
c1171595540的博客
08-12 329
获得网络图片需要圆角展示时，需要根据图片的宽高来分别绘制四个角圆角弧度。 public class RoundImageView extends ImageView { float width,height; public RoundImageView(Context context) { this(context, null); } ...
矩形圆角绘制改进版（附源码）
weixin_34187822的博客
09-22 243
一、前言上一篇绘制矩形圆角的方式不够完善，感觉写的太过于复杂，将简单的问题复杂化了，本文对此进行了相应的改进，增强对各个圆角的半径的控制。绘制后的圆角效果图如下： 二、圆角半径设计 对于矩行而言，圆角分为左上角、右上角、左下角和右下角。每一个角都会存在相应的半径，用于控制每一个圆角的绘制。设计如下：  1     public struct ArcRadius  2     {  3  ...
自定义圆角图片控件（Xfermode方式）
weixin_30919571的博客
01-11 65
苹果都放弃自己的棱角了。。。 看惯了方方正正的图片，乍一看到圆角图片觉得挺漂亮的。可当满世界都是圆角图片的时候，我又开始怀念那些棱角了~之前仓促的写过一个，今天拿过来又修改了一下，现在贴在这里，以方便以后ctrl+c、ctrl+v~~~~~ 一、目标 自定义一个图片控件，有圆形和圆角两种选择。控件的行为和ImageView一致！ 二、思路 扩展ImageView控件，重写...
Android自定义圆形圆角图片示例
08-29
首先，我们来看如何创建一个简单的圆形图片。在Android中，我们可以使用`BitmapShader`类来实现这一效果。以下是一个简单的例子： ```java public static Bitmap getCircularBitmap(Bitmap bitmap) { if (bitmap =...
Android自定义圆形图片和圆角图片
10-11
要创建圆形图片，最常用的方法是使用`BitmapShader`和`Paint`类。`BitmapShader`可以将Bitmap应用于画笔的着色器，而`Paint`则用于绘制。以下是一个简单的示例： ```java public static Bitmap ...
RoundAngleImageview 自定义圆角图片
04-11
总的来说，`RoundAngleImageView`是一个用于自定义圆角图片显示的组件，它通过自定义View的方式解决了Android原生ImageView无法直接实现圆角的需求。理解和掌握自定义View以及相关的图形绘制原理，对于提升Android...
Glide加载圆形图片 自定义圆角 和对指定角加载圆角
02-26
接下来，我们探讨如何“自定义圆角图片”。与加载圆形图片类似，我们需要创建一个新的`BitmapTransformation`子类，如`RoundCornerTransform`。在这个类中，我们将通过设置`Paint`的`PathEffect`为`CornerPathEffect...
自定义圆角图片Demo
09-09
自定义圆角图片Demo,自定义圆角ImageView以及锯齿的处理
Unity用户自定义圆角头像
12-19
Unity用户自定义圆角头像
自定义view图片圆角
03-29
NULL 博文链接：https://mjbb.iteye.com/blog/1276922
GDI+ 如何将图片绘制成圆形的图片
热门推荐
极简的随笔
03-11 1万+
GDI+将图片绘制成圆形图片
QLabel设置边框为圆角
weixin_45551020的博客
11-14 1472
【代码】QLabel设置边框为圆角。
QLabel重绘实现圆角矩形图片/文本和图片同时显示
最新发布
wu10188的博客
02-08 1138
QLabel重绘，实现显示圆角图片和随尺寸变化而截断的文本，还支持图片和文本同时显示。
2021-11-08 pyqt5学习笔记——QLabel
qq_42046837的博客
11-08 1214
每天学习一个小例子---------原资源已经上传了 来源： https://pyqt.site , https://github.com/PyQt5 1图片加载显示 #!/usr/bin/env python # -*- coding: utf-8 -*- """ Created on 2018年1月20日 @author: Irony @site: https://pyqt.site , https://github.com/PyQt5 @email: 892768447@qq.com..
Android自定义圆角圆形图片
Water的博客
03-07 2276
转载请注明出处：http://blog.csdn.net/binbinqq86/article/details/79463977 说起Android里面的自定义圆角圆形图片，已经算是老生常谈的话题了，之前一直使用别人的，最近使用的时候发现自己居然没有一个这样属于自己的工具库，实在遗憾，毕竟还是自己的东西用起来最顺手，所以就打造了一个，先来看看效果： 怎么样，还不错吧~支持各种图案，边框，各...
自定义Android圆形、圆角ImageView解决方案
本文将详细介绍如何自定义Android控件实现圆形和圆角的ImageView，以便更好地满足这些需求。 首先，遇到的问题通常出现在需要将方形头像适应到背景图的圆形显示上。如果背景是简单的纯色，一个常见的解决方案是创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值