ShapeableImageView使用

使用

导包

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

属性

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

样式

名称	属性值	描述
cornerFamily	rounded	圆角
cornerFamily	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