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 * 299px1. 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>
显示效果如下:
matrix2. 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>
显示效果如下:
fitXY3.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>
显示效果如下:
fitStart4.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>
显示效果如下:
fitCenter5.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>
显示效果如下:
fitEnd6.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>
显示效果如下:
center7.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>
显示效果如下:
centerCrop8.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不会进行放大。
网友评论