Google发布，玩转ShapeableImageView，告别第三方库

于 2021-07-09 14:23:08 发布
阅读量314 收藏 1
点赞数
分类专栏： Android 文章标签： android 移动开发 安卓
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43317486/article/details/118605864
版权

前言

做过安卓开发的都知道，安卓的UI开发耗时耗力，实现不规则图片效果，如老生常谈的圆角、圆形图片，要么引入第三方控件，要么自定义ImageView，第三方控件不一定满足，而自定义ImageView对开发者有一定的要求且花时间。Google在去年发布的Android Material 组件 (MDC-Android) 1.2.0，提供了丰富的控件，有助于提高UI开发效率，今天的主角ShapeableImageView正式其中一员，类似的还有MaterialButton。

先来看下ShapeableImageView是什么

从类继承关系看出，ShapeableImageView只不过是ImageView的一个子类，但是可以轻松实现效果图中的各种样式。
xml属性
属性名 作用
shapeAppearance 形状外观样式，引用 style 样式
shapeAppearanceOverlay 外观叠加样式，引用 style 样式
strokeWidth 描边宽度
strokeColor 描边颜色
使用
引入material包
implementation ‘com.google.android.material:material:1.2.1’
常规使用
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image"
android:layout_width=“110dp”
android:layout_height=“110dp”
android:padding=“1dp”
android:src="@drawable/head"
/>

跟ImageView效果一样。
各种花俏样式

1、圆角图片

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/image1"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:padding="1dp"
        android:src="@drawable/head"
        app:shapeAppearance="@style/roundedCornerStyle"
        app:strokeColor="@android:color/holo_blue_bright"
        app:strokeWidth="2dp"/>

对应的style：

2、圆形图片

<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image2"
android:layout_width=“110dp”
android:layout_height=“110dp”
android:padding=“1dp”
android:src="@drawable/head"
app:shapeAppearance="@style/circleStyle"
app:strokeColor="@android:color/holo_blue_bright"
app:strokeWidth=“2dp”/>

对应的style：

3、切角图片

<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image3"
android:layout_width=“110dp”
android:layout_height=“110dp”
android:padding=“1dp”
android:src="@drawable/head"
app:shapeAppearance="@style/cutCornerStyle"
app:strokeColor="@android:color/holo_blue_bright"
app:strokeWidth=“2dp”/>

对应的style:

4、菱形图片

<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image4"
android:layout_width=“110dp”
android:layout_height=“110dp”
android:padding=“1dp”
android:src="@drawable/head"
app:shapeAppearance="@style/diamondStyle"
app:strokeColor="@android:color/holo_blue_bright"
app:strokeWidth=“2dp”/>

对应的style:

5、右上角圆角图片

<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image5"
android:layout_width=“110dp”
android:layout_height=“110dp”
android:padding=“1dp”
android:src="@drawable/head"
app:shapeAppearance="@style/topRightCornerStyle"
app:strokeColor="@android:color/holo_blue_bright"
app:strokeWidth=“2dp”/>

对应的style:

6、小鸡蛋图片

<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image6"
android:layout_width=“110dp”
android:layout_height=“110dp”
android:padding=“1dp”
android:src="@drawable/head"
app:shapeAppearance="@style/eggStyle"
app:strokeColor="@android:color/holo_blue_bright"
app:strokeWidth=“2dp”/>

对应的style：

7、组合弧度图片效果

<com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/image7"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:padding="1dp"
        android:src="@drawable/head"
        app:shapeAppearance="@style/comCornerStyle"
        app:strokeColor="@android:color/holo_blue_bright"
        app:strokeWidth="2dp"/>

对应的style:

8、 小 Tips

<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image8"
android:layout_width=“110dp”
android:layout_height=“50dp”
android:padding=“1dp”
android:src="@drawable/head"
app:shapeAppearance="@style/tipsCornerStyle"
app:strokeColor="@android:color/holo_blue_bright"
app:strokeWidth=“2dp”/>

对应的style：

9、扇形图片

<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image9"
android:layout_width=“110dp”
android:layout_height=“110dp”
android:padding=“1dp”
android:src="@drawable/head"
app:shapeAppearance="@style/fanStyle"
app:strokeColor="@android:color/holo_blue_bright"
app:strokeWidth=“2dp”/>

对应的style：

<style name="fanStyle">
    <item name="cornerFamilyBottomLeft">rounded</item>
    <item name="cornerFamilyBottomRight">rounded</item>
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyTopRight">rounded</item>
    <item name="cornerSizeBottomLeft">0dp</item>
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeTopLeft">0%</item>
    <item name="cornerSizeTopRight">100%</item>
</style>

通过源码学知识

从前面应用可以发现，通过定义ShapeableImageView的shapeAppearance属性style值，可以实现各种不同的样式，而style有哪些的属性，分别表示什么，定义了这些style实现这些样式效果的原理是什么，带着这些疑问阅读源码。
public ShapeableImageView(Context context, @Nullable AttributeSet attrs, int defStyle) {
super(wrap(context, attrs, defStyle, DEF_STYLE_RES), attrs, defStyle);
// Ensure we are using the correctly themed context rather than the context that was passed in.
context = getContext();

clearPaint = new Paint();
clearPaint.setAntiAlias(true);
clearPaint.setColor(Color.WHITE);
clearPaint.setXfermode(new PorterDuffXfermode(Mode.DST_OUT));
destination = new RectF();
maskRect = new RectF();
maskPath = new Path();
TypedArray attributes =
    context.obtainStyledAttributes(
        attrs, R.styleable.ShapeableImageView, defStyle, DEF_STYLE_RES);

strokeColor =
    MaterialResources.getColorStateList(
        context, attributes, R.styleable.ShapeableImageView_strokeColor);

strokeWidth = attributes.getDimensionPixelSize(R.styleable.ShapeableImageView_strokeWidth, 0);

borderPaint = new Paint();
borderPaint.setStyle(Style.STROKE);
borderPaint.setAntiAlias(true);
shapeAppearanceModel =
    ShapeAppearanceModel.builder(context, attrs, defStyle, DEF_STYLE_RES).build();
shadowDrawable = new MaterialShapeDrawable(shapeAppearanceModel);
if (VERSION.SDK_INT >= VERSION_CODES.LOLLIPOP) {
  setOutlineProvider(new OutlineProvider());
}

}

在构造方法中有两行核心代码：
shapeAppearanceModel =
ShapeAppearanceModel.builder(context, attrs, defStyle, DEF_STYLE_RES).build();
shadowDrawable = new MaterialShapeDrawable(shapeAppearanceModel);

可以看出，style的属性由ShapeAppearanceModel来管理，得到style属性后构造MaterialShapeDrawable对象，由MaterialShapeDrawable绘制形状。
设置边和角的属性

通过 R 文件可以查看当前 ShapeAppearanceModel 具有的属性：










  <!-- Corner family to be used in the ShapeAppearance. All corners default to this value -->
  <attr format="enum" name="cornerFamily">
    <enum name="rounded" value="0"/>
    <enum name="cut" value="1"/>
  </attr>
  <!-- Top left corner family to be used in the ShapeAppearance. -->
  <attr format="enum" name="cornerFamilyTopLeft">
    <enum name="rounded" value="0"/>
    <enum name="cut" value="1"/>
  </attr>
  <!-- Top right corner family to be used in the ShapeAppearance. -->
  <attr format="enum" name="cornerFamilyTopRight">
    <enum name="rounded" value="0"/>
    <enum name="cut" value="1"/>
  </attr>
  <!-- Bottom right corner family to be used in the ShapeAppearance. -->
  <attr format="enum" name="cornerFamilyBottomRight">
    <enum name="rounded" value="0"/>
    <enum name="cut" value="1"/>
  </attr>
  <!-- Bottom left corner family to be used in the ShapeAppearance. -->
  <attr format="enum" name="cornerFamilyBottomLeft">
    <enum name="rounded" value="0"/>
    <enum name="cut" value="1"/>
  </attr>
</declare-styleable>
  <declare-styleable name="ShapeableImageView">
  <attr name="strokeWidth"/>
  <attr name="strokeColor"/>

  <!-- Shape appearance style reference for ShapeableImageView. Attribute declaration is in the
       shape package. -->
  <attr name="shapeAppearance"/>
  <!-- Shape appearance overlay style reference for ShapeableImageView. To be used to augment
       attributes declared in the shapeAppearance. Attribute declaration is in the shape package.
       -->
  <attr name="shapeAppearanceOverlay"/>
</declare-styleable>

可以看出，通过ShapeAppearanceModel 可以定义各种边和角的属性。
绘制图形

自定义不规则图片的一般的做法是重写ImageView的onDraw方法，处理边角则使用\color{red}{PorterDuffXfermode}。何为PorterDuffXfermode？

类\color{red}{android.graphics.PorterDuffXfermode}继承自android.graphics.Xfermode。在用Android中的Canvas进行绘图时，可以通过使用PorterDuffXfermode将所绘制的图形的像素与Canvas中对应位置的像素按照一定规则进行混合，形成新的像素值，从而更新Canvas中最终的像素颜色值，这样会创建很多有趣的效果。

使用方法也必将简单，将其作为参数传给Paint.setXfermode(Xfermode xfermode)方法，这样在用该画笔paint进行绘图时，Android就会使用传入的PorterDuffXfermode，如果不想再使用Xfermode，那么可以执行Paint.setXfermode(null)。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//设置背景色
canvas.drawARGB(255, 139, 197, 186);

    int canvasWidth = canvas.getWidth();
    int r = canvasWidth / 3;
    //正常绘制黄色的圆形
    paint.setColor(0xFFFFCC44);
    canvas.drawCircle(r, r, r, paint);
    //使用CLEAR作为PorterDuffXfermode绘制蓝色的矩形
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
    paint.setColor(0xFF66AAFF);
    canvas.drawRect(r, r, r * 2.7f, r * 2.7f, paint);
    //最后将画笔去除Xfermode
    paint.setXfermode(null);
}

效果如下：

而可以实现的混合效果非常多，如图：

在ShapeableImageView的构造方法中可用看到一行：
clearPaint.setXfermode(new PorterDuffXfermode(Mode.DST_OUT));

可知ShapeableImageView的原理也是使用PorterDuffXfermode将图片和指定的图形混合得到想要的不规则图片。其核心代码如下：
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(maskPath, clearPaint);
drawStroke(canvas);
}
@Override
protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) {
super.onSizeChanged(width, height, oldWidth, oldHeight);
updateShapeMask(width, height);
}
private void updateShapeMask(int width, int height) {
destination.set(
getPaddingLeft(), getPaddingTop(), width - getPaddingRight(), height - getPaddingBottom());
pathProvider.calculatePath(shapeAppearanceModel, 1f /interpolation/, destination, path);
// Remove path from rect to draw with clear paint.
maskPath.rewind();
maskPath.addPath(path);
// Do not include padding to clip the background too.
maskRect.set(0, 0, width, height);
maskPath.addRect(maskRect, Direction.CCW);
}

代码比较容易看懂，从onDraw看到绘制的流程：
1、先调用父类ImageView的onDraw绘制基本图片；
2、生成不规则的图片，clearPaint设置了PorterDuffXfermode(Mode.DST_OUT)，即去掉src图片重叠部分，仅保留剩下部分，而maskPath正是由不规则图形与矩形图片边框组成；
3、绘制边界。
总结

上面只是分析了ShapeableImageView的核心代码，很多细节没有展开，ShapeableImageView提供了丰富的属性，通过改变边角的值的组合可以实现各种各样的图形，使用起来是非常方便的，值得推荐。
参考

ShapeableImageView官方文档
Android中Canvas绘图之PorterDuffXfermode使用及工作原理详解:
https://blog.youkuaiyun.com/iispring/article/details/50472485

博客
Androd color
03-09 170
Android color
博客
Android权限明细
01-12 297
Android权限明细
博客
WifiAdmin wifi管理工具类
12-08 331
WiFi管理工具类（状态，列表，打开，关闭）
博客
Android 设置系统亮度
11-04 655
Android 设置系统亮度
博客
Android之调用系统默认声音、设置振动
11-04 545
Android之调用系统默认声音、设置振动
博客
android蓝牙开启和关闭
11-04 2895
android蓝牙开启和关闭
博客
Android 动态禁用和开启系统屏幕旋转
11-04 978
Android 动态禁用和开启系统屏幕旋转
博客
verifyStoragePermissions
09-06 226
verifyStoragePermissions
博客
Android获取IP MAC 地址
08-16 371
Android获取IP MAC 地址
博客
Android 获取mac地址
08-16 757
Android 获取mac地址
博客
自定义悬浮拖动按钮
08-15 171
自定义悬浮拖动按钮
博客
“Please make sure you have the correct access rights and the repository exists.
08-04 204
Please make sure you have the correct access rights and the repository exists
博客
Android获取系统电池信息
07-19 693
获取电池信息（电量，电压，状态，品牌）
博客
android 获取本地图片、视频
07-10 1553
android 图片 视频 路径
博客
Android 动态申请文件读写权限
07-09 3419
android动态获取权限
博客
CLEARTEXT communication to host not permitted by network
07-04 171
okhttp,retrofit
博客
uiautomatorviewer 双击闪退问题
04-02 3636
1.检查环境变量配置2.检查jdk的版本是否兼容3.在cmd命令行中运行uiautomaterviewer工具，可以查看报错解决方法：swt.jar包问题，修改uiautomatorviewer.batrem set swt_path=%ANDROID_SWT%set swt_path=D:\software\androidsdk\tools\lib\x86_64修改之后就可以启动uiautomatorviewer了...
博客
Android adb 常用命令
03-31 380
adb的全称为Android Debug Bridge，就是起到调试桥的作用。借助adb工具，我们可以管理设备或手机模拟器的状态。还可以进行很多手机操作，如安装软件、系统升级、运行shell命令等等。其实简而言说，adb就是连接Android手机与PC端的桥梁，可以让用户在电脑上对手机进行全面的操作。获取序列号：adb get-serialno查看连接计算机的设备：adb devices重启机器：adb reboot重启到bootloader，即刷机模式：adb reboot bootl.
博客
JDK安装，JAVA环境变量配置
02-28 286
学java编程之前先把编程工具配置好，为后续编程练习提供保障。一、下载jdk8的安装包点击下载地址进行下载二、安装jdk打开jdk的安装包，接下去跟着提示一直点下一步就行了。这里可以选择安装位置，建议按照默认地址来就行了不要更改。跟上面一样以默认地址安装就行。接下来等着它安装完成就行了。在安装目录看到jdk和jre的文件夹就证明安装成功了。三、环境变量的配置右击我的电脑->属性->高级系统设置->环境变量在配置环境变量这里，一共需要配置三个。1、在系统变量区域
博客
Android版本强制更新
08-05 2475
目前的项目之中基本上都会存在版本更新的功能，分为强制更新和推荐更新，其实功能点都是一样的，推荐更新只是增加一个按钮让更新的弹框隐藏掉而已，这里仅记录强制更新的功能首先需要跟接口约定，需要判断是否弹出更新弹框val isUpdate = VersionUtils.compareVersions("服务端新的版本号","本地版本号")if (result.isIsNew && isUpdate) { //检查更新 val checkVersionUtils = Chec
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值