今天给大家带来的自定义控件是一个圆角,和圆形图片。
先说说为什么我要写这个功能
1.通过自定义圆角和圆形图片我可以学到自定义属性中的枚举
2.在这里我可以学到onDraw方法中图片的画法
好了废话不多说先上效果图,看看是不是你们需要的功能。
在这里我先所以下自定义属性中的枚举的用法
枚举的用法其实和其他类型的属性用法是一样的
在Values文件夹下创建attrs.xml这里我直接贴出代码,相信你看一眼就知道在xml中是怎么定义的
<declare-styleable name="CircleOrCardImageView">
<!--圆角大小-->
<attr name="borderRadius" format="dimension"/>
<!--枚举-->
<attr name="imageType">
<enum name="circle" value="1"/>
<enum name="round" value="2"/>
</attr>
</declare-styleable>
然后就是在代码中枚举是怎么获取的,也很简单,相信你看代码就会
int type =typedArray.getInt(R.styleable.CircleOrCardImageView_imageType,1);
自定义属性说完之后,让我们正式进入到我们自定义控件中
首先先说一下自定义圆形图片和圆角图片的实现思路,其实他的实现思路是非常简单的
就是我们先得到一个圆形图片(这里我以圆形图片为例,圆角图片会和圆形图片的做法是相同的),我们得到圆形图片之后再将圆形图片画出来.
一、得到圆形图片·(做法就是先画我们要设置的图片然后再画一个圆形背景,接着取他们相交的地方)
1.首先先将我们需要设置圆形或者圆角的图片绘画到画布上,这里我贴出绘画图片的代码
//得到我们想要设置的图片
Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();
//创建一个图片背景
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
//创建画布 画布背景是我们创建的背景
Canvas canvas = new Canvas(output);
Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
//花图片
canvas.drawBitmap(bitmap,rect,rect,mPaint);
第二步就是绘画一个圆形的背景,我也贴出代码
int x =Math.min(bitmap.getWidth(),bitmap.getHeight());
//画一个元取圆
canvas.drawCircle(x/2,x/2,x/2,mPaint);
最后就是去他们相交的地方代码
//设置两个图片的加差方式
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
这里把图片其他取值方式贴出来
1.PorterDuff.Mode.CLEAR
所绘制不会提交到画布上。
2.PorterDuff.Mode.SRC
显示上层绘制图片
3.PorterDuff.Mode.DST
显示下层绘制图片
4.PorterDuff.Mode.SRC_OVER
正常绘制显示,上下层绘制叠盖。
5.PorterDuff.Mode.DST_OVER
上下层都显示。下层居上显示。
6.PorterDuff.Mode.SRC_IN
取两层绘制交集。显示上层。
7.PorterDuff.Mode.DST_IN
取两层绘制交集。显示下层。
8.PorterDuff.Mode.SRC_OUT
取上层绘制非交集部分。
9.PorterDuff.Mode.DST_OUT
取下层绘制非交集部分。
10.PorterDuff.Mode.SRC_ATOP
取下层非交集部分与上层交集部分
11.PorterDuff.Mode.DST_ATOP
取上层非交集部分与下层交集部分
二、将我们得到的圆形图片画出来就可以了。
好了思路就是这样,接着我把我源码的地址分享出来
https://github.com/GitHubToLiao/CircleOrCardImage.git