ShapeableImageView使用指南

前言

前段时间Google推送了文章 ， Android Material 组件 1.2.0 现已发布 里面就有ShapeableImageView，不用像以前再写shape.基本使用可以参考这一篇文章，Android ShapeableImageView使用 ，里面已经介绍了官方的基本用法。 但是还是不够的，还是在学习下代码方式来使用这个新控件。

绘制原理

ShapeableImageView的实现方式其实和我很久以前写的一篇任意切割的实现方式本质是一样的，但是做到了更好封装和解耦(Google牛逼！)。 ShapeableImageView继承自ImageView，在onDraw方法中，调用了ImageView的绘制方法后，通过使用Xfermode的画笔来绘制路径，达到蒙蔽遮盖的效果，不懂的朋友百度Xfermode学习下。至于外边框则就是普通的画笔来绘制路径了。

Kotlin代码使用

以下使用方式参照推荐的Android ShapeableImageView使用 的案例转化为KT代码的效果图及其实现

// 圆形图片 iv_1.shapeAppearanceModel = ShapeAppearanceModel.builder() .setAllCornerSizes(RelativeCornerSize(0.5f)) .build() // 切角图片 iv_2.shapeAppearanceModel = ShapeAppearanceModel.builder() .setAllCorners(CutCornerTreatment()) .setAllCornerSizes(dp2px(15f)) .build() // 菱形图片 iv_3.shapeAppearanceModel = ShapeAppearanceModel.builder() .setAllCorners(CutCornerTreatment()) .setAllCornerSizes(RelativeCornerSize(0.5f)) .build() // 左上角90度扇形图片 iv_4.shapeAppearanceModel = ShapeAppearanceModel.builder() .setTopLeftCorner(RoundedCornerTreatment()) .setTopLeftCornerSize(RelativeCornerSize(1f)) .build() // 火箭头图片 iv_5.shapeAppearanceModel = ShapeAppearanceModel.builder() .setTopLeftCorner(RoundedCornerTreatment()) .setTopRightCorner(RoundedCornerTreatment()) .setTopLeftCornerSize(RelativeCornerSize(0.7f)) .setTopRightCornerSize(RelativeCornerSize(0.7f)) .build() // 水滴 iv_6.shapeAppearanceModel = ShapeAppearanceModel.builder() .setAllCorners(RoundedCornerTreatment()) .setTopLeftCornerSize(RelativeCornerSize(0.7f)) .setTopRightCornerSize(RelativeCornerSize(0.7f)) .setBottomLeftCornerSize(dp2px(25f)) .setBottomRightCornerSize(dp2px(25f)) .build() // 叶子图片 iv_7.shapeAppearanceModel = ShapeAppearanceModel.builder() .setTopLeftCorner(RoundedCornerTreatment()) .setBottomRightCorner(RoundedCornerTreatment()) .setTopLeftCornerSize(RelativeCornerSize(0.5f)) .setBottomRightCornerSize(RelativeCornerSize(0.5f)) .build() // tip图片 iv_8.shapeAppearanceModel = ShapeAppearanceModel.builder() .setTopLeftCorner(RoundedCornerTreatment()) .setBottomLeftCorner(RoundedCornerTreatment()) .setTopRightCorner(CutCornerTreatment()) .setBottomRightCorner(CutCornerTreatment()) .setAllCornerSizes(RelativeCornerSize(0.5f)) .build() <!-- 圆形图片 --> <style name="circleImageStyle"> <item name="cornerFamily">rounded</item> <item name="cornerSize">50%</item> </style> <!-- 切角图片 --> <style name="cutImageStyle"> <item name="cornerFamily">cut</item> <item name="cornerSize">15dp</item> </style> <!-- 菱形图片 --> <style name="diamondImageStyle"> <item name="cornerFamily">cut</item> <item name="cornerSize">50%</item> </style> <!-- 左上角90度扇形图片 --> <style name="topLeftRoundImageStyle"> <item name="cornerFamilyTopLeft">rounded</item> <item name="cornerSizeTopLeft">100%</item> </style> <!-- 火箭头图片 --> <style name="rocketImageStyle"> <item name="cornerFamilyTopLeft">rounded</item> <item name="cornerFamilyTopRight">rounded</item> <item name="cornerSizeTopLeft">70%</item> <item name="cornerSizeTopRight">70%</item> </style> <!-- 水滴 --> <style name="waterImageStyle"> <item name="cornerFamilyBottomLeft">rounded</item> <item name="cornerFamilyBottomRight">rounded</item> <item name="cornerFamilyTopLeft">rounded</item> <item name="cornerFamilyTopRight">rounded</item> <item name="cornerSizeBottomLeft">25dp</item> <item name="cornerSizeBottomRight">25dp</item> <item name="cornerSizeTopLeft">70%</item> <item name="cornerSizeTopRight">70%</item> </style> <!-- 叶子图片 --> <style name="leafImageStyle"> <item name="cornerFamilyTopLeft">rounded</item> <item name="cornerFamilyBottomRight">rounded</item> <item name="cornerSizeTopLeft">50%</item> <item name="cornerSizeBottomRight">50%</item> </style> <!-- tip图片 --> <style name="tipImageStyle"> <item name="cornerFamilyTopLeft">rounded</item> <item name="cornerSizeTopLeft">50%</item> <item name="cornerFamilyBottomLeft">rounded</item> <item name="cornerSizeBottomLeft">50%</item> <item name="cornerFamilyTopRight">cut</item> <item name="cornerSizeTopRight">50%</item> <item name="cornerFamilyBottomRight">cut</item> <item name="cornerSizeBottomRight">50%</item> </style>

踩坑问题记录

在ViewPager中使用时出现黑边。 一般发生于给VP增加了切换动画的情况。在滑动时正常，结束滑动后就异常。给ViewPager设置硬件加速即可解决。盲猜ViewPager在使用滑动动画时主动设置硬件加速，在滑动结束后关闭了硬件加速。。。就导致了ShapeableImageView的绘制出现了异常。有空的小伙伴可以查看下源码，验证下，然后告诉我QAQ。 初步验证：当任意层级的父容器开启硬件加速，这个问题就能得到解决，这是不是说明硬件加速取决于最外层容器的设置？