前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >android学习笔记之ImageView的scaleType属性

android学习笔记之ImageView的scaleType属性

作者头像
全栈程序员站长
发布2022-07-02 15:33:01
9540
发布2022-07-02 15:33:01
举报

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

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

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

big:

android学习笔记之ImageView的scaleType属性
android学习笔记之ImageView的scaleType属性

small:

android学习笔记之ImageView的scaleType属性
android学习笔记之ImageView的scaleType属性

OK,准备工作已经完成。

matrix

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

代码语言:javascript
复制
    <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属性
android学习笔记之ImageView的scaleType属性

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

fitXY

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

代码语言:javascript
复制
    <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属性
android学习笔记之ImageView的scaleType属性

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

fitStart

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

代码语言:javascript
复制
    <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属性
android学习笔记之ImageView的scaleType属性

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

fitCenter

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

代码语言:javascript
复制
    <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属性
android学习笔记之ImageView的scaleType属性

fitEnd

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

代码语言:javascript
复制
    <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属性
android学习笔记之ImageView的scaleType属性

center

center表示将原图按照原来的大小居中显示,如果原图的大小超过了ImageView的大小,那么剪裁掉多余部分,只显示中间一部分图像,比如下面一个Demo:

代码语言:javascript
复制
    <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属性
android学习笔记之ImageView的scaleType属性

centerCrop

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

代码语言:javascript
复制
    <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属性
android学习笔记之ImageView的scaleType属性

centerInsid

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

代码语言:javascript
复制
    <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属性
android学习笔记之ImageView的scaleType属性

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

Demo下载

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • matrix
  • fitXY
  • fitStart
  • fitCenter
  • fitEnd
  • center
  • centerCrop
  • centerInsid
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档