文档章节

两个边框的圆形iamgeView

MT牛牛
 MT牛牛
发布于 2014/10/08 09:44
字数 949
阅读 73
收藏 0



原始图片:





核心代码:

[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>




本文转载自:

共有 人打赏支持
MT牛牛
粉丝 1
博文 19
码字总数 2640
作品 0
石家庄
程序员
私信 提问
前端知识 | CSS小技巧-自适应椭圆

背景知识: border-radius 属性的基本用法。 难题: 你可能注意到过,给任何正方形元素设置一个足够大的 border-radius,就可以把它变成一个圆形。所用到的 CSS 代码如下所示: 图1.1给元素设...

海说软件
2018/06/26
0
0
Android 圆角、圆形 ImageView 实现

一、 特点 基于AppCompatImageView扩展 支持圆角、圆形显示 可绘制边框,圆形时可绘制内外两层边框 支持边框不覆盖图片 可绘制遮罩 ...... 二、基本原理 我们要实现的图片控件继承自,它是的...

Othershe
2018/06/25
0
0
Android CircleImageView圆形ImageView深入浅出

重点说一说CircleImageView和附录文章1的异同,在开发中如何在特定情况下该选择何种技术实现方案。 (一)附录1的RoundedBitmapDrawable是谷歌官方的圆形实现,RoundedBitmapDrawable的最大特...

suifenglai
2016/08/06
32
0
【更新】Essential Studio for Xamarin更新至2018 v4(一)

下载Essential Studio for Xamarin最新版本 Essential Studio for Xamarin是全面的Xamarin.iOS、Xamarin.Android和Xamarin.Forms组件套包,包含最快的图表和网格。 COMMON 主题支持 现在,您...

电池盒
01/04
0
0
react-native 圆形进度条

项目中录制视频需要用到圆形进度条,从网上搜了很多,终于发现一个好用的组件react-native-progress,这个组件支持线形和圆形多种形式的进度条,先来看看效果图~ 官方效果图.gif 这个组件有四...

sybil052
2018/01/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7重置密码、单用户模式、救援模式、ls命令、chmod命令

在工作当中如果我们错误的配置了文件使服务器不能正常启动或者忘记密码不能登录系统,如何解决这些问题呢?重装系统是可以实现的,但是往往不能轻易重装系统的,下面用忘记密码作为例子讲解如...

李超小牛子
今天
3
0
Python如何开发桌面应用程序?Python基础教程,第十三讲,图形界面

当使用桌面应用程序的时候,有没有那么一瞬间,想学习一下桌面应用程序开发?行业内专业的桌面应用程序开发一般是C++,C#来做,Java开发的也有,但是比较少。本节课会介绍Python的GUI(图形用...

程序员补给栈
今天
5
0
kafka在的使用

一、基本概念 介绍 Kafka是一个分布式的、可分区的、可复制的消息系统。它提供了普通消息系统的功能,但具有自己独特的设计。 这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统...

狼王黄师傅
今天
3
0
Android JNI总结

0x01 JNI介绍 JNI是Java Native Interface的缩写,JNI不是Android专有的东西,它是从Java继承而来,但是在Android中,JNI的作用和重要性大大增强。 JNI在Android中起着连接Java和C/C++层的作...

天王盖地虎626
昨天
3
0
大数据教程(11.8)Hive1.2.2简介&初体验

上一篇文章分析了Hive1.2.2的安装,本节博主将分享Hive的体验&Hive服务端和客户端的使用方法。 一、Hive与hadoop直接的关系 Hive利用HDFS存储数据,利用MapReduce查询数据。 二、Hive与传统数...

em_aaron
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部