Android Notes|玩转 ShapeableImageView
时间:2022-07-24
本文章向大家介绍Android Notes|玩转 ShapeableImageView,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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 更简介的使用方式。
引入依赖:
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>
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;
}
最后同样找到对应上右下左获取方式:
欢迎大佬提供更好的方式~
参考资料
- ShapeableImageView
- Material Components for Android 1.2.0 is now available
- About shape
- Shape Theming
欢迎各位关注
- 搭建dataguard碰到的几个小问题(r5笔记第33天)
- TP-LINK 远程代码执行漏洞 CVE-2017-13772 趣谈
- 执行计划中的COLLECTION ITERATOR PICKLER FETCH导致的性能问题 (r5笔记第49天)
- dataguard switchover的自动化脚本实现 (r5笔记第48天)
- 曲折的dump导入及问题分析(r5笔记第47天)
- 对一道if-else相关的程序题的简单分析(r5笔记第45天)
- 持续近7个小时的索引扫描的查询优化分析 (r5笔记第44天)
- 04.Java对象和类
- 关于Oracle数据恢复的两个临界点(r5笔记第42天)
- 关于提问的一些建议(r5笔记第41天)
- shell中echo的显示格式 (r5笔记第58天)
- springboot 入门教程(5) 基于ssm框架的crud操作(前端部分-附源码)
- springboot入门(4)_web开发
- springboot入门教程(2)_Thymeleaf集成
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释