自定义圆形图片

圆形图片相必是项目开发中也是不少用的一个知识点吧。

那么这里学习一下简单的制作圆形图片,主要运用 BitmapShader 类的知识来实现

一、首先,了解一下 BitmapShader 类

BitmapShader是Shader的子类,可以通过Paint.setShader(Shader shader)进行设置

看一下BitmapShader 的构造方法

BitmapShader bitmapShader = new BitmapShader(bitmap,TileMode, TileMode);

调用这个方法来产生一个画有一个位图的渲染器(Shader)

看参数

bitmap 即在渲染器内的位图

TileMode ,分为三类

1、CLAMP  :如果渲染器超出原始边界范围,会复制范围内边缘染色,即拉伸

2、REPEAT :横向和纵向的重复渲染器图片,平铺,即重复

3、MIRROR :横向和纵向的重复渲染器图片,这个和REPEAT重复方式不一样,他是以镜像方式平铺,类似于湖上的物体和湖中的倒影

使用这个类的目的,就是把它的对象设置给Paint ,而Paint会根据TileMode进行绘制位图

二、实现圆形图片步骤

首先,ImageView和ImageButton需要图片,

有两种生成圆形图片的方法

1、自定义View继承ImageView、ImageButton

2、imageView.setXXX();

看下ImageView的设置图片方法:

1 ImageView imageView = new ImageView(this);
2 
3 imageView.setImageDrawable();  // 参数为一个Drawable 对象
4 imageView.setImageResource();  // 参数为一个资源文件
5 imageView.setImageBitmap();    // 参数为一个Bitmap 对象

那么我们这里实现方法为 自定义继承Drawable类 ,运用 imageView.setImageDrawable(); 设置圆形图片

实现步骤:

1、新建一个类继承Drawable

添加成员变量

private Paint paint;     //自定义必备画笔类
private Bitmap bitmap;   //将Bitmap 转为Drawable ,
private int width;       // 圆形图片的宽度
private int height;      // 圆形图片的高度
private int radiu;       // 圆形图片的半径

2、重写构造方法

 1 public CircleImageView(Bitmap bitmap) {
 2         this.bitmap = bitmap;
 3         BitmapShader bitmapShader =
 4                 new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
 5 
 6         paint = new Paint();
 7         //抗锯齿 ,使得边缘光滑
 8         paint.setAntiAlias(true);
 9         //得到bitmap位图的宽高
10         width = bitmap.getWidth();
11         height = bitmap.getHeight();
12        //获取bitmap位图的宽高中的最小值,作为圆形图片的半径
13         radiu =Math.min(bitmap.getWidth(), bitmap.getHeight())/2;
14 
15         // 设置shader
16         paint.setShader(bitmapShader);
17     }

3、重写其他必要方法

@Override
    public void draw(Canvas canvas) {
        // 以bitmap中心点为圆心,长宽最小边为半径画圆,将Bitmap填充到圆中
        canvas.drawCircle(width/2,height/2,radiu,paint);
    }

    //设置透明度
    @Override
    public void setAlpha(int i) {
        paint.setAlpha(i);
    }

    //设置颜色
    @Override
    public void setColorFilter(ColorFilter colorFilter) {
        paint.setColorFilter(colorFilter);
    }

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


    @Override
    public int getIntrinsicHeight() {
        return width;
    }

    @Override
    public int getIntrinsicWidth() {
        return width;
    }

完整代码:

 1 package com.xqx.CircleImageView;
 2 
 3 import android.graphics.*;
 4 import android.graphics.drawable.Drawable;
 5 
 6 
 7 public class CircleImageView extends Drawable {
 8 
 9     private Paint paint;
10     private Bitmap bitmap;
11     private int width;
12     private int height;
13     private int radiu;
14 
15     public CircleImageView(Bitmap bitmap) {
16         this.bitmap = bitmap;
17         BitmapShader bitmapShader =
18                 new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
19 
20         paint = new Paint();
21         //抗锯齿 ,使得边缘光滑
22         paint.setAntiAlias(true);
23         //获取bitmap位图的宽高中的最小值,作为圆形图片的
24         width = bitmap.getWidth();
25         height = bitmap.getHeight();
26         radiu =Math.min(bitmap.getWidth(), bitmap.getHeight())/2;
27 
28         // 设置shader
29         paint.setShader(bitmapShader);
30     }
31 
32     @Override
33     public void draw(Canvas canvas) {
34         // 以bitmap中心点为圆心,长宽最小边为半径画圆,将Bitmap填充到圆中
35         canvas.drawCircle(width/2,height/2,radiu,paint);
36     }
37 
38     //设置透明度
39     @Override
40     public void setAlpha(int i) {
41         paint.setAlpha(i);
42     }
43 
44     //设置颜色
45     @Override
46     public void setColorFilter(ColorFilter colorFilter) {
47         paint.setColorFilter(colorFilter);
48     }
49 
50     @Override
51     public int getOpacity() {
52         return PixelFormat.TRANSLUCENT;
53     }
54 
55 
56     @Override
57     public int getIntrinsicHeight() {
58         return width;
59     }
60 
61     @Override
62     public int getIntrinsicWidth() {
63         return width;
64     }
65 }

4、运用

 1 package com.xqx.CircleImageView;
 2 
 3 import android.app.Activity;
 4 import android.graphics.*;
 5 import android.os.Bundle;
 6 import android.widget.ImageView;
 7 
 8 public class MainActivity extends Activity {
 9     private ImageView imageView;
10     @Override
11     public void onCreate(Bundle savedInstanceState) {
12         super.onCreate(savedInstanceState);
13         setContentView(R.layout.main);
14         imageView = (ImageView) findViewById(R.id.img);
15         Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.icon);
16         imageView.setImageDrawable(new CircleImageView(bitmap));
17     }
18 }

效果图:

       圆形图片                    原图               

可以看出,生成的圆形图片坐标圆点为原图的中心点,而直径为原图长宽中较短的那一个的边的长度

---------------------------------------------------------------------------------------------

学习来源:CirleDrawImage圆角图片

在该基础上进行部分修改,思路或代码若有问题,欢迎指出。

总结此方法的缺点:

1、该方法无法缩放原图,若原图宽高不一致,则显示效果不佳,无法正常显示出较长边的部分内容

2、圆形图片的效果有一定的损耗,效果不佳

适用于对图片精美度要求不高的需求使用

自定义View继承ImageView 则能更好的解决这些问题,待我有空再总结。。

第三方类库学习笔记:CustomShapeImageView 自定义形状的ImageView

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

Palette状态栏颜色提取,写的不错就分享了

Palette 说Palette之前先说下前面提到的Pager。ViewPager是什么大家应该都是知道的了,一般ViewPager、xxxTabStrip...

2306
来自专栏lzj_learn_note

Android TextView实现查看全部和收起功能

在工作遇到上图所示的一个小需求,将“查看全部”的提示连在原文的后面,使用一个textview显示。实现该功能大致步骤:

8907
来自专栏项勇

笔记 77 | Launcher表盘时间部件工具类(时,分,秒)

但是,发现这两种方法里都没有秒针的动画,方法一无法实现秒针,方法二由于是封装好的类,查看和修改起来不方便。

781
来自专栏Android知识点总结

D3-Android 自定义控件绘图之柱状图

1992
来自专栏Felix的技术分享

Android ListView头部视差控件

1433
来自专栏开发之途

Android 仿360悬浮球与加速球

4528
来自专栏lzj_learn_note

Android红包雨动画

上面就红包实体类的源码,重点就是在创建红包实体的时候,初始化红包相关的值,如生成红包图片,图片的宽高,红包初始位置,下落速度等。比较简单。

5664
来自专栏Jack的Android之旅

淘宝开源库VLayout实践

最近淘宝出了vlayout,刚开始看淘宝的文档的时候还是有点懵,后来自己也总结规划了一下,写了一个比较好看的demo,顺便在这里总结一下。

2052
来自专栏Android相关

Android遇到的一些小问题

UE希望调整文本行间距,原来只记得有lineSpacing的属性,而且只能调整行间距的倍数。

842
来自专栏项勇

笔记20 | 学习整理开源APP(BaseAnimation)程序源码“中的通讯录效果(一)

1715

扫码关注云+社区

领取腾讯云代金券