Android自定义ImageView实现圆形控件显示

控件 同时被 2 个专栏收录
69 篇文章 0 订阅
33 篇文章 0 订阅

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

主要的类:   

[java] view plain copy

  在CODE上查看代码片 派生到我的代码片
  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;  
  18.   
  19. public class CircleImageView extends ImageView {  
  20.   
  21.     private static final ScaleType SCALE_TYPE = ScaleType.CENTER_CROP;  
  22.   
  23.     private static final Bitmap.Config BITMAP_CONFIG = Bitmap.Config.ARGB_8888;  
  24.     private static final int COLORDRAWABLE_DIMENSION = 1;  
  25.   
  26.     private static final int DEFAULT_BORDER_WIDTH = 0;  
  27.     private static final int DEFAULT_BORDER_COLOR = Color.BLACK;  
  28.   
  29.     private final RectF mDrawableRect = new RectF();  
  30.     private final RectF mBorderRect = new RectF();  
  31.   
  32.     private final Matrix mShaderMatrix = new Matrix();  
  33.     private final Paint mBitmapPaint = new Paint();  
  34.     private final Paint mBorderPaint = new Paint();  
  35.   
  36.     private int mBorderColor = DEFAULT_BORDER_COLOR;  
  37.     private int mBorderWidth = DEFAULT_BORDER_WIDTH;  
  38.   
  39.     private Bitmap mBitmap;  
  40.     private BitmapShader mBitmapShader;  
  41.     private int mBitmapWidth;  
  42.     private int mBitmapHeight;  
  43.   
  44.     private float mDrawableRadius;  
  45.     private float mBorderRadius;  
  46.   
  47.     private boolean mReady;  
  48.     private boolean mSetupPending;  
  49.   
  50.     public CircleImageView(Context context) {  
  51.         super(context);  
  52.     }  
  53.   
  54.     public CircleImageView(Context context, AttributeSet attrs) {  
  55.         this(context, attrs, 0);  
  56.     }  
  57.   
  58.     public CircleImageView(Context context, AttributeSet attrs, int defStyle) {  
  59.         super(context, attrs, defStyle);  
  60.         super.setScaleType(SCALE_TYPE);  
  61.   
  62.         TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleImageView, defStyle, 0);  
  63.   
  64.         mBorderWidth = a.getDimensionPixelSize(R.styleable.CircleImageView_border_width, DEFAULT_BORDER_WIDTH);  
  65.         mBorderColor = a.getColor(R.styleable.CircleImageView_border_color, DEFAULT_BORDER_COLOR);  
  66.   
  67.         a.recycle();  
  68.   
  69.         mReady = true;  
  70.   
  71.         if (mSetupPending) {  
  72.             setup();  
  73.             mSetupPending = false;  
  74.         }  
  75.     }  
  76.   
  77.     @Override  
  78.     public ScaleType getScaleType() {  
  79.         return SCALE_TYPE;  
  80.     }  
  81.   
  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.     }  
  88.   
  89.     @Override  
  90.     protected void onDraw(Canvas canvas) {  
  91.         if (getDrawable() == null) {  
  92.             return;  
  93.         }  
  94.   
  95.         canvas.drawCircle(getWidth() / 2, getHeight() / 2, mDrawableRadius, mBitmapPaint);  
  96.         canvas.drawCircle(getWidth() / 2, getHeight() / 2, mBorderRadius, mBorderPaint);  
  97.     }  
  98.   
  99.     @Override  
  100.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
  101.         super.onSizeChanged(w, h, oldw, oldh);  
  102.         setup();  
  103.     }  
  104.   
  105.     public int getBorderColor() {  
  106.         return mBorderColor;  
  107.     }  
  108.   
  109.     public void setBorderColor(int borderColor) {  
  110.         if (borderColor == mBorderColor) {  
  111.             return;  
  112.         }  
  113.   
  114.         mBorderColor = borderColor;  
  115.         mBorderPaint.setColor(mBorderColor);  
  116.         invalidate();  
  117.     }  
  118.   
  119.     public int getBorderWidth() {  
  120.         return mBorderWidth;  
  121.     }  
  122.   
  123.     public void setBorderWidth(int borderWidth) {  
  124.         if (borderWidth == mBorderWidth) {  
  125.             return;  
  126.         }  
  127.   
  128.         mBorderWidth = borderWidth;  
  129.         setup();  
  130.     }  
  131.   
  132.     @Override  
  133.     public void setImageBitmap(Bitmap bm) {  
  134.         super.setImageBitmap(bm);  
  135.         mBitmap = bm;  
  136.         setup();  
  137.     }  
  138.   
  139.     @Override  
  140.     public void setImageDrawable(Drawable drawable) {  
  141.         super.setImageDrawable(drawable);  
  142.         mBitmap = getBitmapFromDrawable(drawable);  
  143.         setup();  
  144.     }  
  145.   
  146.     @Override  
  147.     public void setImageResource(int resId) {  
  148.         super.setImageResource(resId);  
  149.         mBitmap = getBitmapFromDrawable(getDrawable());  
  150.         setup();  
  151.     }  
  152.   
  153.     private Bitmap getBitmapFromDrawable(Drawable drawable) {  
  154.         if (drawable == null) {  
  155.             return null;  
  156.         }  
  157.   
  158.         if (drawable instanceof BitmapDrawable) {  
  159.             return ((BitmapDrawable) drawable).getBitmap();  
  160.         }  
  161.   
  162.         try {  
  163.             Bitmap bitmap;  
  164.   
  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.             }  
  170.   
  171.             Canvas canvas = new Canvas(bitmap);  
  172.             drawable.setBounds(00, canvas.getWidth(), canvas.getHeight());  
  173.             drawable.draw(canvas);  
  174.             return bitmap;  
  175.         } catch (OutOfMemoryError e) {  
  176.             return null;  
  177.         }  
  178.     }  
  179.   
  180.     private void setup() {  
  181.         if (!mReady) {  
  182.             mSetupPending = true;  
  183.             return;  
  184.         }  
  185.   
  186.         if (mBitmap == null) {  
  187.             return;  
  188.         }  
  189.   
  190.         mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);  
  191.   
  192.         mBitmapPaint.setAntiAlias(true);  
  193.         mBitmapPaint.setShader(mBitmapShader);  
  194.   
  195.         mBorderPaint.setStyle(Paint.Style.STROKE);  
  196.         mBorderPaint.setAntiAlias(true);  
  197.         mBorderPaint.setColor(mBorderColor);  
  198.         mBorderPaint.setStrokeWidth(mBorderWidth);  
  199.   
  200.         mBitmapHeight = mBitmap.getHeight();  
  201.         mBitmapWidth = mBitmap.getWidth();  
  202.   
  203.         mBorderRect.set(00, getWidth(), getHeight());  
  204.         mBorderRadius = Math.min((mBorderRect.height() - mBorderWidth) / 2, (mBorderRect.width() - mBorderWidth) / 2);  
  205.   
  206.         mDrawableRect.set(mBorderWidth, mBorderWidth, mBorderRect.width() - mBorderWidth, mBorderRect.height() - mBorderWidth);  
  207.         mDrawableRadius = Math.min(mDrawableRect.height() / 2, mDrawableRect.width() / 2);  
  208.   
  209.         updateShaderMatrix();  
  210.         invalidate();  
  211.     }  
  212.   
  213.     private void updateShaderMatrix() {  
  214.         float scale;  
  215.         float dx = 0;  
  216.         float dy = 0;  
  217.   
  218.         mShaderMatrix.set(null);  
  219.   
  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.         }  
  227.   
  228.         mShaderMatrix.setScale(scale, scale);  
  229.         mShaderMatrix.postTranslate((int) (dx + 0.5f) + mBorderWidth, (int) (dy + 0.5f) + mBorderWidth);  
  230.   
  231.         mBitmapShader.setLocalMatrix(mShaderMatrix);  
  232.     }  
  233.   
  234. }  

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

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  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>  

使用时的布局文件:

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  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">  
  13.   
  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" />  
  21.   
  22.     </RelativeLayout>  
  23.   
  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">  
  30.   
  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" />  
  38.   
  39.     </RelativeLayout>  
  40.   
  41. </LinearLayout>  

效果:



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


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

拓展阅读

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

https://github.com/vinc3m1/RoundedImageView

转载地址
http://blog.csdn.net/nupt123456789/article/details/24886451


  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值