Android Material UI控件之ShapeableImageView

效果图

Android Material UI控件之ShapeableImageView

• ​​前言​​

• ​​1.基本使用​​

• ​​① scaleType属性简介​​

• ​​1.样式使用​​

• ​​① 圆角图片​​
• ​​② 圆形图片​​
• ​​③ 切角图片​​
• ​​④ 菱形图片​​
• ​​⑤ 单圆角图片​​
• ​​⑥ 双圆角图片（子弹图片）​​
• ​​⑦ 标签图片​​
• ​​⑧ 头像图片​​

• ​​2. 样式解读​​
• ​​3. 总结​​

前言

你有使用过Material中的UI控件吗？为什么要使用它们，相对于原来的控件优势在哪里？
  相信你看到这篇文章也会有所疑问，第一个问题就不用说了，那么从第二问题开始回答，Android官方为开发者提供了许多丰富的UI控件，Material 组件就是包含了这些控件的一套工具，多数时候使用它可以满足我们日常开发UI的需求，提高效率。优势就在于它比原来的控件更加的强大，比如说我们平时要是像显示一个圆形的头像，需要怎么做呢？你可能会使用第三方库，Glide或者CircleImageView等一些开源库，或者你会自定义ImageView来实现，那么如果我告诉你Material 中的ImageView可以不需要自定义和使用第三方库就能够实现圆形图片或其他一些形状的图片呢？这样是否证明它更强大？是否能提高你的开发效率呢？听了这么多的废话远不如实践得劲，其实我也是这么想的，但是我得让你知道为什么才行，这才是写文章的目的。下面是正文了。

# 使用步骤 ## 1.引入库 首先，新建一个项目或在原有的项目上操作。因为我是打算写一个Material UI系列文章的,所以我会新建一个项目。

在app下的build.gradle中的dependencies闭包中增加如下依赖，然后Sync，同步到项目中。

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

以上均属于基本操作，下面才是见证骚操作的时候。

1.基本使用

首先在布局中新增一个ShapeableImageView。

你只要输入一个<Shap，下面就会弹出一个提示，回车就可以自己导入，如果没有弹出就说明你没有Sync或者你的项目还没有引用到这个库,你需要Make Project或者Rebuild Project。

<com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_wallpaper"
        android:src="@drawable/pic_wallpaper"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

图片pic_wallpaper如下：

在布局预览中可以看到它并没有占满布局

你预览的效果实际就是你运行的效果，这并不是我想要的，然后增加一个scaleType属性来改变一下

android:scaleType="fitXY"

fitXY只是其中的一个类型，如何查看其它类型呢？

① scaleType属性简介

下面针对于scaleType的八种属性来进行简单的说明。

默认的图片,可以看到，高度占满了，没有占满宽度。

• fitXY
  图片等比缩放到完全填充控件，图片宽高比和控件宽高比一致，则不变形；不一致，则会变形。

  使用了fitXY，将宽度进行了拉伸，占满屏幕宽度

• fitCenter
  等比例缩放，此类型为ScaleType默认模式(无选择任何类型的时候默认为此类型)，图片宽高比和控件宽高比一致，则填满控件显示，居中显示，即缩放后的图片的中点和控件中点重叠，图片宽高比和控件宽高比不一致，则等比缩放图片最长边，直到和控件宽或高一边重叠，这种情况可会出现左右或者上下空白。

  使用了fitCenter，效果等同于你默认的效果。

• fitStart
  等比例缩放，图片宽高比和控件宽高比一致，则填满控件显示，图片宽高比和控件宽高比不一致，则等比缩放图片最长边，直到和控件宽或高任意一边重叠，这种情况会出现右边或者下边空白。

  使用了fitStart，效果如下，出现了右边的留白。

• fitEnd
  等比例缩放，图片宽高比和控件宽高比一致，则填满控件显示，图片宽高比和控件宽高比不一致，则等比缩放图片最长边，直到和控件宽或高任意一边重叠，这种情况会出现左边或者上边空白。

  使用了fitStart，效果如下，出现了左边的留白。

• center
  控件中心和原始图片中心重叠，图片不进行缩放，只显示控件区域的内容。如果原始图片宽高都小于控件宽高，则看起来的效果和居中显示一样。

  使用了center，效果如下，控件的重心和图片重心重合，看起来像是放大了，实际上是高度比控件要高，所以重新定位了重心所以左右的留白会比默认的小。

• centerCrop
  控件中心和原始图片中心重叠，等比例缩放，原图比例和控件比例一致，则填满控件，如果原图比例大于控件比例，则按照控件高/图片高进行等比例缩放，这样就能保证图片宽度在进行同等比例缩放的时候，图片宽度大于或等于控件的宽度，如果原图比例小于控件比例，则按照控件宽/图片宽进行等比例缩放，这样就能保证图片高度在进行同等比例缩放的时候，图片高度大于或等于控件的高度。

  使用了centerCrop，效果如下，高度和宽度都进行了中心缩放。

• CenterInside
  如果图片宽（或高）大于控件宽（或）则等比例缩小，显示效果和FitCenter一样。如果图片宽高都小于控件宽高则直接居中显示

  使用了CenterInside，效果如下，和默认的效果没有区别，这是因为图片的高是比控件要高。

• matrix
  对图片的放缩策略和显示方式采用matrix方式，即矩阵变换，例如我们想让一张图宽度与屏幕保持一致，高度等比放缩，并且顶部与ImageView顶部对齐。这种方式不能通过给定的默认方式做到。

  使用了matrix，效果如下

以上为基本用显示用法

1.样式使用

样式就是在Style中新建即可，比如

"roundedCornerStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">12dp</item>
    </style>

OK,下面放入一个用来显示的图片。

最喜欢的还是海贼王，蒙奇.D.路飞。

然后我在MainActivity的布局中，放入了一个按钮

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:text="ShapeableImageView"
        android:textAllCaps="false"
        android:onClick="onClick"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

代码中跳转到ShapeableImageViewActivity里面，这是一个Activity

然后来看它的布局。
然后修改布局的代码：为了方便对比我用了一个滚动条，里面包裹一个线性布局，布局里面就是用来演示的效果图，布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".ShapeableImageView">
    
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="正常图片"
                android:textColor="#000" />

            <com.google.android.material.imageview.ShapeableImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/test" />

            <!--圆角图片-->

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="圆角图片"
                android:textColor="#000" />

            <com.google.android.material.imageview.ShapeableImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/test"
                app:shapeAppearanceOverlay="@style/roundedImageStyle"

① 圆角图片

这个里面用到一个样式，可以直接在styles.xml中增加如下代码：

"roundedImageStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">24dp</item>
    </style>

好了，直接来运行吧。

可以看到，圆角已经出来了，是不是很奈斯呢？嗯？当然还有不同的用法。刚才我设置样式中的cornerSize的属性值为24dp。cornerFamily的属性值为rounded。表示有弧度。那么假如我要变成圆角图片呢？

② 圆形图片

先来看这个样式

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

cornerSize设置为50%，表示为VIew的一半的值进行处理。那么就会有圆形图片了。
在布局中增加如下代码，然后运行一下。

<!--圆形图片-->
<com.google.android.material.imageview.ShapeableImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/test"
                app:shapeAppearanceOverlay="@style/circleImageStyle"

是不是简简单单。

其实不光是圆角，还有切角。

③ 切角图片

先增加一个样式

"cutImageStyle">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">24dp</item>
    </style>

然后增加一个图片

<!--切角图片-->
<com.google.android.material.imageview.ShapeableImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/test"
                app:shapeAppearanceOverlay="@style/cutImageStyle"

再运行。

这就做出来了，而我只是简单的把cornerFamily的属性值改为cut就可以了。

那么同样我们吧这个cut状态下的cornerSize设置为50%,那就是菱形图片了。

④ 菱形图片

添加样式

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

添加图片

<!--菱形图片-->
<com.google.android.material.imageview.ShapeableImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/test"
                app:shapeAppearanceOverlay="@style/diamondImageStyle"

上面的属于基本用法，其实你还可以这样玩。

⑤ 单圆角图片

添加样式

"singleRoundedImageStyle">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerSizeTopLeft">50%</item>
    </style>

这个意思很明显cornerFamilyTopLeft，左上角为圆角，指定弧度cornerSizeTopLeft为50%。
然后添加图片

<!--单圆角图片-->
<com.google.android.material.imageview.ShapeableImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/test"
                app:shapeAppearanceOverlay="@style/singleRoundedImageStyle"

运行

⑥ 双圆角图片（子弹图片）

添加样式

"bulletImageStyle">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerFamilyTopRight">rounded</item>
        <item name="cornerSizeTopLeft">50%</item>
        <item name="cornerSizeTopRight">50%</item>
    </style>

也是一看就懂，
添加图片

<!--子弹图片-->
<com.google.android.material.imageview.ShapeableImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/test"
                app:shapeAppearanceOverlay="@style/bulletImageStyle"

运行

这种双圆角比较丑，再来改变一下就会好看一些

"doubleArcStyle">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerFamilyBottomRight">rounded</item>
        <item name="cornerSizeTopLeft">50%</item>
        <item name="cornerSizeBottomRight">50%</item>
    </style>

添加图片

<!--双弧度图片-->
<com.google.android.material.imageview.ShapeableImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/test"
                app:shapeAppearanceOverlay="@style/doubleArcStyle"

运行

⑦ 标签图片

"TipImageStyle">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerFamilyBottomRight">rounded</item>
        <item name="cornerSizeTopLeft">50%</item>
        <item name="cornerSizeBottomRight">50%</item>
        <item name="cornerFamilyTopRight">cut</item>
        <item name="cornerFamilyBottomLeft">cut</item>
        <item name="cornerSizeTopRight">24dp</item>
        <item name="cornerSizeBottomLeft">24dp</item>
    </style>

添加图片

<!--标签图片-->
<com.google.android.material.imageview.ShapeableImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/test"
                app:shapeAppearanceOverlay="@style/TipImageStyle"

我相信你已经会玩了。

⑧ 头像图片

头像常规的就是一个圆形的，然后外边有一个边框。圆形的样式之前已经写了，那么只需要边框就可以了。边框就更简单了。

<com.google.android.material.imageview.ShapeableImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:padding="2dp"
                android:src="@mipmap/test"
                app:shapeAppearanceOverlay="@style/circleImageStyle"
                app:strokeColor="#000"
                app:strokeWidth="4dp"

可以看到，它比常规的图片多了三个属性

android:padding="2dp"
app:strokeColor="#000"
app:strokeWidth="4dp"

这里我为什么要填充呢？这是因为strokeWidth的宽度表示内外各2dp。如果不设置padding=“2dp”，就会出现这样的效果

所以可以看到，上下左右都少了2dp,那么就要加上，加上之后：

效果不错吧！

然后滚动一下，看一下效果。

2. 样式解读

你以为这就完了吗？当然木有，我相信从上述的使用过程中，你已经知道怎么设置相应的样式来显示效果了，但是还是得说明一下，各个样式代表的意思，那么去哪里看呢？当然是源码啦。首先把项目的模式切换为project，如果你是得话当我没说。

然后展开这个目录

它里面都是一些项目中的依赖库。然后在里面找到

再展开。找到这个values文件

打开里面的value.xml

然后Ctrl + F 搜索当前页，输入ShapeableImageView，找到如下图所示的地方

<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>

<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>

可以看到里面只有四个样式，有三个我们在上面就已经用到了。

• strokeWidth描边宽度，（内外描边，需要设置一半的值为填充）
• strokeColor描边颜色，常规颜色就可以。
• shapeAppearanceShapeableImageView的外观形状样式，需要设置Style。
• shapeAppearanceOverlayShapeableImageView的外观形状叠加样式，需要设置Style。

shapeAppearance和shapeAppearanceOverlay我感觉差不太多，如果单独使用的话，可以互相切换，一起使用可能就不一样了。

比如

可以看到我设置两个属性，但是shapeAppearanceOverlay是作为最终显示效果的。shapeAppearance设置的为圆角，shapeAppearanceOverlay设置为圆形，结果显示的就是圆形，你要是不信邪，就自己也是试一下。说到样式，也要详细的说一下：

比如这个圆角图片，我们看到cornerFamily的属性是rounded，其实它只有两个属性值。另一个是cut，也就是说只有圆角和切角，默认是上下左右。而cornerSize代表大小，也是默认上下左右。

• cornerFamilyTopLeft左上的形状
• cornerSizeTopLeft左上的的大小
  其他形状参考这个来设置就可以了。

3. 总结

这种图片的用法，还是比较不错的，通过简单的代码就可以实现效果，同时显示网络图片也是没问题的。OK，就到这里了。最后注意一点，在低版本的Andoid设备上可能不会生效哦！

​​项目源码地址​​