android material 组件 - ShapeableImageView

ShapeableImageView

com.google.android.material.imageview.ShapeableImageView 官方material 库 1.2.0 版本中新组件，非常棒的圆角切角边框图片控件。

引入库：
implementation 'com.google.android.material:material:1.2.0'

简单演示圆角带边框的ImageView:

xml代码：

    <com.google.android.material.imageview.ShapeableImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:padding="1dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_img"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MaterialComponents.FloatingActionButton"
        app:strokeColor="#ff0000"
        app:strokeWidth="2dp" />

app:strokeColor 和 app:strokeWidth 很好理解，分别是边框颜色和边框宽度
1 app:shapeAppearanceOverlay 这个呢就是圆角或者切角的关键属性了，
演示的代码使用的是material库中自带的style，如下：

<style name="ShapeAppearance.MaterialComponents.LargeComponent">
    <item name="cornerSize">@dimen/mtrl_shape_corner_size_large_component</item>
  </style>
    <style name="ShapeAppearance.MaterialComponents.MediumComponent">
    <item name="cornerSize">@dimen/mtrl_shape_corner_size_medium_component</item>
  </style>
    <style name="ShapeAppearance.MaterialComponents.SmallComponent">
    <item name="cornerSize">@dimen/mtrl_shape_corner_size_small_component</item>
  </style>
    <style name="ShapeAppearance.MaterialComponents.Test" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">10px</item>
  </style>
    <style name="ShapeAppearance.MaterialComponents.Tooltip" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">4dp</item>
  </style>
    <style name="ShapeAppearanceOverlay" parent=""/>
    <style name="ShapeAppearanceOverlay.BottomLeftDifferentCornerSize">
    <item name="cornerSizeBottomLeft">20px</item>
  </style>
    <style name="ShapeAppearanceOverlay.BottomRightCut">
    <item name="cornerFamilyBottomRight">cut</item>
  </style>
    <style name="ShapeAppearanceOverlay.Cut">
    <item name="cornerFamily">cut</item>
  </style>
    <style name="ShapeAppearanceOverlay.DifferentCornerSize">
    <item name="cornerSize">20px</item>
  </style>
    <style name="ShapeAppearanceOverlay.MaterialComponents.BottomSheet" parent="">
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
  </style>
    <style name="ShapeAppearanceOverlay.MaterialComponents.Chip" parent="">
    <item name="cornerSize">50%</item>
  </style>
    <style name="ShapeAppearanceOverlay.MaterialComponents.ExtendedFloatingActionButton" parent="">
    <item name="cornerSize">@null</item>
  </style>
    <style name="ShapeAppearanceOverlay.MaterialComponents.FloatingActionButton" parent="">
    <item name="cornerSize">50%</item>
  </style>
    <style name="ShapeAppearanceOverlay.MaterialComponents.MaterialCalendar.Day" parent="">
    <item name="cornerSize">@dimen/mtrl_calendar_day_corner</item>
  </style>
    <style name="ShapeAppearanceOverlay.MaterialComponents.MaterialCalendar.Window.Fullscreen" parent="">
    <item name="cornerSize">0dp</item>
  </style>
    <style name="ShapeAppearanceOverlay.MaterialComponents.MaterialCalendar.Year" parent="">
    <item name="cornerSize">@dimen/mtrl_calendar_year_corner</item>
  </style>
    <style name="ShapeAppearanceOverlay.MaterialComponents.TextInputLayout.FilledBox" parent="">
    <item name="cornerSizeBottomLeft">@dimen/mtrl_textinput_box_corner_radius_small</item>
    <item name="cornerSizeBottomRight">@dimen/mtrl_textinput_box_corner_radius_small</item>
  </style>
    <style name="ShapeAppearanceOverlay.TopLeftCut">
    <item name="cornerFamilyTopLeft">cut</item>
  </style>
    <style name="ShapeAppearanceOverlay.TopRightDifferentCornerSize">
    <item name="cornerSizeTopRight">20px</item>
  </style>

大家可以按照需求自定义style以达到目的

注意：关于描边宽度需要注意的是，和自定义View一样，描边的宽度是中心点在Layout边界，所以是Layout边界内外均分strokeWidth的，所以描边是可能超出Layout边界的，造成截断的效果，所以可以设置内padding来处理溢出。
也就是说如果需求边框宽度为2dp那么需要设置android:padding="1dp" 以此类推，padding值为stokeWith值得一半

参考文章：shapeableImageView