一、目录

• 1> 图片拉伸处理
• 2> 图片扩展名
• 3> 大图减小高度，图片拉伸处理
• 4> 点击大图，Modal出来，查看大图控制器
• 5> 图片圆角设置
• 6> APP中所有头像都设置为圆角，如何抽取？

二、应用逻辑处理

2.1 图片拉伸处理

iOS5以前

• UIImage方法 stretchableImageWithLeftCapWidth:

    // LeftCapWidth: 左边多少不能拉伸
    // 右边多少不能拉伸 = 控件的宽度 - 左边多少不能拉伸 - 1
    //  right  =  width - leftCapWidth - 1
    // 1 = width - leftCapWidth - right

    // topCapHeight: 顶部多少不能拉伸
    // 底部有多少不能拉伸 = 控件的高度 - 顶部多少不能拉伸 - 1
    //  bottom =  height - topCapWidth - 1
    // 1 = height - topCapWidth - bottom
    UIImage *newImage = [image stretchableImageWithLeftCapWidth:5 topCapHeight:5];

 [btn setBackgroundImage:newImage forState:UIControlStateNormal];  
   btn.frame = CGRectMake(100, 100, 200, 80);
   [self.view addSubview:btn];

iOS5开始

• UIImage方法 resizableImageWithCapInsets:

    // UIEdgeInsets是告诉系统哪些地方需要受保护, 也就是不可以拉伸
    // resizableImageWithCapInsets默认拉伸方式是平铺
    UIEdgeInsets insets = UIEdgeInsetsMake(image.size.height * 0.5, image.size.width * 0.5, image.size.height * 0.5, image.size.width * 0.5);
    UIImage *newImage =  [image resizableImageWithCapInsets:insets];
[btn setBackgroundImage:newImage forState:UIControlStateNormal];
 btn.frame = CGRectMake(100, 100, 200, 80);
 [self.view addSubview:btn];

iOS6开始

• UIImage方法：resizableImageWithCapInsets: resizingMode:

    // resizingMode指定拉伸模式
    // 平铺
    // 拉伸
    UIEdgeInsets insets = UIEdgeInsetsMake(5, 5, 5, 5);
    UIImage *newImage =  [image resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeStretch];
    [btn setBackgroundImage:newImage forState:UIControlStateNormal];
    btn.frame = CGRectMake(100, 100, 200, 80);
    [self.view addSubview:btn];

2.2 图片扩展名

• 需求：如果不是gif图片，则Cell中间部分布局xib左边的UIImageView控件“gif”隐藏

• 判断图片是不是gif图片的几种方式：

  • 方案一：根据图片名称获取图片的扩展名
  • 方案二：看服务器是否返回了图片的类型
  • 方案三：如果图片已经下载完毕，我们可以拿到图片数据，取出图片数据的第一个字节，就可以判断其类型
  Snip20150916_50.png
  Snip20150916_51.png

2.3 大图减小高度，图片拉伸处理

需求：如果图片太大，则高度减小点，控制图片高度，保证图片不被拉伸

• 图片拉伸处理：因为大图图片，我们将其高度调整处理减小高度后，图片拉伸处理
  • 注意：Aspet Fit : 等比例伸缩，直到填充ImageView

Snip20150916_52.png

• 处理大图：是大图，我们就需要设置内容模型

  if (是大图) {
        // 是大图，内容模型为顶部对齐
        self.imageView.contentMode = UIViewContentModeTop;
        self.imageView.clipsToBounds = YES; // 裁剪
    } else {
        // 不是大图，填充模型
        self.imageView.contentMode = UIViewContentModeScaleToFill; 
        self.imageView.clipsToBounds = NO; // 不裁剪
    }

2.4 点击大图，Modal出来，查看大图控制器

• 点击图片，弹出显示大图控制器SeePictureViewController，如何监听图片的点击，给imageView添加手势
• 下载完毕才可以点击，可以判断imageView.image是否有值即可判断是否下载完
• 显示大图控制器SeePictureViewController
  • 结构：xib布局（页面顶部 -> "返回"按钮； 底部 -> "保存"按钮；），手动添加一个UIScrollView 并添加一个UIImageView作为其类型显示图片

• 分析：
  • 1.在我们Modal出查看大图控制器SeePictureViewController前，需要将图片名称传递给该控制器，这样才能控制图片数据显示
  • 2.控制器之间的顺传，我们直接在SeePictureViewController添加一个图片名称属性即可，然后在Modal出该控制器之前将图片名称数据赋值给该控制器就OK了。
  • 3.判断图片是不是大图：
    • 不是大图 -》就让其居中显示在屏幕即可
    • 是大图 -》让其从屏幕的左上角开始显示
  • 4.让控制器成为UIScrollView的代理，实现代理方法，让图片可以伸缩实现
  • 5.点击保存按钮，将图片保存到相册

2.5 cell上面的图片圆角设置

方案一：图层layer

• 缺点：如果使用过于频繁，可能会导致拖拽起来的感觉比较卡现象

@implementation JPCell
- (void)awakeFromNib
{
    // 如果使用过于频繁，可能会导致拖拽起来的感觉比较卡
     self.imageListView.layer.cornerRadius = self.imageListView.width * 0.5;
     self.imageListView.layer.masksToBounds = YES;
}
@end

方案二：Quartz2D裁剪图片

• 优点：不会出现设置layer图层属性，过度卡顿效果，推荐
• 实现：下载好图片，通过Quartz2D裁剪图片 成圆角保存
• 优化：UIImage分类抽取
  • 为了以后的扩展，而且它是对图片进行裁剪，所以我们给UIImage抽取一个分类，返回裁剪后的圆角图片

#import <UIKit/UIKit.h>

@interface UIImage (JPExtension)
/**
 * 返回一张圆形图片
 */
- (instancetype)circleImage;

/**
 * 返回一张圆形图片
 */
+ (instancetype)circleImageNamed:(NSString *)name;
@end

#import "UIImage+JPExtension.h"

@implementation UIImage (JPExtension)
- (instancetype)circleImage
{
    // 开启图形上下文
    UIGraphicsBeginImageContext(self.size);
    
    // 获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 矩形框
    CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
    
    // 添加一个圆
    CGContextAddEllipseInRect(ctx, rect);
    
    // 裁剪(裁剪成刚才添加的图形形状)
    CGContextClip(ctx);
    
    // 往圆上面画一张图片
    [self drawInRect:rect];
    
    // 获得上下文中的图片
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    
    // 关闭图形上下文
    UIGraphicsEndImageContext();
    return image;
}

+ (instancetype)circleImageNamed:(NSString *)name
{
    return [[self imageNamed:name] circleImage];
}
@end

2.6 思考：APP中所有头像都设置为圆角，如何抽取？

• 解决方案：给ImageView写了分类，封装图片裁剪处理细节在内部。
• 好处：统一，方便以后改变成其他样式，不管是矩形还是...

#import <UIKit/UIKit.h>

@interface UIImageView (JPExtension)
/**
 * 设置头像
 */
- (void)setHeader:(NSString *)url;
@end

#import "UIImageView+JPExtension.h"
#import <UIImageView+WebCache.h>

@implementation UIImageView (JPExtension)
- (void)setHeader:(NSString *)url
{
    [self setCircleHeader:url];
}

- (void)setRectHeader:(NSString *)url
{
    [self sd_setImageWithURL:[NSURL URLWithString:url] placeholderImage:[UIImage imageNamed:@"defaultUserIcon"]];
}

- (void)setCircleHeader:(NSString *)url
{
    JPWeakSelf;
    UIImage *placeholder = [[UIImage imageNamed:@"defaultUserIcon"] circleImage]; // 使用了上面的一个分类，裁剪圆角图片返回
    [self sd_setImageWithURL:[NSURL URLWithString:url] placeholderImage:placeholder completed:
     ^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
       // 如果图片下载失败，就不做任何处理，按照默认的做法：会显示占位图片
       if (image == nil) return;
       weakSelf.image = [image circleImage];
   }];
}
@end