前言

    NS_CLASS_AVAILABLE_IOS(2_0) @interface UIImageView : UIView 
    @available(iOS 2.0, *)       public class UIImageView : UIView

需要注意的是，Apple 对 png 格式图片支持最为良好的，对于其他格式支持相对较弱，当图片是 png 格式，那么图片名的后缀 .png 可以不写，但是如果图像只有 @2x 图片，没有一倍图像，则不能忽略 .png，在 iPhone4 以后，苹果采用视网膜屏幕，所以就有了 2 倍像素图像，随着发展现在有了 @3x 图，如果你现在还在用 Xcode5.1 写程序，在适配 iPhone6 以及 6+ 会自动放大即可，但是在 Xcode6 上就需要考虑适配问题，不会自动适配了。
如果不是 png 格式，请务必要加入后缀名，否则可能无法显示。比如目前无法直接加载 gif 图。

1、UIImageView 的创建

Objective-C

先设置 frame 后添加 image

    // 创建一个图片视图，只有图片 image 是显示不出来的，需要 image 放到 imageView 上才能显示出来
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.view.bounds];
    imageView.image = [UIImage imageNamed:@"1"];

    [self.view addSubview:imageView];

先添加 image 后设置 frame

    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"13"]];

    // 可以不设置 frame，不设置时 imageView 的大小 与 image 的大小相同
    imageView.frame = self.view.bounds;

    [self.view addSubview:imageView];

Swift

先设置 frame 后添加 image

    // 创建一个图片视图，只有图片 image 是显示不出来的，需要 image 放到 imageView 上才能显示出来
    let imageView:UIImageView = UIImageView(frame: self.view.bounds)
    imageView.image = UIImage(named: "1")

    self.view.addSubview(imageView)

先添加 image 后设置 frame

    let imageView:UIImageView = UIImageView(image: UIImage(named: "13"))

    // 可以不设置 frame，不设置时 imageView 的大小 与 image 的大小相同
    imageView.frame = self.view.bounds

    self.view.addSubview(imageView)

2、UIImageView 的设置

Objective-C

    // 设置 frame
    /*
        imageView.image.size.width, imageView.image.size.height 可获取 imageView image 中图片的尺寸
    */
    imageView.frame = CGRectMake(10, 30, [UIScreen mainScreen].bounds.size.width - 20, [UIScreen mainScreen].bounds.size.height - 40);

    // 设置图片填充方式
    /*
        当图片小于 imageView 的大小时，处理图片的显示方式

        // 缩放图片,使图片充满容器。图片未必保持长宽比例协调，有可能会拉伸至变形。默认
        UIViewContentModeScaleToFill,

        // 在保持长宽比的前提下，缩放图片，使得图片在容器内完整显示出来
        UIViewContentModeScaleAspectFit,

        // 在保持长宽比的前提下，缩放图片，使图片充满容器
        UIViewContentModeScaleAspectFill,

        UIViewContentModeRedraw,
        UIViewContentModeCenter,
        UIViewContentModeTop,
        UIViewContentModeBottom,
        UIViewContentModeLeft,
        UIViewContentModeRight,
        UIViewContentModeTopLeft,
        UIViewContentModeTopRight,
        UIViewContentModeBottomLeft,
        UIViewContentModeBottomRight,
    */
    imageView.contentMode = UIViewContentModeScaleToFill;

    // 设置透明度
    imageView.alpha = 0.5;

    // 设置 image
    /*
        图片名称为 nil 时，控制台会打印输出 CUICatalog: Invalid asset name supplied: (null)
    */

        // 正常状态时的图片
        imageView.image = [UIImage imageNamed:@"18"];

        // 高亮状态时的图片
        imageView.highlightedImage = [UIImage imageNamed:@"17"];

    // 设置是否隐藏
    imageView.hidden = YES;

    // 设置 imageView 的交互属性
    /*
        UIImageView 的交互属性默认是关闭的
    */
    imageView.userInteractionEnabled = YES;

    // 为图片添加单击事件
    /*
        一定要先将 userInteractionEnabled 置为 YES，这样才能响应单击事件
    */
    [imageView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(singleTapImageView:)]];

Swift

    // 设置 frame
    /*
        imageView.image.size.width, imageView.image.size.height 可获取 imageView image 中图片的尺寸
    */
    imageView.frame = CGRectMake(10, 30, UIScreen.mainScreen().bounds.size.width - 20, UIScreen.mainScreen().bounds.size.height - 40)

    // 设置图片填充方式
    /*
        当图片小于 imageView 的大小时，处理图片的显示方式

        // 缩放图片,使图片充满容器。图片未必保持长宽比例协调，有可能会拉伸至变形。默认
        case ScaleToFill

        // 在保持长宽比的前提下，缩放图片，使得图片在容器内完整显示出来
        case ScaleAspectFit

        // 在保持长宽比的前提下，缩放图片，使图片充满容器
        case ScaleAspectFill

        case Redraw
        case Center
        case Top
        case Bottom
        case Left
        case Right
        case TopLeft
        case TopRight
        case BottomLeft
        case BottomRight
     */

    imageView.contentMode = UIViewContentMode.ScaleToFill

    // 设置透明度
    imageView.alpha = 0.5

    // 设置 image
    /*
        图片名称为 nil 时，控制台会打印输出 CUICatalog: Invalid asset name supplied: (null)
    */

        // 正常状态时的图片
        imageView.image = UIImage(named: "18")

        // 高亮状态时的图片
        imageView.highlightedImage = UIImage(named: "17")

    // 设置是否隐藏
    imageView.hidden = true

    // 设置 imageView 的交互属性
    /*
        UIImageView 的交互属性默认是关闭的
    */
    imageView.userInteractionEnabled = true 

    // 为图片添加单击事件
    /*
        一定要先将 userInteractionEnabled 置为 YES，这样才能响应单击事件
    */
    imageView.addGestureRecognizer(UITapGestureRecognizer(target:self, action:#selector(UiImageView.singleTapImageView(_:))))

3、UIImageView 播放图片集

Objective-C

    // 创建图片集
    NSMutableArray *imageArray = [NSMutableArray arrayWithCapacity:0];

    for (int i = 0; i < 30; i++) {
        [imageArray addObject:[UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg", i]]];
    }

    // 播放图片集

        // 设置播放的图片集（需将图片添加到数组 imageArray 中）
        imageView.animationImages = imageArray;

        // 设置播放整个图片集的时间
        imageView.animationDuration = 30;

        // 设置循环播放次数，默认为0 一直循环
        imageView.animationRepeatCount = 0;

        // 开始播放
        [imageView startAnimating];

        // 停止播放动画
        [imageView stopAnimating];

Swift

    // 创建图片集
    var imageArray:Array<UIImage> = Array()

    for i in 0 ..< 30 {
        imageArray.append(UIImage(named: String(format: "%d.jpg", i))!)
    }

    // 播放图片集

        // 设置播放的图片集（需将图片添加到数组 imageArray 中）
        imageView.animationImages = imageArray

        // 设置播放整个图片集的时间
        imageView.animationDuration = 30

        // 设置循环播放次数，默认为0 一直循环
        imageView.animationRepeatCount = 0

        // 开始播放
        imageView.startAnimating()

        // 停止播放动画
        imageView.stopAnimating()

4、UIImage 图片的处理

4.1 UIImage 图片的加载方式

Assets.xcassets
- Assets.xcassets 在 App 打包后，以 Assets.car 文件的形式出现在 Bundle 中。其作用在于：
  - 自动识别 @2x，@3x 图片，对内容相同但分辨率不同的图片统一管理。
  - 可以对图片进行剪裁和拉伸处理。
根据是否将创建好的对象缓存入系统内存，有两类创建 UIImage 对象的方法可选
- 1、缓存：imageNamed:，只需传入文件名.扩展名（可选）即可。
  - 根据图片文件名在缓存池中查找特定的 UIImage 对象，若存在，将这个对象返回。如果不存在，则从 Bundle 中加载图片数据，创建对象并返回。如果相应的图片数据不存在，返回 nil。
- 2、不缓存：imageWithContentsOfFile:，必须传入文件的全名（全路径＋文件名）。
UIImage 从 Bundle 中加载图片资源
- Assets.xcassets 中的图片资源只能通过 imageNamed: 方法加载，通过 NSBundle 的 pathForResource:ofType: 无法获得图片路径。因此，Assets.xcassets 只适合存放系统常用的，占用内存小的图片资源。
- imageNamed: 方法同样可以加载根目录中的图片资源。
- 要想利用 imageWithContentsOfFile: 方法以不缓存的形式加载图片，必须将图片资源放置在根目录中。
- 相对于 jpg，iOS 对 png 的支持较好，如果从 Assets.xcassets 以外的地方加载 jpg 格式的图片，必须在文件名后加扩展名。

4.2 对图片进行缩放和翻转

Objective-C

    /*
        + (UIImage *)imageWithCGImage:(CGImageRef)cgImage 
                                scale:(CGFloat)scale 
                          orientation:(UIImageOrientation)orientation;

        cgImage:       图片
        scale:         比例: < 1 放大, > 1 缩小
        orientation:   翻转方式

        UIImageOrientationUp,              // 不反转
        UIImageOrientationDown,            // 逆时针旋转 180 度
        UIImageOrientationLeft,            // 逆时针旋转 90 度，只垂直方向放大
        UIImageOrientationRight,           // 顺时针旋转 90 度，只垂直方向放大
        UIImageOrientationUpMirrored,      // 水平镜像反转
        UIImageOrientationDownMirrored,    // 垂直镜像反转
        UIImageOrientationLeftMirrored,    // 水平镜像反转，逆时针旋转 90 度，只垂直方向放大
        UIImageOrientationRightMirrored,   // 水平镜像反转，顺时针旋转 90 度，只垂直方向放大
    */

    image = [UIImage imageWithCGImage:image.CGImage scale:0.5 orientation:UIImageOrientationUpMirrored];

Swift

    /*
        public init(CGImage cgImage: CGImage, scale: CGFloat, orientation: UIImageOrientation)

        cgImage:       图片
        scale:         比例: < 1 放大, > 1 缩小
        orientation:   翻转方式

        case Up              // 不反转
        case Down            // 逆时针旋转 180 度
        case Left            // 逆时针旋转 90 度，只垂直方向放大
        case Right           // 顺时针旋转 90 度，只垂直方向放大
        case UpMirrored      // 水平镜像反转
        case DownMirrored    // 垂直镜像反转
        case LeftMirrored    // 水平镜像反转，逆时针旋转 90 度，只垂直方向放大
        case RightMirrored   // 水平镜像反转，顺时针旋转 90 度，只垂直方向放大
    */

    image = UIImage(CGImage: image.CGImage!, scale: 0.5, orientation: .UpMirrored)

4.3 设置图片渲染方式

Objective-C

    /*
        // Use the default rendering mode for the context where the image is used
        UIImageRenderingModeAutomatic,

        // Always draw the original image, without treating it as a template
        UIImageRenderingModeAlwaysOriginal,

        // Always draw the image as a template image, ignoring its color information
        UIImageRenderingModeAlwaysTemplate,
    */

    // 在有些可以添加图片的控件中，需要显示原图，否则图片将以阴影的方式显示
    image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

Swift

    /*
        // Use the default rendering mode for the context where the image is used
        case Automatic

        // Always draw the original image, without treating it as a template
        case AlwaysOriginal

        // Always draw the image as a template image, ignoring its color information
        case AlwaysTemplate
    */

    // 在有些可以添加图片的控件中，需要显示原图，否则图片将以阴影的方式显示
    image = image.imageWithRenderingMode(.AlwaysOriginal)

4.4 设置图片拉伸方式

设置拉伸方式前后拉伸效果

1、只拉伸中间的 1 * 1 的区域

Objective-C

    /*
        设置的区域为不拉伸（保护）的部分，自动计算右侧和下侧保护部分的大小：

            rightCapWidth = width - leftCapWidth - 1
            bottomCapHeight  = height - topCapHeight - 1
    */

    image = [image stretchableImageWithLeftCapWidth:image.size.width * 0.5 
                                       topCapHeight:image.size.height * 0.5];

Swift

    /*
        设置的区域为不拉伸（保护）的部分，自动计算右侧和下侧保护部分的大小：

            rightCapWidth = width - leftCapWidth - 1
            bottomCapHeight  = height - topCapHeight - 1
    */

    image = image.stretchableImageWithLeftCapWidth(NSInteger(image.size.width * 0.5), 
                                      topCapHeight: NSInteger(image.size.height * 0.5))

2、拉伸指定的区域

Objective-C

    /*
        设置的区域为不拉伸（保护）的部分

        拉伸模式：
            UIImageResizingModeTile         平铺，默认
            UIImageResizingModeStretch      直接拉伸
    */

    // 以默认平铺模式拉伸
    image = [image resizableImageWithCapInsets:UIEdgeInsetsMake(30, 30, 30, 30)];

    // 以指定拉伸模式拉伸
    image = [image resizableImageWithCapInsets:UIEdgeInsetsMake(30, 30, 30, 30) 
                                  resizingMode:UIImageResizingModeStretch];

Swift

    /*
        设置的区域为不拉伸（保护）的部分

        拉伸模式：
            Tile         平铺，默认
            Stretch      直接拉伸
    */

    // 以默认平铺模式拉伸
    image = image.resizableImageWithCapInsets(UIEdgeInsetsMake(30, 30, 30, 30))

    // 以指定拉伸模式拉伸
    image = image.resizableImageWithCapInsets(UIEdgeInsetsMake(30, 30, 30, 30), 
                                 resizingMode:.Stretch)

3、Xcode Assets.xcassets 中设置
- 将图片添加到 Assets.xcassets 中
- 选中需要拉伸的图片
- 设置拉伸方向和拉伸模式及保护区域大小（会自动计算填充）
- 默认拉伸方向为 None 即不拉伸
- 默认拉伸模式为 Tiles 即平铺

4.5 重绘图片大小

Objective-C

    // 添加 UIImage 的分类 ResizeUIImage
    @implementation UIImage (ResizeUIImage)

        - (UIImage *)resizeImageToSize:(CGSize)size {

            // change from UIGraphicsBeginImageContext(size) to suit scale > 1
            UIGraphicsBeginImageContextWithOptions(size, false, 0);
            [self drawInRect:CGRectMake(0, 0, size.width, size.height)];
            UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
            UIGraphicsEndImageContext();

            return newImage;
        }

    @end

    // 重新设置图片的大小
    image = [image resizeImageToSize:CGSizeMake(100, 200)];

Swift

    // 扩展 UIImage 类
    extension UIImage {

        func resizeImageToSize(size: CGSize) -> UIImage {

            // change from UIGraphicsBeginImageContext(size) to suit scale > 1
            UIGraphicsBeginImageContextWithOptions(size, false, 0)
            self.drawInRect(CGRectMake(0, 0, size.width, size.height))
            let newImage = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()

            return newImage
        }
    }

    // 重新设置图片的大小
    image = image?.resizeImageToSize(CGSizeMake(100, 200))

4.6 保存图片到相册

设置系统访问相册权限

保存图片到相册

    // 将图片存储到相册中
    UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil);

    // 将图片存储到相册中，完成后调用指定的方法
    UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);

    // 保存完成后调用的方法，必须为这个方法
    - (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo {

    }

5、UIImage 与 NSData 的相互转换

Objective-C

    // image 转 NSData
    NSData *data = UIImagePNGRepresentation(image1);

    // NSData 转 image
    UIImage *image = [UIImage imageWithData:data];

Swift

    // image 转 NSData
    let data:NSData = UIImagePNGRepresentation(image1!)!

    // NSData 转 image
    let image = UIImage(data: data)

6、UIImage 加载 GIF 动图

Gif 图片是非常常见的图片格式，尤其是在聊天的过程中，Gif 表情使用地很频繁。但是 iOS 没有现成的支持加载和播放 Gif 的类。

6.1 加载本地 GIF 动图

1、使用 UIWebView 加载

使用 UIWebView 的弊端在于，不能设置 Gif 动画的播放时间，不能自动缩放 Gif 动图。

    // 读取 GIF 图片数据
    NSData *data = [NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"demo3" ofType:@"gif"]];

    // 加载 GIF 动图
    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 200)];
    [webView loadData:data MIMEType:@"image/gif" textEncodingName:@"" baseURL:[NSURL URLWithString:@""]];

    [self.view addSubview:webView];

2、将 Gif 动图拆分成多张图片，使用 UIImageView 播放

最好把所需要的 Gif 图片打包到 Bundle 文件内。下拉、上拉加载控件需要一个根据拉动距离设置特定的 Image，一般使用该方法。

    - (NSArray *)animationImages {

        NSFileManager *fielM = [NSFileManager defaultManager];
        NSString *path = [[NSBundle mainBundle] pathForResource:@"Loading" ofType:@"bundle"];
        NSArray *arrays = [fielM contentsOfDirectoryAtPath:path error:nil];

        NSMutableArray *imagesArr = [NSMutableArray array];
        for (NSString *name in arrays) {
            UIImage *image = [UIImage imageNamed:[(@"Loading.bundle") stringByAppendingPathComponent:name]];
            if (image) {
                [imagesArr addObject:image];
            }
        }
        return imagesArr;
    }

    - (void)viewDidLoad {
        [super viewDidLoad];

        UIImageView *gifImageView = [[UIImageView alloc] initWithFrame:frame];
        gifImageView.animationImages = [self animationImages]; // 获取 Gif 图片列表
        gifImageView.animationDuration = 5;                    // 执行一次完整动画所需的时长
        gifImageView.animationRepeatCount = 1;                 // 动画重复次数
        [gifImageView startAnimating];
        [self.view addSubview:gifImageView];
    }

3、使用 SDWebImage 加载

在 SDWebImage 这个库里有一个 UIImage+GIF 的类别，里面为 UIImage 扩展了三个方法。

    @interface UIImage (GIF)
    + (IImage *)sd_animatedGIFNamed:(NSString *)name;
    + (UIImage *)sd_animatedGIFWithData:(NSData *)data;
    - (UIImage *)sd_animatedImageByScalingAndCroppingToSize:(CGSize)size;
    @end

我们要获取处理后的 Gif 图片，其实只要调用前面两个中的其中一个方法就行了，注意，第一个只需要传 Gif 的名字，而不需要带扩展名（如 Gif 图片名字为 001@2x.gif，只需传 001 即可)。

我们就使用第二个方法试一试效果:

    NSString *path = [[NSBundle mainBundle] pathForResource:@"gifTest" ofType:@"gif"];
    NSData *data = [NSData dataWithContentsOfFile:path];
    UIImage *image = [UIImage sd_animatedGIFWithData:data];
    gifImageView.image = image;

然后通过断点，我们看下获取到的 image 是个什么样的
我们发现 image 的 isa 指针指向了 _UIAnimatedImage，说明它是一个叫作 _UIAnimatedImage 的类（当然，这个 _UIAnimatedImage 苹果是不会直接让我们使用的）。_images 表示这个 Gif 包含了多少张图片。_duration 表示执行一次完整动画所需的时长。

其实，动画执续时间 _duration 也可以更改。

    + (UIImage *)sd_animatedGIFWithData:(NSData *)data {
        if (!data) {
            return nil;
        }

        CGImageSourceRef source = CGImageSourceCreateWithData((__bridge CFDataRef)data, NULL);

        size_t count = CGImageSourceGetCount(source);

        UIImage *animatedImage;

        if (count <= 1) {
            animatedImage = [[UIImage alloc] initWithData:data];
        }
        else {
            NSMutableArray *images = [NSMutableArray array];

            NSTimeInterval duration = 0.0f;

            for (size_t i = 0; i < count; i++) {
                CGImageRef image = CGImageSourceCreateImageAtIndex(source, i, NULL);

                duration += [self sd_frameDurationAtIndex:i source:source];

                [images addObject:[UIImage imageWithCGImage:image scale:[UIScreen mainScreen].scale orientation:UIImageOrientationUp]];

                CGImageRelease(image);
            }

            if (!duration) {
                duration = (1.0f / 10.0f) * count;
            }

            animatedImage = [UIImage animatedImageWithImages:images duration:duration];
        }

        CFRelease(source);

        return animatedImage;
    }

很明显，duration 是可以随意更改的，只不过此方法设置了一个默认值（duration = (1.0f / 10.0f) * count）

归根到底，创建新的动态的 Image 其实是调用了系统提供的一个 UIImage 的类方法而已。直接显示 Gif 图片，一般使用该方法。
```
    UIImage *animatedImage = [UIImage animatedImageWithImages:images duration:duration];
```

4、使用 QExtension 加载

使用第三方框架 QExtension

Objective-C

    // 通过名称加载 gif 图片，不需要写扩展名
    self.imageView.image = [UIImage q_gifImageNamed:@"demo3"];

    // 通过数据加载 gif 图片
    NSData *imageData = [NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"demo3" ofType:@"gif"]];
    self.imageView.image = [UIImage q_gifImageWithData:imageData];

效果

6.2 加载网络 GIF 动图

1、使用 SDWebImage 加载
- 加载网络的 Gif 文件就简单多了。最简单的方法，我们只需要使用 SDWebImage 的 sd_setImageWithURL: 这个方法传入 Gif 文件是 url 地址即可。
```
    NSURL *url = [NSURL URLWithString:@"http://images.cnblogs.com/cnblogs_com/QianChia/934664/o_QExtension31.gif"];

    [self.imageView sd_setImageWithURL:url];
```
- SDWebImage 内部实现大概是以下几个步骤：
  - 1、SDWebImage 根据 url 将 Gif 文件下载下来，格式为一个 NSData。
  - 2、如果判断是 Gif 格式，则会调用 sd_animatedGIFWithData: 将 Data 转换成我们需要的 Gif 格式。
  - 3、通过上面的方法二即可显示出 Gif 图片。
```
    UIImage *image = [UIImage sd_animatedGIFWithData:data];

    gifImageView.image = image;
```

iOS - UIImageView

前言

1、UIImageView 的创建

2、UIImageView 的设置

3、UIImageView 播放图片集

4、UIImage 图片的处理

4.1 UIImage 图片的加载方式

4.2 对图片进行缩放和翻转

4.3 设置图片渲染方式

4.4 设置图片拉伸方式

4.5 重绘图片大小

4.6 保存图片到相册

5、UIImage 与 NSData 的相互转换

6、UIImage 加载 GIF 动图

6.1 加载本地 GIF 动图

6.2 加载网络 GIF 动图

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

iOS - UIImageView

前言

1、UIImageView 的创建

2、UIImageView 的设置

3、UIImageView 播放图片集

4、UIImage 图片的处理

4.1 UIImage 图片的加载方式

4.2 对图片进行缩放和翻转

4.3 设置图片渲染方式

4.4 设置图片拉伸方式

4.5 重绘图片大小

4.6 保存图片到相册

5、UIImage 与 NSData 的相互转换

6、UIImage 加载 GIF 动图

6.1 加载本地 GIF 动图

6.2 加载网络 GIF 动图

热门文章

最新文章

相关电子书