关闭

android带圆角textview和圆角的图片

305人阅读 评论(0) 收藏 举报
分类:

//直接设置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 实战 实现圆形、圆角图片


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:84721次
    • 积分:2006
    • 等级:
    • 排名:第19904名
    • 原创:49篇
    • 转载:110篇
    • 译文:56篇
    • 评论:8条
    最新评论