一、目录
- 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
网友评论