当前位置：网站首页>Google官方控件ShapeableImageView使用
Google官方控件ShapeableImageView使用
2022-07-31 01:17:00 【汤米粥】
上面都是用ShapeableImageView写出来的效果
直接上代码：
布局文件：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image0"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="20dp"
android:src="@mipmap/image"
app:layout_constraintEnd_toStartOf="@id/image1"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image1"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="20dp"
android:src="@mipmap/image"
app:layout_constraintEnd_toStartOf="@id/image2"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toEndOf="@id/image0"
app:layout_constraintTop_toTopOf="parent"
app:shapeAppearance="@style/RoundedStyle1" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image2"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="20dp"
android:src="@mipmap/image"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toEndOf="@id/image1"
app:layout_constraintTop_toTopOf="parent"
app:shapeAppearance="@style/RoundedStyle2" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image3"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="20dp"
android:padding="2dp"
android:src="@mipmap/image"
app:layout_constraintEnd_toStartOf="@id/image4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/image0"
app:layout_constraintVertical_chainStyle="spread"
app:shapeAppearance="@style/RoundedStyle2"
app:strokeColor="#00ff00"
app:strokeWidth="4dp" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image4"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="20dp"
android:padding="2dp"
android:src="@mipmap/image"
app:layout_constraintEnd_toEndOf="@id/image5"
app:layout_constraintStart_toEndOf="@id/image3"
app:layout_constraintTop_toBottomOf="@id/image1"
app:layout_constraintVertical_chainStyle="spread"
app:shapeAppearance="@style/RoundedStyle3"
app:strokeColor="#00ff00"
app:strokeWidth="4dp" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image5"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="20dp"
android:padding="2dp"
android:src="@mipmap/image"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/image4"
app:layout_constraintTop_toBottomOf="@id/image1"
app:layout_constraintVertical_chainStyle="spread"
app:shapeAppearance="@style/RoundedStyle4"
app:strokeColor="#00ff00"
app:strokeWidth="4dp" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image6"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="20dp"
android:padding="2dp"
android:src="@mipmap/image"
app:layout_constraintEnd_toStartOf="@id/image7"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/image3"
app:layout_constraintVertical_chainStyle="spread"
app:shapeAppearance="@style/RoundedStyle5"
app:strokeColor="#00ff00"
app:strokeWidth="4dp" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image7"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="20dp"
android:padding="2dp"
android:src="@mipmap/image"
app:layout_constraintEnd_toEndOf="@id/image8"
app:layout_constraintStart_toEndOf="@id/image6"
app:layout_constraintTop_toBottomOf="@id/image3"
app:layout_constraintVertical_chainStyle="spread"
app:shapeAppearance="@style/RoundedStyle6" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image8"
android:layout_width="180dp"
android:layout_height="80dp"
android:layout_marginTop="20dp"
android:padding="2dp"
android:scaleType="fitXY"
android:src="@mipmap/image"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/image7"
app:layout_constraintTop_toBottomOf="@id/image3"
app:layout_constraintVertical_chainStyle="spread"
app:shapeAppearance="@style/RoundedStyle4"
app:strokeColor="#00ff00"
app:strokeWidth="4dp" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image9"
android:layout_width="180dp"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:padding="2dp"
android:scaleType="fitXY"
android:src="@mipmap/image"
app:layout_constraintEnd_toStartOf="@id/image10"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/image6"
app:layout_constraintVertical_chainStyle="spread"
app:shapeAppearance="@style/RoundedStyle5"
app:strokeColor="#00ff00"
app:strokeWidth="4dp" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image10"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="20dp"
android:padding="2dp"
android:src="@mipmap/image"
app:layout_constraintEnd_toStartOf="@id/image11"
app:layout_constraintStart_toEndOf="@id/image9"
app:layout_constraintTop_toBottomOf="@id/image6"
app:layout_constraintVertical_chainStyle="spread"
app:shapeAppearance="@style/RoundedStyle7" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image11"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="20dp"
android:padding="2dp"
android:scaleType="fitXY"
android:src="@mipmap/image"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/image10"
app:layout_constraintTop_toBottomOf="@id/image6"
app:layout_constraintVertical_chainStyle="spread"
app:shapeAppearance="@style/RoundedStyle8" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image12"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="20dp"
android:scaleType="fitXY"
android:src="@mipmap/image"
app:layout_constraintEnd_toStartOf="@id/image13"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/image10"
app:layout_constraintVertical_chainStyle="spread"
app:shapeAppearance="@style/RoundedStyle9" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image13"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="20dp"
android:src="@mipmap/image"
app:layout_constraintEnd_toStartOf="@id/image14"
app:layout_constraintStart_toEndOf="@id/image12"
app:layout_constraintTop_toBottomOf="@id/image10"
app:layout_constraintVertical_chainStyle="spread" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image14"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="20dp"
android:scaleType="fitXY"
android:src="@mipmap/image"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/image13"
app:layout_constraintTop_toBottomOf="@id/image10"
app:layout_constraintVertical_chainStyle="spread" />
<TextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_marginTop="20dp"
android:gravity="center"
android:padding="10dp"
android:textColor="@color/white"
android:text="你好，我是自定义的气泡效果"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/image14" />
</androidx.constraintlayout.widget.ConstraintLayout>style文件
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!--ShapeableImageView 圆角-->
<style name="RoundedStyle1">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">15dp</item>
</style>
<style name="RoundedStyle2">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
<style name="RoundedStyle3">
<item name="cornerFamily">cut</item>
<item name="cornerSize">15dp</item>
</style>
<style name="RoundedStyle4">
<item name="cornerFamily">cut</item>
<item name="cornerSize">50%</item>
</style>
<style name="RoundedStyle5">
<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>
<style name="RoundedStyle6">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopLeft">50%</item>
<item name="cornerSizeBottomRight">50%</item>
</style>
<style name="RoundedStyle7">
<item name="cornerFamily">rounded</item>
<item name="cornerFamilyTopLeft">rounded</item>
<item name="cornerSizeTopLeft">100%</item>
</style>
<style name="RoundedStyle8">
<item name="cornerFamilyTopLeft">rounded</item>
<item name="cornerFamilyTopRight">rounded</item>
<item name="cornerSizeTopLeft">70%</item>
<item name="cornerSizeTopRight">70%</item>
</style>
<style name="RoundedStyle9">
<item name="cornerFamilyBottomLeft">rounded</item>
<item name="cornerFamilyBottomRight">rounded</item>
<item name="cornerFamilyTopLeft">rounded</item>
<item name="cornerFamilyTopRight">rounded</item>
<item name="cornerSizeBottomLeft">25dp</item>
<item name="cornerSizeBottomRight">25dp</item>
<item name="cornerSizeTopLeft">70%</item>
<item name="cornerSizeTopRight">70%</item>
</style>
</resources>
边栏推荐
- 仿牛客网项目总结
- 无线模块的参数介绍和选型要点
- 小程序-全局数据共享
- Huawei's "genius boy" Zhihui Jun has made a new work, creating a "customized" smart keyboard from scratch
- Oracle has a weird temporary table space shortage problem
- typescript18-对象类型
- Parameter introduction and selection points of wireless module
- 87. 把字符串转换成整数
- Sping.事务的传播特性
- Analyze the capabilities and scenarios of the cloud native message flow system Apache Pulsar
猜你喜欢
软件测试工作3年了，谈谈我是如何从刚入门进阶到自动化测试的？
ShardingSphere's public table combat (7)
ShardingSphere之读写分离（八）
typescript9-常用基础类型
Responsive layout vs px/em/rem
typescript14-（单独指定参数和返回值的类型）
typescript12 - union types
TypeScript在使用中出现的问题记录
I have been working in software testing for 3 years, how did I go from just getting started to automated testing?
297. 二叉树的序列化与反序列化
随机推荐
Huawei's "genius boy" Zhihui Jun has made a new work, creating a "customized" smart keyboard from scratch
【952. 按公因数计算最大组件大小】
华为“天才少年”稚晖君又出新作，从零开始造“客制化”智能键盘
822. 走方格
【网络安全】文件上传靶场通关（1-11关）
tensorflow与GPU版本对应安装问题
The sword refers to offer17---print the n digits from 1 to the largest
ros2知识：在单个进程中布置多个节点
typescript15- (specify both parameter and return value types)
Solution: Parameter 0 of method ribbonServerList in com.alibaba.cloud.nacos.ribbon.NacosRibbonClientConfigu
倍增、DFS序
typescript13-类型别名
Rocky/GNU之Zabbix部署(1)
background has no effect on child elements of float
ABC 261 F - Sorting Color Balls (reverse pair)
【genius_platform软件平台开发】第七十四讲：window环境下的静态库和动态库的一些使用方法（VC环境）
The difference between 4G communication module CAT1 and CAT4
不用Swagger，那我用啥？
35. 反转链表
手把手教你配置Jenkins自动化邮件通知