Android中圆形图的几种实现方式

在Android开发中,圆形图片是很常见的,例如淘宝的宝贝,QQ的联系人头像等都是圆形的图片,

但是Android原生的ImageView又不能显示圆形的图片,这就需要我们自己去实现一个圆形图了

一、自定义View实现圆形图

我们可以去改造Android系统自带的ImageView来让它显示圆形图片,具体思路是利用画笔的层叠属性,在图片的底部绘制一个圆形,然后显示上下两层的交集部分,就可以做出一个圆形的ImageView了

1.1继承ImageView

[java]  view plain  copy

 

1. import android.content.Context;  
2. import android.graphics.Bitmap;  
3. import android.graphics.Canvas;  
4. import android.graphics.Paint;  
5. import android.graphics.PorterDuff;  
6. import android.graphics.PorterDuffXfermode;  
7. import android.graphics.Rect;  
8. import android.util.AttributeSet;  
9. import android.widget.ImageView;  
10.   
11. /** 
12.  * Created by ChenFengYao on 16/3/15. 
13.  */  
14. public class RoundImageView extends ImageView {  
15.     private Paint paint;  
16.   
17.     public RoundImageView(Context context) {  
18.         super(context);  
19.         paint  = new Paint();//初始化画笔对象  
20.     }  
21.   
22.     public RoundImageView(Context context, AttributeSet attrs) {  
23.         super(context, attrs);  
24.         paint  = new Paint();//初始化画笔对象  
25.     }  
26.   
27.     public RoundImageView(Context context, AttributeSet attrs, int defStyleAttr) {  
28.         super(context, attrs, defStyleAttr);  
29.         paint  = new Paint();//初始化画笔对象  
30.     }  
31. }  

继承ImageView复写其中的构造方法,并在构造方法里对画笔对象进行初始化

1.2复写onDraw方法

[java]  view plain  copy

 

1. @Override  
2.    protected void onDraw(Canvas canvas) {  
3.        Drawable drawable = getDrawable();  
4.        if (null != drawable) {  
5.            Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();  
6.            //核心代码  
7.            Bitmap b = getCircleBitmap(bitmap);  
8.            paint.reset();  
9.            canvas.drawBitmap(b,0,0,paint);  
10.        } else {  
11.            super.onDraw(canvas);  
12.        }  
13.    }  

onDraw方法即图片绘制的时候系统所调用的方法,在该方法内部首先去判断是否设置了图片的src,如果能拿到改View设置的图片,则将它转换成圆形图片,如果没有设置的话,则不做任何操作,直接调用父类的onDraw方法

1.2getCircleBitmap

[java]  view plain  copy

 

1. private Bitmap getCircleBitmap(Bitmap bitmap){  
2.         Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),  
3.                 bitmap.getHeight(), Bitmap.Config.ARGB_8888);  
4.         Canvas canvas = new Canvas(output);  
5.         Rect rect = new Rect(0,0,bitmap.getWidth(),bitmap.getHeight());  
6.         paint.setAntiAlias(true);  
7.         canvas.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2, bitmap.getHeight() / 2, paint);  
8.         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  
9.         canvas.drawBitmap(bitmap, rect, rect, paint);//将图片画出来  
10.         return output;  
11. }  

这是获取圆形图的方法,目的是将我们自定义的View中的图片,转化成圆形的Bitmap,这里需要Canvas对象,首先画一个圆形的底层,再在其上放上我们的图片,通过设置画笔的paint的Xfermode属性,该属性是用来设置前后图层的显示关系的,这是设置Mode.SRC_IN,的意思是输出的范围是底层图形的范围,而显示的内容是上层的内容

1.2.1paint.setXfermode()

Xfermode有大神称之为过渡模式，这种翻译比较贴切但恐怕不易理解，大家也可以直接称之为图像混合模式，因为所谓的“过渡”其实就是图像混合的一种,简单来说,可以理解成图片的叠加方式.

我们可以看一下图片的16中叠加方式

PorterDuff.Mode.CLEAR	所绘制不会提交到画布上。
PorterDuff.Mode.SRC	显示上层绘制图片
PorterDuff.Mode.DST	显示下层绘制图片
PorterDuff.Mode.SRC_OVER	正常绘制显示，上下层绘制叠盖
PorterDuff.Mode.DST_OVER	上下层都显示。下层居上显示
PorterDuff.Mode.SRC_IN	取两层绘制交集。显示上层
PorterDuff.Mode.DST_IN	取两层绘制交集。显示下层
PorterDuff.Mode.SRC_OUT	取上层绘制非交集部分
PorterDuff.Mode.DST_OUT	取下层绘制非交集部分
PorterDuff.Mode.SRC_ATOP	取下层非交集部分与上层交集部分
PorterDuff.Mode.DST_ATOP	取上层非交集部分与下层交集部分
PorterDuff.Mode.XOR	取两层绘制非交集。两层绘制非交集
PorterDuff.Mode.DARKEN	上下层都显示。变暗
PorterDuff.Mode.LIGHTEN	上下层都显示。变亮
PorterDuff.Mode.MULTIPLY	取两层绘制交集
PorterDuff.Mode.SCREEN	上下层都显示

1.2.2Canvas

Canvas类可以绘制各种的图形,在绘制的时候会将绘制好的内容保存在Canvas的内部,可以将所绘制的内容输出为一张Bitmap,这张Bitmap即在new Canvas的时候通过构造方法传进去.而在onDraw方法中传入的Canvas则会在绘制完毕后,直接将内部的内容输出到屏幕上的.

1.3测试

写好了之后,我们来测试一下

[html]  view plain  copy

 

1. <com.lanou.chenfengyao.temproundimageview.RoundImageView  
2.         android:layout_width="wrap_content"  
3.         android:layout_height="wrap_content"  
4.         android:src="@mipmap/test_img"/>  

看 图片已经被处理成圆形的了

1.4 添加功能

我们希望可以用我们自己的RoundImageView来实现即可以显示正常的ImageView也可以显示圆形图片的功能,最好可以能用Java代码动态控制.于是我们添加一个自定义属性

首先在values下新建attrs.xml 代码如下

[html]  view plain  copy

 

1. <resources>  
2.     <declare-styleable name="RoundImageView">  
3.         <attr name="is_round" format="boolean" />  
4.     </declare-styleable>  
5. </resources>  

可以看到 我们定义了一条自定义属性:is_round 它是一个boolean值的属性,当属性是false的时候 我们就显示一个正常的图片,当属性是true的时候,则显示一个圆形图片

在RoundImageView中添加一个变量

[java]  view plain  copy

 

1. private boolean isRound;  

然后在构造方法里提取这条属性,如果没有提取到,默认值设置为true,让它默认就可以显示圆角图片

[java]  view plain  copy

 

1. public RoundImageView(Context context, AttributeSet attrs, int defStyleAttr) {  
2.         super(context, attrs, defStyleAttr);  
3.         paint = new Paint();//初始化画笔对象  
4.         TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundImageView);  
5.         isRound = typedArray.getBoolean(R.styleable.RoundImageView_is_round, true);  
6. }  

为了增加实用性 我们改造一下剩下的构造方法

[java]  view plain  copy

 

1. public RoundImageView(Context context) {  
2.         this(context, null);  
3. }  
4.   
5. public RoundImageView(Context context, AttributeSet attrs) {  
6.         this(context, attrs, 0);  
7. }  

接下来在onDraw方法里进行一次判断,如果需要显示圆形图,才显示圆形图

[java]  view plain  copy

 

1. @Override  
2.    protected void onDraw(Canvas canvas) {  
3.        Drawable drawable = getDrawable();  
4.        if (null != drawable && isRound) {  
5.            Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();  
6.            //核心代码  
7.            Bitmap b = getCircleBitmap(bitmap);  
8.            paint.reset();  
9.            canvas.drawBitmap(b, 0, 0, paint);  
10.            b.recycle();  
11.        } else {  
12.            super.onDraw(canvas);  
13.        }  
14.    }  

[java]  view plain  copy

 

1. <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">测试一下,我们将我们的组件的is_round属性改成false看看效果</span>  

[html]  view plain  copy

 

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     xmlns:app="http://schemas.android.com/apk/res-auto"  
6.     android:paddingBottom="@dimen/activity_vertical_margin"  
7.     android:paddingLeft="@dimen/activity_horizontal_margin"  
8.     android:paddingRight="@dimen/activity_horizontal_margin"  
9.     android:paddingTop="@dimen/activity_vertical_margin"  
10.     tools:context="com.lanou.chenfengyao.temproundimageview.MainActivity">  
11.   
12.     <com.lanou.chenfengyao.temproundimageview.RoundImageView  
13.         android:layout_width="wrap_content"  
14.         android:layout_height="wrap_content"  
15.         android:src="@mipmap/test_img"  
16.         app:is_round="false"/>  
17. </RelativeLayout>  

注意,我们自定义的属性,命名空间不要忘记了

来看看效果

可以看到,现在的RoundImageView就和正常的ImageView的效果是一样的啦.

现在我们再写一个方法能让RoundImgeView动态的改变圆形或是正常的,在RoundImageView里添加方法

[java]  view plain  copy

 

1. public void setIsRound(boolean isRound) {  
2.         this.isRound = isRound;  
3.         invalidate();  
4.     }  

现在我们在Activity里放上一个按钮,点击它切换显示模式,来测试一下

可以看到 我们的图片可以通过Java代码来动态的切换正常模式和圆形图片啦

二、使用Fresco显示圆形图片

Fresco是FaceBook推出的专门用来加载图片的类库,它可以加载网络图片,并且有丰富的效果,并且最重要的是,它具有中文文档!

文档地址http://www.fresco-cn.org/

根据文档我们首先在gradle里加上

[plain]  view plain  copy

 

1. compile 'com.facebook.fresco:fresco:0.9.0+'  

另外Fresco在使用的时候需要对其进行初始化,可以在需要的Activity里的onCreate方法里添加

[java]  view plain  copy

 

1. Fresco.initialize(this);  

建议将这行代码添加到Application里进行全局的初始化

在使用起来就变得很简单了,只需要在xml里添加

[html]  view plain  copy

 

1. <com.facebook.drawee.view.SimpleDraweeView  
2.         fresco:roundAsCircle = "true"  
3.         fresco:actualImageScaleType="centerInside"  
4.         fresco:roundingBorderColor="@color/colorAccent"  
5.         fresco:roundingBorderWidth="1dp"  
6.         android:layout_width="match_parent"  
7.         android:layout_height="match_parent"  
8.         fresco:backgroundImage="@mipmap/test_img"/>  

并且不要忘记命名空间

[html]  view plain  copy

 

1. xmlns:fresco="http://schemas.android.com/apk/res-auto"  

看一下效果

可以看到出现了圆形图片,并且还有1dp的红色边框

2.1一些坑

Fresco在这种使用方式的时候有一些坑是值得注意的,首先根据官方的说法,会在后续的版本中不再继承自ImageView,所以不建议使用ImageView的一些属性和方法,例如src等.

第二,该空间无法使用wrap_content的方式来指定宽高,这点略坑...

三、利用sharp做圆形图

我们也可以使用ImageView和sharp来完成一个圆形图片的效果,首先在drawable里新建circle.xml

[html]  view plain  copy

 

1. <shape  
2.     android:innerRadius="0dp"  
3.     android:shape="ring"  
4.     android:thicknessRatio="1"  
5.     android:useLevel="false"  
6.     xmlns:android="http://schemas.android.com/apk/res/android">  
7.   
8.     <solid android:color="@android:color/transparent" />  
9.   
10.     <stroke  
11.         android:width="68dp"  
12.         android:color="#FFFFFFFF" />  
13. </shape>  

让shape是ring即环形,并且设置填充颜色为白色,线宽需要根据图片自己调整

然后再drable里新建round_layers.xml

[html]  view plain  copy

 

1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
2.     <item android:drawable="@mipmap/test_img" />  
3.     <item android:drawable="@drawable/circle" />  
4. </layer-list>  

layer-list的意思是让ImageView中显示的图片产生一个叠加的效果,越靠下写的,在显示的时候就越靠上层

最后让ImageView使用该xml

[html]  view plain  copy

 

1. <ImageView  
2.         android:layout_width="wrap_content"  
3.         android:layout_height="wrap_content"  
4.         android:src="@drawable/round_layers"/>  

看一下效果吧

实际上,该方法的原理就是在正常的ImageView上再叠加了一个白色的环形图形,这样显示的效果就是圆形图片了.但是缺点也是显而易见的,即需要手动的调节环形的粗细,比较难控制