ShapeableImageView 的使用,告别shape、三方库

最新推荐文章于 2024-12-19 18:50:22 发布

原创最新推荐文章于 2024-12-19 18:50:22 发布 · 883 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#kotlin #android #View

本文详细介绍了Android中的ShapeableImageView，包括其style属性如cornerFamily和cornerSize用于创建圆角、切角等效果，以及strokeColor和strokeWidth等布局属性。提供了多个示例展示如何创建圆形、圆角、切角、菱形、子弹头和特殊形状的图片，并给出了注意事项和代码示例。同时，文章强调了strokeWidth属性与padding的配合使用，以避免显示问题。

属性介绍

style 属性：

属性名	描述	作用
cornerFamily	属性/样式	-rounded：圆角0 -cut：切角1
cornerSize	弧度	弧度大小
cornerSizeTopLeft	左上角弧度大小
cornerSizeTopRight	右上角弧度大小
cornerSizeBottomRight	右下角弧度大小
cornerSizeBottomLeft	左下角弧度大小
cornerFamilyTopLeft	左上角样式（圆角或切角）
cornerFamilyTopRight	右上角样式（圆角或切角）
cornerFamilyBottomRight	右下角样式（圆角或切角）
cornerFamilyBottomLeft	左下角样式（圆角或切角）

布局属性：

属性名	描述	作用
shapeAppearance	shapeableImageView的形状外观样	引用style样式
shapeAppearanceOverlay	ShapeableImageView的形状外观叠加样式	引用style样式
strokeColor	描边颜色
strokeWidth	描边粗细

样式案例

build.gradle 配置

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

请添加图片描述

对应Style如下：


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


    <!--圆角-->
    <style name="roundedCornerImageStyle10">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">10dp</item>
    </style>

    <!--切角-->
    <style name="roundedCutStyle">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">10dp</item>
    </style>

    <!--左上右上圆角-->
    <style name="roundedTopStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopLeft">20dp</item>
        <item name="cornerSizeTopRight">20dp</item>
    </style>

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

    <!--子弹头-->
    <style name="roundedBulletStyle">
        <item name="cornerFamilyTopRight">rounded</item>
        <item name="cornerSizeTopRight">50dp</item>
        <item name="cornerSizeTopLeft">50dp</item>
        <item name="cornerFamilyTopLeft">rounded</item>
    </style>

    <!--Tips-->
    <style name="roundedTipsStyle">
        <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>

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

有个小细节需要注意，当我们使用strokeWidth属性时，一定要对应设置padding，否则会出现显示一半的效果。而padding的值设置为strokeWidth值的一半。如：

      app:strokeWidth="5dp"
      android:padding="2.5dp"

代码已上传github:
https://github.com/ljlstudio/KtMvvm/tree/master/demo/src/main/java/com/kt/ktmvvm/jetpack/shapeableimageview