专栏首页向治洪自定义圆角和园边的实现

自定义圆角和园边的实现

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

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

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

核心代码分析:

/** 
     * 根据原图和变长绘制圆形图片 
     *  
     * @param source 
     * @param min 
     * @return 
     */ 
 private Bitmap createCircleImage(Bitmap source, int min)  
    {  
 final Paint paint = new Paint();  
        paint.setAntiAlias(true);  
        Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888);  
 /** 
         * 产生一个同样大小的画布 
         */ 
        Canvas canvas = new Canvas(target);  
 /** 
         * 首先绘制圆形 
         */ 
        canvas.drawCircle(min / 2, min / 2, min / 2, paint);  
 /** 
         * 使用SRC_IN 
         */ 
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  
 /** 
         * 绘制图片 
         */ 
        canvas.drawBitmap(source, 0, 0, paint);  
 return target;  
    }  

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

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

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

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

canvas.translate(x, y);  
              canvas.drawBitmap(mDstB, 0, 0, paint);  
              paint.setXfermode(sModes[i]);  
              canvas.drawBitmap(mSrcB, 0, 0, paint);  
              paint.setXfermode(null);  
              canvas.restoreToCount(sc);  

可以看出先绘制的Dst,再绘制的Src,最后的展示是SrcIn那个图:显示的区域是二者交集,展示的是Src(后者)。和咱们前面结论一致。效果16种,大家可以自由组合展示不同的效果。

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

1、自定义属性:

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
 
 <attr name="borderRadius" format="dimension" /> 
 <attr name="type"> 
 <enum name="circle" value="0" /> 
 <enum name="round" value="1" /> 
 </attr> 
 <attr name="src" format="reference"></attr> 
 
 <declare-styleable name="CustomImageView"> 
 <attr name="borderRadius" /> 
 <attr name="type" /> 
 <attr name="src" /> 
 </declare-styleable> 
 
</resources> 

2、构造中获取自定义的属性:

/** 
 * TYPE_CIRCLE / TYPE_ROUND 
 */ 
private int type;  
private static final int TYPE_CIRCLE = 0;  
private static final int TYPE_ROUND = 1;  
 
/** 
 * 图片 
 */ 
private Bitmap mSrc;  
 
/** 
 * 圆角的大小 
 */ 
private int mRadius;  
 
/** 
 * 控件的宽度 
 */ 
private int mWidth;  
/** 
 * 控件的高度 
 */ 
private int mHeight;  
 
public CustomImageView(Context context, AttributeSet attrs)  
{  
 this(context, attrs, 0);  
}  
 
public CustomImageView(Context context)  
{  
 this(context, null);  
}  
 
/** 
 * 初始化一些自定义的参数 
 *  
 * @param context 
 * @param attrs 
 * @param defStyle 
 */ 
public CustomImageView(Context context, AttributeSet attrs, int defStyle)  
{  
 super(context, attrs, defStyle);  
 
    TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomImageView, defStyle, 0);  
 
 int n = a.getIndexCount();  
 for (int i = 0; i < n; i++)  
    {  
 int attr = a.getIndex(i);  
 switch (attr)  
        {  
 case R.styleable.CustomImageView_src:  
            mSrc = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));  
 break;  
 case R.styleable.CustomImageView_type:  
            type = a.getInt(attr, 0);// 默认为Circle 
 break;  
 case R.styleable.CustomImageView_borderRadius:  
            type = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10f,  
                    getResources().getDisplayMetrics()));// 默认为10DP 
 break;  
        }  
    }  
    a.recycle();  
}  

3、onMeasure中获取控件宽高:

/** 
     * 计算控件的高度和宽度 
     */ 
 @Override 
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  
    {  
 // super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
 
 /** 
         * 设置宽度 
         */ 
 int specMode = MeasureSpec.getMode(widthMeasureSpec);  
 int specSize = MeasureSpec.getSize(widthMeasureSpec);  
 
 if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate 
        {  
            mWidth = specSize;  
        } else 
        {  
 // 由图片决定的宽 
 int desireByImg = getPaddingLeft() + getPaddingRight() + mSrc.getWidth();  
 if (specMode == MeasureSpec.AT_MOST)// wrap_content 
            {  
                mWidth = Math.min(desireByImg, specSize);  
            }  
        }  
 
 /*** 
         * 设置高度 
         */ 
 
        specMode = MeasureSpec.getMode(heightMeasureSpec);  
        specSize = MeasureSpec.getSize(heightMeasureSpec);  
 if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate 
        {  
            mHeight = specSize;  
        } else 
        {  
 int desire = getPaddingTop() + getPaddingBottom() + mSrc.getHeight();  
 if (specMode == MeasureSpec.AT_MOST)// wrap_content 
            {  
                mHeight = Math.min(desire, specSize);  
            }  
        }  
        setMeasuredDimension(mWidth, mHeight);  
 
    }  

4、根据Type绘制:

/** 
     * 绘制 
     */ 
 @Override 
 protected void onDraw(Canvas canvas)  
    {  
 
 switch (type)  
        {  
 // 如果是TYPE_CIRCLE绘制圆形 
 case TYPE_CIRCLE:  
 
 int min = Math.min(mWidth, mHeight);  
 /** 
             * 长度如果不一致,按小的值进行压缩 
             */ 
            mSrc = Bitmap.createScaledBitmap(mSrc, min, min, false);  
 
            canvas.drawBitmap(createCircleImage(mSrc, min), 0, 0, null);  
 break;  
 case TYPE_ROUND:  
            canvas.drawBitmap(createRoundConerImage(mSrc), 0, 0, null);  
 break;  
 
        }  
 
    }  
 
 /** 
     * 根据原图和变长绘制圆形图片 
     *  
     * @param source 
     * @param min 
     * @return 
     */ 
 private Bitmap createCircleImage(Bitmap source, int min)  
    {  
 final Paint paint = new Paint();  
        paint.setAntiAlias(true);  
        Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888);  
 /** 
         * 产生一个同样大小的画布 
         */ 
        Canvas canvas = new Canvas(target);  
 /** 
         * 首先绘制圆形 
         */ 
        canvas.drawCircle(min / 2, min / 2, min / 2, paint);  
 /** 
         * 使用SRC_IN,参考上面的说明 
         */ 
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  
 /** 
         * 绘制图片 
         */ 
        canvas.drawBitmap(source, 0, 0, paint);  
 return target;  
    }  
 
 /** 
     * 根据原图添加圆角 
     *  
     * @param source 
     * @return 
     */ 
 private Bitmap createRoundConerImage(Bitmap source)  
    {  
 final Paint paint = new Paint();  
        paint.setAntiAlias(true);  
        Bitmap target = Bitmap.createBitmap(mWidth, mHeight, Config.ARGB_8888);  
        Canvas canvas = new Canvas(target);  
        RectF rect = new RectF(0, 0, source.getWidth(), source.getHeight());  
        canvas.drawRoundRect(rect, 50f, 50f, paint);  
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  
        canvas.drawBitmap(source, 0, 0, paint);  
 return target;  
    }  

源码点击下载

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • android bitmap的内存分配和优化

    首先Bitmap在Android虚拟机中的内存分配,在Google的网站上给出了下面的一段话  ? 大致的意思也就是说,在Android3.0之前,Bitmap...

    xiangzhihong
  • 对Bitmap的内存优化

    在Android应用里,最耗费内存的就是图片资源。而且在Android系统中,读取位图Bitmap时,分给虚拟机中的图片的堆栈大小只有8M,如果超出了,就会出...

    xiangzhihong
  • android自定义listview实现header悬浮框效果

    之前在使用iOS时,看到过一种分组的View,每一组都有一个Header,在上下滑动的时候,会有一个悬浮的Header,这种体验觉得很不错,请看下图: ? ...

    xiangzhihong
  • Express4.x API (一):application (译)

    写在前面 Express文档核心的四大部分app,request,response,router,基本上已经完成。简单的总结 通过调用express()返回得到...

    okaychen
  • 微信中通过页面(H5)直接打开本地app的解决方案

    简述 微信中通过页面直接打开app分为安卓版和IOS版,两个的实现方式是完全不同的。 安卓版实现:使用腾讯的应用宝,只要配置了“微下载”之后,打开链接腾讯会帮你...

    Java中文社群_老王
  • DDR3篇第四讲、DDR3操作时序与关键参数

    app_cmd和app_addr有效,且app_en拉高,app_rdy拉高,则该指令成功发送给DDR3控制器,若是在app_cmd、app_addr、app_...

    根究FPGA
  • LeetCode 122. Best Time to Buy and Sell Stock IISOLUTION

    很简单,既然可以进行任意次的交易,那么我们就将所有前一天比后一天价格低的都进行交易,因为只有这样,才会增加收益,所以我们进行一次遍历之后,就可以求出的最大收益值...

    desperate633
  • OVN实战三之打通真实网络提供NAT

    概述 上篇文章《OVN实战二之Overlay实现》介绍了OVN中逻辑交换机、逻辑路由器的用法,本章介绍如何让OVN中的虚拟机访问外部网络和面向外部网络提供服务(...

    SDNLAB
  • app中的webview通识篇(上)

    如果你还是第一次与app合作开发webview的页面,那么对于如何调试,可能有哪些问题可能是不够了解的。本文尝试性的根据自己的经验给大家一个入门级别的了解,如果...

    RobinsonZhang
  • 如果有机会重来,你还愿意做iOS开发嘛~

    作为从事 iOS 开发好几年的“编程狗”,我见识过 2013-2014 年移动端大热时的疯狂,见识过 2016 年一个 iOS 岗位对应千封简历的疯狂(培训班扰...

    iOSSir

扫码关注云+社区

领取腾讯云代金券