前言
ImageView scaleType 共八种类型,分别为:center、center_inside、center_crop、matrix、fit_xy、fit_start、fit_center、fit_end , 默认scaleType类型为fit_center
类型解释
-
center: 保持原图的大小,不做任何比例缩放处理,显示在ImageView的中心。当原图大于ImageView时,多出来的部分被截掉,原图小于ImageView 则不做任何处理。
-
matrix: 不改变原图的大小,从ImageView的左上角开始绘制,超出部分做剪切处理。
-
fit_xy: 把图片按照指定的大小在ImageView中显示,拉伸显示图片,不保持原比例,填满ImageView.
-
center_crop:强调图片要完全铺满ImageView,不能留下空白,如果原图大于ImageView, 则按照比例缩放原图,缩放后截取中间部分进行显示 ,如果原图小于ImageView 则按照比例放大原图。
-
fit_start,fit_center,fit_end : 三种模式都强调图片要完全展示在ImageView上不能被截取,另外图片的宽或高至少一边等于ImageView 的宽或高,并不强调图片宽和高都要等于ImageView的宽和高。如果原图大于ImageView, 则按照比例值等比例缩放原图,如果原图小于ImageView 则按照比例值等比例放大原图,三种模式区别在于图片展示在ImageView上的位置有所不同,fit_start模式图片展示在ImageView的左上方,fit_center模式图片展示在ImageView的中部,fit_end模式图片展示在ImagView的右下方。
-
center_inside : 强调图片要完全展示在ImageView上不能被截取,另外图片的宽或高至少一边等于ImageView 的宽或高,并不强调图片宽和高都要等于ImageView的宽和高。如果原图大于ImageView, 则按照比例值等比例缩放原图,如果原图小于ImageView 则不做任何处理,图片居中显示。 (和fit_center的区别:当图片小于ImageView size 该中模式不做任何处理而fit_center则需要等比例放大)
名词解释
原图大于ImageView :图片的宽或者高 任一 大于ImageView的宽或高,就认图片size大于ImageView size .
原图小于ImageView : 图片的宽小于ImageView的的宽并且图片的高小于ImageView的高。
缩放比例规则
假设图片的宽高为 pw,ph;ImageVide的宽高为 iw,ih;
fix_start 、fit_center、fit_end 、center_inside 这几种模式:当原图大于ImageView时 pw/iw > ph/ih 我们取大值 pw/iw 为缩放比例,只有这样图片才能完全显示在ImageView中,相反如果 pw/iw < ph/ih 则取 ph/ih 为缩放比例。当原图小于ImageView时,pw/iw > ph/ih 我们取 ph/ih 小值为放大比例
center_crop: 当原图大于ImageView, pw/iw > ph/ih ,我们取小值 ph/ih 为缩放比例,只有这样图片才能完全铺满ImageView,当原图小于ImageView时,pw/iw > ph/ih 我们取大值pw/iw 为放大比例。
手动试验方法
新建一个xml文件,里面只需要ImageView控件,然后通过不断的改变ImageView的layout_width,layout_height,scaleType以及src 文件,直接通过AS 预览xml文件即可,无需运行代码
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="@mipmap/ic_launcher"/>
</LinearLayout>