android学习笔记之ImageView的scaleType属性

我们知道,ImageView有一个属性叫做scaleType,它的取值一共同拥有八种,各自是:matrix,fitXY。fitStart,fitCenter。fitEnd,center,centerCrop。centerInside。

那我们以下一起来看看这八种取值分别代表什么意思。

我用两张图片来做demo,这两张图片的分辨率一大一小,图片分别叫做big和small。原图例如以下:

big:

small:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

OK,准备工作已经完毕。

matrix

matrix表示原图从ImageView的左上角開始绘制。假设原图大于ImageView,那么多余的部分则剪裁掉,假设原图小于ImageView,那么对原图不做不论什么处理。比方我的两张大小不同的图片。分别显示在96dp×96dp的ImageView上,会有不同的效果,代码例如以下:

    <ImageView
        android:layout_width="96dp"
        android:layout_height="96dp"
        android:adjustViewBounds="false"
        android:background="#ffaa77"
        android:scaleType="matrix"
        android:src="@drawable/big" />

    <ImageView
        android:layout_width="96dp"
        android:layout_height="96dp"
        android:adjustViewBounds="false"
        android:background="#aa99cc"
        android:scaleType="matrix"
        android:src="@drawable/small" />

显示效果例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

我们看到,big图片因为比較大,因此仅仅有左上角显示出来了。其它部分则被剪裁掉了。而small图片因为分辨率比較小。因此完整的显示在ImageView的左上角。

fitXY

fitXY的目标是填充整个ImageView。为了完毕这个目标,它须要对图片进行一些缩放操作,在缩放的过程中。它不会依照原图的比例来缩放。比方以下一个栗子:

    <ImageView
        android:layout_width="96dp"
        android:layout_height="96dp"
        android:background="#ffaa77"
        android:scaleType="fitXY"
        android:src="@drawable/big" />

    <ImageView
        android:layout_width="96dp"
        android:layout_height="128dp"
        android:background="#aa99cc"
        android:scaleType="fitXY"
        android:src="@drawable/small" />

显示效果例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

两张图片都被显示出来了,可是都有一定程度的变形。因为在这里系统仅仅考虑将ImageView填充满,而不会依照原图比例去缩放。

fitStart

将图片按比例缩放至View的宽度或者高度(取宽和高的最小值),然后居上或者居左显示(与前面缩放至宽还是高有关),我们来看以下一个样例:

    <ImageView
        android:layout_width="48dp"
        android:layout_height="256dp"
        android:background="#ffaa77"
        android:scaleType="fitStart"
        android:src="@drawable/big" />

    <ImageView
        android:layout_width="256dp"
        android:layout_height="36dp"
        android:background="#aa99cc"
        android:scaleType="fitStart"
        android:src="@drawable/small" />

显示效果:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

big图片是缩放至ImageView的宽度,然后居上显示。small图片是缩放至ImageView的高度,然后居左显示。

fitCenter

fitCenter和fitStart基本一样,唯一不同的是fitCenter将图片按比例缩放之后是居中显示。看以下一个样例:

    <ImageView
        android:layout_width="48dp"
        android:layout_height="256dp"
        android:background="#ffaa77"
        android:scaleType="fitCenter"
        android:src="@drawable/big" />

    <ImageView
        android:layout_width="256dp"
        android:layout_height="48dp"
        android:background="#aa99cc"
        android:scaleType="fitCenter"
        android:src="@drawable/small" />

显示效果例如以下:

fitEnd

fitEnd和fitStart也基本一样。唯一不同的是fitEnd将图片按比例缩放之后是居右或者居下显示,比方以下一个Demo:

    <ImageView
        android:layout_width="48dp"
        android:layout_height="256dp"
        android:background="#ffaa77"
        android:scaleType="fitEnd"
        android:src="@drawable/big" />

    <ImageView
        android:layout_width="256dp"
        android:layout_height="48dp"
        android:background="#aa99cc"
        android:scaleType="fitEnd"
        android:src="@drawable/small" />

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

center

center表示将原图依照原来的大小居中显示,假设原图的大小超过了ImageView的大小,那么剪裁掉多余部分,仅仅显示中间一部分图像,比方以下一个Demo:

    <ImageView
        android:layout_width="48dp"
        android:layout_height="256dp"
        android:background="#ffaa77"
        android:scaleType="center"
        android:src="@drawable/big" />

    <ImageView
        android:layout_width="256dp"
        android:layout_height="24dp"
        android:background="#aa99cc"
        android:scaleType="center"
        android:src="@drawable/small" />

显示效果例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

centerCrop

centerCrop的目标是将ImageView填充满,故按比例缩放原图,使得能够将ImageView填充满。同一时候将多余的宽或者高剪裁掉,比方以下一个Demo :

    <ImageView
        android:layout_width="48dp"
        android:layout_height="256dp"
        android:background="#ffaa77"
        android:scaleType="centerCrop"
        android:src="@drawable/big" />

    <ImageView
        android:layout_width="256dp"
        android:layout_height="48dp"
        android:background="#aa99cc"
        android:scaleType="centerCrop"
        android:src="@drawable/small" />

显示效果例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

centerInsid

centerInside的目标是将原图完整的显示出来。故按比例缩放原图。使得ImageView能够将原图完整显示,比方以下一个Demo:

    <ImageView
        android:layout_width="48dp"
        android:layout_height="256dp"
        android:background="#ffaa77"
        android:scaleType="centerInside"
        android:src="@drawable/big" />

    <ImageView
        android:layout_width="256dp"
        android:layout_height="48dp"
        android:background="#aa99cc"
        android:scaleType="centerInside"
        android:src="@drawable/small" />

显示效果例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

OK。关于scaleType属性我们就说这么多。普通情况下,当我们给ImageView的宽高都为固定值的时候我们才有可能用到这些属性。

Demo下载

时间: 2024-10-11 22:36:37

android学习笔记之ImageView的scaleType属性的相关文章

Android学习笔记_S01_E04 ImageView及其子类(一)

一.基本定义 ImageView继承自View组件,它的主要功能是用于显示任何Drawable对象,派生出了ImageButton.ZoomButton等组件. 二.属性和方法 1.ImageView的xml属性和方法 xml属性 相关方法 说明 android:adjustViewBounds setAdjustViewBounds(boolean) 设置该属性为真可以在 ImageView 调整边界时保持图片的纵横比例.(需要与maxWidth.MaxHeight一起使用,否则单独使用没有效

android学习笔记:ImageView

在学习ImageView时遇到的问题: 将图片置于drawable下,通过如下代码引用: android:src="@drawable/scenery1" 在真机上调试无法显示 后将图片置于mipmap下,通过如下代码引用: android:src="@mipmap/scenery1" 可正常显示,不明白原因,暂做记录

Android自学笔记之ImageView的特殊属性及同为背景属性的src、background区别

1.android:orientation 垂直摆放: 2.ImageView 中的src属性和background属性的区别: src的尺寸不随控件大小而改变,只是引用图片 background的尺寸始终和控件大小相同,类似填充效果,把图片塞满控件 src和background可共存在同一个控件中 版权声明:本文为博主原创文章,未经博主允许不得转载.

Android学习笔记之Menu的ShowAsAction属性的设置

(1)在res--menu目录下的main.xml文件 <menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/file" android:orderInCategory="100" android:showAsAction="always" android:title="文件

[转]Android ImageView的scaleType属性与adjustViewBounds属性

Android ImageView的scaleType属性与adjustViewBounds属性 ImageView的scaleType的属性有好几种,分别是matrix(默认).center.centerCrop.centerInside.fitCenter.fitEnd.fitStart.fitXY android:scaleType="center" 保持原图的大小,显示在ImageView的中心.当原图的size大于ImageView的size,超过部分裁剪处理. androi

Android 源码系列之&lt;一&gt;从源码的角度深入理解ImageView的ScaleType属性

做Android开发的童靴们肯定对系统自带的控件使用的都非常熟悉,比如Button.TextView.ImageView等.如果你问我具体使用,我会给说:拿ImageView来说吧,首先创建一个新的项目,在项目布局文件中应用ImageView控件,代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.

Android ImageView的ScaleType属性

android中ImageView的ScaleType属性 ScaleType的值分别代表的意义: ImageView是Android中的基础图片显示控件,该控件有个重要的属性是ScaleType,该属性用以表示显示图片的方式,共有8种取值 ScaleType.CENTER::图片大小为原始大小,如果图片大小大于ImageView控件,则截取图片中间部分,若小于,则直接将图片居中显示. ScaleType.CENTER_CROP:将图片等比例缩放,让图像的短边与ImageView的边长度相同,即

Android学习笔记之mainfest文件中android属性

Android学习笔记之mainfest文件中android属性 - Impossible is nothing - 博客频道 - CSDN.NET 以前的零散笔记, 共享一下, 有错误的地方还请指正. android:allowTaskReparenting 是否允许activity更换从属的任务,比如从短信息任务 切换到浏览器任务.---------------------------------------------------------------------------------

Android ImageView 的 ScaleType 属性

Android ImageView 的 ScaleType 属性用来表示图片的显示方式.总共有8种取值,取值的范围定义在 android.widget.ImageView.ScaleType 这个枚举类型里. ImageView.ScaleType.CENTER : 居中,但不缩放.图片超出控件的部分不显示,小于控件的部分就留白.Center the image in the view , but perform no scaling . ImageView.ScaleType.CENTER_C