2024年Android ShapeableImageView使用详解，告别shape、三方库，2024年最新阿里p7面试难度

文末

我总结了一些Android核心知识点，以及一些最新的大厂面试题、知识脑图和视频资料解析。

以后的路也希望我们能一起走下去。（谢谢大家一直以来的支持）

部分资料一览：

• 330页PDF Android学习核心笔记（内含8大板块）

• Android学习的系统对应视频

• Android进阶的系统对应学习资料

• Android BAT大厂面试题（有解析）

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

<com.google.android.material.imageview.ShapeableImageView

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_margin=“10dp”

android:padding=“2dp”

android:src=“@mipmap/ic_avatar”

app:shapeAppearance=“@style/SemicircleStyle”

app:strokeColor=“@color/red”

app:strokeWidth=“4dp” />

六边形

<com.google.android.material.imageview.ShapeableImageView

android:layout_width=“wrap_content”

android:layout_height=“50dp”

android:layout_margin=“10dp”

android:padding=“2dp”

android:scaleType=“centerCrop”

android:src=“@mipmap/ic_avatar”

app:shapeAppearance=“@style/HexagonStyle”

app:strokeColor=“@color/red”

app:strokeWidth=“4dp” />

author：yechaoa

属性

=============================================================

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

| 属性 | 描述 |

| — | — |

| strokeWidth | 描边宽度 |

| strokeColor | 描边颜色 |

| shapeAppearance | 外观样式 |

| shapeAppearanceOverlay | 同上，叠加层 |

扩展

=============================================================

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

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

shapeAppearance

Shape appearance overlay style reference for ShapeableImageView.

ShapeableImageView的形状外观覆盖样式参考。

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

直接看ShapeableImageView的次构造方法：

public class ShapeableImageView extends AppCompatImageView implements Shapeable {

…

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);

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

ShapeAppearanceModel

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

来看ShapeAppearanceModel部分源码：

public class ShapeAppearanceModel {

/** Builder to create instances of {@link ShapeAppearanceModel}s. */

public static final class Builder {

@NonNull

private CornerTreatment topLeftCorner = MaterialShapeUtils.createDefaultCornerTreatment();

@NonNull

private CornerTreatment topRightCorner = MaterialShapeUtils.createDefaultCornerTreatment();

@NonNull

private CornerTreatment bottomRightCorner = MaterialShapeUtils.createDefaultCornerTreatment();

@NonNull

private CornerTreatment bottomLeftCorner = MaterialShapeUtils.createDefaultCornerTreatment();

@NonNull private CornerSize topLeftCornerSize = new AbsoluteCornerSize(0);

@NonNull private CornerSize topRightCornerSize = new AbsoluteCornerSize(0);

@NonNull private CornerSize bottomRightCornerSize = new AbsoluteCornerSize(0);

@NonNull private CornerSize bottomLeftCornerSize = new AbsoluteCornerSize(0);

@NonNull private EdgeTreatment topEdge = MaterialShapeUtils.createDefaultEdgeTreatment();

@NonNull private EdgeTreatment rightEdge = MaterialShapeUtils.createDefaultEdgeTreatment();

@NonNull private EdgeTreatment bottomEdge = MaterialShapeUtils.createDefaultEdgeTreatment();

@NonNull private EdgeTreatment leftEdge = MaterialShapeUtils.createDefaultEdgeTreatment();

public Builder() {}

…

}

…

}

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

• MaterialShapeUtils.createDefaultCornerTreatment() 创建默认角的处理方式

• MaterialShapeUtils.createDefaultEdgeTreatment() 创建默认边的处理方式

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

比如这样：

// 代码设置 角和边

val shapeAppearanceModel2 = ShapeAppearanceModel.builder().apply {

setAllCorners(RoundedCornerTreatment())

setAllCornerSizes(50f)

setAllEdges(TriangleEdgeTreatment(50f, false))

}.build()

val drawable2 = MaterialShapeDrawable(shapeAppearanceModel2).apply {

setTint(ContextCompat.getColor(this@ShapeableImageViewActivity, R.color.colorPrimary))

paintStyle = Paint.Style.FILL_AND_STROKE

strokeWidth = 50f

strokeColor = ContextCompat.getColorStateList(this@ShapeableImageViewActivity, R.color.red)

}

mBinding.text2.setTextColor(Color.WHITE)

mBinding.text2.background = drawable2

再比如这样：

// 代码设置 聊天框效果

val shapeAppearanceModel3 = ShapeAppearanceModel.builder().apply {

setAllCorners(RoundedCornerTreatment())

setAllCornerSizes(20f)

setRightEdge(object : TriangleEdgeTreatment(20f, false) {

// center 位置 ， interpolation 角的大小

override fun getEdgePath(length: Float, center: Float, interpolation: Float, shapePath: ShapePath) {

super.getEdgePath(length, 35f, interpolation, shapePath)

}

})

}.build()

val drawable3 = MaterialShapeDrawable(shapeAppearanceModel3).apply {

setTint(ContextCompat.getColor(this@ShapeableImageViewActivity, R.color.colorPrimary))

paintStyle = Paint.Style.FILL

}

(mBinding.text3.parent as ViewGroup).clipChildren = false // 不限制子view在其范围内

mBinding.text3.setTextColor(Color.WHITE)

mBinding.text3.background = drawable3

MaterialShapeDrawable

源码（有删减）：

public class MaterialShapeDrawable extends Drawable implements TintAwareDrawable, Shapeable {

…

@Override

public void draw(@NonNull Canvas canvas) {

fillPaint.setColorFilter(tintFilter);

final int prevAlpha = fillPaint.getAlpha();

fillPaint.setAlpha(modulateAlpha(prevAlpha, drawableState.alpha));

strokePaint.setColorFilter(strokeTintFilter);

strokePaint.setStrokeWidth(drawableState.strokeWidth);

final int prevStrokeAlpha = strokePaint.getAlpha();

strokePaint.setAlpha(modulateAlpha(prevStrokeAlpha, drawableState.alpha));

if (pathDirty) {

calculateStrokePath();

calculatePath(getBoundsAsRectF(), path);

pathDirty = false;

}

maybeDrawCompatShadow(canvas);

if (hasFill()) {

drawFillShape(canvas);

}

if (hasStroke()) {

drawStrokeShape(canvas);

}

…

static final class MaterialShapeDrawableState extends ConstantState {

…

public MaterialShapeDrawableState(@NonNull MaterialShapeDrawableState orig) {

shapeAppearanceModel = orig.shapeAppearanceModel;

elevationOverlayProvider = orig.elevationOverlayProvider;

strokeWidth = orig.strokeWidth;

colorFilter = orig.colorFilter;

fillColor = orig.fillColor;

strokeColor = orig.strokeColor;

tintMode = orig.tintMode;

tintList = orig.tintList;

alpha = orig.alpha;

scale = orig.scale;

shadowCompatOffset = orig.shadowCompatOffset;

shadowCompatMode = orig.shadowCompatMode;

useTintColorForShadow = orig.useTintColorForShadow;

interpolation = orig.interpolation;

parentAbsoluteElevation = orig.parentAbsoluteElevation;

elevation = orig.elevation;

translationZ = orig.translationZ;

shadowCompatRadius = orig.shadowCompatRadius;

shadowCompatRotation = orig.shadowCompatRotation;

strokeTintList = orig.strokeTintList;

paintStyle = orig.paintStyle;

if (orig.padding != null) {

padding = new Rect(orig.padding);

}

}

…

}

…

}

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

说明

• ShapeAppearanceModel只能是实现Shapeable接口的View才可以设置，比如Chip、MaterialButtom等。

• 而MaterialShapeDrawable其实就是Drawable，是所有View都可以设置的。

描边问题

这里借github一张图

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

默认圆角问题

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

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

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

@style/ShapeAppearance.MaterialComponents.MediumComponent

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

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

4dp

默认4dp。

题外话

我们见过很多技术leader在面试的时候，遇到处于迷茫期的大龄程序员，比面试官年龄都大。这些人有一些共同特征：可能工作了7、8年，还是每天重复给业务部门写代码，工作内容的重复性比较高，没有什么技术含量的工作。问到这些人的职业规划时，他们也没有太多想法。

其实30岁到40岁是一个人职业发展的黄金阶段，一定要在业务范围内的扩张，技术广度和深度提升上有自己的计划，才有助于在职业发展上有持续的发展路径，而不至于停滞不前。

不断奔跑，你就知道学习的意义所在！

注意：我们之前因为秋招收集的二十套一二线互联网公司Android面试真题（含BAT、小米、华为、美团、滴滴）和我自己整理Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。）

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

hape_corner_size_medium_component">4dp

默认4dp。

题外话

我们见过很多技术leader在面试的时候，遇到处于迷茫期的大龄程序员，比面试官年龄都大。这些人有一些共同特征：可能工作了7、8年，还是每天重复给业务部门写代码，工作内容的重复性比较高，没有什么技术含量的工作。问到这些人的职业规划时，他们也没有太多想法。

其实30岁到40岁是一个人职业发展的黄金阶段，一定要在业务范围内的扩张，技术广度和深度提升上有自己的计划，才有助于在职业发展上有持续的发展路径，而不至于停滞不前。

不断奔跑，你就知道学习的意义所在！

注意：我们之前因为秋招收集的二十套一二线互联网公司Android面试真题（含BAT、小米、华为、美团、滴滴）和我自己整理Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。）

[外链图片转存中…(img-vn9ChRZ2-1714813346125)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！