[Android] ImageView ScaleType完全解

2018-01-23 本文已影响0人薛定谔的金鱼

ImageView有一个ScaleType的属性，该属性决定了图片在ImageView上的展现形式，包括：是否进行缩放、如何进行缩放、缩放之后图片的摆放位置等等。官方介绍如下：

Options for scaling the bounds of an image to the bounds of this view.

译：缩放图片边界到视图边界的选项。

ScaleType的设置方式包括：
1. 在layout的xml中定义android:scaleType="xxx"；
2. 在java代码中调用imageView.setScaleType(ImageView.ScaleType.XXX)。

ScaleType的取值包括：
MATRIX、FIT_XY、FIT_START、FIT_CENTER、FIT_END、CENTER、CENTER_CROP、CENTER_INSIDE

接下来，将对ScaleType的取值和对应的显示效果用最直观的方式——真图演示，来进行解析说明。

big_car——1920px * 1280px

small_car——499px * 299px

1. MATRIX

运用图片进行绘制时的矩阵进行缩放，该矩阵可以通过imageView.setImageMatrix(matrix)进行设置。默认情况下展现形式为：不进行任何缩放，从ImageView的左上角开始摆放，原图超过ImageView的部分作裁剪处理。

代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="1000px"
        android:layout_height="500px"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:background="#B3E5FC"
        android:scaleType="matrix"
        android:src="@drawable/big_car" />

    <ImageView
        android:layout_width="1000px"
        android:layout_height="500px"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp"
        android:background="#B3E5FC"
        android:scaleType="matrix"
        android:src="@drawable/small_car" />

</RelativeLayout>

显示效果如下：

matrix

2. FIT_XY

图片的长和宽（X和Y）独立缩放，不保留原本的长宽比，最终完全填充ImageView。

代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="1000px"
        android:layout_height="500px"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:background="#B3E5FC"
        android:scaleType="fitXY"
        android:src="@drawable/big_car" />

    <ImageView
        android:layout_width="1000px"
        android:layout_height="500px"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp"
        android:background="#B3E5FC"
        android:scaleType="fitXY"
        android:src="@drawable/small_car" />

</RelativeLayout>

显示效果如下：

fitXY

3.FIT_START

保留图片原本的长宽比，对图片的长和宽（X和Y）进行等比例缩放，直到图片至少一边与ImageView重合，并且图片完全显示在ImageView里面，最终将图片左上角与ImageView对齐进行摆放。

代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="1000px"
        android:layout_height="500px"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:background="#B3E5FC"
        android:scaleType="fitStart"
        android:src="@drawable/big_car" />

    <ImageView
        android:layout_width="1000px"
        android:layout_height="500px"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp"
        android:background="#B3E5FC"
        android:scaleType="fitStart"
        android:src="@drawable/small_car" />

</RelativeLayout>

显示效果如下：

fitStart

4.FIT_CENTER

保留图片原本的长宽比，对图片的长和宽（X和Y）进行等比例缩放，直到图片至少一边与ImageView重合，并且图片完全显示在ImageView里面，最终将图片在ImageView中居中展示。

代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="1000px"
        android:layout_height="500px"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:background="#B3E5FC"
        android:scaleType="fitCenter"
        android:src="@drawable/big_car" />

    <ImageView
        android:layout_width="1000px"
        android:layout_height="500px"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp"
        android:background="#B3E5FC"
        android:scaleType="fitCenter"
        android:src="@drawable/small_car" />

</RelativeLayout>

显示效果如下：

fitCenter

5.FIT_END

保留图片原本的长宽比，对图片的长和宽（X和Y）进行等比例缩放，直到图片至少一边与ImageView重合，并且图片完全显示在ImageView里面，最终将图片右下角与ImageView对齐进行摆放。

代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="1000px"
        android:layout_height="500px"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:background="#B3E5FC"
        android:scaleType="fitEnd"
        android:src="@drawable/big_car" />

    <ImageView
        android:layout_width="1000px"
        android:layout_height="500px"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp"
        android:background="#B3E5FC"
        android:scaleType="fitEnd"
        android:src="@drawable/small_car" />

</RelativeLayout>

显示效果如下：

fitEnd

6.CENTER

对图片不进行任何缩放，将图片居中显示在ImageView上，原图超过ImageView的部分作裁剪处理。

代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="1000px"
        android:layout_height="500px"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:background="#B3E5FC"
        android:scaleType="center"
        android:src="@drawable/big_car" />

    <ImageView
        android:layout_width="1000px"
        android:layout_height="500px"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp"
        android:background="#B3E5FC"
        android:scaleType="center"
        android:src="@drawable/small_car" />

</RelativeLayout>

显示效果如下：

center

7.CENTER_CROP

保留图片原本的长宽比，对图片的长和宽（X和Y）进行等比例缩放，直到图片与ImageView完全重合或者图片一边与ImageView重合、另一边大于ImageView，最终将图片在ImageView中居中展示。

代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="1000px"
        android:layout_height="500px"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:background="#B3E5FC"
        android:scaleType="centerCrop"
        android:src="@drawable/big_car" />

    <ImageView
        android:layout_width="1000px"
        android:layout_height="500px"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp"
        android:background="#B3E5FC"
        android:scaleType="centerCrop"
        android:src="@drawable/small_car" />

</RelativeLayout>

显示效果如下：

centerCrop

8.CENTER_INSIDE

保留图片原本的长宽比，如果图片长和宽（X和Y）均小于ImageView的长和宽，则不进行放大，直接将图片在ImageView中居中展示；否则对图片的长和宽（X和Y）进行等比例缩小，直到图片至少一边与ImageView重合，并且图片完全显示在ImageView里面，最终将图片在ImageView中居中展示。

代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="1000px"
        android:layout_height="500px"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:background="#B3E5FC"
        android:scaleType="centerInside"
        android:src="@drawable/big_car" />

    <ImageView
        android:layout_width="1000px"
        android:layout_height="500px"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp"
        android:background="#B3E5FC"
        android:scaleType="centerInside"
        android:src="@drawable/small_car" />

</RelativeLayout>

显示效果如下：

centerInside

总结：

1.ScaleType可以分为三类：MATRIX（矩阵）、FIT_X类和CENTER_X类；

2.FIX_X类的共同特性是：图片至少有一边与ImageView重合，并且图片完全显示在ImageView里面；

3.FIT_CENTER与CENTER_INSIDE的区别：如果图片的长和宽均小于ImageView的长和宽，FIT_CENTER会进行等比例放大，而CENTER_INSIDE不会进行放大。

[Android] ImageView ScaleType完全解

1. MATRIX

2. FIT_XY

3.FIT_START

4.FIT_CENTER

5.FIT_END

6.CENTER

7.CENTER_CROP

8.CENTER_INSIDE

总结：

猜你喜欢

热点阅读