—— 你以为的极限弄不好是别人的起点。
上一篇我们讲了文本输入框EditText的基本用法，这里来学习图片控件ImageView的基本用法。
ImageView是什么
ImageView，图像视图，直接继承自View类，它的主要功能是用于显示图片，实际上它不仅仅可以用来显示图片，任何Drawable对象都可以使用ImageView来显示。ImageView可以适用于任何布局中，并且Android为其提供了缩放和着色的一些操作。
ImageView有什么用
用来显示图片。
ImageView怎么用
继续基于上一篇的项目，我们增加几张图片：
| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190 | <?``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``=``".TestActivity"``>`` ``...`` ``...`` ``...`` ``<``ImageView`` ``android:id``=``"@+id/img1"`` ``android:layout_width``=``"100dp"`` ``android:layout_height``=``"100dp"`` ``android:layout_marginLeft``=``"20dp"`` ``android:layout_marginTop``=``"20dp"`` ``android:background``=``"@drawable/bg"`` ``app:layout_constraintStart_toStartOf``=``"parent"`` ``app:layout_constraintTop_toBottomOf``=``"@+id/et_password" />`` ``<``TextView`` ``android:id``=``"@+id/tv1"`` ``android:layout_width``=``"wrap_content"`` ``android:layout_height``=``"wrap_content"`` ``android:layout_marginLeft``=``"30dp"`` ``android:text``=``"background"`` ``app:layout_constraintStart_toStartOf``=``"parent"`` ``app:layout_constraintTop_toBottomOf``=``"@+id/img1" />`` ``<``ImageView`` ``android:id``=``"@+id/img2"`` ``android:layout_width``=``"100dp"`` ``android:layout_height``=``"100dp"`` ``android:layout_marginLeft``=``"30dp"`` ``android:background``=``"#CCCCCC"`` ``android:scaleType``=``"fitStart"`` ``android:src``=``"@drawable/bg"`` ``app:layout_constraintStart_toEndOf``=``"@+id/img1"`` ``app:layout_constraintTop_toTopOf``=``"@+id/img1" />`` ``<``TextView`` ``android:id``=``"@+id/tv2"`` ``android:layout_width``=``"wrap_content"`` ``android:layout_height``=``"wrap_content"`` ``android:layout_marginLeft``=``"20dp"`` ``android:text``=``"src+fitStart"`` ``app:layout_constraintStart_toStartOf``=``"@+id/img2"`` ``app:layout_constraintTop_toBottomOf``=``"@+id/img2" />`` ``<``ImageView`` ``android:id``=``"@+id/img3"`` ``android:layout_width``=``"100dp"`` ``android:layout_height``=``"100dp"`` ``android:layout_marginLeft``=``"30dp"`` ``android:background``=``"#CCCCCC"`` ``android:scaleType``=``"fitCenter"`` ``android:src``=``"@drawable/bg"`` ``app:layout_constraintStart_toEndOf``=``"@+id/img2"`` ``app:layout_constraintTop_toTopOf``=``"@+id/img2" />`` ``<``TextView`` ``android:id``=``"@+id/tv3"`` ``android:layout_width``=``"wrap_content"`` ``android:layout_height``=``"wrap_content"`` ``android:text``=``"src+fitCenter(默认)"`` ``app:layout_constraintStart_toStartOf``=``"@+id/img3"`` ``app:layout_constraintTop_toBottomOf``=``"@+id/img3" />`` ``<``ImageView`` ``android:id``=``"@+id/img4"`` ``android:layout_width``=``"100dp"`` ``android:layout_height``=``"100dp"`` ``android:layout_marginLeft``=``"20dp"`` ``android:layout_marginTop``=``"20dp"`` ``android:background``=``"#cccccc"`` ``android:scaleType``=``"fitEnd"`` ``android:src``=``"@drawable/bg"`` ``app:layout_constraintStart_toStartOf``=``"parent"`` ``app:layout_constraintTop_toBottomOf``=``"@+id/tv1" />`` ``<``TextView`` ``android:id``=``"@+id/tv4"`` ``android:layout_width``=``"wrap_content"`` ``android:layout_height``=``"wrap_content"`` ``android:layout_marginLeft``=``"30dp"`` ``android:text``=``"src+fitEnd"`` ``app:layout_constraintStart_toStartOf``=``"parent"`` ``app:layout_constraintTop_toBottomOf``=``"@+id/img4" />`` ``<``ImageView`` ``android:id``=``"@+id/img5"`` ``android:layout_width``=``"100dp"`` ``android:layout_height``=``"100dp"`` ``android:layout_marginLeft``=``"30dp"`` ``android:background``=``"#cccccc"`` ``android:scaleType``=``"fitXY"`` ``android:src``=``"@drawable/bg"`` ``app:layout_constraintStart_toEndOf``=``"@+id/img4"`` ``app:layout_constraintTop_toTopOf``=``"@+id/img4" />`` ``<``TextView`` ``android:id``=``"@+id/tv5"`` ``android:layout_width``=``"wrap_content"`` ``android:layout_height``=``"wrap_content"`` ``android:layout_marginLeft``=``"20dp"`` ``android:text``=``"src+fitXY"`` ``app:layout_constraintStart_toStartOf``=``"@+id/img5"`` ``app:layout_constraintTop_toBottomOf``=``"@+id/img5" />`` ``<``ImageView`` ``android:id``=``"@+id/img6"`` ``android:layout_width``=``"100dp"`` ``android:layout_height``=``"100dp"`` ``android:layout_marginLeft``=``"30dp"`` ``android:background``=``"#CCCCCC"`` ``android:scaleType``=``"centerCrop"`` ``android:src``=``"@drawable/bg"`` ``app:layout_constraintStart_toEndOf``=``"@+id/img5"`` ``app:layout_constraintTop_toTopOf``=``"@+id/img5" />`` ``<``TextView`` ``android:id``=``"@+id/tv6"`` ``android:layout_width``=``"wrap_content"`` ``android:layout_height``=``"wrap_content"`` ``android:text``=``"src+centerCrop"`` ``app:layout_constraintStart_toStartOf``=``"@+id/img6"`` ``app:layout_constraintTop_toBottomOf``=``"@+id/img6" />`` ``<``ImageView`` ``android:id``=``"@+id/img7"`` ``android:layout_width``=``"100dp"`` ``android:layout_height``=``"100dp"`` ``android:layout_marginLeft``=``"20dp"`` ``android:layout_marginTop``=``"20dp"`` ``android:background``=``"#cccccc"`` ``android:scaleType``=``"center"`` ``android:src``=``"@drawable/bg"`` ``app:layout_constraintStart_toStartOf``=``"parent"`` ``app:layout_constraintTop_toBottomOf``=``"@+id/tv4" />`` ``<``TextView`` ``android:id``=``"@+id/tv7"`` ``android:layout_width``=``"wrap_content"`` ``android:layout_height``=``"wrap_content"`` ``android:layout_marginLeft``=``"30dp"`` ``android:text``=``"src+center"`` ``app:layout_constraintStart_toStartOf``=``"parent"`` ``app:layout_constraintTop_toBottomOf``=``"@+id/img7" />`` ``<``ImageView`` ``android:id``=``"@+id/img8"`` ``android:layout_width``=``"100dp"`` ``android:layout_height``=``"100dp"`` ``android:layout_marginLeft``=``"30dp"`` ``android:background``=``"#cccccc"`` ``android:scaleType``=``"centerInside"`` ``android:src``=``"@drawable/bg"`` ``app:layout_constraintStart_toEndOf``=``"@+id/img7"`` ``app:layout_constraintTop_toTopOf``=``"@+id/img7" />`` ``<``TextView`` ``android:id``=``"@+id/tv8"`` ``android:layout_width``=``"wrap_content"`` ``android:layout_height``=``"wrap_content"`` ``android:text``=``"src+centerInside"`` ``app:layout_constraintStart_toStartOf``=``"@+id/img8"`` ``app:layout_constraintTop_toBottomOf``=``"@+id/img8" />`` ``<``ImageView`` ``android:id``=``"@+id/img9"`` ``android:layout_width``=``"100dp"`` ``android:layout_height``=``"100dp"`` ``android:layout_marginLeft``=``"30dp"`` ``android:background``=``"#cccccc"`` ``android:scaleType``=``"matrix"`` ``android:src``=``"@drawable/bg"`` ``app:layout_constraintStart_toEndOf``=``"@+id/img8"`` ``app:layout_constraintTop_toTopOf``=``"@+id/img8" />`` ``<``TextView`` ``android:id``=``"@+id/tv9"`` ``android:layout_width``=``"wrap_content"`` ``android:layout_height``=``"wrap_content"`` ``android:text``=``"src+matrix"`` ``app:layout_constraintStart_toStartOf``=``"@+id/img9"`` ``app:layout_constraintTop_toBottomOf``=``"@+id/img9" />``</``androidx.constraintlayout.widget.ConstraintLayout``> |
|---|
上面显示了八张图片，我们分别来看看：
| 123 | android:background="@drawable/bg"：表示将图片bg作为背景图片填充ImageView的长宽；``android:src="@drawable/bg"：表示将图片bg作为前景图片显示在ImageView上，这里需要注意的是当使用src显示图片时，图片显示的方式有8种模式，其实可以分为三个类型；``android:layout_marginLeft：控件离左方的距离； |
|---|
属性android:src的三种类型
| 123 | 以FIT_开头的4种，它们的共同点是都会对图片进行缩放；``以CENTER_开头的3种，它们的共同点是居中显示，图片的中心点会与ImageView的中心点重叠；``ScaleType.MATRIX，保持原图大小、从左上角的点开始，以矩阵形式绘图； |
|---|
其中 android:inputType=”number” 是规定输入框内只能输入数字。
下面具体看看8中模式的区别：
| 123456789101112131415 | fitStart：图片等比缩放到控件大小，并放置在控件的上边或左边展示。此模式下会在ImageView的下半部分留白，如果图片高度大于宽，那么就会在ImageView的右半部份留白；``fitCenter：该模式是ImageView的默认模式，如果没有设置ScaleType时，将采用这种模式展示图片。在该模式下，图片会被等比缩放到能够填充控件大小，并居中展示；``fitEnd：图片等比缩放到控件大小，并放置在控件的下边或右边展示。此模式下会在ImageView的上半部分留白，如果图片高度大于宽，那么就会在ImageView的左半部分留白；``fitXY：图片缩放到控件大小，完全填充控件大小展示。注意，此模式不是等比缩放。这个模式理解也是最简单的；``centerCrop：图片会被等比缩放直到完全填充整个ImageView，并居中显示。该模式也是最常用的模式了，图片的高度是能完全展示出来的；``center：不使用缩放，ImageView会展示图片的中心部分，即图片的中心点和ImageView的中心点重叠。如果图片的大小小于控件的宽高，那么图片会被居中显示；``centerInside：使用此模式以完全展示图片的内容为目的。图片将被等比缩放到能够完整展示在ImageView中并居中，如果图片大小小于控件大小，那么就直接居中展示该图片；``matrix：保持原图大小、从左上角的点开始，以矩阵形式绘图，这里暂不详细说，后面再单独看。 |
|---|
