一笤成、目錄
- 1> 圖片拉伸處理
- 2> 圖片擴(kuò)展名
- 3> 大圖減小高度评架，圖片拉伸處理
- 4> 點(diǎn)擊大圖，Modal出來炕泳，查看大圖控制器
- 5> 圖片圓角設(shè)置
- 6> APP中所有頭像都設(shè)置為圓角浙芙，如何抽茸淹蟆？
二南窗、應(yīng)用邏輯處理
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)哪些地方需要受保護(hù), 也就是不可以拉伸
// resizableImageWithCapInsets默認(rèn)拉伸方式是平鋪
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 圖片擴(kuò)展名
需求：如果不是gif圖片箭启，則Cell中間部分布局xib左邊的UIImageView控件“gif”隱藏
-
判斷圖片是不是gif圖片的幾種方式：
- 方案一：根據(jù)圖片名稱獲取圖片的擴(kuò)展名
- 方案二：看服務(wù)器是否返回了圖片的類型
- 方案三：如果圖片已經(jīng)下載完畢傅寡，我們可以拿到圖片數(shù)據(jù)芜抒，取出圖片數(shù)據(jù)的第一個(gè)字節(jié)宅倒，就可以判斷其類型
Snip20150916_50.png
Snip20150916_51.png
2.3 大圖減小高度，圖片拉伸處理
需求：如果圖片太大线召，則高度減小點(diǎn)，控制圖片高度讯壶，保證圖片不被拉伸
- 圖片拉伸處理：因?yàn)榇髨D圖片罢维，我們將其高度調(diào)整處理減小高度后肺孵，圖片拉伸處理
- 注意：Aspet Fit : 等比例伸縮平窘，直到填充ImageView
Snip20150916_52.png
- 處理大圖：是大圖肤舞，我們就需要設(shè)置內(nèi)容模型
if (是大圖) {
// 是大圖芒率，內(nèi)容模型為頂部對齊
self.imageView.contentMode = UIViewContentModeTop;
self.imageView.clipsToBounds = YES; // 裁剪
} else {
// 不是大圖偶芍，填充模型
self.imageView.contentMode = UIViewContentModeScaleToFill;
self.imageView.clipsToBounds = NO; // 不裁剪
}
2.4 點(diǎn)擊大圖，Modal出來材彪，查看大圖控制器
- 點(diǎn)擊圖片，彈出顯示大圖控制器SeePictureViewController，如何監(jiān)聽圖片的點(diǎn)擊，給imageView添加手勢
- 下載完畢才可以點(diǎn)擊夷磕，可以判斷imageView.image是否有值即可判斷是否下載完
- 顯示大圖控制器SeePictureViewController
- 結(jié)構(gòu)：xib布局（頁面頂部 -> "返回"按鈕尺棋； 底部 -> "保存"按鈕；），手動添加一個(gè)UIScrollView 并添加一個(gè)UIImageView作為其類型顯示圖片
- 分析：
- 1.在我們Modal出查看大圖控制器SeePictureViewController前内斯，需要將圖片名稱傳遞給該控制器，這樣才能控制圖片數(shù)據(jù)顯示
- 2.控制器之間的順傳，我們直接在SeePictureViewController添加一個(gè)圖片名稱屬性即可甚颂，然后在Modal出該控制器之前將圖片名稱數(shù)據(jù)賦值給該控制器就OK了蜜猾。
- 3.判斷圖片是不是大圖：
- 不是大圖 -》就讓其居中顯示在屏幕即可
- 是大圖 -》讓其從屏幕的左上角開始顯示
- 4.讓控制器成為UIScrollView的代理振诬，實(shí)現(xiàn)代理方法，讓圖片可以伸縮實(shí)現(xiàn)
- 5.點(diǎn)擊保存按鈕肩豁，將圖片保存到相冊
2.5 cell上面的圖片圓角設(shè)置
方案一：圖層layer
- 缺點(diǎn)：如果使用過于頻繁放闺，可能會導(dǎo)致拖拽起來的感覺比較卡現(xiàn)象
@implementation JPCell
- (void)awakeFromNib
{
// 如果使用過于頻繁谜叹，可能會導(dǎo)致拖拽起來的感覺比較卡
self.imageListView.layer.cornerRadius = self.imageListView.width * 0.5;
self.imageListView.layer.masksToBounds = YES;
}
@end
方案二：Quartz2D裁剪圖片
- 優(yōu)點(diǎn)：不會出現(xiàn)設(shè)置layer圖層屬性女仰，過度卡頓效果，推薦
- 實(shí)現(xiàn)：下載好圖片抡锈，通過Quartz2D裁剪圖片 成圓角保存
- 優(yōu)化：UIImage分類抽取
- 為了以后的擴(kuò)展疾忍，而且它是對圖片進(jìn)行裁剪，所以我們給UIImage抽取一個(gè)分類勿璃，返回裁剪后的圓角圖片
#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);
// 添加一個(gè)圓
CGContextAddEllipseInRect(ctx, rect);
// 裁剪(裁剪成剛才添加的圖形形狀)
CGContextClip(ctx);
// 往圓上面畫一張圖片
[self drawInRect:rect];
// 獲得上下文中的圖片
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
// 關(guān)閉圖形上下文
UIGraphicsEndImageContext();
return image;
}
+ (instancetype)circleImageNamed:(NSString *)name
{
return [[self imageNamed:name] circleImage];
}
@end
2.6 思考：APP中所有頭像都設(shè)置為圓角擒抛，如何抽取补疑？
- 解決方案：給ImageView寫了分類歧沪，封裝圖片裁剪處理細(xì)節(jié)在內(nèi)部。
- 好處：統(tǒng)一莲组，方便以后改變成其他樣式诊胞，不管是矩形還是...
#import <UIKit/UIKit.h>
@interface UIImageView (JPExtension)
/**
* 設(shè)置頭像
*/
- (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]; // 使用了上面的一個(gè)分類，裁剪圓角圖片返回
[self sd_setImageWithURL:[NSURL URLWithString:url] placeholderImage:placeholder completed:
^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
// 如果圖片下載失敗锹杈，就不做任何處理撵孤，按照默認(rèn)的做法：會顯示占位圖片
if (image == nil) return;
weakSelf.image = [image circleImage];
}];
}
@end
