- 前段时间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>
