在我们iOS开发过程中,UIImageView是一个非常常见的控件,但是我们未必会用的很溜,因为里面的有些属性不曾注意,或者很难理解。所以会对我们使用该控件带来麻烦,在布局UI过程中可能会造成意想不到的结果。这篇博客主要来讲解UIImageView中的contentMode属性以及和图片裁剪的关系,并且不得不提到就是所有UIView的重要属性:layer(CALayer)。文中提到的所有·示例代码上传至 https://github.com/chenyufeng1991/ImageWithModeCutLayer 。欢迎下载使用。
【contentMode】
该属性是UIView所共有的属性,表示的是内容的填充模式。由于我们是在UIIMageView中该属性用的最频繁,所以我这里使用UIImageView来讲解该属性。首先演示一下我实现的效果,大家就会明白各个属性是什么作用了。
。
我这里使用CollectionView把contentMode共13种填充模式都显示了出来,cell的背景颜色是黄色,也就是说图片没有覆盖的区域显示的是cell默认的黄色背景。这样显示应该比较直观。下面对13种模式描述一下:
(1)ScaleToFill:这是图片显示的默认模式。图片进行非等比例缩放,直到填铺满整个View区域。所以往往造成图片的变形。也就是图片的长度上缩放一定的比例填满显示区域,在宽度上缩放一定的比例填满显示区域。
(2)ScaleAspectFit:这是等比例缩放,所以使用这种缩放模式的图片永远不会变形。图片按一定比例缩放,直到在长度上或者宽度上达到View的边界就停止。没有填满区域就显示View的背景。
(3)ScaleAspectFill:这也是等比例缩放,图片也不会变形。这种缩放和上面的ScaleAspectFit正好相反,图片按一定比例缩放,直到最短的边达到View的边界。所以这种缩放一定会铺满View,超出View的图片你可以选择截掉或者不截掉。
(4)Redraw:重绘。说实话也不清楚这种模式的特点,仅仅实现效果和下面要讲的Left是一样的。
(5)Center:等比缩放,居中显示。
(6)Top:等比缩放,顶部对齐显示。
(7)Bottom:等比缩放,底部对齐显示。
(8)Left:等比缩放,左侧对齐显示。
(9)Right:等比缩放,右侧对齐显示。
(10)TopLeft:等比缩放,左上角对齐显示。
(11)TopRight:等比缩放,右上角对齐显示。
(12)BottomLeft:等比缩放,左下角对齐显示。