前语
你有运用过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。
<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如下：
android:scaleType="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中新建即可，比方
<!-- 圆角图片 -->
<style name="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" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</LinearLayout>
① 圆角图片
这个里边用到一个款式，能够直接在styles.xml中增加如下代码：
<!-- 圆角图片 -->
<style name="roundedImageStyle">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">24dp</item>
</style>
好了，直接来运转吧。
能够看到，圆角现已出来了，是不是很奈斯呢？嗯？当然还有不同的用法。方才我设置款式中的cornerSize的特点值为24dp。cornerFamily的特点值为rounded。表明有弧度。那么假如我要变成圆角图片呢？
② 圆形图片
先来看这个款式
<!-- 圆形图片 -->
<style name="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" />
是不是简简略单，其实不光是圆角，还有切角。
③ 切角图片
先增加一个款式
<!-- 切角图片 -->
<style name="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%,那便是菱形图片了。
④ 菱形图片
增加款式
<!-- 菱形图片 -->
<style name="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" />
上面的归于根本用法，其实你还能够这样玩。
⑤ 单圆角图片
增加款式
<!--单圆角图片-->
<style name="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" />
运转
⑥ 双圆角图片（子弹图片）
增加款式
<!--子弹图片-->
<style name="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" />
运转
这种双圆角比较丑，再来改变一下就会美观一些
<!--双弧度图片-->
<style name="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" />
运转
⑦ 标签图片
<!--标签图片-->
<style name="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，假如你是得话当我没说。 然后打开这个目录
然后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 描边色彩，惯例色彩就能够。
- shapeAppearance ShapeableImageView的外观形状款式，需求设置Style。
- shapeAppearanceOverlay ShapeableImageView的外观形状叠加款式，需求设置Style。
shapeAppearance和shapeAppearanceOverlay我感觉差不太多，假如独自运用的话，能够互相切换，一同运用或许就不相同了。 比方
说到款式，也要具体的说一下：
- cornerFamilyTopLeft 左上的形状
- cornerSizeTopLeft 左上的的巨细 其他形状参阅这个来设置就能够了。
3. 源码
这种图片的用法，仍是比较不错的，经过简略的代码就能够完成作用，同时显现网络图片也是没问题的。OK，就到这儿了。最后注意一点，在低版本的Andoid设备上或许不会生效哦！
GitHub: MaterialUIDev
