ShapeableImageView使用

使用

导包

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

属性

属性	描述
shapeAppearance	样式
shapeAppearanceOverlay	样式，叠加层
strokeWidth	描边宽度
strokeColor	描边颜色

样式

名称	属性值	描述
cornerFamily	rounded	圆角
cornerFamily	cut	裁剪
cornerSize	10dp	10dp圆角大小
cornerSizeTopLeft	50%	左上圆角
cornerSizeBottomRight	50%	右下圆角
cornerSizeTopRight	50%	右上圆角
cornerSizeBottomLeft	50%	左下圆角

常规样式

<com.google.android.material.imageview.ShapeableImageViewandroid:id="@+id/normal_view"android:layout_width="300px"android:layout_height="300px"android:scaleType="centerCrop"android:src="@drawable/shape_able_bg"app:layout_constraintStart_toEndOf="@+id/round_view"app:layout_constraintTop_toTopOf="parent"app:shapeAppearance="@style/NormalStyle" />

<style name="NormalStyle"><item name="cornerSize">0dp</item>
</style>

圆角

<com.google.android.material.imageview.ShapeableImageViewandroid:id="@+id/round_view"android:layout_width="300px"android:layout_height="300px"android:scaleType="centerCrop"android:src="@drawable/shape_able_bg"app:layout_constraintStart_toEndOf="@+id/back_view"app:layout_constraintTop_toTopOf="parent"app:shapeAppearance="@style/RoundedStyle" />

<style name="RoundedStyle"><item name="cornerFamily">rounded</item><item name="cornerSize">30dp</item>
</style>

圆

<com.google.android.material.imageview.ShapeableImageViewandroid:id="@+id/circle_view"android:layout_width="300px"android:layout_height="300px"android:scaleType="centerCrop"android:src="@drawable/shape_able_bg"app:layout_constraintStart_toEndOf="@+id/normal_view"app:layout_constraintTop_toTopOf="parent"app:shapeAppearance="@style/CircleStyle" />

<style name="CircleStyle"><item name="cornerFamily">rounded</item><item name="cornerSize">50%</item>
</style>

菱形and描边

<com.google.android.material.imageview.ShapeableImageViewandroid:id="@+id/border_lozenge_view"android:layout_width="300px"android:layout_height="300px"android:padding="2dp"android:scaleType="centerCrop"android:src="@drawable/shape_able_bg"app:layout_constraintStart_toEndOf="@+id/back_view"app:layout_constraintTop_toBottomOf="@id/round_view"app:shapeAppearance="@style/BorderLozengeStyle"app:strokeColor="@color/teal_700"app:strokeWidth="4dp" />

<style name="BorderLozengeStyle"><item name="cornerFamily">cut</item><item name="cornerSize">50%</item>
</style>

叶子

<com.google.android.material.imageview.ShapeableImageViewandroid:id="@+id/leaf_view"android:layout_width="300px"android:layout_height="300px"android:scaleType="centerCrop"android:src="@drawable/shape_able_bg"app:layout_constraintStart_toEndOf="@+id/border_lozenge_view"app:layout_constraintTop_toTopOf="@id/border_lozenge_view"app:shapeAppearance="@style/LeafStyle" />

<style name="LeafStyle"><item name="cornerFamily">rounded</item><item name="cornerSizeTopLeft">50%</item><item name="cornerSizeBottomRight">50%</item>
</style>

六边形

<com.google.android.material.imageview.ShapeableImageViewandroid:id="@+id/irregular_view"android:layout_width="300px"android:layout_height="150px"android:scaleType="centerCrop"android:src="@drawable/shape_able_bg"app:layout_constraintBottom_toBottomOf="@+id/border_lozenge_view"app:layout_constraintStart_toEndOf="@+id/leaf_view"app:layout_constraintTop_toTopOf="@id/border_lozenge_view"app:shapeAppearance="@style/IrregularStyle" />

<style name="IrregularStyle"><item name="cornerFamily">cut</item><item name="cornerSize">50%</item>
</style>

特殊形状

已有的各种treatment如下：

CornerTreatment
- RoundedCornerTreatment 圆角方案
- CutCornerTreatment 折角方案
EdgeTreatment
- TriangleEdgeTreatment 三角形
- MarkerEdgeTreatment 类似于地图的兴趣点
- OffsetEdgeTreatment 位移
- BottomAppBarTopEdgeTreatment 应该是中间带有悬浮按钮的效果

<TextViewandroid:id="@+id/shape_text"android:layout_width="300px"android:layout_height="300px"android:gravity="center"android:text="HELLO"android:textSize="30dp"app:layout_constraintStart_toEndOf="@id/circle_view"app:layout_constraintTop_toTopOf="parent" />

val shapeAppearanceModel = ShapeAppearanceModel.builder().apply {setAllCorners(RoundedCornerTreatment())setAllCornerSizes(50f)setAllEdges(TriangleEdgeTreatment(50f, false))
}.build()
val drawable = MaterialShapeDrawable(shapeAppearanceModel).apply {setTint(ContextCompat.getColor(requireContext(), R.color.teal_200))paintStyle = Paint.Style.FILL_AND_STROKEstrokeWidth = 50fstrokeColor = ContextCompat.getColorStateList(requireContext(), R.color.purple_200)
}
mBinding.shapeText.setTextColor(Color.BLACK)
mBinding.shapeText.background = drawable

注

默认ShapeableImageView是有圆角的，默认大小为4dp

参考文章

(6条消息) Android ShapeableImageView使用详解，告别shape、三方库_yechaoa的博客-CSDN博客_shapeimageview
(6条消息) Android MaterialShapeDrawable_xiangxiongfly915的博客-CSDN博客_offsetedgetreatment
Android Material MaterialShapeDrawable - 掘金 (juejin.cn)

Android ShapeableImageView使用相关推荐

Android ShapeableImageView使用详解，告别shape、三方库
效果前言先来看一下ShapeableImageView是什么由上图可以看到ShapeableImageView也没有什么神秘的,不过是ImageView的一个子类而已,但是从效果图来看,在不写s ...
【yechaoa】5年Android开发的2021年终总结，实现Flag的一年
前言不知不觉一年又过去了,总是在回忆的时候感叹时间的流逝,回首这一年来的过往,也是不平凡的一年~ 女儿出生了,换了新工作,认识了新朋友,也有很多新体验. 生活尝试新菜 2021年的第一天家庭聚餐, ...
Google官方控件ShapeableImageView使用
上面都是用ShapeableImageView写出来的效果直接上代码: 布局文件: <?xml version="1.0" encoding="utf-8&quo ...
【涨姿势】你没用过的BadgeDrawable
1.前言通常情况下,我们在做小红点效果的时候,会有两种选择: 自定义BadgeView,然后设置给目标View xml写一个View,然后设置shape 有的同学可能会想,能实现不就行了吗,是的,代 ...
Android 音乐APP（五）音乐通知栏、后台播放音乐
Android 音乐通知栏前言正文 ① 通知栏按钮点击监听 ② 通知栏点击监听 ③ 通知栏业务处理 ④ 运行效果图结语前言这篇文章的标题有些言简意赅了,也突出了这篇文章的核心,那就是通知 ...
Android 更换用户头像（拍照、相册选取）
Android 更换头像前言正文一.新建项目二.配置项目三.布局.样式改动四.权限请求五.底部弹窗显示六.工具类七.打开相机.相册八.页面返回显示图片九.本地缓存十.后台获取 ...
Android 天气APP（三十一）每日提醒弹窗
上一篇:Android 天气APP(三十)分钟级降水效果图每日提醒弹窗前言正文一.弹窗背景二.每天第一次弹窗三.弹出每日提示弹窗四.弹窗的开关文末前言为了增强用户的体验,所以 ...
Android 天气APP（二十九）壁纸设置、图片查看、图片保存
上一篇:Android 天气APP(二十八)地图搜索定位效果图开发流程一.前情提要二.正式开发 1. 列表数据填充 2. 浮动按钮的交互 3. 其他优化 4. 运行效果图三.文末一.前情提 ...
Android超级简单的实现圆形，矩形和圆角
使用 View.setClipToOutline() 方法或 android:clipToOutline 属性将视图裁剪至其轮廓区域.由 Outline.canClip() 方法所决定,仅有矩形.圆形 ...

Android ShapeableImageView使用

ShapeableImageView使用

使用

导包

属性

样式

常规样式

圆角

圆

菱形and描边

叶子

六边形

特殊形状

注

参考文章

Android ShapeableImageView使用相关推荐

最新文章

热门文章