美文网首页
[Android] ImageView ScaleType完全解

[Android] ImageView ScaleType完全解

作者: 薛定谔的金鱼 | 来源:发表于2018-01-23 17:22 被阅读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完全解

          本文链接:https://www.haomeiwen.com/subject/kzosaxtx.html