效果
先来看一下ShapeableImageView是什么
由上图可以看到ShapeableImageView也没有什么神秘的，不过是ImageView的一个子类而已，但是从效果图来看，在不写shape、不引入三方库的情况下，还是挺容易实现预期效果的，而且扩展性良好。
implementation'com.google.android.material:material:1.2.1'
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:src="@mipmap/ic_avatar"/>
和ImageView正常使用没有区别
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:src="@mipmap/ic_avatar"
app:shapeAppearance="@style/RoundedStyle"/>
<!--ShapeableImageView 圆角-->
rounded
10dp
没有直接设置圆角的属性，需要用到app:shapeAppearance，后面会说
cornerFamily 角的处理方式，rounded圆角，cut裁剪
cornerSize 圆角大小
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:src="@mipmap/ic_avatar"
app:shapeAppearance="@style/CircleStyle"/>
<!--ShapeableImageView 圆 -->
rounded
50%
圆角的大小可以用百分比，也可以自己计算，比如宽高100dp，圆角50dp
<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/CircleStyle"
app:strokeColor="@color/red"
app:strokeWidth="4dp"/>
app:strokeColor 描边颜色
app:strokeWidth 描边宽度
注意这里padding的数值是描边宽度的一半，后面会说
<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/CutStyle"
app:strokeColor="@color/red"
app:strokeWidth="4dp"/>
<!--ShapeableImageView 切角 -->
cut
10dp
cornerFamily：cut 处理模式变为裁剪
<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/RhombusStyle"
app:strokeColor="@color/red"
app:strokeWidth="4dp"/>
<!--ShapeableImageView 菱形 -->
cut
50%
同样，裁剪模式下圆角大小也可以计算
<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/LeafStyle"
app:strokeColor="@color/red"
app:strokeWidth="4dp"/>
<!--ShapeableImageView 叶子 -->
rounded
50%
50%
cornerSizeTopLeft 左上圆角
cornerSizeBottomRight 右下圆角
以此类推，左上、左下、右上、右下等
<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"/>
<!--ShapeableImageView 半圆 -->
rounded
50%
50%
<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"/>
<!--ShapeableImageView 六边形 -->
cut
50%
50%
50%
50%
author：yechaoa
属性
关于xml属性，我也做了一个整理，属性不多，只有4个
属性 描述
strokeWidth 描边宽度
strokeColor 描边颜色
shapeAppearance 外观样式
shapeAppearanceOverlay 同上，叠加层
扩展
前面为了整体的排版，埋了几个伏笔，下面来一一解答。
会涉及到源码，但是经过去繁从简，看起来也非常轻松的。
shapeAppearance
Shape appearance overlay style reference for ShapeableImageView.
ShapeableImageView的形状外观覆盖样式参考。
前面可以看到我们设置圆角其实是用的style，那为什么不直接用attrs呢，不是更加直观方便吗，带着疑问来看看源码是怎么处理的。
直接看ShapeableImageView的次构造方法：
publicclassShapeableImageViewextendsAppCompatImageViewimplementsShapeable{
...
publicShapeableImageView(Contextcontext,@NullableAttributeSetattrs, 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 =newPaint();
clearPaint.setAntiAlias(true);
clearPaint.setColor(Color.WHITE);
clearPaint.setXfermode(newPorterDuffXfermode(Mode.DST_OUT));
destination =newRectF();
maskRect =newRectF();
maskPath =newPath();
TypedArrayattributes =
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 =newPaint();
borderPaint.setStyle(Style.STROKE);
borderPaint.setAntiAlias(true);
shapeAppearanceModel =
ShapeAppearanceModel.builder(context, attrs, defStyle,DEF_STYLE_RES).build();
shadowDrawable =newMaterialShapeDrawable(shapeAppearanceModel);
if(VERSION.SDK_INT>=VERSION_CODES.LOLLIPOP) {
setOutlineProvider(newOutlineProvider());
}
}
}
常规操作，获取自定义属性。
关键的两行代码：
shapeAppearanceModel =ShapeAppearanceModel.builder(context, attrs, defStyle,DEF_STYLE_RES).build();
shadowDrawable =newMaterialShapeDrawable(shapeAppearanceModel);
也就是说我们给shapeAppearance设置的style，并不是ShapeableImageView自己来处理的，而是由ShapeAppearanceModel来构建的，然后又交给MaterialShapeDrawable来绘制的。
这个类就厉害了，有点像Flutter中的Decoration，可以构建出花里胡哨的效果。
来看ShapeAppearanceModel部分源码：
publicclassShapeAppearanceModel{
/** Builder to create instances of {@linkShapeAppearanceModel}s. */
publicstaticfinalclassBuilder{
@NonNull
privateCornerTreatmenttopLeftCorner=MaterialShapeUtils.createDefaultCornerTreatment();
@NonNull
privateCornerTreatmenttopRightCorner=MaterialShapeUtils.createDefaultCornerTreatment();
@NonNull
privateCornerTreatmentbottomRightCorner=MaterialShapeUtils.createDefaultCornerTreatment();
@NonNull
privateCornerTreatmentbottomLeftCorner=MaterialShapeUtils.createDefaultCornerTreatment();
@NonNullprivateCornerSizetopLeftCornerSize=newAbsoluteCornerSize(0);
@NonNullprivateCornerSizetopRightCornerSize=newAbsoluteCornerSize(0);
@NonNullprivateCornerSizebottomRightCornerSize=newAbsoluteCornerSize(0);
@NonNullprivateCornerSizebottomLeftCornerSize=newAbsoluteCornerSize(0);
@NonNullprivateEdgeTreatmenttopEdge=MaterialShapeUtils.createDefaultEdgeTreatment();
@NonNullprivateEdgeTreatmentrightEdge=MaterialShapeUtils.createDefaultEdgeTreatment();
@NonNullprivateEdgeTreatmentbottomEdge=MaterialShapeUtils.createDefaultEdgeTreatment();
@NonNullprivateEdgeTreatmentleftEdge=MaterialShapeUtils.createDefaultEdgeTreatment();
publicBuilder(){}
...
}
...
}
可以看到有各种边和角的属性，这里注意两个点：
MaterialShapeUtils.createDefaultCornerTreatment() 创建默认角的处理方式
MaterialShapeUtils.createDefaultEdgeTreatment() 创建默认边的处理方式
也就意味着，边和角除了默认，是可以自定义的，这就有极大的想象空间了，
比如这样：
// 代码设置 角和边
valshapeAppearanceModel2 = ShapeAppearanceModel.builder().apply {
setAllCorners(RoundedCornerTreatment())
setAllCornerSizes(50f)
setAllEdges(TriangleEdgeTreatment(50f,false))
}.build()
valdrawable2 = 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
再比如这样：
// 代码设置 聊天框效果
valshapeAppearanceModel3 = ShapeAppearanceModel.builder().apply {
setAllCorners(RoundedCornerTreatment())
setAllCornerSizes(20f)
setRightEdge(object: TriangleEdgeTreatment(20f,false) {
// center 位置 ， interpolation 角的大小
overridefungetEdgePath(length:Float, center:Float, interpolation:Float, shapePath:ShapePath){
super.getEdgePath(length,35f, interpolation, shapePath)
}
})
}.build()
valdrawable3 = MaterialShapeDrawable(shapeAppearanceModel3).apply {
setTint(ContextCompat.getColor(this@ShapeableImageViewActivity, R.color.colorPrimary))
paintStyle = Paint.Style.FILL
}
(mBinding.text3.parentasViewGroup).clipChildren =false// 不限制子view在其范围内
mBinding.text3.setTextColor(Color.WHITE)
mBinding.text3.background = drawable3
源码（有删减）：
publicclassMaterialShapeDrawableextendsDrawableimplementsTintAwareDrawable,Shapeable{
...
@Override
public void draw(@NonNullCanvascanvas) {
fillPaint.setColorFilter(tintFilter);
finalint prevAlpha = fillPaint.getAlpha();
fillPaint.setAlpha(modulateAlpha(prevAlpha, drawableState.alpha));
strokePaint.setColorFilter(strokeTintFilter);
strokePaint.setStrokeWidth(drawableState.strokeWidth);
finalint 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);
}
...
staticfinalclassMaterialShapeDrawableStateextendsConstantState{
...
publicMaterialShapeDrawableState(@NonNullMaterialShapeDrawableStateorig) {
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 =newRect(orig.padding);
}
}
...
}
...
}
没什么特别的，你只需要知道除了可以设置描边之外，还可以设置背景、阴影等其他属性。
说明
ShapeAppearanceModel只能是实现Shapeable接口的View才可以设置，比如Chip、MaterialButtom等。
而MaterialShapeDrawable其实就是Drawable，是所有View都可以设置的。
描边问题
这里借github一张图
又是自定义view的常规操作，有一半画笔是在边界外面的，所以需要设置padding为strokeWidth的一半。
默认圆角问题
有细心的同学会发现啊，第一个常规的ShapeableImageView还是有一点圆角的，没错，属于默认的，跟踪一下源码来看一下：
@color/material_on_surface_stroke
?attr/shapeAppearanceMediumComponent
第一个是颜色，很明显不是我们要找的，继续看shapeAppearanceMediumComponent
只是一个简单的属性，继续查找关联引用
@style/ShapeAppearance.MaterialComponents.MediumComponent
又引用了一个style，继续看ShapeAppearance.MaterialComponents.MediumComponent这个style
@dimen/mtrl_shape_corner_size_medium_component
哦豁，看到了熟悉的属性cornerSize，藏的还挺深，继续看看数值是多少
4dp
默认4dp。
那如果不想要这个圆角怎么办呢，可以学习源码仿写一个，不过上面也看到了，有点绕，不如直接写个style搞定：
<!--ShapeableImageView 去圆角-->
0dp
然后引用
app:shapeAppearance="@style/Corner0Style"
效果：
ok，到这里就差不多了，虽然还有很多相关知识点没有提及，但是也不少了，不如自己去尝试一番，慢慢消化。
Github
https://github.com/yechaoa/MaterialDesign
感谢
ShapeableImageView 官方文档
ShapeAppearanceModel 官方文档
Android Material组件使用详解
Android Notes｜玩转 ShapeableImageView
Material Components——Shape的处理
————————————————
版权声明：本文为CSDN博主「yechaoa」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/yechaoa/article/details/117339632
网友评论