Android开发学习教程（10）- Android ImageView用法和属性

—— 你以为的极限弄不好是别人的起点。

上一篇我们讲了文本输入框EditText的基本用法，这里来学习图片控件ImageView的基本用法。

ImageView是什么

ImageView，图像视图，直接继承自View类，它的主要功能是用于显示图片，实际上它不仅仅可以用来显示图片，任何Drawable对象都可以使用ImageView来显示。ImageView可以适用于任何布局中，并且Android为其提供了缩放和着色的一些操作。

ImageView有什么用

用来显示图片。

ImageView怎么用

继续基于上一篇的项目，我们增加几张图片：

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

上面显示了八张图片，我们分别来看看：

	android:background="@drawable/bg"：表示将图片bg作为背景图片填充ImageView的长宽；
	android:src="@drawable/bg"：表示将图片bg作为前景图片显示在ImageView上，这里需要注意的是当使用src显示图片时，图片显示的方式有8种模式，其实可以分为三个类型；
	android:layout_marginLeft：控件离左方的距离；

属性android:src的三种类型

	以FIT_开头的4种，它们的共同点是都会对图片进行缩放；
	以CENTER_开头的3种，它们的共同点是居中显示，图片的中心点会与ImageView的中心点重叠；
	ScaleType.MATRIX，保持原图大小、从左上角的点开始，以矩阵形式绘图；

其中 android:inputType="number" 是规定输入框内只能输入数字。

下面具体看看8中模式的区别：

	fitStart：图片等比缩放到控件大小，并放置在控件的上边或左边展示。此模式下会在ImageView的下半部分留白，如果图片高度大于宽，那么就会在ImageView的右半部份留白；
	
	fitCenter：该模式是ImageView的默认模式，如果没有设置ScaleType时，将采用这种模式展示图片。在该模式下，图片会被等比缩放到能够填充控件大小，并居中展示；
	
	fitEnd：图片等比缩放到控件大小，并放置在控件的下边或右边展示。此模式下会在ImageView的上半部分留白，如果图片高度大于宽，那么就会在ImageView的左半部分留白；
	
	fitXY：图片缩放到控件大小，完全填充控件大小展示。注意，此模式不是等比缩放。这个模式理解也是最简单的；
	
	centerCrop：图片会被等比缩放直到完全填充整个ImageView，并居中显示。该模式也是最常用的模式了，图片的高度是能完全展示出来的；
	
	center：不使用缩放，ImageView会展示图片的中心部分，即图片的中心点和ImageView的中心点重叠。如果图片的大小小于控件的宽高，那么图片会被居中显示；
	
	centerInside：使用此模式以完全展示图片的内容为目的。图片将被等比缩放到能够完整展示在ImageView中并居中，如果图片大小小于控件大小，那么就直接居中展示该图片；
	
	matrix：保持原图大小、从左上角的点开始，以矩阵形式绘图，这里暂不详细说，后面再单独看。

本篇源码下载地址：https://pan.baidu.com/s/1LhRbY6pkmB2f0NJr0iJPOg 提取码: helu