Android ShapeableImageView使用

• 前段时间Google推送了文章 ， Android Material 组件 1.2.0 现已发布
  里面就有ShapeableImageView，不用像以前再写shape

效果

1.添加material:1.2.0依赖

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

2.在style.xml文件里面添加style

<!-- 圆角图片 -->
<style name="roundedCornerImageStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">25dp</item>
</style>

3.布局xml直接出效果

<!-- 圆角图片 -->
<!-- shapeAppearanceOverlay或shapeAppearance 加载style -->
<!-- strokeColo描边颜色 -->
<!-- strokeWidth描边宽度 -->
<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/image1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:padding="1dp"
    android:src="@mipmap/ic_launcher"
    app:shapeAppearanceOverlay="@style/roundedCornerImageStyle"
    app:strokeColor="#F44336"
    app:strokeWidth="2dp" />

4.描边问题

• 因为如果描边的width写了6，没有设置padding3,那笔画可能一半看不见，这个跟自定义view,使用画笔时是一样样的，绘制时，画笔有一半在边界外

  
  超出

正常 image.png

• 黑色代表画笔，蓝色代表边框，就会有一半超出去

5.花里胡哨的样式

• 看你需求自己设置就行
• cornerSize 如果传dp就是具体，如果传百分比，就是以控件高为准算百分比，比如高写了100dp，cornerSize写50%，就是50dp的效果

<!-- 圆形图片 -->
<style name="circleImageStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

<!-- 切角图片 -->
<style name="cutImageStyle">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">15dp</item>
</style>

<!-- 菱形图片 -->
<style name="diamondImageStyle">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">50%</item>
</style>

<!-- 左上角90度扇形图片 -->
<style name="topLeftRoundImageStyle">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerSizeTopLeft">100%</item>
</style>

<!-- 火箭头图片 -->
<style name="rocketImageStyle">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyTopRight">rounded</item>
    <item name="cornerSizeTopLeft">70%</item>
    <item name="cornerSizeTopRight">70%</item>
</style>

<!-- 水滴 -->
<style name="waterImageStyle">
    <item name="cornerFamilyBottomLeft">rounded</item>
    <item name="cornerFamilyBottomRight">rounded</item>
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyTopRight">rounded</item>
    <item name="cornerSizeBottomLeft">25dp</item>
    <item name="cornerSizeBottomRight">25dp</item>
    <item name="cornerSizeTopLeft">70%</item>
    <item name="cornerSizeTopRight">70%</item>
</style>

<!-- 叶子图片 -->
<style name="leafImageStyle">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyBottomRight">rounded</item>
    <item name="cornerSizeTopLeft">50%</item>
    <item name="cornerSizeBottomRight">50%</item>
</style>

<!-- tip图片 -->
<style name="tipImageStyle">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerSizeTopLeft">50%</item>

    <item name="cornerFamilyBottomLeft">rounded</item>
    <item name="cornerSizeBottomLeft">50%</item>

    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerSizeTopRight">50%</item>

    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSizeBottomRight">50%</item>
</style>

5.参考文章

• Android Notes｜玩转 ShapeableImageView
• Android Material组件使用详解
• Google 文档