这才是真正的万能圆角ImageView

最新推荐文章于 2024-08-06 21:52:27 发布
最新推荐文章于 2024-08-06 21:52:27 发布
阅读量5.6k 收藏 8
点赞数
分类专栏： android进阶 文章标签： imageview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sw950729/article/details/78100647
版权

本文已授权我的公众号：我就是马云飞 独家发布

不知道有没有人记得我去年写过一个圆角的imageview。不知道的可以先去看看：万能圆角imagview，本文是基于上一篇的内容进行添加以及修改的。不然直接看这篇可能会有点懵。

前言

我为什么要二次封装？最近公司有个需求是这样的。
这里写图片描述

同事说，不知道怎么搞，于是乎，我把之前写的imageview给过去了。他来了句，你这圆角和fitxy同时设置会有问题啊，我反手就是一个大嘴巴子。我的代码怎么会有问题。于是，拿来一瞧，的确有点问题。So，我决定对这个imageview进行二次的封装。(当然了，这个问题的最后处理是后台直接给一个圆角的imageview)。

如何实现

细想一下，上文我们是怎么做的，我们是把绘制的区域，从（0，0）移动到我们想要的地方，说个粗暴点的话，我们强制的把这个imagview的scaletype的属性设置了centercrop。那么这次我们就要将它的scaletype设置成可调的属性。

实现逻辑

我前面也说过了，上次我们是根据imageview的源码来修改他的编辑区域的，这次，我们照常打开源码，找到园中对scaletype的处理逻辑，代码如下：


    private void configureBounds() {
        if (mDrawable == null || !mHaveFrame) {
            return;
        }

        final int dwidth = mDrawableWidth;
        final int dheight = mDrawableHeight;

        final int vwidth = getWidth() - mPaddingLeft - mPaddingRight;
        final int vheight = getHeight() - mPaddingTop - mPaddingBottom;

        final boolean fits = (dwidth < 0 || vwidth == dwidth)
                && (dheight < 0 || vheight == dheight);

        if (dwidth <= 0 || dheight <= 0 || ScaleType.FIT_XY == mScaleType) {
            /* If the drawable has no intrinsic size, or we're told to
                scaletofit, then we just fill our entire view.
            */
            mDrawable.setBounds(0, 0, vwidth, vheight);
            mDrawMatrix = null;
        } else {
            // We need to do the scaling ourself, so have the drawable
            // use its native size.
            mDrawable.setBounds(0, 0, dwidth, dheight);

            if (ScaleType.MATRIX == mScaleType) {
                // Use the specified matrix as-is.
                if (mMatrix.isIdentity()) {
                    mDrawMatrix = null;
                } else {
                    mDrawMatrix = mMatrix;
                }
            } else if (fits) {
                // The bitmap fits exactly, no transform needed.
                mDrawMatrix = null;
            } else if (ScaleType.CENTER == mScaleType) {
                // Center bitmap in view, no scaling.
                mDrawMatrix = mMatrix;
                mDrawMatrix.setTranslate(Math.round((vwidth - dwidth) * 0.5f),
                                         Math.round((vheight - dheight) * 0.5f));
            } else if (ScaleType.CENTER_CROP == mScaleType) {
                mDrawMatrix = mMatrix;

                float scale;
                float dx = 0, dy = 0;

                if (dwidth * vheight > vwidth * dheight) {
                    scale = (float) vheight / (float) dheight;
                    dx = (vwidth - dwidth * scale) * 0.5f;
                } else {
                    scale = (float) vwidth / (float) dwidth;
                    dy = (vheight - dheight * scale) * 0.5f;
                }

                mDrawMatrix.setScale(scale, scale);
                mDrawMatrix.postTranslate(Math.round(dx), Math.round(dy));
            } else if (ScaleType.CENTER_INSIDE == mScaleType) {
                mDrawMatrix = mMatrix;
                float scale;
                float dx;
                float dy;

                if (dwidth <= vwidth && dheight <= vheight) {
                    scale = 1.0f;
                } else {
                    scale = Math.min((float) vwidth / (float) dwidth,
                            (float) vheight / (float) dheight);
                }

                dx = Math.round((vwidth - dwidth * scale) * 0.5f);
                dy = Math.round((vheight - dheight * scale) * 0.5f);

                mDrawMatrix.setScale(scale, scale);
                mDrawMatrix.postTranslate(dx, dy);
            } else {
                // Generate the required transform.
                mTempSrc.set(0, 0, dwidth, dheight);
                mTempDst.set(0, 0, vwidth, vheight);

                mDrawMatrix = mMatrix;
                mDrawMatrix.setRectToRect(mTempSrc, mTempDst, scaleTypeToScaleToFit(mScaleType));
            }
        }
    }

我们找到上次对其实位置修改的地方。跟着源码一样改成一样。改完之后代码如下：


        if (drawablewidth <= 0 || drawableheight <= 0) {
            drawable.setBounds(0, 0, viewwidth, viewheight);
            matrix = null;
        } else {
            drawable.setBounds(0, 0, drawablewidth, drawableheight);
            if (ScaleType.MATRIX == getScaleType()) {
                if (matrix.isIdentity()) {
                    matrix = null;
                }
            } else if (fits) {
                matrix = null;
            } else if (ScaleType.CENTER == getScaleType()) {
                matrix.setTranslate(Math.round((viewwidth - drawablewidth) * 0.5f),
                        Math.round((viewheight - drawableheight) * 0.5f));
            } else if (ScaleType.CENTER_CROP == getScaleType()) {
                if (drawablewidth * viewheight > viewwidth * drawableheight) {
                    dx = (viewwidth - drawablewidth * scale) * 0.5f;
                } else {
                    dy = (viewheight - drawableheight * scale) * 0.5f;
                }
                matrix.setScale(scale, scale);
                matrix.postTranslate((int) (dx + 0.5f), (int) (dy + 0.5f));
            } else if (ScaleType.CENTER_INSIDE == getScaleType()) {

                if (drawablewidth <= viewwidth && drawableheight <= viewheight) {
                    scale = 1.0f;
                } else {
                    scale = Math.min((float) viewwidth / (float) drawablewidth,
                            (float) viewheight / (float) drawableheight);
                }
                dx = Math.round((viewwidth - drawablewidth * scale) * 0.5f);
                dy = Math.round((viewheight - drawableheight * scale) * 0.5f);
                matrix.setScale(scale, scale);
                matrix.postTranslate(dx, dy);
            } else {
                if (drawablewidth * viewheight > viewwidth * drawableheight) {
                    dx = (viewwidth - drawablewidth * scale) * 0.5f;
                } else {
                    dy = (viewheight - drawableheight * scale) * 0.5f;
                }
                matrix.setScale(scale, scale);
                matrix.postTranslate((int) (dx + 0.5f), (int) (dy + 0.5f));
            }
        }
        if (ScaleType.FIT_XY == getScaleType() && matrix != null) {
            scale1 = viewwidth * 1.0f / drawablewidth;
            scale2 = viewheight * 1.0f / drawableheight;
            matrix.setScale(scale1, scale2);
        }
        bitmapShader.setLocalMatrix(matrix);
        paint.setShader(bitmapShader);

我们可以发现其实和源码对比下来，改动还是有的。为什么呢？我们仔细看下这段代码：

     if (dwidth <= 0 || dheight <= 0 || ScaleType.FIT_XY == mScaleType) {
            /* If the drawable has no intrinsic size, or we're told to
                scaletofit, then we just fill our entire view.
            */
            mDrawable.setBounds(0, 0, vwidth, vheight);
            mDrawMatrix = null;
        }

源码里面只对drawable进行了处理。但我们可以发现后面的判断每次都会调用matrix.setScale这个方法。但在当scaletype为fitxy时，没有进行处理。我们也知道，我们看的是源码，他肯定偷偷的在某个地方进行了处理。那么我们要处理怎么办呢？仔细看代码：

        if (ScaleType.FIT_XY == getScaleType() && matrix != null) {
            scale1 = viewwidth * 1.0f / drawablewidth;
            scale2 = viewheight * 1.0f / drawableheight;
            matrix.setScale(scale1, scale2);
    }

fitxy我们都知道是充满布局，然后在细看这块代码，你是不是懂了呢？布局的宽高除以图片的宽高。然后设置它的比例。

加上边框

为了更好的封装，我选择加上边框和边框颜色的自定义属性。那么接下来就是直接上代码了。
我们需要再定义一个画笔：

        boder_paint.setAntiAlias(true);
        boder_paint.setStyle(Paint.Style.STROKE);
        boder_paint.setColor(border_color);
        boder_paint.setStrokeWidth(border_width);

接下来我们就是直接画上去了。当然了，我们这边默认是不设置，也就是borderwidth为0，所以我们要加一个判断：

  if (type == TYPE_ROUND) {
            canvas.drawRoundRect(rectF, borderRadius, borderRadius,paint);
            if (border_width > 0) {
                canvas.drawRoundRect(rectF, borderRadius, borderRadius, boder_paint);
            }
        } else if (type == TYPE_CIRCLE) {
            canvas.drawCircle(radius, radius, radius, paint);
            if (border_width > 0) {
                canvas.drawCircle(radius, radius, radius, boder_paint);
            }
        } else {
            getDrawable().draw(canvas);
        }

这里写图片描述
我们一编译，一运行，效果炸了。你问我为什么？我们先来看个效果在说把。
这里写图片描述
我们发现我们修改的fitxy属性已经生效了。但是，为什么加了边框是这样呢？
仔细想想。我们画圆角和圆的时候是不是忘记去掉了边框的宽度呢？那么我们既然找到了原因就可以找到解决方法了。那我们就直接去掉边框的高度，注意！！圆角和圆的都要处理。

   canvas.drawCircle(radius, radius, radius, paint);
            if (border_width > 0) {
                canvas.drawCircle(radius, radius, radius - border_width / 2, boder_paint);
            }

    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (type == TYPE_ROUND) {
            rectF = new RectF(border_width/2,border_width/2, getWidth()- border_width / 2, getHeight()- border_width / 2);
        }
    }

我们再来看下效果：
这里写图片描述
搞定。完美~

使用

在gradle加上如下代码：

compile 'com.angel:SWImageView:1.0.0'

关于自定义属性：

<declare-styleable name="SWImageView">
        <attr name="borderRadius" format="dimension"/>
        <attr name="type">
            <enum name="normal" value="-1"/>
            <enum name="circle" value="0"/>
            <enum name="round" value="1"/>
        </attr>
        <attr name="borderWidth" format="dimension" />
        <attr name="borderColor" format="integer" />
    </declare-styleable>

我觉得命名很清晰明了。我就不介绍了。
项目我已上传到github：https://github.com/sw950729/SWImageView 喜欢的朋友随手点了star。谢谢。

我就是马云飞
关注
专栏目录
自定义ImageView，实现指定任意角为圆角
01-30
自定义ImageView，实现指定任意角为圆角，可以用Glide实现，上面两个为圆角，下面两个为直角
Android 自定义ImageView实现圆角
liuqinhou的博客
07-09 4634
自定义圆角imageview
android、鸿蒙开发--第四章--＞使用图片控件：“ImageView”
最新发布
qq_38885112的博客
08-06 389
使用图片控件：“ImageView”
Android圆角ImageView的几种实现方式（包含四个角的分别设置）
chailongger的博客
05-18 1万+
在实际的开发中，我们经常会遇到需要圆角ImageView的情况，但是这种ImageView官方是没有提供的，所以需要我们去自己重写ImageView来达到圆角的效果，但是实现这种圆角效果其实有几种不同的实现方式，所以这一篇就对不同的实现方式进行讲解，并简单分析。 一.BitmapShader方式 首先简单了解下BitmapShader，BitmapShader是Shader的子类，Shader在三维软件中我们称之为着色器，所以通俗的理解，Shader的作用是给图像着色或者上色，BitmapShader
Android ImageView 设置圆角及外边框样式
William的博客
09-29 7742
Android ImageView 设置圆角及外边框样式
Android ImageView 圆角实现
Misdirection_XG的博客
07-09 6717
Android开发过程中，ImageView是必不可少的几种控件之一，通常为了美观，图标等内容会设置为圆角，以下简单总结了几种设置圆角的方法。RoundImageView为第三方库，在build.gradle(:app)中使用以下语句导入： 该控件使用起来也非常方便，圆角设置为10dp示例如下： 效果如下： 2. CardView CardView为Android系统自带控件，使用CardView包裹ImageView也可以实现圆角效果，需要注意的是，CardView有可能会影响到控件层级，可以通过设置避
Android自定义圆角ImageView
09-02
在Android开发中，有时我们需要对默认的ImageView进行自定义，以实现特定的视觉效果，比如创建带有圆角的图片展示。圆角ImageView是常见的需求，它可以使图片的四个角呈现圆形，提供更好的UI设计感。本篇文章将详细...
Android自定义圆角ImageView控件
08-30
Android自定义圆角ImageView控件 Android自定义圆角ImageView控件是Android开发中的一种常见控件，用于实现图片的圆角效果。这种控件可以应用于各种场景，例如头像、图片展示等。下面将详细介绍Android自定义圆角...
Android中通过反射实现圆角ImageView代码实例
09-03
总结起来，这段代码通过反射机制访问了系统内部的BitmapDrawable类，修改了它的Paint属性，使得ImageView在绘制时能显示圆角效果。这种做法虽然灵活，但也存在性能上的开销，因为它涉及到运行时的类查找和成员访问。...
Android自定义带圆角的ImageView
08-25
Android自定义带圆角的ImageView Android自定义带圆角的ImageView是Android开发中一个常见的需求，特别是在展示头像、Logo、图片等元素时，带圆角的ImageView可以对视觉效果产生积极的影响。本文将详细介绍Android...
Android自定义控件之圆形、圆角ImageView
08-31
Android 自定义控件之圆形、圆角 ImageView Android 自定义控件之圆形、圆角 ImageView 是 Android 开发中常见的自定义控件之一。圆形、圆角 ImageView 可以用来展示圆形或圆角的图片，例如用户头像、Logo 等。下面...
Android 自定义imageview实现图片圆角
10-22
Android 自定义imageview实现图片圆角，圆形图片，椭圆形图片，不需要添加依赖，简洁实现
android ImageView动态设置尺寸、圆角(绝对好用)
01-02
android ImageView网络图片加载、动态设置尺寸、圆角(绝对好用)
android开发万能圆角ImageView
一个学渣走向android之路
07-26 8730
转载请注明出处：http://blog.csdn.net/sw950729/article/details/52037798 本文出自：马云飞的博客 最近一两个月没事做，然后就开始封装一些东西，昨天上司让我帮他做的圆角图片。思路自然是和网上的demo不一样的。 网上demo的效果： 差不多应该是这样的，但是容易出一些问题，比如你的图片本身就是个圆角？又或者图片太大，你想缩小显示，但出现显
给ImageView做圆角处理
永远的魔术1号
08-23 2745
Android 圆角ImageView
Android中实现ImageView圆角化的几种 方式
热门推荐
AndyYuan317的博客
08-07 1万+
开发中我们经常在显示图片相关需求的时候需要加载圆角图片，下面几种方式来实现图片的圆角化。 1：第一种方式是本人比较推荐的，直接在需要加载的图片外部嵌套一层CardView控件来实现图片 的圆角化，因为写起来简单，而且在项目中可以使用第三方开源库如Glide,ImageLoader等来加载动态图之类的 不会出现什么问题，如果使用第3种方式来实现的话就很容易出问题。 <android.support.v7.widget.CardView android:id="@+id/img_item
Android imageview设置圆角
weixin_43117800的博客
07-16 1万+
顶部左右圆角 四角都圆角 1：写一个自定义图片控件直接引用即可 /** * date:2020/7/16 * author: wsm(Administrator) * function: */ public class RadiuImageView extends AppCompatImageView { private float width, height; private int defaultRadius = 0; private int radius;
Android实现圆角ImageView
moonshine99的专栏
10-14 922
Android实现圆角ImageView code ： https://github.com/HungryGoogle/LeeCustomView 效果图如下： 实现步骤： 1、新增RoundAngleImageView文件，实现自定义view。       原理：1、重新绘制，采用Mode.DST_OUT去掉重叠部分的原理，先制作重贴部分，删除重叠部分即可
android圆角ImageView的几种实现方式
Jason_Lee155的博客
07-03 5431
前言 好长一段时间没写博客，继续吧。今天突然想起金三银四的时候，面试遇到的一个问题：如何实现圆角imageView。所在公司只用了其中一种方式，今天总结一下： 第一种：Glide加载图片自带api 如果使用Glide加载图片，那么，这个库提供了自己自带的圆角方式：bitmapTransform //加载原始图片和其他形状的图片形状作为对比。 Glide.with(this).load(imgUrl).centerCrop().into(image1); //标准圆形图片。 Glide.with
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值