专栏首页everhad圆角矩形图片

圆角矩形图片

title: 2016-5-2

前言

从网络加载的图片是矩形的,而且大小不限,为了让图片显示为四个角显示为1/4圆这样的圆角矩形,有多种方法。

  • 通过UI资源实现 可以让美术切一个九宫格四角遮盖,中间透明的图片,使用一个View覆盖在要加载显示的ImageView之上。
  • 通过代码 思路是对加载后的Bitmap进行裁剪。因为项目中使用的是Android-Universal-Image-Loader库,本身具有对图片的圆角显示功能,下面就看下里面的实现。

RoundedBitmapDisplayer

这个类实现了对Bitmap的四个角的圆角化处理。 它实现了接口BitmapDisplayer,在调用方法displayImage(String uri, ImageView imageView, DisplayImageOptions options)时,我们指定的DisplayImageOptions对象可以通过DisplayImageOptions.displayer(BitmapDisplayer displayer)方法来为图片的加载显示设置一个BitmapDisplayer——它用来改变要显示的图片或为图片显示添加动画。

RoundedBitmapDisplayer代码比较少,直接列出:

public class RoundedBitmapDisplayer implements BitmapDisplayer {

    protected final int cornerRadius;
    protected final int margin;

    public RoundedBitmapDisplayer(int cornerRadiusPixels) {
        this(cornerRadiusPixels, 0);
    }

    public RoundedBitmapDisplayer(int cornerRadiusPixels, int marginPixels) {
        this.cornerRadius = cornerRadiusPixels;
        this.margin = marginPixels;
    }

    @Override
    public void display(Bitmap bitmap, ImageAware imageAware, LoadedFrom loadedFrom) {
        if (!(imageAware instanceof ImageViewAware)) {
            throw new IllegalArgumentException("ImageAware should wrap ImageView. ImageViewAware is expected.");
        }

        imageAware.setImageDrawable(new RoundedDrawable(bitmap, cornerRadius, margin));
    }

    public static class RoundedDrawable extends Drawable {

        protected final float cornerRadius;
        protected final int margin;

        protected final RectF mRect = new RectF(),
                mBitmapRect;
        protected final BitmapShader bitmapShader;
        protected final Paint paint;

        public RoundedDrawable(Bitmap bitmap, int cornerRadius, int margin) {
            this.cornerRadius = cornerRadius;
            this.margin = margin;

            bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            mBitmapRect = new RectF (margin, margin, bitmap.getWidth() - margin, bitmap.getHeight() - margin);
            
            paint = new Paint();
            paint.setAntiAlias(true);
            paint.setShader(bitmapShader);
            paint.setFilterBitmap(true);
            paint.setDither(true);
        }

        @Override
        protected void onBoundsChange(Rect bounds) {
            super.onBoundsChange(bounds);
            mRect.set(margin, margin, bounds.width() - margin, bounds.height() - margin);
            
            // Resize the original bitmap to fit the new bound
            Matrix shaderMatrix = new Matrix();
            shaderMatrix.setRectToRect(mBitmapRect, mRect, Matrix.ScaleToFit.FILL);
            bitmapShader.setLocalMatrix(shaderMatrix);
            
        }

        @Override
        public void draw(Canvas canvas) {
            canvas.drawRoundRect(mRect, cornerRadius, cornerRadius, paint);
        }

        @Override
        public int getOpacity() {
            return PixelFormat.TRANSLUCENT;
        }

        @Override
        public void setAlpha(int alpha) {
            paint.setAlpha(alpha);
        }

        @Override
        public void setColorFilter(ColorFilter cf) {
            paint.setColorFilter(cf);
        }
    }
}

可以看到,RoundedBitmapDisplayerb本身只是封装了圆角矩形的圆角半径和外边距属性。它使用基于原图片的Bitmap生成的Drawable 的子类来完成圆角显示的功能。

RoundedDrawable

作为Drawable的子类,首先关心下它的draw方法: canvas.drawRoundRect(mRect, cornerRadius, cornerRadius, paint); mRect是最终整个Drawable的显示区域,在onBoundsChange中对它进行了设置: mRect.set(margin, margin, bounds.width() - margin, bounds.height() - margin);

Canvas.drawRoundRect方法用来为一个矩形区域画上指定半径的四个角:

/**
 * Draw the specified round-rect using the specified paint. The roundrect
 * will be filled or framed based on the Style in the paint.
 *
 * @param rect  The rectangular bounds of the roundRect to be drawn
 * @param rx    The x-radius of the oval used to round the corners
 * @param ry    The y-radius of the oval used to round the corners
 * @param paint The paint used to draw the roundRect
 */
public void drawRoundRect(RectF rect, float rx, float ry, Paint paint)

mBitmapRect存放原始图片的显示区域,在onBoundsChange中需要使用它来完成图片的缩放,填充最终的显示区域。

使用中的一些问题

如果布局中,ImageView的宽高指定为wrap_content那么在显示的时候可能导致图片的显示区域判定错误。比如,宽度设置为match_parent,高度为wrap_content,scaleType为centerCrop时,图片最终会显示为一条横线。 在调用displayImage时可以指定ImageLoadingListener,重载方法 void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) 在里面根据显示逻辑获得并指定对应ImageView的宽高,之后将loadedImage设置给ImageView即可。

本文使用小书匠编写。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 札记:Property动画

    简介 Android 3.0 (API level 11)引入了属性动画系统,它是一个完善的框架,可以用来对几乎任何对象进行动画。只需要指定要动画的对象属性,动...

    用户1172465
  • 札记:翻译-使用Scene和Transition实现【场景切换】动画效果

    简述:transitions framework 下面翻译transition为“过渡”,强调动画过程的含义,不过更多时候使用transition单词本身。 ...

    用户1172465
  • 转载:Package by feature, not layer

    The first question in building an application is "How do I divide it up into pac...

    用户1172465
  • 并行查询缓慢的问题分析(r5笔记第86天)

    今天,数据迁移组的同事问我一个问题,说他们现在需要在迁移库中查看一些数据,但是查看的时候速度很慢,想让我们看看是不是数据库端出了什么问题。因为数据迁移的一些准备...

    jeanron100
  • c# 自定义多选下拉列表2

    冰封一夏
  • 清华段路明组自然子刊发文,揭深度神经网络和量子多体问题关联

    转载自 清华大学交叉信息研究院官网 清华大学量子信息中心段路明教授和其博士研究生郜勋发现深度神经网络和量子多体问题存在紧密关联,证明利用深度神经网络模型可以有效...

    量子位
  • WordPress主题中加载jQuery的最佳方法

    一般来说,在html页面底部 (也就是</body>之前)引入JavaScript,如jQuery 和 jQuery插件是个不错的做法。原因很简单,HTTP /...

    丘壑
  • 如何开始商业分析生涯

    文 | KUNAL JAIN 翻译 | 沙拉丁 译文版权归翻译者和CDA数据分析师共同所有,转载请留言申请授权 每当我参加数据分析相关论坛或者在与学生交流的...

    CDA数据分析师
  • PAT 1041 Be Unique (20分)利用数组找出只出现一次的数字

    Being unique is so important to people on Mars that even their lottery is design...

    vivi
  • 用区块链解决桃花屯的粮食问题No.49

    我是小蕉。 从前的从前啊,有一个桃花屯,屯里住着一群跟小布小青这样的种田青年。屯里出现了这么一件事,每年的收成都是几千斤几千斤这样,每次出去卖一趟粮食,我了个乖...

    大蕉

扫码关注云+社区

领取腾讯云代金券