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,理解还不是太深刻。

关于Android圆形图片的一种优化方案(可以显示网络图片)的更多相关文章

  1. Android圆形图片自定义控件

    Android圆形图片控件效果图如下: 代码如下: RoundImageView.java package com.dxd.roundimageview; import android.content ...

  2. Android圆形图片--自己定义控件

    Android圆形图片控件效果图例如以下: 代码例如以下: RoundImageView.java package com.dxd.roundimageview; import android.con ...

  3. 查询效率提升10倍!3种优化方案,帮你解决MySQL深分页问题

    开发经常遇到分页查询的需求,但是当翻页过多的时候,就会产生深分页,导致查询效率急剧下降. 有没有什么办法,能解决深分页的问题呢? 本文总结了三种优化方案,查询效率直接提升10倍,一起学习一下. 1. ...

  4. android绘制圆形图片的两种方式

    看下效果先 下面有完整的示例代码 使用BitmapShader(着色器) 我们在绘制view 的时候 就是小学上美术课 用水彩笔在本子上画画 使用着色器绘制圆形图片最简单的理解方式 就是把bitmap ...

  5. Android圆形图片--ImageView

    [ RoundImageView.java ] package com.dxd.roundimageview; import android.content.Context; import andro ...

  6. Android圆形图片不求人,自定义View实现(BitmapShader使用)

    在很多APP当中,圆形的图片是必不可少的元素,美观大方.本文将带领读者去实现一个圆形图片自定View,力求只用一个Java类来完成这件事情. 一.先上效果图 二.实现思路 在定义View 的onMea ...

  7. 在android中画圆形图片的几种办法

    在开发中常常会有一些需求,比方显示头像,显示一些特殊的需求,将图片显示成圆角或者圆形或者其它的一些形状. 可是往往我们手上的图片或者从server获取到的图片都是方形的.这时候就须要我们自己进行处理, ...

  8. Android 圆形图片加白边加阴影

    /** * 将图片准转为圆形 * * @param bitmap * @return */ public static Bitmap getRoundedCornerBitmap(String pat ...

  9. Android 截取手机屏幕两种实现方案解析

    近期在开发的过程中,遇到了一个须要截取屏幕保存为图片的需求,详细为截取webview的视图保存图片. 方法1:首先想到的思路是利用SDK提供的View.getDrawingCache()方法: pub ...

随机推荐

  1. 上海洋码头(www.ymatou.com)急招技术人才(职位:互联网软件开发工程师,.NET网站架构师,Web前端开发工程师,高级测试工程师,产品经理)

    对公司招聘职位有兴趣的童鞋可以把简历发送到zhangzhiqiang@ymatou.com,我们HR会快速给你答复. 互联网软件开发工程师 岗位职责: 1.参与洋码头各个平台(www.ymatou.c ...

  2. 初识HTTP 1.1与HTTP 1.0

    HTTP 1.1与HTTP 1.0的比较 一个WEB站点每天可能要接收到上百万的用户请求,为了提高系统的效率,HTTP 1.0规定浏览器与服务器只保持短暂的连接,浏览器的每次请求都需要与服务器建立一个 ...

  3. 判断浏览器是IE的几种方式

    <script> if(!+[1,])alert("这是ie浏览器"); else alert("这不是ie浏览器"); </script&g ...

  4. Iframe的应用以及父窗口和子窗口的相互访问

    点评:Iframe和FRAME的区别,方便大家以后在使用过程中根据实际需要取舍.- function getParentIFrameDocument(aID) { var rv = null; // ...

  5. Hadoop学习笔记(7) ——高级编程

    Hadoop学习笔记(7) ——高级编程 从前面的学习中,我们了解到了MapReduce整个过程需要经过以下几个步骤: 1.输入(input):将输入数据分成一个个split,并将split进一步拆成 ...

  6. shell变量定义

    http://blog.csdn.net/longxibendi/article/details/6125075 set - 读写变量语法:set varName ?value?描述:返回变量varN ...

  7. Spark RDD概念学习系列之RDD的5大特点(五)

      RDD的5大特点  1)有一个分片列表,就是能被切分,和Hadoop一样,能够切分的数据才能并行计算. 一组分片(partition),即数据集的基本组成单位,对于RDD来说,每个分片都会被一个计 ...

  8. 异步编程之Promise(2):探究原理

    异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...

  9. Skeletal Animation

    [Skeletal Animation] Skeletal animation is the use of “bones” to animate a model. The movement of bo ...

  10. *** WARNING L1: UNRESOLVED EXTERNAL SYMBOL

    kei编译时提示: *** WARNING L1: UNRESOLVED EXTERNAL SYMBOL *** WARNING L1:reference made to unresolved ext ...