Android ShapeableImageView使用详解，告别shape、三方库

Posted 2023-03-14

参考技术A 先来看一下ShapeableImageView是什么

由上图可以看到ShapeableImageView也没有什么神秘的，不过是ImageView的一个子类而已，但是从效果图来看，在不写shape、不引入三方库的情况下，还是挺容易实现预期效果的，而且扩展性良好。

关于xml属性，我也做了一个整理，属性不多，只有4个

前面为了整体的排版，埋了几个伏笔，下面来一一解答。

会涉及到源码，但是经过去繁从简，看起来也非常轻松的。

前面可以看到我们设置圆角其实是用的style，那为什么不直接用attrs呢，不是更加直观方便吗，带着疑问来看看源码是怎么处理的。

直接看ShapeableImageView的次构造方法：

常规操作，获取自定义属性。

关键的两行代码：

也就是说我们给shapeAppearance设置的style，并不是ShapeableImageView自己来处理的，而是由ShapeAppearanceModel来构建的，然后又交给MaterialShapeDrawable来绘制的。

这个类就厉害了，有点像Flutter中的Decoration，可以构建出花里胡哨的效果。

来看ShapeAppearanceModel部分源码：

可以看到有各种边和角的属性，这里注意两个点：

也就意味着，边和角除了默认，是可以自定义的，这就有极大的想象空间了，比如这样：

再比如这样：

源码（有删减）：

没什么特别的，你只需要知道除了可以设置描边之外，还可以设置背景、阴影等其他属性。

这里借github一张图

又是自定义view的常规操作，有一半画笔是在边界外面的，所以需要设置padding为strokeWidth的一半。

有细心的同学会发现啊，第一个常规的ShapeableImageView还是有一点圆角的，没错，属于默认的，跟踪一下源码来看一下：

第一个是颜色，很明显不是我们要找的，继续看shapeAppearanceMediumComponent

只是一个简单的属性，继续查找关联引用

又引用了一个style，继续看ShapeAppearance.MaterialComponents.MediumComponent这个style

哦豁，看到了熟悉的属性cornerSize，藏的还挺深，继续看看数值是多少

默认4dp。

那如果不想要这个圆角怎么办呢，可以学习源码仿写一个，不过上面也看到了，有点绕，不如直接写个style搞定：

然后引用

效果：

ok，到这里就差不多了，虽然还有很多相关知识点没有提及，但是也不少了，不如自己去尝试一番，慢慢消化。

https://github.com/yechaoa/MaterialDesign