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;來使用，否則達不到效果

3.1 UIViewContentModeScaleToFill

- (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);//設置控件位置和寬高
    imageView.clipsToBounds = YES;

//    imageView.contentMode = UIViewContentModeScaleToFill;
//    imageView.contentMode = UIViewContentModeScaleAspectFit;
    imageView.contentMode = UIViewContentModeScaleAspectFill;
    [self.view addSubview:imageView];
}

imageView.contentMode = UIViewContentModeScaleToFill

左圖： imageView.clipsToBounds = YES；右圖： imageView.clipsToBounds = NO