天天看点

【Android】Android自定义带board的圆角控件介绍遮罩自定义Attribute资源下载

圆角控件常用于头像,按钮,图标等,用途十分广泛,而且常常配合board使用。

【Android】Android自定义带board的圆角控件介绍遮罩自定义Attribute资源下载

在ios中,uiview的calayer层已经提供了圆角和board的方法,所以圆角控件的制作非常简单,只需要类似以下简单代码即可实现:

而在android中,系统并没有提供这么直接的方式,所以想要实现同样的效果需要费点心了。本文将会介绍一种在android中实现带board属性的圆角控件的方法。该方法定义了一个roundimageview重写了imageview的ondraw方法,并加入了一些自定义的属性,最后实现以上同样效果的代码非常简洁:

下面就介绍如何实现这样一个roundimageview

在android中,遮罩功能非常强大,可以用于生成两张图片相互截取的结果。

【Android】Android自定义带board的圆角控件介绍遮罩自定义Attribute资源下载

在roundimageview中,遮罩用于清除控件外圈的内容,从而获取到圆角的效果。这里的思路是先获取到控件本身所绘制的图片,之后获取圆角矩形遮罩图片,然后两个图片采用dst_in遮罩模式来截取中间的遮罩效果,即:

【Android】Android自定义带board的圆角控件介绍遮罩自定义Attribute资源下载

代码实现如下:

在获取到遮罩处理的图片之后,为其添加board将会变得容易,也就是在外圈绘制出一个带有宽度的圆即可。

【Android】Android自定义带board的圆角控件介绍遮罩自定义Attribute资源下载

整个roundimageview完整的代码如下:

可能有人要问,圆角弯曲度和board的参数是如何传递到roundimageview里的。实际上,这里采用了自定义attribute的方式,该操作需要到res/values 目录下创建 attr.xml 文件,在里面写上自定义的参数名称以及类型:

有了这个,就可以在roundimageview的构造方法里面,获取到自定义attri的值了

在layout里使用的时候,需要在layout的xml开头里面申请自定义的参数即可

最后,在layout里面调用roundimageview的代码非常简洁:

效果如下:

【Android】Android自定义带board的圆角控件介绍遮罩自定义Attribute资源下载

<a target="_blank" href="https://github.com/obobear/roundimageview">roundimageview</a>