两个边框的圆形iamgeView
博客专区 > MT牛牛 的博客 > 博客详情
两个边框的圆形iamgeView
MT牛牛 发表于3年前
两个边框的圆形iamgeView
  • 发表于 3年前
  • 阅读 67
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: Android自定义圆形图片,可设置最多两个的外边框。包括从网络获取图片显示。



原始图片:





核心代码:

[java] view plaincopy在CODE上查看代码片派生到我的代码片

  1. /** 

  2.  * 圆形ImageView,可设置最多两个宽度不同且颜色不同的圆形边框。 

  3.  *  

  4.  * @author Alan 

  5.  */  

  6. public class RoundImageView extends ImageView {  

  7.     private int mBorderThickness = 0;  

  8.     private Context mContext;  

  9.     private int defaultColor = 0xFFFFFFFF;  

  10.     // 如果只有其中一个有值,则只画一个圆形边框  

  11.     private int mBorderOutsideColor = 0;  

  12.     private int mBorderInsideColor = 0;  

  13.     // 控件默认长、宽  

  14.     private int defaultWidth = 0;  

  15.     private int defaultHeight = 0;  

  16.   

  17.     public RoundImageView(Context context) {  

  18.         super(context);  

  19.         mContext = context;  

  20.     }  

  21.   

  22.     public RoundImageView(Context context, AttributeSet attrs) {  

  23.         super(context, attrs);  

  24.         mContext = context;  

  25.         setCustomAttributes(attrs);  

  26.     }  

  27.   

  28.     public RoundImageView(Context context, AttributeSet attrs, int defStyle) {  

  29.         super(context, attrs, defStyle);  

  30.         mContext = context;  

  31.         setCustomAttributes(attrs);  

  32.     }  

  33.   

  34.     private void setCustomAttributes(AttributeSet attrs) {  

  35.         TypedArray a = mContext.obtainStyledAttributes(attrs,  

  36.                 R.styleable.roundedimageview);  

  37.         mBorderThickness = a.getDimensionPixelSize(  

  38.                 R.styleable.roundedimageview_border_thickness, 0);  

  39.         mBorderOutsideColor = a  

  40.                 .getColor(R.styleable.roundedimageview_border_outside_color,  

  41.                         defaultColor);  

  42.         mBorderInsideColor = a.getColor(  

  43.                 R.styleable.roundedimageview_border_inside_color, defaultColor);  

  44.     }  

  45.   

  46.     @Override  

  47.     protected void onDraw(Canvas canvas) {  

  48.         Drawable drawable = getDrawable();  

  49.         if (drawable == null) {  

  50.             return;  

  51.         }  

  52.   

  53.         if (getWidth() == 0 || getHeight() == 0) {  

  54.             return;  

  55.         }  

  56.         this.measure(00);  

  57.         if (drawable.getClass() == NinePatchDrawable.class)  

  58.             return;  

  59.         Bitmap b = ((BitmapDrawable) drawable).getBitmap();  

  60.         Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);  

  61.         if (defaultWidth == 0) {  

  62.             defaultWidth = getWidth();  

  63.   

  64.         }  

  65.         if (defaultHeight == 0) {  

  66.             defaultHeight = getHeight();  

  67.         }  

  68.         // 保证重新读取图片后不会因为图片大小而改变控件宽、高的大小(针对宽、高为wrap_content布局的imageview,但会导致margin无效)  

  69.         // if (defaultWidth != 0 && defaultHeight != 0) {  

  70.         // LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(  

  71.         // defaultWidth, defaultHeight);  

  72.         // setLayoutParams(params);  

  73.         // }  

  74.         int radius = 0;  

  75.         if (mBorderInsideColor != defaultColor  

  76.                 && mBorderOutsideColor != defaultColor) {// 定义画两个边框,分别为外圆边框和内圆边框  

  77.             radius = (defaultWidth < defaultHeight ? defaultWidth  

  78.                     : defaultHeight) / 2 - 2 * mBorderThickness;  

  79.             // 画内圆  

  80.             drawCircleBorder(canvas, radius + mBorderThickness / 2,  

  81.                     mBorderInsideColor);  

  82.             // 画外圆  

  83.             drawCircleBorder(canvas, radius + mBorderThickness  

  84.                     + mBorderThickness / 2, mBorderOutsideColor);  

  85.         } else if (mBorderInsideColor != defaultColor  

  86.                 && mBorderOutsideColor == defaultColor) {// 定义画一个边框  

  87.             radius = (defaultWidth < defaultHeight ? defaultWidth  

  88.                     : defaultHeight) / 2 - mBorderThickness;  

  89.             drawCircleBorder(canvas, radius + mBorderThickness / 2,  

  90.                     mBorderInsideColor);  

  91.         } else if (mBorderInsideColor == defaultColor  

  92.                 && mBorderOutsideColor != defaultColor) {// 定义画一个边框  

  93.             radius = (defaultWidth < defaultHeight ? defaultWidth  

  94.                     : defaultHeight) / 2 - mBorderThickness;  

  95.             drawCircleBorder(canvas, radius + mBorderThickness / 2,  

  96.                     mBorderOutsideColor);  

  97.         } else {// 没有边框  

  98.             radius = (defaultWidth < defaultHeight ? defaultWidth  

  99.                     : defaultHeight) / 2;  

  100.         }  

  101.         Bitmap roundBitmap = getCroppedRoundBitmap(bitmap, radius);  

  102.         canvas.drawBitmap(roundBitmap, defaultWidth / 2 - radius, defaultHeight  

  103.                 / 2 - radius, null);  

  104.     }  

  105.   

  106.     /** 

  107.      * 获取裁剪后的圆形图片 

  108.      *  

  109.      * @param radius 

  110.      *            半径 

  111.      */  

  112.     public Bitmap getCroppedRoundBitmap(Bitmap bmp, int radius) {  

  113.         Bitmap scaledSrcBmp;  

  114.         int diameter = radius * 2;  

  115.   

  116.         // 为了防止宽高不相等,造成圆形图片变形,因此截取长方形中处于中间位置最大的正方形图片  

  117.         int bmpWidth = bmp.getWidth();  

  118.         int bmpHeight = bmp.getHeight();  

  119.         int squareWidth = 0, squareHeight = 0;  

  120.         int x = 0, y = 0;  

  121.         Bitmap squareBitmap;  

  122.         if (bmpHeight > bmpWidth) {// 高大于宽  

  123.             squareWidth = squareHeight = bmpWidth;  

  124.             x = 0;  

  125.             y = (bmpHeight - bmpWidth) / 2;  

  126.             // 截取正方形图片  

  127.             squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth,  

  128.                     squareHeight);  

  129.         } else if (bmpHeight < bmpWidth) {// 宽大于高  

  130.             squareWidth = squareHeight = bmpHeight;  

  131.             x = (bmpWidth - bmpHeight) / 2;  

  132.             y = 0;  

  133.             squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth,  

  134.                     squareHeight);  

  135.         } else {  

  136.             squareBitmap = bmp;  

  137.         }  

  138.   

  139.         if (squareBitmap.getWidth() != diameter  

  140.                 || squareBitmap.getHeight() != diameter) {  

  141.             scaledSrcBmp = Bitmap.createScaledBitmap(squareBitmap, diameter,  

  142.                     diameter, true);  

  143.   

  144.         } else {  

  145.             scaledSrcBmp = squareBitmap;  

  146.         }  

  147.         Bitmap output = Bitmap.createBitmap(scaledSrcBmp.getWidth(),  

  148.                 scaledSrcBmp.getHeight(), Config.ARGB_8888);  

  149.         Canvas canvas = new Canvas(output);  

  150.   

  151.         Paint paint = new Paint();  

  152.         Rect rect = new Rect(00, scaledSrcBmp.getWidth(),  

  153.                 scaledSrcBmp.getHeight());  

  154.   

  155.         paint.setAntiAlias(true);  

  156.         paint.setFilterBitmap(true);  

  157.         paint.setDither(true);  

  158.         canvas.drawARGB(0000);  

  159.         canvas.drawCircle(scaledSrcBmp.getWidth() / 2,  

  160.                 scaledSrcBmp.getHeight() / 2, scaledSrcBmp.getWidth() / 2,  

  161.                 paint);  

  162.         paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));  

  163.         canvas.drawBitmap(scaledSrcBmp, rect, rect, paint);  

  164.         // bitmap回收(recycle导致在布局文件XML看不到效果)  

  165.         // bmp.recycle();  

  166.         // squareBitmap.recycle();  

  167.         // scaledSrcBmp.recycle();  

  168.         bmp = null;  

  169.         squareBitmap = null;  

  170.         scaledSrcBmp = null;  

  171.         return output;  

  172.     }  

  173.   

  174.     /** 

  175.      * 边缘画圆 

  176.      */  

  177.     private void drawCircleBorder(Canvas canvas, int radius, int color) {  

  178.         Paint paint = new Paint();  

  179.         /* 去锯齿 */  

  180.         paint.setAntiAlias(true);  

  181.         paint.setFilterBitmap(true);  

  182.         paint.setDither(true);  

  183.         paint.setColor(color);  

  184.         /* 设置paint的 style 为STROKE:空心 */  

  185.         paint.setStyle(Paint.Style.STROKE);  

  186.         /* 设置paint的外框宽度 */  

  187.         paint.setStrokeWidth(mBorderThickness);  

  188.         canvas.drawCircle(defaultWidth / 2, defaultHeight / 2, radius, paint);  

  189.     }  

  190.   

  191. }  


布局文件:

[html] view plaincopy在CODE上查看代码片派生到我的代码片

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  

  2.     xmlns:tools="http://schemas.android.com/tools"  

  3.     xmlns:imagecontrol="http://schemas.android.com/apk/res-auto"  

  4.     android:layout_width="match_parent"  

  5.     android:layout_height="match_parent"  

  6.     android:background="#fffffdfa"  

  7.     android:orientation="vertical"  

  8.     android:paddingBottom="@dimen/activity_vertical_margin"  

  9.     android:paddingLeft="@dimen/activity_vertical_margin"  

  10.     android:paddingRight="@dimen/activity_vertical_margin"  

  11.     android:paddingTop="@dimen/activity_vertical_margin"  

  12.     tools:context=".MainActivity" >  

  13.   

  14.     <LinearLayout  

  15.         android:layout_width="match_parent"  

  16.         android:layout_height="wrap_content"  

  17.         android:orientation="horizontal" >  

  18.   

  19.         <com.alan.roundimageview.RoundImageView  

  20.             android:id="@+id/roundImage_network"  

  21.             android:layout_width="60dp"  

  22.             android:layout_height="60dp"  

  23.             android:src="@drawable/default_portrait" />  

  24.   

  25.         <com.alan.roundimageview.RoundImageView  

  26.             android:id="@+id/roundImage_one_border"  

  27.             android:layout_width="80dp"  

  28.             android:layout_height="80dp"  

  29.             android:layout_marginLeft="10dp"  

  30.             android:layout_marginRight="10dp"  

  31.             imagecontrol:border_outside_color="#FFFF0000"  

  32.             imagecontrol:border_thickness="2dp"  

  33.             android:src="@drawable/default_portrait" />  

  34.   

  35.         <com.alan.roundimageview.RoundImageView  

  36.             android:id="@+id/roundImage_two_border"  

  37.             android:layout_width="120dp"  

  38.             android:layout_height="120dp"  

  39.             android:scaleType="centerCrop"  

  40.             imagecontrol:border_inside_color="#fff7f2e9"  

  41.             imagecontrol:border_outside_color="#ffd5d1c8"  

  42.             imagecontrol:border_thickness="2dp"   

  43.             android:src="@drawable/default_portrait"/>  

  44.     </LinearLayout>  

  45.   

  46.     <LinearLayout  

  47.         android:layout_width="match_parent"  

  48.         android:layout_height="wrap_content"  

  49.         android:layout_marginTop="10dp"  

  50.         android:orientation="horizontal" >  

  51.   

  52.         <com.alan.roundimageview.RoundImageView  

  53.             android:layout_width="60dp"  

  54.             android:layout_height="60dp"  

  55.             android:src="@drawable/default_portrait" />  

  56.   

  57.         <com.alan.roundimageview.RoundImageView  

  58.             android:layout_width="80dp"  

  59.             android:layout_height="80dp"  

  60.             android:layout_marginLeft="10dp"  

  61.             android:layout_marginRight="10dp"  

  62.             imagecontrol:border_outside_color="#FFFF0000"  

  63.             imagecontrol:border_thickness="2dp"   

  64.             android:src="@drawable/default_portrait"/>  

  65.   

  66.         <com.alan.roundimageview.RoundImageView  

  67.             android:layout_width="120dp"  

  68.             android:layout_height="120dp"  

  69.             android:scaleType="centerCrop"  

  70.             imagecontrol:border_inside_color="#fff7f2e9"  

  71.             imagecontrol:border_outside_color="#ffd5d1c8"  

  72.             imagecontrol:border_thickness="2dp"  

  73.             android:src="@drawable/default_portrait" />  

  74.     </LinearLayout>  

  75.   

  76. </LinearLayout>  

arrts.xml文件

 <declare-styleable name="roundedimageview">

        <attr name="border_thickness" format="dimension" />

        <attr name="border_outside_color" format="color" />

        <attr name="border_inside_color" format="color" />

    </declare-styleable>




共有 人打赏支持
粉丝 2
博文 15
码字总数 2640
×
MT牛牛
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: