UIViewContentMode详解

在开发当中有时会有这样的需求,将从服务器端下载下来的图片添加到imageView 当中展示,但是下载下来的图片尺寸大小不固定,宽高也有可能不成比例 如果直接设置imageView的image属性而不设置contentMode那么图片会默认填满整个容器,导致图片变形,影响美观.

举个🌰来说:现在有两张图片,都是长方形的

1.png 2.png

直接设置1个正方形的imageView的image属性 图片默认填充占满整个imageView就会变成这样

3.png

很明显感觉到人物已经变形了 .UIView 提供了1个属性 UIViewContentMode 来设置内容的填充模式

typedef NS_ENUM(NSInteger, UIViewContentMode) {
//图片拉伸填充至整个UIImageView(图片可能会变形),这也是默认的属性,如果什么都不设置就是它在起作用
    UIViewContentModeScaleToFill,
//图片拉伸至完全显示在UIImageView里面为止(图片不会变形)
    UIViewContentModeScaleAspectFit,
//图片拉伸至图片的的宽度或者高度等于UIImageView的宽度或者高度为止.看图片的宽高哪一边最接近UIImageView的宽高,一个属性相等后另一个就停止拉伸.
    UIViewContentModeScaleAspectFill,
//调用setNeedsDisplay 方法时,就会重新渲染图片

//下面的属性都是不会拉伸图片的
    UIViewContentModeRedraw,
//中间模式
    UIViewContentModeCenter, 
//顶部
    UIViewContentModeTop,
//底部
    UIViewContentModeBottom,
//左边
    UIViewContentModeLeft,
//右边
    UIViewContentModeRight,
//左上
    UIViewContentModeTopLeft,
//右上
    UIViewContentModeTopRight,
//左下
    UIViewContentModeBottomLeft,
//右下
    UIViewContentModeBottomRight,
};

下面就一个一个的看填充模式属性设置后对图片显示效果的影响
在项目中新建了两个UIImageView 分别设置背景颜色为红色和蓝色,
再往其中添加图片

//控制器的背景颜色为灰色
    self.view.backgroundColor = [UIColor grayColor];
//左边的imageView的背景颜色为红色
    self.leftImageView.backgroundColor = [UIColor redColor];
//右边的背景颜色为蓝色
    self.rightImageView.backgroundColor = [UIColor blueColor];
//设置左边的图片
    self.leftImageView.image = [UIImage imageNamed:@"1"];
//设置右边的图片
    self.rightImageView.image = [UIImage imageNamed:@"2"];

接着设置内容填充模式

    self.leftImageView.contentMode =UIViewContentModeScaleAspectFit;
    self.rightImageView.contentMode =UIViewContentModeScaleAspectFit;

Snip20151219_6.png

可以看出图片并没有变形,等比例缩放至父容器完全装下图片为止.图片没有变形

UIViewContentModeScaleAspectFill下的显示效果

    self.leftImageView.contentMode =UIViewContentModeScaleAspectFill;
    self.rightImageView.contentMode =UIViewContentModeScaleAspectFill;

Snip20151219_9.png

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

UIViewContentModeCenter 下的显示效果

    self.leftImageView.contentMode =UIViewContentModeCenter;
    self.rightImageView.contentMode =UIViewContentModeCenter;

Snip20151219_11.png

可以看出图片并没有被拉伸,原尺寸显示,中点与imageView 的中点相等.由于原图的尺寸比imageView 的尺寸要大很多,所以完全超出了父容器的显示范围.
后面还有一些属性就不演示了

由此可以得出
枚举最前面三个属性是会拉伸(缩放)图片的,其余的属性是不会拉伸图片.
同时可以总结出两点
1.凡是带有scale单词的属性,图片都会被拉伸.
2.凡是带有Ascept单词属性,图片会保持原来的宽高比,即图片不会变形.

最后如果想让图片占满整个父容器,并且不变形,可以采用一种折中的方式

    self.leftImageView.contentMode =UIViewContentModeScaleAspectFill;
//超出容器范围的切除掉
    self.leftImageView.clipsToBounds = YES;

       self.rightImageView.contentMode =UIViewContentModeScaleAspectFill;
    self.rightImageView.clipsToBounds = YES;
    

Snip20151219_12.png