Android ImageView加载圆形图片且同时绘制圆形图片的外部边缘边线及边框-阿里云开发者社区

开发者社区> 开开心心过> 正文

Android ImageView加载圆形图片且同时绘制圆形图片的外部边缘边线及边框

简介:  Android ImageView加载圆形图片且同时绘制圆形图片的外部边缘边线及边框 在Android早期的开发中,如果涉及到圆形图片的处理,往往需要借助于第三方的实现,见附录文章1,2。
+关注继续查看


Android ImageView加载圆形图片且同时绘制圆形图片的外部边缘边线及边框


在Android早期的开发中,如果涉及到圆形图片的处理,往往需要借助于第三方的实现,见附录文章1,2。Android本身并未从SDK层面支持圆形图。但是在后来最新的Android SDK中,增加了对于圆形、圆角图的支持,引入了RoundedBitmapDrawable,RoundedBitmapDrawable的作用是将一个常规图片修剪成圆形或圆角图。RoundedBitmapDrawable的出现,从此在处理简单圆形、圆角图时候简单多了。
但是,对于复杂设计效果的实现,仅仅有一个RoundedBitmapDrawable是不够的,比如,有这样一种设计要求:把一个常规图片修剪成圆形,同时在圆形图边缘部分描出一定宽度的圆形边框,在圆形边框外在描绘出一圈边线,边线与边框之间还要求透明,这种需求,可能要重写ImageView来实现了。
把这个需求分解:
1,首先把常规图片处理成圆形图简单,直接RoundedBitmapDrawable完成。
2,圆形图外部边缘的圆形边框,则需要重写ImageView,在onDraw里面画圆,画一定宽度的圆,但是这一步在计算圆半径时候容易出问题,因为使用getWidth或getHeight这样的方法获得长度除以2算半径时候,整数除法在计算时候要取整,导致圆半径有一定偏差,进而导致画圆的半径不是刚好与圆形图的外部边缘紧密咬合在一起。故需要引入一个平衡因子消除误差。
3,画最外层的圆形边线不用考虑那么复杂,和最内层的圆形边框在半径上拉开一定间距即可。


处理常规图片为圆角的关键代码:

ImageView imageView= (ImageView) findViewById(R.id.imageView);

        RoundedBitmapDrawable circleDrawable = RoundedBitmapDrawableFactory.create(getResources(), BitmapFactory.decodeResource(getResources(), R.drawable.art));
        circleDrawable.getPaint().setAntiAlias(true);
        circleDrawable.setCircular(true);

        imageView.setImageDrawable(circleDrawable);


重写ImageView描绘内层的圆形边框以及最外层的圆形边线:

package cn.migu.musicplayer.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * Created by Phil on 2016/7/15.
 */
public class ImageViewWithStroke extends ImageView {

    //外圈白线和内圈黑线边框之间的间隔。
    private int gap = 25;

    //平衡在计算半径时候因为除以2导致半径计算的误差
    private int balance_factor = 2;

    public ImageViewWithStroke(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public ImageViewWithStroke(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ImageViewWithStroke(Context context) {
        super(context);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        drawInnerBlackCircle(canvas, 4);
        drawOutWhiteCircle(canvas, 1);
    }


    //画最外层的白色边线
    private void drawOutWhiteCircle(Canvas canvas, int strokeWidth) {
        Paint paint = new Paint();
        paint.setColor(Color.WHITE);
        paint.setStrokeWidth(strokeWidth);
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);

        int w = this.getPaddingLeft() + this.getPaddingRight();
        int x = getWidth() - w;
        int r = x / 2;

        canvas.drawCircle(getWidth() / 2, getHeight() / 2, r + strokeWidth + gap, paint);
    }

    //画最内层的黑色边框
    private void drawInnerBlackCircle(Canvas canvas, int strokeWidth) {
        Paint paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setStrokeWidth(strokeWidth);
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);

        int w = this.getPaddingLeft() + this.getPaddingRight();
        float x = getWidth() - w;
        float r = x / 2;

        //半径减去平衡因子是因为在取整时候四舍五入
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, (r - balance_factor) + strokeWidth, paint);
    }
}



需要处理和加载的目标图片art.jpg:



代码运行结果:


背景的绿色图是在ImageView的background加载一张Android自带的小机器人图。


附录:
1,《Android圆形头像图Circle ImageView》链接地址:http://blog.csdn.net/zhangphil/article/details/44960551 
2,《Android CustomShapeImageView对图片进行各种样式裁剪:圆形、星形、心形、花瓣形等》链接地址:http://blog.csdn.net/zhangphil/article/details/50119921

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
CircleImageView 圆形图片头像实现
package com.view.drop; import android.content.Context; import android.content.res.TypedArray; import android.
749 0
关于Android加载图片OOM的思考
大家都知道,使用Android加载图片时,一般来说加载几个图片都容易OOM,但是Android手机的相册似乎没有这个问题。 思索了很久没有找到办法,和一个哥们讨论次问题时他给出个解决办法: (下面的文字转自:http://blog.sina.com.cn/s/blog_7139b0e30100xklb.html,所以本博文属于转载) 写Android代码也有那么三四个月的时间了,也一直都是菜鸟,很多东西都只是拿来就用,也没有想太多的细节问题。
697 0
外部配置属性值是如何被绑定到XxxProperties类属性上的?--SpringBoot源码(五)
外部配置属性值是如何被绑定到XxxProperties类属性上的?--SpringBoot源码(五)
555 0
Android ImageView加载圆形图片且同时绘制圆形图片的外部边缘边线及边框
 Android ImageView加载圆形图片且同时绘制圆形图片的外部边缘边线及边框 在Android早期的开发中,如果涉及到圆形图片的处理,往往需要借助于第三方的实现,见附录文章1,2。
995 0
682
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载