自定义形状的ImageView制作

最近公司让我做个头像的显示功能，这个头像有点但疼痛，形状竟然像个盾牌！呵呵哒？！各种曲线，贝塞尔线，Android能不能搞啊？果断去问度娘啊！一搜，卧槽，还不少呢！参考了一个github上的一个项目，结合自己的努力终于马马虎虎完成了。这里和我一样的小菜鸟分享一下经验。首先给大家说一下原理吧：利用Paint中的属性setXfermode设置图片相交模式，截取通过vector工具定义的矢量图形，得到我们想要的CustomImageView。自己总结的比较抽象，接下来我们一起写吧！

一、工具：Android Studio， Microsoft Expression Design。

大家可以在这里参考Github上的源码：

https://github.com/karthikraj-duraisamy/ShapesImage

这里有很多常见的图形的源码，很不错的资源。如果想自己设计图形，大家也要先看看这个项目。然后，请跟我来。。。

二、 用Microsoft Expression Design画出图形的轮廓

1.首先我们打开Expression Design软件并新建一个文件，高度和宽度可以自己设置，但是初学者最好和我设置一样的吧，便于学习，同时减少之后可能我没表达清楚给你带来的麻烦

2.Android的Vector是矢量图，我们首先导入我们想要截取图像的轮廓

3.选择贝塞尔线把它的轮廓勾勒出来，画图就不细讲啦，和coredraw和ps的方式差不多的，大家可以自己研究一下的。最终我们得到的图形是这样的（这个是我加了填充色的，便于大家看的清楚）。

好了提醒大家注意的地方到了，描完之后我们点击图形会自动显示出这个图形的最小外接矩形。我们将图形放大，使得它的高度和宽度与文档的高度和宽度重合！

4.导出图形的pathData信息数据（等一会儿别忘记路径）

5.之后我们用记事本打开导出的文件可以找到这么一段数据，这个就是图形的pathData数据，一会儿在Android Studio中我们要用到的：

6.接着打开我们的Android Studio，在res/drawable中新建一个cat.xml文件。仿照github源码中的写法。其中viewportHeight 和 viewportWidth与1.中的像素值保持一致。并且把图形的pathData数据设置进去，右边的 preView就可以看见了相应图形的轮廓，走到这步，你基本离成功不远了

（不知大家有没有遇到自定义imageView在android高版本下发生java.lang.IllegalArgumentException: Invalid pathData. Failure occurred at position 2 of path的错误。解决的方法是把pathdata中的F1去掉，如果不行应该就是其他的兼容问题了。希望能帮助到大家）

7.打开github项目的ShapeImage文件修改prepareDrawables()方法。这样ShapeImage就是我们定义的ImageView了，即CustomImageView！

private void prepareDrawables() {
    if (Build.VERSION.SDK_INT >= 21)
        mMaskDrawable = getResources().getDrawable(R.drawable.cat, null);
    else
        mMaskDrawable = getResources().getDrawable(R.drawable.cat);
    if (mMaskDrawable != null) {
        mMaskDrawable.setCallback(this);
    }
}

8.我们可以直接拿来用的。src大家可以自己设置，scaleType属性别忘了设置，不然图形就变得千奇百怪的！

<com.jerry.hometext.ShapesImage
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:scaleType="fitXY"

    android:src="@mipmap/caoyuan" />

9.我以为完事大吉了，后来公司要我加个轮廓线，我当时就懵逼了，我想了个尴尬的主意，写了两个ImageView重合起来，下面的ImageView宽高稍大一点，然后在父控件中居中，才形成这样一个效果。

这是个笨办法咯，希望大家有好的方法指点，互相交流，谢谢！