自定义圆形图片

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

那么这里学习一下简单的制作圆形图片，主要运用 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的设置图片方法：

ImageView imageView = new ImageView(this);

imageView.setImageDrawable();  // 参数为一个Drawable 对象
imageView.setImageResource();  // 参数为一个资源文件
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、重写构造方法 

public CircleImageView(Bitmap bitmap) {
        this.bitmap = bitmap;
        BitmapShader bitmapShader =
                new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

        paint = new Paint();
        //抗锯齿 ，使得边缘光滑
        paint.setAntiAlias(true);
        //得到bitmap位图的宽高
        width = bitmap.getWidth();
        height = bitmap.getHeight();
       //获取bitmap位图的宽高中的最小值，作为圆形图片的半径
        radiu =Math.min(bitmap.getWidth(), bitmap.getHeight())/2;

        // 设置shader
        paint.setShader(bitmapShader);
    }

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;
    }

完整代码：

package com.xqx.CircleImageView;

import android.graphics.*;
import android.graphics.drawable.Drawable;


public class CircleImageView extends Drawable {

    private Paint paint;
    private Bitmap bitmap;
    private int width;
    private int height;
    private int radiu;

    public CircleImageView(Bitmap bitmap) {
        this.bitmap = bitmap;
        BitmapShader bitmapShader =
                new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

        paint = new Paint();
        //抗锯齿 ，使得边缘光滑
        paint.setAntiAlias(true);
        //获取bitmap位图的宽高中的最小值，作为圆形图片的
        width = bitmap.getWidth();
        height = bitmap.getHeight();
        radiu =Math.min(bitmap.getWidth(), bitmap.getHeight())/2;

        // 设置shader
        paint.setShader(bitmapShader);
    }

    @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;
    }
}

4、运用

package com.xqx.CircleImageView;

import android.app.Activity;
import android.graphics.*;
import android.os.Bundle;
import android.widget.ImageView;

public class MainActivity extends Activity {
    private ImageView imageView;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        imageView = (ImageView) findViewById(R.id.img);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.icon);
16         imageView.setImageDrawable(new CircleImageView(bitmap));
    }
}

效果图：

 

       圆形图片                    原图               

 

                

 

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

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

学习来源：CirleDrawImage圆角图片

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

总结此方法的缺点：

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

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

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

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

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