ShapeableImageView使用

使用

导包

implementation 'com.google.android.material:material:1.4.0'

属性

属性	描述
shapeAppearance	样式
shapeAppearanceOverlay	样式，叠加层
strokeWidth	描边宽度
strokeColor	描边颜色

样式

名称	属性值	描述
cornerFamily	rounded	圆角
	cut	裁剪
cornerSize	10dp	10dp圆角大小
cornerSizeTopLeft	50%	左上圆角
cornerSizeBottomRight	50%	右下圆角
cornerSizeTopRight	50%	右上圆角
cornerSizeBottomLeft	50%	左下圆角

常规样式

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/normal_view"
    android:layout_width="300px"
    android:layout_height="300px"
    android:scaleType="centerCrop"
    android:src="@drawable/shape_able_bg"
    app:layout_constraintStart_toEndOf="@+id/round_view"
    app:layout_constraintTop_toTopOf="parent"
    app:shapeAppearance="@style/NormalStyle" />

<style name="NormalStyle">
    <item name="cornerSize">0dp</item>
</style>

圆角

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/round_view"
    android:layout_width="300px"
    android:layout_height="300px"
    android:scaleType="centerCrop"
    android:src="@drawable/shape_able_bg"
    app:layout_constraintStart_toEndOf="@+id/back_view"
    app:layout_constraintTop_toTopOf="parent"
    app:shapeAppearance="@style/RoundedStyle" />

<style name="RoundedStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">30dp</item>
</style>

圆

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/circle_view"
    android:layout_width="300px"
    android:layout_height="300px"
    android:scaleType="centerCrop"
    android:src="@drawable/shape_able_bg"
    app:layout_constraintStart_toEndOf="@+id/normal_view"
    app:layout_constraintTop_toTopOf="parent"
    app:shapeAppearance="@style/CircleStyle" />

<style name="CircleStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

菱形and描边

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/border_lozenge_view"
    android:layout_width="300px"
    android:layout_height="300px"
    android:padding="2dp"
    android:scaleType="centerCrop"
    android:src="@drawable/shape_able_bg"
    app:layout_constraintStart_toEndOf="@+id/back_view"
    app:layout_constraintTop_toBottomOf="@id/round_view"
    app:shapeAppearance="@style/BorderLozengeStyle"
    app:strokeColor="@color/teal_700"
    app:strokeWidth="4dp" />

<style name="BorderLozengeStyle">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">50%</item>
</style>

叶子

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/leaf_view"
    android:layout_width="300px"
    android:layout_height="300px"
    android:scaleType="centerCrop"
    android:src="@drawable/shape_able_bg"
    app:layout_constraintStart_toEndOf="@+id/border_lozenge_view"
    app:layout_constraintTop_toTopOf="@id/border_lozenge_view"
    app:shapeAppearance="@style/LeafStyle" />

<style name="LeafStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopLeft">50%</item>
    <item name="cornerSizeBottomRight">50%</item>
</style>

六边形

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/irregular_view"
    android:layout_width="300px"
    android:layout_height="150px"
    android:scaleType="centerCrop"
    android:src="@drawable/shape_able_bg"
    app:layout_constraintBottom_toBottomOf="@+id/border_lozenge_view"
    app:layout_constraintStart_toEndOf="@+id/leaf_view"
    app:layout_constraintTop_toTopOf="@id/border_lozenge_view"
    app:shapeAppearance="@style/IrregularStyle" />

<style name="IrregularStyle">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">50%</item>
</style>

特殊形状

已有的各种treatment如下：

• CornerTreatment
  • RoundedCornerTreatment 圆角方案
  • CutCornerTreatment 折角方案
• EdgeTreatment
  • TriangleEdgeTreatment 三角形
  • MarkerEdgeTreatment 类似于地图的兴趣点
  • OffsetEdgeTreatment 位移
  • BottomAppBarTopEdgeTreatment 应该是中间带有悬浮按钮的效果

<TextView
    android:id="@+id/shape_text"
    android:layout_width="300px"
    android:layout_height="300px"
    android:gravity="center"
    android:text="HELLO"
    android:textSize="30dp"
    app:layout_constraintStart_toEndOf="@id/circle_view"
    app:layout_constraintTop_toTopOf="parent" />

val shapeAppearanceModel = ShapeAppearanceModel.builder().apply {
    setAllCorners(RoundedCornerTreatment())
    setAllCornerSizes(50f)
    setAllEdges(TriangleEdgeTreatment(50f, false))
}.build()
val drawable = MaterialShapeDrawable(shapeAppearanceModel).apply {
    setTint(ContextCompat.getColor(requireContext(), R.color.teal_200))
    paintStyle = Paint.Style.FILL_AND_STROKE
    strokeWidth = 50f
    strokeColor = ContextCompat.getColorStateList(requireContext(), R.color.purple_200)
}
mBinding.shapeText.setTextColor(Color.BLACK)
mBinding.shapeText.background = drawable

注

• 默认ShapeableImageView是有圆角的，默认大小为4dp

参考文章

• (6条消息) Android ShapeableImageView使用详解，告别shape、三方库_yechaoa的博客-CSDN博客_shapeimageview
• (6条消息) Android MaterialShapeDrawable_xiangxiongfly915的博客-CSDN博客_offsetedgetreatment
• Android Material MaterialShapeDrawable - 掘金 (juejin.cn)