Android学习分享-常见控件03-ImageView详解

本节引言

ImageView是Android中显示图像的控件，而图像是App必不可少的一部分，接下来就让我们看看ImageView的用法。

1.基本用法

看图说话吧：

我们看到在应用中显示了一张图片，这是如何做到的呢?我们一步一步来学习。

1. 我们需要把图片放入项目前缀为drawable的文件夹中，如图：
   
   图片被放在drawable-mdpi下面（其他后缀为hdpi，xhdpi，xxhdpi的文件夹是用来做屏幕适配的，这个以后会讲到）。
2. 编写代码，利用ImageView的src属性来引用图片资源，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.liu.blogproject.imageview.MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/krystal"/>
</LinearLayout>

当我们在drawable导入图片时，会在项目的R文件中生成一个以图片名字的id，这时我们使用src引用图片，方式是src=“@drawable/图片id”。

2.注意事项

ImageView的用法比较简单，但是有以下需要注意的地方：

1.src和background属性的区别

上一节讲Button的时候说过backgroud属性能引用一张图片，那么这和ImageView的src的属性有什么区别呢？

src指得是ImageView的内容，而background指的是背景，也就是说当我们用backgroud引用图片的时候，控件有多大，就显示多大，然而使用src引用图片的时候，会受到其他属性的制约。

我们用代码验证一下，先看图：

再看代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout        xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"   tools:context="com.liu.blogproject.imageview.MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/krystal"/>
    <ImageView
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:src="@drawable/krystal"/>
    <ImageView
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:background="@drawable/krystal"/>
</LinearLayout>

结果分析

第一个ImageView的宽高都为wrap_content，显示的就是原图大小，但是当我们把宽度修改为300dp之后，src显示的图片还是那么大（只图片显示位置在中间，两边会有白色填充，这和scaleType属性有关）， background则会强行拉伸图片，填充满整个ImageView。

2.scaleType属性

当我们使用src引用图片的时候，scaleType不同的取值会对图片展示效果有一定的影响，以下是scaleType的取值：

• fitXY:对图像的横向与纵向进行独立缩放,使得该图片完全充满ImageView,但是图片的横纵比并不是等比例的。
• fitStart:保持纵横比缩放图片,知道较长的边与ImageView的边相等,缩放完成后将图片放在ImageView的左上角。
• fitCenter:同上,缩放后放于中间;
• fitEnd:同上,缩放后放于右下角;
• center:按图片的原来size居中显示，当图片长/宽超过View的长/宽，则截取图片的居中部分显示。
• centerCrop:保持横纵比缩放图片,直到完全覆盖ImageView,可能会出现图片的显示不完全
• centerInside:保持横纵比缩放图片,直到ImageView能够完全地显示图片
• matrix:不改变原图的大小，从ImageView的左上角开始绘制原图， 原图超过ImageView的部分作裁剪处理

接下来依次看看各个scaleType取值的效果
代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/krystal"
        />

</LinearLayout>

1. fitCenter（默认取值）

图片的宽（高）一定小于或等于 ImageView 的宽高,图片的宽(高)至少有一个等于ImageView的宽(高),图片居中显示在 ImageView 中。

2.fitStart

图片的宽（高）一定小于或等于 ImageView 的宽高,图片的宽(高)至少有一个等于ImageView的宽(高),图片显示在 ImageView 的左（上）。

3.fitEnd

图片的宽（高）一定小于或等于 ImageView 的宽高,图片的宽(高)至少有一个等于ImageView的宽(高),图片显示在 ImageView 的右（下）。

4.fitXY

不按比例缩放图片，只是为了填充满整个Imageview。

5.center

图片不放大也不缩小,图片在控件中居中显示,超出ImageView 部分不显示。

6.centerCrop

图片的宽高一定会大于或者等于 ImageView 的宽高.居中显示,超出 ImageView 部分不显示. 图片的宽(高)至少有一个等于 ImageView 的宽（高）。

7.centerInside

图片的宽高一定小于或者等于 ImageView 控件的宽高,图片居中显示。

8.matrix

不改变原图的大小，从ImageView的左上角开始绘制原图。

3.不写contentDescription属性的警告

当我们使用ImageView时，经常会看到编译器给我们一个警告

警告的意思是说我们没有写contentDescription属性，那么这个属性是干嘛的呢？

contentDescription：这是android对视力障碍的用户提供的帮助，主要功能是为视力有障碍的人增加对控件的解释。

按照Android的解释，这个属性作用不是很大，但是对于一些强迫症的人来说，看到警告很不舒服，其实去除这个警告很简单，使得contentDescription的值为@null就可以了，代码如下：

  <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/krystal"
        android:contentDescription="@null"/>

本节小结

ImageView的用法本身比较简单，困难的是在项目中需要加载网络图片，对大图片的压缩等问题，以后有时间会做总结。