Android-----自定义圆形的头像控件

亦凉 2022-08-09 09:59 325阅读 0赞

在现在的网络上圆形头像是非常常见的，圆形头像大多数使用在显示个人信息中的头像信息，今天就试试实现一个圆形的头像。

自定义一个CircleImageView，并且继承ImageView，用于显示圆形的图片。

  1. package com.gjg.circleimageviewdemo;
  3. import android.content.Context;
  4. import android.content.res.TypedArray;
  5. import android.graphics.Bitmap;
  6. import android.graphics.BitmapShader;
  7. import android.graphics.Canvas;
  8. import android.graphics.Matrix;
  9. import android.graphics.Paint;
  10. import android.graphics.RectF;
  11. import android.graphics.Shader;
  12. import android.graphics.drawable.BitmapDrawable;
  13. import android.graphics.drawable.ColorDrawable;
  14. import android.graphics.drawable.Drawable;
  15. import android.net.Uri;
  16. import android.util.AttributeSet;
  17. import android.widget.ImageView;
  19. public class CircleImageView extends ImageView{
  21.     //设置scaletype为ScaleType.CENTER_CROP（均衡缩放）
  22.     private static final ScaleType SCALE_TYPE = ScaleType.CENTER_CROP;
  24.     private static final Bitmap.Config BITMAP_CONFIG = Bitmap.Config.ARGB_8888;
  25.     private static final int COLORDRAWABLE_DIMENSION = 1;
  27.     private final RectF mDrawableRect = new RectF();
  28.     private final RectF mBorderRect = new RectF();
  30.     private final Matrix mShaderMatrix = new Matrix();
  32.     private final Paint mBitmapPaint = new Paint();//画整个圆形的画笔
  33.     private final Paint mBorderPaint = new Paint();//画边框的画笔
  35.     private int mBorderColor;//圆边框的颜色
  36.     private int mBorderWidth;//圆边框的宽度
  38.     private Bitmap mBitmap;
  39.     private BitmapShader mBitmapShader;
  40.     private int mBitmapWidth;
  41.     private int mBitmapHeight;
  43.     private float mDrawableRadius;
  44.     private float mBorderRadius;
  46.     private boolean mReady;
  47.     private boolean mSetupPending;
  51.     public CircleImageView(Context context) {
  52.         super(context);
  53.         init();
  54.     }
  56.     public CircleImageView(Context context, AttributeSet attrs) {
  57.         this(context, attrs, 0);
  58.         init();
  59.     }
  61.     public CircleImageView(Context context, AttributeSet attrs, int defStyle) {
  62.         super(context, attrs, defStyle);
  64.         //从attrs.xml中获取自定义的属性
  65.         TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleImageView, defStyle, 0);
  67.         mBorderWidth = a.getDimensionPixelSize(R.styleable.CircleImageView_border_width, 0);
  68.         mBorderColor = a.getColor(R.styleable.CircleImageView_border_color, 0);
  69.         //回收属性，避免对下次的使用造成影响
  70.         a.recycle();
  72.         init();
  73.     }
  75.     private void init() {
  76.         super.setScaleType(SCALE_TYPE);
  77.         mReady = true;
  79.         if (mSetupPending) {
  80.             setup();
  81.             mSetupPending = false;
  82.         }
  83.     }
  85.     @Override
  86.     public ScaleType getScaleType() {
  87.         return SCALE_TYPE;
  88.     }
  90.     @Override
  91.     public void setScaleType(ScaleType scaleType) {
  92.         if (scaleType != SCALE_TYPE) {
  93.             throw new IllegalArgumentException(String.format("ScaleType %s not supported.", scaleType));
  94.         }
  95.     }
  97.     @Override
  98.     protected void onDraw(Canvas canvas) {
  99.         if (getDrawable() == null) {
  100.             return;
  101.         }
  102.         //画圆（圆形头像部分）
  103.         canvas.drawCircle(getWidth() / 2, getHeight() / 2, mDrawableRadius, mBitmapPaint);
  104.         //若设置了圆的边框宽度，将边框画出来
  105.         if (mBorderWidth != 0) {
  106.             canvas.drawCircle(getWidth() / 2, getHeight() / 2, mBorderRadius, mBorderPaint);
  107.         }
  108.     }
  110.     @Override
  111.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  112.         super.onSizeChanged(w, h, oldw, oldh);
  113.         setup();
  114.     }
  116.     public int getBorderColor() {
  117.         return mBorderColor;
  118.     }
  120.     public void setBorderColor(int borderColor) {
  121.         if (borderColor == mBorderColor) {
  122.             return;
  123.         }
  125.         mBorderColor = borderColor;
  126.         mBorderPaint.setColor(mBorderColor);
  127.         invalidate();
  128.     }
  130.     public int getBorderWidth() {
  131.         return mBorderWidth;
  132.     }
  134.     public void setBorderWidth(int borderWidth) {
  135.         if (borderWidth == mBorderWidth) {
  136.             return;
  137.         }
  139.         mBorderWidth = borderWidth;
  140.         setup();
  141.     }
  143.     @Override
  144.     public void setImageBitmap(Bitmap bm) {
  145.         super.setImageBitmap(bm);
  146.         mBitmap = bm;
  147.         setup();
  148.     }
  150.     @Override
  151.     public void setImageDrawable(Drawable drawable) {
  152.         super.setImageDrawable(drawable);
  153.         mBitmap = getBitmapFromDrawable(drawable);
  154.         setup();
  155.     }
  157.     @Override
  158.     public void setImageResource(int resId) {
  159.         super.setImageResource(resId);
  160.         mBitmap = getBitmapFromDrawable(getDrawable());
  161.         setup();
  162.     }
  164.     @Override
  165.     public void setImageURI(Uri uri) {
  166.         super.setImageURI(uri);
  167.         mBitmap = getBitmapFromDrawable(getDrawable());
  168.         setup();
  169.     }
  171.     /**
  172.      * 获取最后的圆形图片
  173.      * @param drawable
  174.      * @return Bitmap
  175.      */
  176.     private Bitmap getBitmapFromDrawable(Drawable drawable) {
  177.         if (drawable == null) {
  178.             return null;
  179.         }
  181.         if (drawable instanceof BitmapDrawable) {
  182.             return ((BitmapDrawable) drawable).getBitmap();
  183.         }
  185.         try {
  186.             Bitmap bitmap;
  188.             if (drawable instanceof ColorDrawable) {
  189.                 bitmap = Bitmap.createBitmap(COLORDRAWABLE_DIMENSION, COLORDRAWABLE_DIMENSION, BITMAP_CONFIG);
  190.             } else {
  191.                 bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), BITMAP_CONFIG);
  192.             }
  194.             Canvas canvas = new Canvas(bitmap);
  195.             drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
  196.             drawable.draw(canvas);
  197.             return bitmap;
  198.         } catch (OutOfMemoryError e) {
  199.             return null;
  200.         }
  201.     }
  203.     private void setup() {
  204.         if (!mReady) {
  205.             mSetupPending = true;
  206.             return;
  207.         }
  209.         if (mBitmap == null) {
  210.             return;
  211.         }
  213.         mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
  215.         mBitmapPaint.setAntiAlias(true);
  216.         mBitmapPaint.setShader(mBitmapShader);
  218.         mBorderPaint.setStyle(Paint.Style.STROKE);
  219.         mBorderPaint.setAntiAlias(true);
  220.         mBorderPaint.setColor(mBorderColor);
  221.         mBorderPaint.setStrokeWidth(mBorderWidth);
  223.         mBitmapHeight = mBitmap.getHeight();
  224.         mBitmapWidth = mBitmap.getWidth();
  226.         mBorderRect.set(0, 0, getWidth(), getHeight());
  227.         mBorderRadius = Math.min((mBorderRect.height() - mBorderWidth) / 2, (mBorderRect.width() - mBorderWidth) / 2);
  229.         mDrawableRect.set(mBorderWidth, mBorderWidth, mBorderRect.width() - mBorderWidth, mBorderRect.height() - mBorderWidth);
  230.         mDrawableRadius = Math.min(mDrawableRect.height() / 2, mDrawableRect.width() / 2);
  232.         updateShaderMatrix();
  233.         invalidate();
  234.     }
  236.     private void updateShaderMatrix() {
  237.         float scale;
  238.         float dx = 0;
  239.         float dy = 0;
  241.         mShaderMatrix.set(null);
  243.         if (mBitmapWidth * mDrawableRect.height() > mDrawableRect.width() * mBitmapHeight) {
  244.             scale = mDrawableRect.height() / (float) mBitmapHeight;
  245.             dx = (mDrawableRect.width() - mBitmapWidth * scale) * 0.5f;
  246.         } else {
  247.             scale = mDrawableRect.width() / (float) mBitmapWidth;
  248.             dy = (mDrawableRect.height() - mBitmapHeight * scale) * 0.5f;
  249.         }
  251.         mShaderMatrix.setScale(scale, scale);
  252.         mShaderMatrix.postTranslate((int) (dx + 0.5f) + mBorderWidth, (int) (dy + 0.5f) + mBorderWidth);
  254.         mBitmapShader.setLocalMatrix(mShaderMatrix);
  255.     }
  258. }

上面的 代码需要注意的是：

  1. public CircleImageView(Context context, AttributeSet attrs, int defStyle) {
  2.         super(context, attrs, defStyle);
  4.         //从attrs.xml中获取自定义的属性
  5.         TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleImageView, defStyle, 0);
  7.         mBorderWidth = a.getDimensionPixelSize(R.styleable.CircleImageView_border_width, 0);
  8.         mBorderColor = a.getColor(R.styleable.CircleImageView_border_color, 0);
  9.         //回收属性，避免对下次的使用造成影响
  10.         a.recycle();
  12.         init();
  13.     }

从attrs.xml文件中获得自定义的属性后，需要调用recycle()方法。

布局文件：

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     xmlns:myapp="http://schemas.android.com/apk/res/com.gjg.circleimageviewdemo"  
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  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=".MainActivity" >
  12.      <com.gjg.circleimageviewdemo.CircleImageView
  13.          android:id="@+id/head_icon2"
  14.          android:layout_width="wrap_content"
  15.          android:layout_height="wrap_content"
  16.          android:layout_below="@+id/head_icon1"
  17.          android:layout_centerHorizontal="true"
  18.          android:layout_marginTop="30dp"
  19.          android:background="@drawable/headicon"
  20.          myapp:border_color="#328843"
  21.          myapp:border_width="2dp" />
  23.      <com.gjg.circleimageviewdemo.CircleImageView
  24.          android:id="@+id/head_icon1"
  25.          android:layout_width="wrap_content"
  26.          android:layout_height="wrap_content"
  27.          android:layout_alignLeft="@+id/head_icon2"
  28.          android:layout_alignParentTop="true"
  29.          android:layout_marginTop="81dp"
  30.          android:src="@drawable/headicon"
  31.          myapp:border_color="#328843"
  32.          myapp:border_width="2dp" />
  34.      <Button
  35.          android:id="@+id/button1"
  36.          android:onClick="toOtherActivity"
  37.          android:layout_width="wrap_content"
  38.          android:layout_height="wrap_content"
  39.          android:layout_alignParentTop="true"
  40.          android:layout_centerHorizontal="true"
  41.          android:layout_marginTop="16dp"
  42.          android:text="Button" />
  44. </RelativeLayout>

注意上面的图片引用应该是： android:src=”@drawable/headicon” 不要写成这种：android:background=”@drawable/headicon”

后面的哪种仍然是矩形显示，不能圆形显示。

布局文件中的

  1. xmlns:myapp="http://schemas.android.com/apk/res/com.gjg.circleimageviewdemo"

引用的自定义的属性，属性文件在values/attrs.xml

attrs.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  4.     <declare-styleable name="CircleImageView">
  5.         <attr name="border_width" format="dimension" />
  6.         <attr name="border_color" format="color" />
  7.     </declare-styleable>
  9. </resources>

引用的属性的用法：

  1. myapp:border_color="#328843"
  2.  myapp:border_width="2dp"

以myapp:开头，因为布局文件中的

  1. xmlns:myapp="http://schemas.android.com/apk/res/com.gjg.circleimageviewdemo"

也是定义成myapp,后面跟的直接是attrs中定义的name。

在attrs.xml中，其中resource是根标签，可以在里面定义若干个declare-styleable，中name定义了变量的名称，下面可以再自定义多个属性，针对来说，其属性的名称为”border_width”，format指定了该属性类型为dimension，只能表示字体的大小。

format还可以指定其他的类型比如;

reference 表示引用，参考某一资源ID

string 表示字符串

color 表示颜色值

dimension 表示尺寸值

boolean 表示布尔值

integer 表示整型值

float 表示浮点值

fraction 表示百分数

enum 表示枚举值

flag 表示位运算

效果如下：

Center

另外从网上搜了下，还可以用以下的方式直接将图裁剪成圆形图片，然后再显示。

  1. /**
  2.      * 直接将bitmap裁剪成圆形
  3.      * @param v
  4.      */
  5.     public void cropBitmap(View v){
  6.         Bitmap src=BitmapFactory.decodeResource(getResources(), R.drawable.headicon);
  7.         Bitmap bitmap=Bitmap.createBitmap(src);
  8.         Bitmap newbitmap=toRoundBitmap(bitmap);
  9.         ivHead.setImageBitmap(newbitmap);
  10.     }
  15. /**
  16.      * 转换图片成圆形
  17.      * 
  18.      * @param bitmap 传入Bitmap对象
  19.      * @return
  20.      */
  21.     public Bitmap toRoundBitmap(Bitmap bitmap) {
  22.         int width = bitmap.getWidth();
  23.         int height = bitmap.getHeight();
  24.         float roundPx;
  25.         float left, top, right, bottom, dst_left, dst_top, dst_right, dst_bottom;
  26.         if (width <= height) {
  27.             roundPx = width / 2;
  28.             top = 0;
  29.             bottom = width;
  30.             left = 0;
  31.             right = width;
  32.             height = width;
  33.             dst_left = 0;
  34.             dst_top = 0;
  35.             dst_right = width;
  36.             dst_bottom = width;
  37.         } else {
  38.             roundPx = height / 2;
  39.             float clip = (width - height) / 2;
  40.             left = clip;
  41.             right = width - clip;
  42.             top = 0;
  43.             bottom = height;
  44.             width = height;
  45.             dst_left = 0;
  46.             dst_top = 0;
  47.             dst_right = height;
  48.             dst_bottom = height;
  49.         }
  50.         Bitmap output = Bitmap.createBitmap(width, height, Config.ARGB_8888);
  51.         Canvas canvas = new Canvas(output);
  52.         final int color = 0xff424242;
  53.         final Paint paint = new Paint();
  54.         final Rect src = new Rect((int) left, (int) top, (int) right,
  55.                 (int) bottom);
  56.         final Rect dst = new Rect((int) dst_left, (int) dst_top,
  57.                 (int) dst_right, (int) dst_bottom);
  58.         final RectF rectF = new RectF(dst);
  59.         paint.setAntiAlias(true);
  60.         canvas.drawARGB(0, 0, 0, 0);
  61.         paint.setColor(color);
  62.         canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
  63.         paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
  64.         canvas.drawBitmap(bitmap, src, dst, paint);
  65.         return output;
  66.     }

点击“直接裁剪”按钮，效果如下：

Center 1

demo下载地址：http://download.csdn.net/detail/dangnianmingyue_gg/9203149

发表评论

表情：
评论列表 （有 0 条评论，325人围观）

还没有评论，来说两句吧...

相关阅读

    相关 android 自定义控件

    Android自定义View实现很简单 继承View，重写构造函数、onDraw，（onMeasure）等函数。 如果自定义的View需要有自定义的属性，需要在values

    墨蓝墨蓝/ 0 赞/ 426 阅读