Android Material 新控件之圆形图片,圆角图片以及

Android 圆形图片,圆角图片以及各种形状的简单实现

Android Material 组件 1.2.0版本 新增的ShapeableImageView 控件,解决日常情况遇到的图片常见的一些场景

效果图

效果图

官方文档

出现原因:Android 实现圆角,圆形方式五花八门过于繁琐

Android 以前实现圆角,圆形方式

1.使用shape元素（比较常用)
2.,使用背景图片
3.自定义控件实现(原型,方形切)
4.使用ViewOutlineProvider裁剪view
5.使用cardView

解决方案: ShapeableImageView

支持功能:

1.圆角尺寸、
2.切角
3.不同的描边宽度和颜色
4.各种形状绘制

ShapeableImageView :

全新的 ShapeableImageView widget 是 AppCompatImageView 的扩展，用于处理形状主题 (shape theming)。常见用例是对矩形源图像进行圆角遮罩。不过，该 ShapeableImageView 也支持各种圆角尺寸、切角以及不同的描边宽度和颜色

使用方法

1.添加material:1.2.0依赖

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

2.在values文件家的style.xml中创建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>

3.布局中直接使用

<!-- 圆角图片 -->
<!-- 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" />

各种样式效果

<?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>

5.参考文章,借鉴Style

1.Android ShapeableImageView使用

2.官网

3.带圆角,带边框,带阴影的新版本CardView:MaterialCardView