前言
Android Material 组件 1.2.0版本 新增的ShapeableImageView 控件,解决日常情况遇到的图片常见的一些场景
一、ShapeableImageView 是什么?
全新的 ShapeableImageView widget 是 AppCompatImageView 的扩展,用于处理形状主题 (shape theming)。常见用例是对矩形源图像进行圆角遮罩。不过,该 ShapeableImageView 也支持各种圆角尺寸、切角以及不同的描边宽度和颜色
二、使用步骤
1.引入库
引用:
implementation 'com.google.android.material:material:1.2.0'
2.Android 以前实现圆角,圆形方式
代码如下(示例):
1.使用shape元素(比较常用) 2.,使用背景图片 3.自定义控件实现(原型,方形切) 4.使用ViewOutlineProvider裁剪view 5.使用cardView
三,使用方法
1:Style
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- 圆角图片Style -->
<style name="RoundStyle">
<item name="cornerSizeTopLeft">8dp</item>
<item name="cornerSizeTopRight">8dp</item>
<item name="cornerSizeBottomRight">8dp</item>
<item name="cornerSizeBottomLeft">8dp</item>
</style>
</resources>
2:布局中引用
<!-- 圆角图片 -->
<!-- shapeAppearanceOverlay或shapeAppearance 加载style -->
<!-- strokeColo描边颜色 -->
<!-- elevation阴影注意需要和padding搭配->
<!-- strokeWidth描边宽度 -->
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="160dp"
android:layout_height="160dp"
android:padding="1dp"
android:src="@mipmap/ic_launcher"
android:elevation="4dp"
android:padding="8dp"
app:shapeAppearanceOverlay="@style/roundedCornerImageStyle"
app:strokeColor="#FFFFFF"
app:strokeWidth="5dp" />
3:各种样式效果
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- 圆形图片 -->
<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>
</resources>