2024年Android最新Android Material UI控件之ShapeableImageView，面试测试题40道

学习福利

【Android 详细知识点思维脑图（技能树）】

其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

虽然 Android 没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。这只能说明 Android 中级以下的岗位饱和了，现在高级工程师还是比较缺少的，很多高级职位给的薪资真的特别高（钱多也不一定能找到合适的），所以努力让自己成为高级工程师才是最重要的。

这里附上上述的面试题相关的几十套字节跳动，京东，小米，腾讯、头条、阿里、美团等公司19年的面试题。把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节。

由于篇幅有限，这里以图片的形式给大家展示一小部分。

网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

你有使用过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中新建即可，比如

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

代码中跳转到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” />

</androidx.core.widget.NestedScrollView>

① 圆角图片

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

好了，直接来运行吧。

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

② 圆形图片

先来看这个样式

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

是不是简简单单。

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

③ 切角图片

先增加一个样式

然后增加一个图片

<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%,那就是菱形图片了。

④ 菱形图片

添加样式

添加图片

<com.google.android.material.imageview.ShapeableImageView

android:layout_width=“100dp”

android:layout_height=“100dp”

android:src=“@mipmap/test”

app:shapeAppearanceOverlay=“@style/diamondImageStyle” />

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

⑤ 单圆角图片

添加样式

这个意思很明显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” />

运行

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

添加样式