Android Notes｜玩转 ShapeableImageView

2020-09-08 15:20:29 浏览数 (1)

LZ-Says

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

前言

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

不足之处欢迎拍砖～

GitHub 地址：

  • https://github.com/HLQ-Struggle/ShapeableImageViewDemo

最终效果图：

属性一览

cornerSize：

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

cornerFamily：

  • cornerFamilyTopLeft/cornerFamilyTopRight/cornerFamilyBottomRight/cornerFamilyBottomLeft：样式

不足之处，欢迎沟通学习～

ShapeableImageView 搞起来

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

引入依赖：

代码语言：javascript复制
implementation 'com.google.android.material:material:1.2.0'

1. 圆角图片

代码语言：javascript复制
<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：

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

2. 圆形图片

代码语言：javascript复制
<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：

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

3. 切角图片

代码语言：javascript复制
<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：

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

4. 菱形图片

代码语言：javascript复制
<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：

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

5. 右上角圆角图片

代码语言：javascript复制
<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：

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

6. 鸡蛋图片

代码语言：javascript复制
<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：

代码语言：javascript复制
<!-- 小鸡蛋图片 -->
<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. 组合弧度图片

代码语言：javascript复制
<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：

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

8. 小 Tips

代码语言：javascript复制
<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：

代码语言：javascript复制
<!-- 小 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 具有的属性：

代码语言：javascript复制
<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 翻译以及实践可以初步了解。

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

代码语言：javascript复制
@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;
}

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

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

参考资料

  • ShapeableImageView
  • Material Components for Android 1.2.0 is now available
  • About shape
  • Shape Theming

欢迎各位关注

android github google imageview

0 人点赞