关于Android圆形图片的一种优化方案（可以显示网络图片）

在Android App中，我们经常看到圆形头像图片，然后网上也有很多开源的控件。刚好这个项目用到了，也去找了一些开源的，发现并不完美，所以只好自己优化了，废话不多说，先上效果图：

下面是源码：本人能理解的地方都加上注释了，大牛勿喷。

1. package com.xyt.ygcf.widget;
2. import android.content.Context;
3. import android.content.res.TypedArray;
4. import android.graphics.Bitmap;
5. import android.graphics.Canvas;
6. import android.graphics.Color;
7. import android.graphics.Paint;
8. import android.graphics.PorterDuff;
9. import android.graphics.PorterDuffXfermode;
10. import android.graphics.RectF;
11. import android.graphics.Xfermode;
12. import android.graphics.drawable.Drawable;
13. import android.graphics.drawable.NinePatchDrawable;
14. import android.util.AttributeSet;
15. import android.widget.ImageView;
16. import com.xyt.yangguangchufang.R;
17. public class CircleImageView extends ImageView {
18. private static final Xfermode MASK_XFERMODE;
19. private Bitmap mask;
20. private Paint paint;
21. private int mBorderWidth = 10;
22. private int mBorderColor = Color.parseColor("#f2f2f2");
23. static {
24. PorterDuff.Mode localMode = PorterDuff.Mode.DST_IN;
25. MASK_XFERMODE = new PorterDuffXfermode(localMode);
26. }
27. public CircleImageView(Context paramContext) {
28. super(paramContext);
29. }
30. public CircleImageView(Context paramContext, AttributeSet paramAttributeSet) {
31. this(paramContext, paramAttributeSet, 0);
32. }
33. public CircleImageView(Context paramContext, AttributeSet paramAttributeSet, int paramInt) {
34. super(paramContext, paramAttributeSet, paramInt);
35. TypedArray a = paramContext.obtainStyledAttributes(paramAttributeSet, R.styleable.CircularImage);
36. mBorderColor = a.getColor(R.styleable.CircularImage_border_color, mBorderColor);
37. final int defalut = (int) (2 * paramContext.getResources().getDisplayMetrics().density + 0.5f);
38. mBorderWidth = a.getDimensionPixelOffset(R.styleable.CircularImage_border_width, defalut);
39. a.recycle();
40. }
41. private boolean useDefaultStyle = false;
42. public void setUseDefaultStyle(boolean useDefaultStyle) {
43. this.useDefaultStyle = useDefaultStyle;
44. }
45. @Override
46. protected void onDraw(Canvas paramCanvas) {
47. if (useDefaultStyle) {
48. super.onDraw(paramCanvas);
49. return;
50. }
51. final Drawable localDrawable = getDrawable();
52. if (localDrawable == null)
53. return;
54. if (localDrawable instanceof NinePatchDrawable) {
55. return;
56. }
57. if (this.paint == null) {
58. final Paint localPaint = new Paint();
59. localPaint.setFilterBitmap(false);
60. localPaint.setAntiAlias(true);
61. localPaint.setXfermode(MASK_XFERMODE);
62. this.paint = localPaint;
63. }
64. final int width = getWidth();
65. final int height = getHeight();
66. /** 保存layer */
67. int layer = paramCanvas.saveLayer(0.0F, 0.0F, width, height, null, 31);
68. /** 设置drawable的大小 */
69. localDrawable.setBounds(0, 0, width, height);
70. /** 将drawable绑定到bitmap(this.mask)上面（drawable只能通过bitmap显示出来） */
71. localDrawable.draw(paramCanvas);
72. if ((this.mask == null) || (this.mask.isRecycled())) {
73. this.mask = createOvalBitmap(width, height);
74. }
75. /** 将bitmap画到canvas上面 */
76. paramCanvas.drawBitmap(this.mask, 0.0F, 0.0F, this.paint);
77. /** 将画布复制到layer上 */
78. paramCanvas.restoreToCount(layer);
79. drawBorder(paramCanvas, width, height);
80. }
81. /**
82. * 绘制最外面的边框
83. *
84. * @param canvas
85. * @param width
86. * @param height
87. */
88. private void drawBorder(Canvas canvas, final int width, final int height) {
89. if (mBorderWidth == 0) {
90. return;
91. }
92. final Paint mBorderPaint = new Paint();
93. mBorderPaint.setStyle(Paint.Style.STROKE);
94. mBorderPaint.setAntiAlias(true);
95. mBorderPaint.setColor(mBorderColor);
96. mBorderPaint.setStrokeWidth(mBorderWidth);
97. /**
98. * 坐标x：view宽度的一般 坐标y：view高度的一般 半径r：因为是view的宽度-border的一半
99. */
100. canvas.drawCircle(width >> 1, height >> 1, (width - mBorderWidth) >> 1, mBorderPaint);
101. canvas = null;
102. }
103. /**
104. * 获取一个bitmap，目的是用来承载drawable;
105. * <p>
106. * 将这个bitmap放在canvas上面承载，并在其上面画一个椭圆(其实也是一个圆，因为width=height)来固定显示区域
107. *
108. * @param width
109. * @param height
110. * @return
111. */
112. public Bitmap createOvalBitmap(final int width, final int height) {
113. Bitmap.Config localConfig = Bitmap.Config.ARGB_8888;
114. Bitmap localBitmap = Bitmap.createBitmap(width, height, localConfig);
115. Canvas localCanvas = new Canvas(localBitmap);
116. Paint localPaint = new Paint();
117. final int padding = mBorderWidth - 3;
118. /**
119. * 设置椭圆的大小(因为椭圆的最外边会和border的最外边重合的，如果图片最外边的颜色很深，有看出有棱边的效果，所以为了让体验更加好，
120. * 让其缩进padding px)
121. */
122. RectF localRectF = new RectF(padding, padding, width - padding, height - padding);
123. localCanvas.drawOval(localRectF, localPaint);
124. return localBitmap;
125. }
126. }

xml布局：

1. <com.xyt.ygcf.widget.CircleImageView
2. xmlns:myxmlns="http://schemas.android.com/apk/res/com.xyt.yangguangchufang"
3. android:id="@+id/fragment_my_image_user"
4. android:layout_width="110dp"
5. android:layout_height="110dp"
6. android:layout_marginBottom="10dp"
7. android:contentDescription="@null"
8. android:scaleType="centerCrop"
9. myxmlns:border_width="@dimen/circle_width"
10. myxmlns:border_color="@color/f2f2f2"
11. android:src="@drawable/ic_my_avar_unlogin" />

attr文件：

1. <declare-styleable name="CircularImage">
2. <attr name="border_width" format="dimension" />
3. <attr name="border_color" format="color" />
4. </declare-styleable>

抽空还要认真研究一下canvas，理解还不是太深刻。