阅读 2551

Android Notes|玩转 ShapeableImageView

随着年龄的增长,内心越发感受家的重要。

前言

前段时间看到 Google 推送了一篇关于 Material Design 更新到 1.2.0,其中有个 ImageView 的更新觉得蛮有意思的,这次正好借着韩总重构的机会实战一波~

不足之处欢迎拍砖~

GitHub 地址:

最终效果图:

属性一览

属性名作用参数以及含义
shapeAppearanceShapeableImageView 的形状外观样式引用 style 样式
shapeAppearanceOverlayShapeableImageView 的形状外观叠加样式引用 style 样式
cornerFamilyshape 属性/样式- rounded: 圆角 0 - cut: 切角 1
cornerSizeShapeAppearance 弧度

cornerSize:

  • cornerSizeTopLeft/cornerSizeTopRight/cornerSizeBottomRight:左、右、上、下弧度

cornerFamily:

  • cornerFamilyTopLeft/cornerFamilyTopRight/cornerFamilyBottomRight/cornerFamilyBottomLeft:样式

不足之处,欢迎沟通学习~

ShapeableImageView 搞起来

据官方说明,此 ImageView 提供了对于 Shape 更简介的使用方式。

引入依赖:

    implementation 'com.google.android.material:material:1.2.0'
复制代码

1. 圆角图片

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_round"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/roundedCornerStyle" />
复制代码

对应 style:

    <!-- 圆角图片 -->
    <style name="roundedCornerStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">8dp</item>
    </style>
复制代码

掘金老哥提示,还能加个颜色,边框,特意尝试了一波:

  • app:strokeColor
  • app:strokeWidth
    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_round"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:strokeColor="#ff9023"
        app:strokeWidth="20dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/roundedCornerStyle" />
复制代码

展示效果:

感谢 明朗 以及 knight康康 两位掘友~

2. 圆形图片

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_circle"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/circleStyle" />
复制代码

对应 style:

    <!-- 圆形图片 -->
    <style name="circleStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>
复制代码

3. 切角图片

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_cut"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/cutCornerStyle" />
复制代码

对应 style:

    <!-- 切角图片 -->
    <style name="cutCornerStyle">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">12dp</item>
    </style>
复制代码

4. 菱形图片

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_diamond"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/diamondStyle" />
复制代码

对应 style:

    <!-- 菱形图片 -->
    <style name="diamondStyle">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">50%</item>
    </style>
复制代码

5. 右上角圆角图片

   <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_top_right"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/topRightCornerStyle" />
复制代码

对应 style:

	<!-- 右上角圆角图片 -->
    <style name="topRightCornerStyle">
        <item name="cornerFamilyTopRight">rounded</item>
        <item name="cornerSizeTopRight">50dp</item>
    </style>
复制代码

6. 鸡蛋图片

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_egg"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/eggStyle" />
复制代码

对应 style:

    <!-- 小鸡蛋图片 -->
    <style name="eggStyle">
        <item name="cornerFamilyTopRight">rounded</item>
        <item name="cornerSizeTopRight">50dp</item>
        <item name="cornerSizeTopLeft">50dp</item>
        <item name="cornerFamilyTopLeft">rounded</item>
    </style>
复制代码

7. 组合弧度图片

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_com_corner"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/comCornerStyle" />
复制代码

对应 style:

    <!-- 组合图片效果 -->
    <style name="comCornerStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopRight">50%</item>
        <item name="cornerSizeBottomLeft">50%</item>
    </style>
复制代码

8. 小 Tips

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_tip"
        android:layout_width="100dp"
        android:layout_height="30dp" 
        android:scaleType="centerCrop"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/tipsCornerStyle" />
复制代码

对应 style:

    <!-- 小 Tips -->
    <style name="tipsCornerStyle">
        <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>
复制代码

番外篇 - 通过源码学知识

通过 R 文件可以查看当前 ShapeableImageView 具有的属性:

    <declare-styleable name="ShapeAppearance">
      <!-- Corner size to be used in the ShapeAppearance. All corners default to this value -->
      <attr format="dimension|fraction" name="cornerSize"/>
      <!-- Top left corner size to be used in the ShapeAppearance. -->
      <attr format="dimension|fraction" name="cornerSizeTopLeft"/>
      <!-- Top right corner size to be used in the ShapeAppearance. -->
      <attr format="dimension|fraction" name="cornerSizeTopRight"/>
      <!-- Bottom right corner size to be used in the ShapeAppearance. -->
      <attr format="dimension|fraction" name="cornerSizeBottomRight"/>
      <!-- Bottom left corner size to be used in the ShapeAppearance. -->
      <attr format="dimension|fraction" name="cornerSizeBottomLeft"/>

      <!-- Corner family to be used in the ShapeAppearance. All corners default to this value -->
      <attr format="enum" name="cornerFamily">
        <enum name="rounded" value="0"/>
        <enum name="cut" value="1"/>
      </attr>
      <!-- Top left corner family to be used in the ShapeAppearance. -->
      <attr format="enum" name="cornerFamilyTopLeft">
        <enum name="rounded" value="0"/>
        <enum name="cut" value="1"/>
      </attr>
      <!-- Top right corner family to be used in the ShapeAppearance. -->
      <attr format="enum" name="cornerFamilyTopRight">
        <enum name="rounded" value="0"/>
        <enum name="cut" value="1"/>
      </attr>
      <!-- Bottom right corner family to be used in the ShapeAppearance. -->
      <attr format="enum" name="cornerFamilyBottomRight">
        <enum name="rounded" value="0"/>
        <enum name="cut" value="1"/>
      </attr>
      <!-- Bottom left corner family to be used in the ShapeAppearance. -->
      <attr format="enum" name="cornerFamilyBottomLeft">
        <enum name="rounded" value="0"/>
        <enum name="cut" value="1"/>
      </attr>
    </declare-styleable>
      <declare-styleable name="ShapeableImageView">
      <attr name="strokeWidth"/>
      <attr name="strokeColor"/>

      <!-- Shape appearance style reference for ShapeableImageView. Attribute declaration is in the
           shape package. -->
      <attr name="shapeAppearance"/>
      <!-- Shape appearance overlay style reference for ShapeableImageView. To be used to augment
           attributes declared in the shapeAppearance. Attribute declaration is in the shape package.
           -->
      <attr name="shapeAppearanceOverlay"/>
    </declare-styleable>
复制代码

Google 注释写的很明确,参考 Google 翻译以及实践可以初步了解。

随后通过继续查看源码的方式获取到当前版本提供的样式,例如:

    @IntDef({CornerFamily.ROUNDED, CornerFamily.CUT})
    @Retention(RetentionPolicy.SOURCE)
    public @interface CornerFamily {
      /** Corresponds to a {@link RoundedCornerTreatment}. */
      int ROUNDED = 0;
      /** Corresponds to a {@link CutCornerTreatment}. */
      int CUT = 1;
    }
复制代码

最后同样找到对应上右下左获取方式:

欢迎大佬提供更好的方式~

参考资料