CircleImageView自定义圆形控件的使用

怼烎@ 2023-07-13 13:38 142阅读 0赞

1.自定义圆形控件github地址：https://github.com/hdodenhof/CircleImageView

  1. package de.hdodenhof.circleimageview;
  2. import edu.njupt.zhb.main.R;
  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.Color;
  9. import android.graphics.Matrix;
  10. import android.graphics.Paint;
  11. import android.graphics.RectF;
  12. import android.graphics.Shader;
  13. import android.graphics.drawable.BitmapDrawable;
  14. import android.graphics.drawable.ColorDrawable;
  15. import android.graphics.drawable.Drawable;
  16. import android.util.AttributeSet;
  17. import android.widget.ImageView;
  19. public class CircleImageView extends ImageView {
  21.     private static final ScaleType SCALE_TYPE = ScaleType.CENTER_CROP;
  23.     private static final Bitmap.Config BITMAP_CONFIG = Bitmap.Config.ARGB_8888;
  24.     private static final int COLORDRAWABLE_DIMENSION = 1;
  26.     private static final int DEFAULT_BORDER_WIDTH = 0;
  27.     private static final int DEFAULT_BORDER_COLOR = Color.BLACK;
  29.     private final RectF mDrawableRect = new RectF();
  30.     private final RectF mBorderRect = new RectF();
  32.     private final Matrix mShaderMatrix = new Matrix();
  33.     private final Paint mBitmapPaint = new Paint();
  34.     private final Paint mBorderPaint = new Paint();
  36.     private int mBorderColor = DEFAULT_BORDER_COLOR;
  37.     private int mBorderWidth = DEFAULT_BORDER_WIDTH;
  39.     private Bitmap mBitmap;
  40.     private BitmapShader mBitmapShader;
  41.     private int mBitmapWidth;
  42.     private int mBitmapHeight;
  44.     private float mDrawableRadius;
  45.     private float mBorderRadius;
  47.     private boolean mReady;
  48.     private boolean mSetupPending;
  50.     public CircleImageView(Context context) {
  51.         super(context);
  52.     }
  54.     public CircleImageView(Context context, AttributeSet attrs) {
  55.         this(context, attrs, 0);
  56.     }
  58.     public CircleImageView(Context context, AttributeSet attrs, int defStyle) {
  59.         super(context, attrs, defStyle);
  60.         super.setScaleType(SCALE_TYPE);
  62.         TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleImageView, defStyle, 0);
  64.         mBorderWidth = a.getDimensionPixelSize(R.styleable.CircleImageView_border_width, DEFAULT_BORDER_WIDTH);
  65.         mBorderColor = a.getColor(R.styleable.CircleImageView_border_color, DEFAULT_BORDER_COLOR);
  67.         a.recycle();
  69.         mReady = true;
  71.         if (mSetupPending) {
  72.             setup();
  73.             mSetupPending = false;
  74.         }
  75.     }
  77.     @Override
  78.     public ScaleType getScaleType() {
  79.         return SCALE_TYPE;
  80.     }
  82.     @Override
  83.     public void setScaleType(ScaleType scaleType) {
  84.         if (scaleType != SCALE_TYPE) {
  85.             throw new IllegalArgumentException(String.format("ScaleType %s not supported.", scaleType));
  86.         }
  87.     }
  89.     @Override
  90.     protected void onDraw(Canvas canvas) {
  91.         if (getDrawable() == null) {
  92.             return;
  93.         }
  95.         canvas.drawCircle(getWidth() / 2, getHeight() / 2, mDrawableRadius, mBitmapPaint);
  96.         canvas.drawCircle(getWidth() / 2, getHeight() / 2, mBorderRadius, mBorderPaint);
  97.     }
  99.     @Override
  100.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  101.         super.onSizeChanged(w, h, oldw, oldh);
  102.         setup();
  103.     }
  105.     public int getBorderColor() {
  106.         return mBorderColor;
  107.     }
  109.     public void setBorderColor(int borderColor) {
  110.         if (borderColor == mBorderColor) {
  111.             return;
  112.         }
  114.         mBorderColor = borderColor;
  115.         mBorderPaint.setColor(mBorderColor);
  116.         invalidate();
  117.     }
  119.     public int getBorderWidth() {
  120.         return mBorderWidth;
  121.     }
  123.     public void setBorderWidth(int borderWidth) {
  124.         if (borderWidth == mBorderWidth) {
  125.             return;
  126.         }
  128.         mBorderWidth = borderWidth;
  129.         setup();
  130.     }
  132.     @Override
  133.     public void setImageBitmap(Bitmap bm) {
  134.         super.setImageBitmap(bm);
  135.         mBitmap = bm;
  136.         setup();
  137.     }
  139.     @Override
  140.     public void setImageDrawable(Drawable drawable) {
  141.         super.setImageDrawable(drawable);
  142.         mBitmap = getBitmapFromDrawable(drawable);
  143.         setup();
  144.     }
  146.     @Override
  147.     public void setImageResource(int resId) {
  148.         super.setImageResource(resId);
  149.         mBitmap = getBitmapFromDrawable(getDrawable());
  150.         setup();
  151.     }
  153.     private Bitmap getBitmapFromDrawable(Drawable drawable) {
  154.         if (drawable == null) {
  155.             return null;
  156.         }
  158.         if (drawable instanceof BitmapDrawable) {
  159.             return ((BitmapDrawable) drawable).getBitmap();
  160.         }
  162.         try {
  163.             Bitmap bitmap;
  165.             if (drawable instanceof ColorDrawable) {
  166.                 bitmap = Bitmap.createBitmap(COLORDRAWABLE_DIMENSION, COLORDRAWABLE_DIMENSION, BITMAP_CONFIG);
  167.             } else {
  168.                 bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), BITMAP_CONFIG);
  169.             }
  171.             Canvas canvas = new Canvas(bitmap);
  172.             drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
  173.             drawable.draw(canvas);
  174.             return bitmap;
  175.         } catch (OutOfMemoryError e) {
  176.             return null;
  177.         }
  178.     }
  180.     private void setup() {
  181.         if (!mReady) {
  182.             mSetupPending = true;
  183.             return;
  184.         }
  186.         if (mBitmap == null) {
  187.             return;
  188.         }
  190.         mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
  192.         mBitmapPaint.setAntiAlias(true);
  193.         mBitmapPaint.setShader(mBitmapShader);
  195.         mBorderPaint.setStyle(Paint.Style.STROKE);
  196.         mBorderPaint.setAntiAlias(true);
  197.         mBorderPaint.setColor(mBorderColor);
  198.         mBorderPaint.setStrokeWidth(mBorderWidth);
  200.         mBitmapHeight = mBitmap.getHeight();
  201.         mBitmapWidth = mBitmap.getWidth();
  203.         mBorderRect.set(0, 0, getWidth(), getHeight());
  204.         mBorderRadius = Math.min((mBorderRect.height() - mBorderWidth) / 2, (mBorderRect.width() - mBorderWidth) / 2);
  206.         mDrawableRect.set(mBorderWidth, mBorderWidth, mBorderRect.width() - mBorderWidth, mBorderRect.height() - mBorderWidth);
  207.         mDrawableRadius = Math.min(mDrawableRect.height() / 2, mDrawableRect.width() / 2);
  209.         updateShaderMatrix();
  210.         invalidate();
  211.     }
  213.     private void updateShaderMatrix() {
  214.         float scale;
  215.         float dx = 0;
  216.         float dy = 0;
  218.         mShaderMatrix.set(null);
  220.         if (mBitmapWidth * mDrawableRect.height() > mDrawableRect.width() * mBitmapHeight) {
  221.             scale = mDrawableRect.height() / (float) mBitmapHeight;
  222.             dx = (mDrawableRect.width() - mBitmapWidth * scale) * 0.5f;
  223.         } else {
  224.             scale = mDrawableRect.width() / (float) mBitmapWidth;
  225.             dy = (mDrawableRect.height() - mBitmapHeight * scale) * 0.5f;
  226.         }
  228.         mShaderMatrix.setScale(scale, scale);
  229.         mShaderMatrix.postTranslate((int) (dx + 0.5f) + mBorderWidth, (int) (dy + 0.5f) + mBorderWidth);
  231.         mBitmapShader.setLocalMatrix(mShaderMatrix);
  232.     }
  233. }

自定义的属性：res/values/attrs.xml

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

使用时的布局文件：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:orientation="vertical" >
  7.     <RelativeLayout
  8.         android:layout_width="match_parent"
  9.         android:layout_height="0dp"
  10.         android:layout_weight="1"
  11.         android:padding="@dimen/base_padding"
  12.         android:background="@color/light">
  14.         <de.hdodenhof.circleimageview.CircleImageView
  15.             android:layout_width="160dp"
  16.             android:layout_height="160dp"
  17.             android:layout_centerInParent="true"
  18.             android:src="@drawable/demo"
  19.             app:border_width="2dp"
  20.             app:border_color="@color/dark" />
  22.     </RelativeLayout>
  24.     <RelativeLayout
  25.         android:layout_width="match_parent"
  26.         android:layout_height="0dp"
  27.         android:layout_weight="1"
  28.         android:padding="@dimen/base_padding"
  29.         android:background="@color/dark">
  31.         <de.hdodenhof.circleimageview.CircleImageView
  32.             android:layout_width="160dp"
  33.             android:layout_height="160dp"
  34.             android:layout_centerInParent="true"
  35.             android:src="@drawable/lena"
  36.             app:border_width="2dp"
  37.             app:border_color="@color/light" />
  39.     </RelativeLayout>
  41. </LinearLayout>

效果：

Center

Demo下载：http://download.csdn.net/detail/nuptboyzhb/7284553

注意：有些开发者可能也发现了，如果我们需要一个圆形的ImageButton的话，其实，我们没有必要自己写。如果ImageButton的图标是固定不变的，我们完全可以让设计师给我设计一个圆形的图片，然后直接设置再ImageButton上就可以了。但是，请注意，我们这里的圆形ImageView是自定义控件，也即是：无论你设置的图片是什么样的，显示出来的就是圆的。比如：易信中用户头像的设置，无论用户拍什么的照片，显示出来都是一个圆的。

拓展阅读：

还有一个更加强大的RoundedImageView，还支持圆角，椭圆等等。

https://github.com/vinc3m1/RoundedImageView

发表评论

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

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

相关阅读