文档章节

两个边框的圆形iamgeView

MT牛牛
 MT牛牛
发布于 2014/10/08 09:44
字数 949
阅读 71
收藏 0
点赞 0
评论 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
博文 15
码字总数 2640
作品 0
石家庄
程序员
前端知识 | CSS小技巧-自适应椭圆

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

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

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

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

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

suifenglai
2016/08/06
32
0
react-native 圆形进度条

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

sybil052
01/04
0
0
Android自定义View---------ColorfulToggleButton

ColorfulToggleButton的功能。 1.是可以动态改变颜色和边框颜色的ToggleButton 2.可动态改变形状(圆形或方形) 3.设置边框的显示或隐藏(我的项目里,边框显示即为选中效果) 4.type=1是圆形t...

醉人的笑容你有没有
2016/06/08
39
0
Android 自定义圆形图片源码中的疑问CircleImageView

@火蚁 你好,想跟你请教个问题:客户端中使用的自定义的圆形图片控件中,有两个地方需要向您请教下: setup()函数中,关于控件边框半径的确定, mBorderRect.set(0, 0, getWidth(), getHeigh...

姬鑫
2015/06/03
621
0
iOS 裁剪圆形图像并显示(类似于微信头像)

本文主要讲解如何从照片库选择一张照片后将其裁剪成圆形头像并显示,类似于微信头像那种模式。 本文的方法也适用于当时拍照获取的图像,方法类似,所以不再赘述。 本文主要是在iOS 10环境下使...

Stefen123
2017/06/26
0
0
开始学习JavaFX (译)

原文地址:http://download.oracle.com/javafx/2.0/getstarted/jfxpub-getstarted.htm如果你想使用 JavaFX 快速创建拥有富客户体验的应用程序,那么这个文章正是为你准备的。你将学习如何建立...

Jeky
2011/10/10
6.6K
6
XMind7主题大变样

 XMind 7思维导图出现在我们的树叶后,给了我们太多的惊喜,哪怕一个小小的细节改动了体现了XMind 7的贴心与人性化。就拿主题形状来说,又给我们送上了两个美美的形状。下面本文就讲解了更加...

xmind
2015/12/28
118
0
html5 canvas绘制圆形进度实例

html5 canvas绘制圆形进度实例 <canvas id="test" width=200 height=200></canvas> <script> var canvas2d = document.getElementById("test").getContext("2d"); var deg = 0; var test = f......

罗马教堂的钟声
2015/12/10
45
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周一乱弹 —— 如果是你喜欢的女同学找你借钱

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @guanglun :分享Michael Learns To Rock的单曲《Fairy Tale》 《Fairy Tale》- Michael Learns To Rock 手机党少年们想听歌,请使劲儿戳(这...

小小编辑
35分钟前
9
3
NNS域名系统之域名竞拍

0x00 前言 其实在官方文档中已经对域名竞拍的过程有详细的描述,感兴趣的可以移步http://doc.neons.name/zh_CN/latest/nns_protocol.html#id30 此处查阅。 我这里主要对轻钱包开发中会用到的...

暖冰
今天
0
0
32.filter表案例 nat表应用 (iptables)

10.15 iptables filter表案例 10.16/10.17/10.18 iptables nat表应用 10.15 iptables filter表案例: ~1. 写一个具体的iptables小案例,需求是把80端口、22端口、21 端口放行。但是,22端口我...

王鑫linux
今天
0
0
shell中的函数&shell中的数组&告警系统需求分析

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析

影夜Linux
今天
0
0
Linux网络基础、Linux防火墙

Linux网络基础 ip addr 命令 :查看网口信息 ifconfig命令:查看网口信息,要比ip addr更明了一些 centos 7默认没安装ifconfig命令,可以使用yum install -y net-tools命令来安装。 ifconfig...

李超小牛子
今天
1
0
[机器学习]回归--Decision Tree Regression

CART决策树又称分类回归树,当数据集的因变量为连续性数值时,该树算法就是一个回归树,可以用叶节点观察的均值作为预测值;当数据集的因变量为离散型数值时,该树算法就是一个分类树,可以很...

wangxuwei
昨天
1
0
Redis做分布式无锁CAS的问题

因为Redis本身是单线程的,具备原子性,所以可以用来做分布式无锁的操作,但会有一点小问题。 public interface OrderService { public String getOrderNo();} public class OrderRe...

算法之名
昨天
11
0
143. Reorder List - LeetCode

Question 143. Reorder List Solution 题目大意:给一个链表,将这个列表分成前后两部分,后半部分反转,再将这两分链表的节点交替连接成一个新的链表 思路 :先将链表分成前后两部分,将后部...

yysue
昨天
1
0
数据结构与算法1

第一个代码,描述一个被称为BankAccount的类,该类模拟了银行中的账户操作。程序建立了一个开户金额,显示金额,存款,取款并显示余额。 主要的知识点联系为类的含义,构造函数,公有和私有。...

沉迷于编程的小菜菜
昨天
1
0
从为什么别的队伍总比你的快说起

在机场候检排队的时候,大多数情况下,别的队伍都要比自己所在的队伍快,并常常懊悔当初怎么没去那个队。 其实,最快的队伍只能有一个,而排队之前并不知道那个队快。所以,如果有六个队伍你...

我是菜鸟我骄傲
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部