ImageView scaleType属性

ImageView是Android 中图片加载显示最常用的控件之一而scaleType属性就决定图片的显示属性比如是否进行缩放、等比缩放、缩放后展示位置等。Android 提供了八种scaleType的属性值每种都对应了一种展示方式。ScaleType可大体分为三类1 以fit_开头的4种共同点是都会对图片进行缩放2 以center_开头的3种共同点是居中显示图片的中心点会与ImageView的中心点重叠3 ScaleType.MATRIX就是最简单的显示1、android:scaleType“matrix”表示不改变原图的大小从ImageView的左上角开始绘制原图原图超过ImageView的部分作裁剪处理。 ---没有缩放只从图片左上角开始绘制ImageView控件尺寸显示范围内保存超过部分剪切2、android:scaleType“center”(1)当图片大于ImageView的宽高以图片的中心点和ImageView的中心点为基准按照图片的原大小居中显示不缩放用ImageView的大小截取图片的居中部分。---没有缩放中心点和ImageVIew控件对齐(2)当图片小于ImageView的宽高直接居中显示该图片。3、android:scaleType“centerCrop”(1)当图片大于ImageView的宽高以图片的中心点和ImageView的中心点为基准按比例缩小图片直到图片的宽高有一边等于ImageView的宽高则对于另一边图片的长度大于或等于ImageView的长 度最后用ImageView的大小居中截取该图片。(2)当图片小于ImageView的宽高以图片的中心店和ImageView的中心点为基准按比例扩大图片直到图片的宽高大于或等于ImageView的宽高并按ImageView的大小居中截取该图片。4、android:scaleType“centerInside”(1)当图片大于ImageView的宽高以图片的中心和ImageView的中心点为基准按比例缩小图片使图片宽高等于或者小于ImagevView的宽高直到将图片的内容完整居中显示。(2)当图片小于ImageView的宽高直接居中显示该图片。5、android:scaleType“fitXY”表示把图片按指定的大小在ImageView中显示拉伸或收缩图片不保持原比例填满ImageView。6、android:scaleType“fitStart”表示把图片按比例扩大缩小到ImageView的宽度在ImageView的上方显示。7、android:scaleType“fitCenter”表示把图片按比例扩大缩小到ImageView的宽度居中显示。8、android:scaleType“fitEnd”表示把图片按比例扩大缩小到ImageView的宽度在ImageView的下方显示。属性缩放裁切对齐位置一定铺满ImageView拉伸变形大图片小图片center无有(大图超过IV宽高部分裁切IV中心点否(小图片四周可能留白)否图片中心点和IV对齐不缩放超过IV大小区域裁切掉图片中心点和IV对齐不缩放四周可能留白centerCrop有(大图缩小;小图放大)有(大图缩小到有一边和IV对齐另一边裁切;小图放大两边都大等于IV大的一边裁切掉)IV中心点是否图片中心点和IV对齐缩小直到图片宽高一边等于IV的宽高另一边超过IV部分裁切掉图片中心点和IV对齐放大直到图片宽高都大等于IV宽高另一边超过IV部分裁切掉centerInside有(大图缩小;小图原图)无IV中心点否(顶部、底部可能留白)否图片中心点和IV对齐缩小直到图片宽高都小于IV宽高图片中心点和IV对齐原图fitXY有无(图片被拉伸变形)IV左上角是是拉伸变形拉伸变形fitStart有无IV顶边否(中部、底部可能留白)否缩小图片直到宽度和IV对齐高度忽略--正常图片比例放大图片直到宽度和IV对齐高度忽略--正常图片比例fitCenter有无IV中线否(顶部、底部可能留白)否fitEnd有无IV底边否(顶部、中部可能留白)否fitStart有无IV左边否(中部、右边可能留白)否缩小图片直到高度和IV对齐宽度忽略--竖图(宽高比小于1的图片)放大图片直到高度和IV对齐宽度忽略--竖图(宽高比小于1的图片)fitCenter有无IV中线否(左边、右边可能留白)否fitEnd有无IV右边否(左边、中部可能留白)否matrix(默认)无有IV左上角否(小图片可能四周留白)否图片左上角和IV左上角对齐不缩放超过部分自动裁剪图片左上角和IV左上角对齐不缩放有空白陪图说明原图尺寸50*50尺寸950*633简单分析fitCenter和centerInside根据上面的效果图来分析fitCenter是将原图等比例放大或缩小使原图的高度等于ImageView的高度并居中显示而centerInside在原图的原本size大于ImageView的size时则缩小原图效果同fitCenter在原图的原本size小于ImageView的size时则不进行任何size处理居中显示效果同center。ImageView的android:adjustViewBounds属性为是否保持原图的长宽比单独设置不起作用需要配合maxWidth或maxHeight一起使用。Android .9 图 ImageView scaleType 配合总结核心.9 图负责【哪些区域拉伸、哪些固定】scaleType 负责【图片在 ImageView 容器里怎么摆放、缩放】两者独立生效会互相影响9 图本质在 png 四周黑线标记可拉伸区域、内容内边距 (padding)一、先回顾 9 图规则.9.png上边黑线水平方向可拉伸区域左边黑线垂直方向可拉伸区域下边黑线内容水平 padding文字 / 子内容放这里右边黑线内容垂直 padding非黑线区域永远不会被拉伸保持原始比例大小。二、ImageView ScaleType 对 9 图的影响1.fitXY最常用搭配 9 图按钮背景行为不保持原图比例强行把图片拉伸填满 ImageView 宽高✅ 适合圆角按钮、气泡背景、弹窗背景.9 背景原理fitXY 会把整张图片拉伸但9 图会控制只有标记区域被拉边角保持不变形这就是为什么气泡圆角用.9 fitXY放大缩小圆角不变形。 注意如果不用 9 图fitXY 直接整张图拉伸圆角会被拉变形。ImageView android:layout_widthwrap_content android:layout_heightwrap_content android:srcdrawable/bubble.9.png android:scaleTypefitXY/2.fitCenter默认 scaleType行为保持图片原始宽高比等比缩放居中不超出 View 边界⚠️ 和 9 图搭配很少用9 图会优先按原图比例缩放不会撑满控件适合9 图作为内容图不是背景。不适合气泡、按钮背景3.center原图不缩放图片原始像素大小直接居中放在 ImageView如果 ImageView 比图片大9 图不会拉伸只居中展示原图大小适合固定大小标识不需要拉伸背景4.centerCrop等比放大图片填满 View超出部分裁剪❌基本不要搭配 9 图做背景会裁切 9 图的标记区域容易导致拉伸异常、圆角被裁。5.centerInside原图等比缩小完整显示全部图片不裁剪View 大于原图时图片居中不放大。9 图不会被拉伸仅缩小。6. matrix手动矩阵控制缩放位移一般不与 9 图一起使用容易打乱拉伸区域。三、重要区分android:srcvsandroid:background很多人踩坑background设置.9 图 background 自带fitXY逻辑不需要设置 scaleTypescaleType 只对src生效android:backgrounddrawable/btn_bg.9.pngsrc设置.9 图 才会受scaleType控制坑点background 不支持内容 padding9 图定义的 padding只有用 src 方式加载才会生效。四、推荐组合工程常用✅ 聊天气泡、按钮背景src 方式需要 9 图内边距android:srcdrawable/bubble.9.png android:scaleTypefitXY android:layout_widthwrap_content android:layout_heightwrap_content✅ 普通背景不需要读取 9 图 padding直接 background不用 scaleTypeandroid:backgrounddrawable/bg.9.png❌ 禁止组合.9图 centerCrop极易裁剪边框。五、常见踩坑9 图放到 src没写 scaleType默认fitCenter→ 背景不会撑满控件background 设置 9 图然后写 scaleType → scaleType 完全无效白写9 图黑线画错 fitXY不该拉伸的圆角被拉伸出现模糊变形文件名必须xxx.9.png不能在其他文件夹下重命名AS 会识别失败六、一句话总结用.9做src 图片想要撑满控件、保留圆角不变形 →scaleTypefitXY用.9做background不受 scaleType 控制自带 fitXY 拉伸centerCrop/fitCenter 适合普通图片不适合 9 图背景拉伸场景