Go最全Google发布，玩转ShapeableImageView，告别第三方库，内容太过真实

本文链接：https://blog.csdn.net/2401_84924910/article/details/138760471

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上Go语言开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

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：

通过源码学知识

从前面应用可以发现，通过定义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 具有的属性：

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

绘制图形

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

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

使用方法也必将简单，将其作为参数传给Paint.setXfermode(Xfermode xfermode)方法，这样在用该画笔paint进行绘图时，Android就会使用传入的PorterDuffXfermode，如果不想再使用Xfermode，那么可以执行Paint.setXfermode(null)。