android学习笔记之ImageView的scaleType属性

android学习笔记之ImageView的scaleType属性我们知道,ImageView有一个属性叫做scaleType,它的取值一共有八种,分别是:matrix,fitXY,fitStart,fitCenter,fitEnd,center,centerCrop,centerInside。那我们下面一起来看看这八种取值分别代表什么意思。我用两张图片来做demo,这两张图片的分辨率一大一小,图片分别叫做big和small。原图如下:big:small:OK,

大家好,又见面了,我是你们的朋友全栈君。

我们知道,ImageView有一个属性叫做scaleType,它的取值一共有八种,分别是:matrix,fitXY,fitStart,fitCenter,fitEnd,center,centerCrop,centerInside。那我们下面一起来看看这八种取值分别代表什么意思。

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

big:

android学习笔记之ImageView的scaleType属性

small:

android学习笔记之ImageView的scaleType属性

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" />

显示效果如下:

android学习笔记之ImageView的scaleType属性

我们看到,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" />

显示效果如下:

android学习笔记之ImageView的scaleType属性

两张图片都被显示出来了,但是都有一定程度的变形,因为在这里系统只考虑将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" />

显示效果:

android学习笔记之ImageView的scaleType属性

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" />

显示效果如下:

android学习笔记之ImageView的scaleType属性

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" />


android学习笔记之ImageView的scaleType属性

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" />

显示效果如下:

android学习笔记之ImageView的scaleType属性

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" />

显示效果如下:

android学习笔记之ImageView的scaleType属性

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" />

显示效果如下:

android学习笔记之ImageView的scaleType属性

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

Demo下载

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/148306.html原文链接:https://javaforall.net

(0)
上一篇 2022年6月15日 下午7:36
下一篇 2022年6月15日 下午7:36


相关推荐

  • 矩阵的求导

    矩阵的求导目录 1 布局 Layout 1 1 矩阵向量求导引入 1 2 矩阵向量求导定义 1 3 矩阵向量求导布局 1 4 分母布局的另一种求解方法 1 5 总结 2 基本的求导规则 2 1 向量对标量求导 相对于数量变量的微分 即自变量是数量变量 2 1 1 定义 2 1 2 运算法则 2 2 标量 y 对向量 x 求导 数量函数相对于向量的微分 2 2 1 定义 2 2

    2026年3月18日
    4
  • OWASP TOP10系列之#TOP1# A1-注入类「建议收藏」

    OWASP TOP10系列之#TOP1# A1-注入类「建议收藏」OWASPTOP10系列之#TOP1#注入类提示:本系列将介绍OWASPTOP10安全漏洞相关介绍,主要针对漏洞类型、攻击原理以及如何防御进行简单讲解;如有错误,还请大佬指出,定会及时改正~文章目录OWASPTOP10系列之#TOP1#注入类前言一、注入类漏洞是什么?二、什么情况下会产生注入类漏洞问题?三、如何预防?四、具体示例1.SQL注入2.OS命令注入3.XPath注入总结前言在OWASP(开放式Web应用程序安全项目)公布的10项最严重的Web应用程序安全风险列表的在

    2022年5月15日
    39
  • Vue.js构建项目笔记2:vuejs+vue-router

    Vue.js构建项目笔记2:vuejs+vue-router

    2022年3月7日
    41
  • 基于阿里DDNS的ipv6 for windows版软件「建议收藏」

    基于阿里DDNS的ipv6 for windows版软件「建议收藏」基于阿里DDNS的ipv6forwindows版软件会搜到这篇帖子的同学,应该和我一样,满世界为自己的虚拟主机找寻ipv6的动态ddns程序吧?下面我先说说我的折腾故事:因为买了群晖,然后发现需要公网ip,但公网ip现在电信要钱了,开口100元一个月,挺黑的。没办法尝试了各种内网穿透,这类帖子网上很多,就不细说了,总之是各种折腾,各种不爽,最终选择了零遁伴侣做内网穿透还算稳定,速度也不错。…

    2022年6月13日
    55
  • 软件需求规格说明书范例

    完整版(包括图片表格,请访问http://www.omegaxyz.com/2019/07/23/software-specification/)文章目录一、引言1.1定位与目标1.2对象1.3软件需求分析理论1.4软件需求分析目标二、需求概述2.1项目背景2.2需求概述2.3系统结构三、系统功能需求3.1功能总览3.2业务流程图3.3数据流…

    2022年4月3日
    108
  • c#窗体怎么居中_窗口居中

    c#窗体怎么居中_窗口居中窗体始终居桌面中央显示,需要考虑以下两个方面:(1).窗体距离桌面左部边缘与桌面的宽度以及自身宽度的判断;(2).窗体距离桌面上边缘与桌面的高度以及自身高度的判断下面用代码一一实现,当然这都是在窗体加载时完成this.Left=Screen.PrimaryScreen.Bounds.Width/2-this.Width/2;//桌面的宽度的一半减去自身宽的的一半this…….

    2025年10月14日
    7

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号