一、目錄
- 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是告訴系統(tǒng)哪些地方需要受保護, 也就是不可以拉伸
// 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圖片的幾種方式：
- 方案一：根據(jù)圖片名稱獲取圖片的擴展名
- 方案二：看服務器是否返回了圖片的類型
- 方案三：如果圖片已經(jīng)下載完畢，我們可以拿到圖片數(shù)據(jù)，取出圖片數(shù)據(jù)的第一個字節(jié)，就可以判斷其類型
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，如何監(jiān)聽圖片的點擊，給imageView添加手勢
- 下載完畢才可以點擊，可以判斷imageView.image是否有值即可判斷是否下載完
- 顯示大圖控制器SeePictureViewController
- 結構：xib布局（頁面頂部 -> "返回"按鈕； 底部 -> "保存"按鈕；），手動添加一個UIScrollView 并添加一個UIImageView作為其類型顯示圖片
- 分析：
- 1.在我們Modal出查看大圖控制器SeePictureViewController前，需要將圖片名稱傳遞給該控制器，這樣才能控制圖片數(shù)據(jù)顯示
- 2.控制器之間的順傳，我們直接在SeePictureViewController添加一個圖片名稱屬性即可，然后在Modal出該控制器之前將圖片名稱數(shù)據(jù)賦值給該控制器就OK了。
- 3.判斷圖片是不是大圖：
- 不是大圖 -》就讓其居中顯示在屏幕即可
- 是大圖 -》讓其從屏幕的左上角開始顯示
- 4.讓控制器成為UIScrollView的代理，實現(xiàn)代理方法，讓圖片可以伸縮實現(xiàn)
- 5.點擊保存按鈕，將圖片保存到相冊
2.5 cell上面的圖片圓角設置
方案一：圖層layer
- 缺點：如果使用過于頻繁，可能會導致拖拽起來的感覺比較卡現(xiàn)象
@implementation JPCell
- (void)awakeFromNib
{
// 如果使用過于頻繁，可能會導致拖拽起來的感覺比較卡
self.imageListView.layer.cornerRadius = self.imageListView.width * 0.5;
self.imageListView.layer.masksToBounds = YES;
}
@end
方案二：Quartz2D裁剪圖片
- 優(yōu)點：不會出現(xiàn)設置layer圖層屬性，過度卡頓效果，推薦
- 實現(xiàn)：下載好圖片，通過Quartz2D裁剪圖片 成圓角保存
- 優(yōu)化：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寫了分類，封裝圖片裁剪處理細節(jié)在內部。
- 好處：統(tǒng)一，方便以后改變成其他樣式，不管是矩形還是...
#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
