IOS 学习笔记 UIImageView and contentMode

2023-05-16

UIImageView

1 UIImageView的创建

1.1 代码布局创建UIImageView

1.2 UIImageView图片设置

2、 UIImageView重要属性

2.1、使用图片自身的宽高，自动填充整个屏幕，不会拉伸或者压缩，图片显示会超出屏幕

2.2 添加一个空白的UIImageView

2.3、根据控件尺寸显示图片，不做处理

3、设置图片显示的模式

3.1 UIViewContentModeScaleToFill

3.2 UIViewContentModeScaleAspectFit

3.3 UIViewContentModeScaleAspectFill

3.4 UIViewContentModeRedraw

3.5 UIViewContentModeCenter

3.6 UIViewContentModeTop

3.7 UIViewContentModeBottom

3.8 UIViewContentModeLeft

3.9 UIViewContentModeRight

3.10 UIViewContentModeTopLeft

3.11 UIViewContentModeTopRight

3.12 UIViewContentModeBottomLeft

3.13 UIViewContentModeBottomRight

UIImageView

UIImageView视图用来展示图片，熟悉其属性有助于展示处不同的效果

1 UIImageView的创建

在熟悉UIImageView的重要属性之前我们需要知道怎么在布局上创建出来UIImageView，一共有三种方式，如果不知道怎么创建可以参考这篇文章《IOS 学习笔记 UIView》

1.1 代码布局创建UIImageView

这里采用代码创建，在viewDidLoad函数中通过：

（1）初始化UIImageView的实例

UIImageView *imageView = [[UIImageView alloc]init];

（2）通过imageNamed函数给创建的UIImageView实例设置图片

imageView.image = [UIImage imageNamed:@"girl"];

（3）使用UIImageView的frame属性设置UIImageView实例的宽高

imageView.frame = CGRectMake(0,0,imageView.image.size.width,imageView.image.size.height);

imageView.image.size.width 获取图片自身的宽度

imageView.image.size.width起作用需要提前设置图片，也就是imageView.image = [UIImage imageNamed:@"girl"]需要在其之前，因为这里取用的是图片的原始宽高数据

（4）将创建的UIImageView视图添加到根容器中

[self.view addSubview:imageView];

- (void)viewDidLoad {
    [super viewDidLoad];
    UIImageView *imageView = [[UIImageView alloc]init];
    
    //imageView.image.size.width起作用需要提前设置图片
    imageView.image = [UIImage imageNamed:@"girl"];
    //imageView.image.size.width 获取图片自身的宽度
    imageView.frame = CGRectMake(0,0,imageView.image.size.width,imageView.image.size.height);

    
    [self.view addSubview:imageView];
}

1.2 UIImageView图片设置

给UIImageView视图设置图片需要调用UIImage的imageNamed函数如下

imageView.image = [UIImage imageNamed:@"girl"]

girl.png这张图片需要先准备好，我们将这张图片直接拖拉进Assets.xcassets，imageNamed就能通过girl字符串找到这张图片了，当然并不一定要在Assets.xcassets中准备图片，别的目录也行，Assets.xcassets是在工程创建后默认生成的的图片资源文件夹，这里就直接使用了。

如下图

2、 UIImageView重要属性

2.1、使用图片自身的宽高，自动填充整个屏幕，不会拉伸或者压缩，图片显示会超出屏幕

- (void)viewDidLoad {
    [super viewDidLoad];
    UIImageView *imageView = [[UIImageView alloc]init];
    
    //imageView.image.size.width起作用需要提前设置图片
    imageView.image = [UIImage imageNamed:@"girl"];
    //imageView.image.size.width 获取图片自身的宽度
    imageView.frame = CGRectMake(0,0,imageView.image.size.width,imageView.image.size.height);

    
    
    [self.view addSubview:imageView];
}

这里采用代码写布局，因为是比较简单的布局

2.2 添加一个空白的UIImageView

width：300，height：200 如下图

- (void)viewDidLoad {
    [super viewDidLoad];
    UIImageView *imageView = [[UIImageView alloc]init];
    imageView.frame = CGRectMake(0,0,300,200);//设置控件位置和宽高
    imageView.backgroundColor = [UIColor orangeColor];//设置控件背景颜色
    [self.view addSubview:imageView];
}

2.3、根据控件尺寸显示图片，不做处理

- (void)viewDidLoad {
    [super viewDidLoad];
    UIImageView *imageView = [[UIImageView alloc]init];
    //imageView.image.size.width起作用需要提前设置图片
    imageView.image = [UIImage imageNamed:@"girl"];
    imageView.backgroundColor = [UIColor orangeColor];//设置控件背景颜色
    imageView.frame = CGRectMake(0,0,300,200);//设置控件位置和宽高
    [self.view addSubview:imageView];
}

在不做任何处理的情况下，如果图片非全屏幕设置，图片会全部展示，但是会被压缩变形，如何处理才能达到想要的效果需要配置UIImageView的contentMode和clipsToBounds属性。

3、设置图片显示的模式

imageView.contentMode = UIViewContentModeScaleToFill

可以设置图片显示模式，以达到处理图片的目的，适应裁剪和拉伸问题，一共有十三中模式可供选择。

typedef NS_ENUM(NSInteger, UIViewContentMode) {
    UIViewContentModeScaleToFill,
    UIViewContentModeScaleAspectFit,      // contents scaled to fit with fixed aspect. remainder is transparent
    UIViewContentModeScaleAspectFill,     // contents scaled to fill with fixed aspect. some portion of content may be clipped.
    UIViewContentModeRedraw,              // redraw on bounds change (calls -setNeedsDisplay)
    UIViewContentModeCenter,              // contents remain same size. positioned adjusted.
    UIViewContentModeTop,
    UIViewContentModeBottom,
    UIViewContentModeLeft,
    UIViewContentModeRight,
    UIViewContentModeTopLeft,
    UIViewContentModeTopRight,
    UIViewContentModeBottomLeft,
    UIViewContentModeBottomRight,
};

注意结合：imageView.clipsToBounds = YES;来使用，否则达不到效果