UIViewContentMode
// 但凡在设置图片模式的枚举中包含Scale这个单词的值,都会对原有的图片进行缩放
typedef NS_ENUM(NSInteger, UIViewContentMode) {
// 默认属性,按照"UIImageView"的宽高比缩放图片至图片填充整个UIImageView
UIViewContentModeScaleToFill,
// 按照"图片的宽高"比例缩放图片至图片的宽度或者高度和UIImageView一样,并且让整个图片都在UIImageView中,然后居中显示
UIViewContentModeScaleAspectFit, // contents scaled to fit with fixed aspect. remainder is transparent
// 按照"图片的宽高"比例缩放图片至图片的宽度和高度填充整个UIImageView,然后居中显示
UIViewContentModeScaleAspectFill, // contents scaled to fill with fixed aspect. some portion of content may be clipped.
// 调用setNeedsDisplay方法时,就会重新渲染图片
UIViewContentModeRedraw, // redraw on bounds change (calls -setNeedsDisplay)
UIViewContentModeCenter, // contents remain same size. positioned adjusted.
UIViewContentModeTop,
UIViewContentModeBottom,
UIViewContentModeLeft,
UIViewContentModeRight,
UIViewContentModeTopLeft,
UIViewContentModeTopRight,
UIViewContentModeBottomLeft,
UIViewContentModeBottomRight,
};
Original Picture


Demo
UIViewContentModeScaleToFill
_leftImageView.contentMode = UIViewContentModeScaleToFill;
_rightImageView.contentMode = UIViewContentModeScaleToFill;

默认填充模式,将图片拉伸或者压缩至充满整个容器。
UIViewContentModeScaleAspectFit
_leftImageView.contentMode = UIViewContentModeScaleAspectFit;
_rightImageView.contentMode = UIViewContentModeScaleAspectFit;

图片并没有变形,等比例缩放至父容器完全装下图片为止。
UIViewContentModeScaleAspectFill
_leftImageView.contentMode = UIViewContentModeScaleAspectFill;
_rightImageView.contentMode = UIViewContentModeScaleAspectFill;
// 推荐:将超出容器范围的切除掉
// _leftImageView.clipsToBounds = YES;
// _rightImageView.clipsToBounds = YES;

图片拉伸后居中显示 , 宽度或者高度拉伸到了与父容器的宽度或者高度相等,图片并没有变形,但超出了父容器的范围。

用.clipsToBounds = YES;
可以使图片占满整个父容器,并且不变形。
Summary
- 凡是带有Scale单词的属性,图片都会被拉伸。
- 凡是带有Ascept单词属性,图片会保持原来的宽高比,即图片不会变形。
网友评论