ShapeableImageView 不只是圆形ImageView

最新推荐文章于 2024-04-28 14:04:28 发布

Shirley@@@

最新推荐文章于 2024-04-28 14:04:28 发布

阅读量335

点赞数

分类专栏： Android 文章标签： android

本文链接：https://blog.csdn.net/qq_39590763/article/details/133273391

版权

Android 专栏收录该内容

60 篇文章 0 订阅

订阅专栏

这篇文章介绍了ShapeableImageView，一个可创建多种形状的AndroidImageView组件，通过自定义样式实现圆形、圆角、切角、菱形等复杂形状。作者分享了布局文件和样式设置的详细示例。

摘要由CSDN通过智能技术生成

偶然间看到了这位老哥的 https://juejin.cn/post/6869376452040196109#comment 文章，发现了ShapeableImageView–一个多形状的ImageView ，虽然似乎发布了很久了，现在学习不晚。

效果图

在这里插入图片描述

布局文件

        <com.google.android.material.imageview.ShapeableImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:scaleType="centerCrop"
            android:src="@mipmap/header_icon"
            app:shapeAppearanceOverlay="@style/roundStyle" />

样式

<!--    圆形样式-->
    <style name="circleStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>

    <!--圆角样式-->
    <style name="roundStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">8dp</item>
    </style>

    <!--切角样式，多边形那样的-->
    <style name="cutStyle">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">12dp</item>
    </style>

    <!--菱形样式，在切角的样式基础上，将cornersize加大到50%-->
    <style name="diamondStyle">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">50%</item>
    </style>

    <!--在圆角样式的基础上，可以单独为四角之一、之二、之三、之四... 设置圆弧度数-->
    <!--右上角扇形-->
    <style name="topRightRoundStyle">
        <item name="cornerFamilyTopRight">rounded</item>
        <item name="cornerSizeTopRight">100%</item>
    </style>

    <!--弧形拱门-->
    <style name="topLeftRightRoundStyle">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerSizeTopLeft">50dp</item>
        <item name="cornerFamilyTopRight">rounded</item>
        <item name="cornerSizeTopRight">50dp</item>
    </style>

    <!--小船形状-->
    <style name="groupRoundStyle">
        <item name="cornerFamilyTopRight">rounded</item>
        <item name="cornerSizeTopRight">50dp</item>
        <item name="cornerFamilyBottomLeft">rounded</item>
        <item name="cornerSizeBottomLeft">50dp</item>
    </style>

    <!--tips形状-->
    <style name="tipsGroupRoundStyle">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerSizeTopLeft">10dp</item>
        <item name="cornerFamilyBottomLeft">rounded</item>
        <item name="cornerSizeBottomLeft">10dp</item>

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

    <!--酒杯形状-->
    <style name="cupsRoundStyle">
        <item name="cornerFamilyBottomRight">rounded</item>
        <item name="cornerSizeBottomRight">100%</item>
        <item name="cornerFamilyBottomLeft">rounded</item>
        <item name="cornerSizeBottomLeft">100%</item>
    </style>

代码详情参考：https://github.com/ShirleyLuoppx/DailyStudy/blob/master/app/src/main/java/com/ppx/dailystudy/material/ShapeImageviewDemoActivity.java