Google官方控件ShapeableImageView使用

最新推荐文章于 2024-09-05 08:45:06 发布
最新推荐文章于 2024-09-05 08:45:06 发布
阅读量751 收藏 3
点赞数
文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nnmmbb/article/details/126020577
版权

上面都是用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>

 

汤米粥
关注
Android ShapeableImageView使用详解，告别shape、三方库，2024年Android开发者跳槽指南
2401_84149743的博客
04-06 1977
我坚信，坚持学习，每天进步一点，滴水穿石，我们离成功都很近！以下是总结出来的字节经典面试题目，包含：计算机网络，Kotlin，数据结构与算法，Framework源码，微信小程序，NDK音视频开发，计算机网络等。字节高级Android经典面试题和答案《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！外链图片转存中…(img-eQj4L9px-1712342637775)][外链图片转存中…(img-tegLTIjC-1712342637775)]
ShapeableImageView使用指南
qq_36861770的博客
10-07 1988
前言 前段时间Google推送了文章 ， Android Material 组件 1.2.0 现已发布 里面就有ShapeableImageView，不用像以前再写shape. 基本使用可以参考这一篇文章，Android ShapeableImageView使用 ，里面已经介绍了官方的基本用法。 但是还是不够的，还是在学习下代码方式来使用这个新控件。 绘制原理 ShapeableImageView的实现方式其实和我很久以前写的一篇任意切割的实现方式本质是一样的，但是做到了更好封装和解耦(Google牛逼
Android Material UI控件之ShapeableImageView
2401_84010816的博客
04-03 966
下面针对于scaleType的八种属性来进行简单的说明。默认的图片,可以看到，高度占满了，没有占满宽度。fitXY图片等比缩放到完全填充控件，图片宽高比和控件宽高比一致，则不变形；不一致，则会变形。使用了fitXY，将宽度进行了拉伸，占满屏幕宽度fitCenter。
Android Material UI控件之ShapeableImageView(1)
2401_84132723的博客
04-28 921
为什么很多程序员做不了架构师？1、良好健康的职业规划很重要，但大多数人都忽略了2、学习的习惯很重要，持之以恒才是正解。3、编程思维没能提升一个台阶，局限在了编码，业务，没考虑过选型、扩展4、身边没有好的架构师引导、培养。所处的圈子对程序员的成长影响巨大。金九银十面试季，跳槽季，整理面试题已经成了我多年的习惯！在这里我和身边一些朋友特意整理了一份快速进阶为Android高级工程师的系统且全面的学习资料。涵盖了Android初级——Android高级架构师进阶必备的一些学习技能。
Android ShapeableImageView使用详解，告别shape、三方库
最新发布
2401_86391928的博客
09-05 578
app:strokeColor 描边颜色app:strokeWidth 描边宽度注意这里padding的数值是描边宽度的一半，后面会说。
Google发布，玩转ShapeableImageView，告别第三方库
siutony的专栏
06-09 568
前言 做过安卓开发的都知道，安卓的UI开发耗时耗力，实现不规则图片效果，如老生常谈的圆角、圆形图片，要么引入第三方控件，要么自定义ImageView，第三方控件不一定满足，而自定义ImageView对开发者有一定的要求且花时间。Google在去年发布的Android Material 组件 (MDC-Android) 1.2.0，提供了丰富的控件，有助于提高UI开发效率，今天的主角ShapeableImageView正式其中一员，类似的还有MaterialButton。 看下效果： 先来看下S.
Android ShapeableImageView使用
Good包籽的Android专栏
09-11 6633
文章目录1.添加material:1.2.0依赖2.在style.xml文件里面添加style3.布局xml直接出效果4.描边问题5.花里胡哨的样式5.参考文章 前段时间Google推送了文章 ， Android Material 组件 1.2.0 现已发布 里面就有ShapeableImageView，不用像以前再写shape 1.添加material:1.2.0依赖 implementation 'com.google.android.material:material:1.2.0' 2
Android ShapeableImageView
xiangxiongfly
12-21 2228
文章目录Android ShapeableImageView概述基本使用不变形圆角样式圆形样式添加边框切角样式菱形样式叶子样式半圆样式层叠效果ViewOutlineProvider实现圆角效果实现圆形效果 Android ShapeableImageView 概述 ShapeableImageView是material控件之一，继承于ImageView，作用是为了让开发者更方便的ImageView进行变形处理。 依赖库 implementation 'com.google.android.material:
ShapeableImageView 的使用,告别shape、三方库
专注Android ，直到世界尽头
08-01 679
ShapeableImageView 的使用,告别shape、三方库
android ShapeImageView
05-04
与xutils相兼容，测试通过三星手机等
2024年最新Android Material UI控件之ShapeableImageView，2024年最新Android进阶面试资料无偿分享
2301_79098336的博客
05-08 636
可以看到，圆角已经出来了，是不是很奈斯呢？对图片的放缩策略和显示方式采用matrix方式，即矩阵变换，例如我们想让一张图宽度与屏幕保持一致，高度等比放缩，并且顶部与ImageView顶部对齐。头像常规的就是一个圆形的，然后外边有一个边框。圆形的样式之前已经写了，那么只需要边框就可以了。cornerSize设置为50%，表示为VIew的一半的值进行处理。这就做出来了，而我只是简单的把cornerFamily的属性值改为cut就可以了。然后我在MainActivity的布局中，放入了一个按钮。
android material 组件 - ShapeableImageView
Android翻山之路
03-28 477
ShapeableImageView com.google.android.material.imageview.ShapeableImageView 官方material 库 1.2.0 版本中新组件，非常棒的圆角切角边框图片控件。 引入库： implementation 'com.google.android.material:material:1.2.0' 简单演示圆角带边框的ImageView: xml代码： <com.google.android.material.imagevie
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值
>