android带圆角textview和圆角的图片

翻译 2015年07月07日 10:43:45

//直接设置backgroud为该xml即可

===========================================

<?xml version="1.0" encoding="UTF-8"?>  

<!-- 顶部带圆角 白色背景 灰色边框 无下边框 长方体 -->  
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
    <item>  
        <shape>  
            <solid android:color="#FFFFFF" />   //背景
            <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"     //边角度的大小
                android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp" />  
            <stroke android:width="1dp" android:color="#BEBEBE" />       //边缘颜色和宽度
        </shape>  
    </item>  
    <item android:top="1dp" android:left="1dp" android:right="1dp">  
        <shape>  
            <solid android:color="#FFFFFF" />  
            <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"  
                android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp" />  
            <stroke android:width="1dp" android:color="#ffffffff" />  
        </shape>  
    </item>

</layer-list>  

==============================

<?xml version="1.0" encoding="UTF-8"?>  
<!-- 不带圆角 白色背景 灰色边框 无下边框 长方体 -->  
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
    <item>  
        <shape>  
            <solid android:color="#FFFFFF" />  
            <stroke  
                android:width="1dp"  
                android:color="#BEBEBE" />  
        </shape>  
    </item>  
    <item  
        android:left="1dp"  
        android:right="1dp"  
        android:top="1dp">  
        <shape>  
            <solid android:color="#FFFFFF" />  
            <stroke  
                android:width="1dp"  
                android:color="#ffffffff" />  
        </shape>  
    </item>  
</layer-list>  

==========================================自定义的圆角图片===============================================

本来想在网上找个圆角的例子看一看,不尽人意啊,基本都是官方的Demo的那张原理图,稍后会贴出。于是自己自定义了个View,实现图片的圆角以及圆形效果。效果图:


第一个是原图,第二个是圆形效果,第三第四设置了不同的圆角大小。

准备改变一个博客的风格,首先给大家讲一下原理,让大家明白了,然后再贴代码,不然可以直接看那么长的代码也比较痛苦,核心代码其实就那么几行:

核心代码分析:

[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. /** 
  2.      * 根据原图和变长绘制圆形图片 
  3.      *  
  4.      * @param source 
  5.      * @param min 
  6.      * @return 
  7.      */  
  8.     private Bitmap createCircleImage(Bitmap source, int min)  
  9.     {  
  10.         final Paint paint = new Paint();  
  11.         paint.setAntiAlias(true);  
  12.         Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888);  
  13.         /** 
  14.          * 产生一个同样大小的画布 
  15.          */  
  16.         Canvas canvas = new Canvas(target);  
  17.         /** 
  18.          * 首先绘制圆形 
  19.          */  
  20.         canvas.drawCircle(min / 2, min / 2, min / 2, paint);  
  21.         /** 
  22.          * 使用SRC_IN 
  23.          */  
  24.         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  
  25.         /** 
  26.          * 绘制图片 
  27.          */  
  28.         canvas.drawBitmap(source, 00, paint);  
  29.         return target;  
  30.     }  

其实主要靠:paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));这行代码,为什么呢,我给大家解释下,SRC_IN这种模式,两个绘制的效果叠加后取交集展现后图,怎么说呢,咱们第一个绘制的是个圆形,第二个绘制的是个Bitmap,于是交集为圆形,展现的是BItmap,就实现了圆形图片效果。圆角,其实就是先绘制圆角矩形,是不是很简单,以后别人再说实现圆角,你就把这一行代码给他就行了。

从Android的示例中,给大家证明一下:

下面有一张PorterDuff.Mode的16中效果图,咱们的只是其一:


源码咱们只关心谁先谁后绘制的:

[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. canvas.translate(x, y);  
  2.               canvas.drawBitmap(mDstB, 00, paint);  
  3.               paint.setXfermode(sModes[i]);  
  4.               canvas.drawBitmap(mSrcB, 00, paint);  
  5.               paint.setXfermode(null);  
  6.               canvas.restoreToCount(sc);  
可以看出先绘制的Dst,再绘制的Src,最后的展示是SrcIn那个图:显示的区域是二者交集,展示的是Src(后者)。和咱们前面结论一致。效果16种,大家可以自由组合展示不同的效果。


好了,原理和核心代码解释完成。下面开始写自定义View。

1、自定义属性:

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.   
  4.     <attr name="borderRadius" format="dimension" />  
  5.     <attr name="type">  
  6.         <enum name="circle" value="0" />  
  7.         <enum name="round" value="1" />  
  8.     </attr>  
  9.     <attr name="src" format="reference"></attr>  
  10.   
  11.     <declare-styleable name="CustomImageView">  
  12.         <attr name="borderRadius" />  
  13.         <attr name="type" />  
  14.         <attr name="src" />  
  15.     </declare-styleable>  
  16.   
  17. </resources>  

2、构造中获取自定义的属性:
[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. /** 
  2.  * TYPE_CIRCLE / TYPE_ROUND 
  3.  */  
  4. private int type;  
  5. private static final int TYPE_CIRCLE = 0;  
  6. private static final int TYPE_ROUND = 1;  
  7.   
  8. /** 
  9.  * 图片 
  10.  */  
  11. private Bitmap mSrc;  
  12.   
  13. /** 
  14.  * 圆角的大小 
  15.  */  
  16. private int mRadius;  
  17.   
  18. /** 
  19.  * 控件的宽度 
  20.  */  
  21. private int mWidth;  
  22. /** 
  23.  * 控件的高度 
  24.  */  
  25. private int mHeight;  
  26.   
  27. public CustomImageView(Context context, AttributeSet attrs)  
  28. {  
  29.     this(context, attrs, 0);  
  30. }  
  31.   
  32. public CustomImageView(Context context)  
  33. {  
  34.     this(context, null);  
  35. }  
  36.   
  37. /** 
  38.  * 初始化一些自定义的参数 
  39.  *  
  40.  * @param context 
  41.  * @param attrs 
  42.  * @param defStyle 
  43.  */  
  44. public CustomImageView(Context context, AttributeSet attrs, int defStyle)  
  45. {  
  46.     super(context, attrs, defStyle);  
  47.   
  48.     TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomImageView, defStyle, 0);  
  49.   
  50.     int n = a.getIndexCount();  
  51.     for (int i = 0; i < n; i++)  
  52.     {  
  53.         int attr = a.getIndex(i);  
  54.         switch (attr)  
  55.         {  
  56.         case R.styleable.CustomImageView_src:  
  57.             mSrc = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));  
  58.             break;  
  59.         case R.styleable.CustomImageView_type:  
  60.             type = a.getInt(attr, 0);// 默认为Circle  
  61.             break;  
  62.         case R.styleable.CustomImageView_borderRadius:  
  63.             mRadius= a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10f,  
  64.                     getResources().getDisplayMetrics()));// 默认为10DP  
  65.             break;  
  66.         }  
  67.     }  
  68.     a.recycle();  
  69. }  

3、onMeasure中获取控件宽高:

[java] view plaincopy
  1. /** 
  2.      * 计算控件的高度和宽度 
  3.      */  
  4.     @Override  
  5.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  
  6.     {  
  7.         // super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
  8.         /** 
  9.          * 设置宽度 
  10.          */  
  11.         int specMode = MeasureSpec.getMode(widthMeasureSpec);  
  12.         int specSize = MeasureSpec.getSize(widthMeasureSpec);  
  13.   
  14.         if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate  
  15.         {  
  16.             mWidth = specSize;  
  17.         } else  
  18.         {  
  19.             // 由图片决定的宽  
  20.             int desireByImg = getPaddingLeft() + getPaddingRight()  
  21.                     + mSrc.getWidth();  
  22.             if (specMode == MeasureSpec.AT_MOST)// wrap_content  
  23.             {  
  24.                 mWidth = Math.min(desireByImg, specSize);  
  25.             } else  
  26.   
  27.                 mWidth = desireByImg;  
  28.         }  
  29.   
  30.         /*** 
  31.          * 设置高度 
  32.          */  
  33.   
  34.         specMode = MeasureSpec.getMode(heightMeasureSpec);  
  35.         specSize = MeasureSpec.getSize(heightMeasureSpec);  
  36.         if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate  
  37.         {  
  38.             mHeight = specSize;  
  39.         } else  
  40.         {  
  41.             int desire = getPaddingTop() + getPaddingBottom()  
  42.                     + mSrc.getHeight();  
  43.   
  44.             if (specMode == MeasureSpec.AT_MOST)// wrap_content  
  45.             {  
  46.                 mHeight = Math.min(desire, specSize);  
  47.             } else  
  48.                 mHeight = desire;  
  49.         }  
  50.   
  51.         setMeasuredDimension(mWidth, mHeight);  
  52.   
  53.     }  



4、根据Type绘制:

[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. /** 
  2.      * 绘制 
  3.      */  
  4.     @Override  
  5.     protected void onDraw(Canvas canvas)  
  6.     {  
  7.   
  8.         switch (type)  
  9.         {  
  10.         // 如果是TYPE_CIRCLE绘制圆形  
  11.         case TYPE_CIRCLE:  
  12.   
  13.             int min = Math.min(mWidth, mHeight);  
  14.             /** 
  15.              * 长度如果不一致,按小的值进行压缩 
  16.              */  
  17.             mSrc = Bitmap.createScaledBitmap(mSrc, min, min, false);  
  18.   
  19.             canvas.drawBitmap(createCircleImage(mSrc, min), 00null);  
  20.             break;  
  21.         case TYPE_ROUND:  
  22.             canvas.drawBitmap(createRoundConerImage(mSrc), 00null);  
  23.             break;  
  24.   
  25.         }  
  26.   
  27.     }  
  28.   
  29.     /** 
  30.      * 根据原图和变长绘制圆形图片 
  31.      *  
  32.      * @param source 
  33.      * @param min 
  34.      * @return 
  35.      */  
  36.     private Bitmap createCircleImage(Bitmap source, int min)  
  37.     {  
  38.         final Paint paint = new Paint();  
  39.         paint.setAntiAlias(true);  
  40.         Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888);  
  41.         /** 
  42.          * 产生一个同样大小的画布 
  43.          */  
  44.         Canvas canvas = new Canvas(target);  
  45.         /** 
  46.          * 首先绘制圆形 
  47.          */  
  48.         canvas.drawCircle(min / 2, min / 2, min / 2, paint);  
  49.         /** 
  50.          * 使用SRC_IN,参考上面的说明 
  51.          */  
  52.         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  
  53.         /** 
  54.          * 绘制图片 
  55.          */  
  56.         canvas.drawBitmap(source, 00, paint);  
  57.         return target;  
  58.     }  
  59.   
  60.     /** 
  61.      * 根据原图添加圆角 
  62.      *  
  63.      * @param source 
  64.      * @return 
  65.      */  
  66.     private Bitmap createRoundConerImage(Bitmap source)  
  67.     {  
  68.         final Paint paint = new Paint();  
  69.         paint.setAntiAlias(true);  
  70.         Bitmap target = Bitmap.createBitmap(mWidth, mHeight, Config.ARGB_8888);  
  71.         Canvas canvas = new Canvas(target);  
  72.         RectF rect = new RectF(00, source.getWidth(), source.getHeight());  
  73.         canvas.drawRoundRect(rect, mRadius, mRadius, paint);  
  74.         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  
  75.         canvas.drawBitmap(source, 00, paint);  
  76.         return target;  
  77.     }  

好了,我就不解析代码了,自定义View这是第五篇了,,,,写得好恶心,,,,


各位赞一个或者留个言,算是对我的支持~


源码点击下载



=========================================简单修复了一下,在ScrollView以及AdapterView中的headview的显示异常的bug============

修复后代码下载:

源码点击下载


相关博文,同时也推荐使用:

Android Xfermode 实战 实现圆形、圆角图片

Android BitmapShader 实战 实现圆形、圆角图片


相关文章推荐

[Android小技巧]如何不用图片创建一个带圆角的按钮

其实这种文章百度里随便抓都是,我为什么还要再写一篇呢?重复别人的劳动虽然可以减少很多的时间,可是如何转变为自己的手段,除了快速copy外,那就是和我这样记录下来,有空回首看看,其实就真的变成自己的东西...

【Android开发】范例1-实现带描边的圆角图片

利用学过的BitmapShader渲染类,我们来实现一个带描边的圆角图片。 具体实现: 用来显示自定义的绘图类的布局文件 res/layout/main.xml: ...

android 生成圆角和带倒影图片

class RoundImageView extends View {   private Bitmap bitmap;   int bitmapWidth;   int bitmapHeigh...

android 圆角边框、渐变背景的TextView

加一个红色的边框: textView的XML:
  • howlaa
  • howlaa
  • 2014年10月17日 11:55
  • 6563

Android Shape Drawable Resources TextView渐变 背景色 圆角

转自http://blog.csdn.net/luckkof 正文   本文主要介绍Drawable Resources的一种,Shape Drawable Resources的使用。其...

android自定义view控件之一圆角背景TextView

继昨天写了一个同事一个TextView可以包括两种不同的风格字体,而保证可以换行的情况下的自定义View。今天的正文还是写一个自定义的TextView。 一惯风格首先亮出实现效果,这最是直接不过的了。...
  • zhuod
  • zhuod
  • 2016年09月04日 14:57
  • 2386

android TextView 的圆角背景

实现方法: 定义类继承自Shape画成圆角矩形 public class MyShape extends Shape{         @Override         public...

android 圆角边框、渐变背景的TextView

加一个红色的边框: textView的XML: LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android带圆角textview和圆角的图片
举报原因:
原因补充:

(最多只允许输入30个字)