之前寫(xiě)了一個(gè)FJImageBrowser颓影，是用UIScrollView來(lái)寫(xiě)的鸳碧，不支持橫豎屏和上下拉拖動(dòng)盾鳞，而且寫(xiě)得有點(diǎn)凌亂，因此現(xiàn)在重寫(xiě)了下瞻离。
新版的支持:上下拖動(dòng)腾仅、橫豎屏旋轉(zhuǎn)、支持加載過(guò)程先居中琐脏，加載完成后放大和直接放大兩種效果攒砖、支持本地圖片和網(wǎng)絡(luò)圖片自動(dòng)判斷。
github鏈接地址: FJPictureBrowser
集成方法:
- 靜態(tài)：手動(dòng)將
FJPictureBrowser文件夾拖入到工程中日裙。 - 動(dòng)態(tài)：
CocoaPods：pod 'FJPictureBrowser', '~> 1.0.0吹艇。
效果圖:
一. 思路分析
將原始圖片和請(qǐng)求圖片的
URL地址放在FJImageModel的屬性里面，然后放進(jìn)數(shù)組中當(dāng)調(diào)用
FJPictureBrowser，將存放FJImageModel的數(shù)組和當(dāng)前選中的索引selectedIndex傳遞給FJPictureBrowserFJPictureBrowser根據(jù)數(shù)組內(nèi)容設(shè)置內(nèi)部TMMuiLazyScrollView并顯示，同時(shí)根據(jù)selectedIndex诱贿，定位到選定的圖片判斷當(dāng)前是不是第一次顯示五嫂，如果是第一次顯示就對(duì)圖片進(jìn)行放大過(guò)程的處理，如果不是第一次就根據(jù)
photoBrowserType對(duì)圖片進(jìn)行展示编检。對(duì)
TMMuiLazyScrollView內(nèi)部的FJPictureBrowserPhotoView添加單擊退出、雙擊放大、上下拖動(dòng)漸變等效果撑碴。
FJImageBrowser的最外圍是FJImageBrowserView，繼承自UIViewController朝墩。FJImageBrowserView內(nèi)部有TMMuiLazyScrollView和UIPageControl,TMMuiLazyScrollView 是一個(gè)高性能的scrollView重用布局框架, 實(shí)現(xiàn)了視圖的重用和自動(dòng)加載醉拓；而UIPageControl則主要用來(lái)顯示頁(yè)碼。FJImageBrowserPhotoView是TMMuiLazyScrollView的視圖收苏，里面主要包含一個(gè)當(dāng)前顯示圖片UIImageView和 一個(gè) 顯示加載進(jìn)度的FJShapeCircleView亿卤。
其實(shí)FJImageBrowser的結(jié)構(gòu)很簡(jiǎn)單，就是一個(gè)用于滾動(dòng)的TMMuiLazyScrollView里面包含著一個(gè)用于放大鹿霸、縮小的UIScrollView來(lái)展現(xiàn)當(dāng)前的圖片排吴。
二. 屬性分析
1. photoBrowserType:
/**
瀏覽 顯示 模式
*/
@property (nonatomic, assign) FJPictureViewShowType photoBrowserType;
FJPictureViewShowType 有兩種方式:
// 顯示 模式
typedef NS_ENUM(NSInteger, FJPictureViewShowType){
// 模仿微博顯示
FJPictureViewShowTypeWeiBo = 0,
// 模仿微信顯示
FJPictureViewShowTypeWeiXin = 1,
};
FJPictureViewShowTypeWeiBo 模式: 就是加載過(guò)程中直接放大，類似微博圖片瀏覽器的效果懦鼠。
FJPictureViewShowTypeWeiXin模式:是加載過(guò)程中先將小圖居中钻哩，加載完成后在放大屹堰。類似早起微信圖片瀏覽器的效果，現(xiàn)在微信圖片瀏覽器也改成加載過(guò)程中直接放大的效果憋槐。
2. photoModeArray:
/**
視圖模型數(shù)據(jù)源(不需要自己 實(shí)現(xiàn)代理,如果實(shí)現(xiàn),代理優(yōu)先級(jí)高)
*/
@property (nonatomic, copy, nonnull) NSMutableArray <FJImageModel *>*photoModeArray;
photoModeArray是數(shù)據(jù)源双藕，里面包含的是FJImageModel模型。
@interface FJImageModel : NSObject
// 圖片url / 圖片image
@property (nonatomic, weak) id imageInfo;
// 原圖
@property (nonatomic, weak) UIImageView *imageView;
@end
FJImageModel有兩個(gè)屬性:
imageInfo是數(shù)據(jù)源阳仔，比如圖片URL地址或是本地圖片的imageimageView是原圖忧陪，這個(gè)屬性主要用來(lái)作為占位圖、獲取原圖位置等近范。
如果傳入的是這個(gè)視圖模型數(shù)據(jù)源嘶摊，就不需要實(shí)現(xiàn)獲取占位圖和原來(lái)位置的代理，庫(kù)里面會(huì)自動(dòng)計(jì)算评矩，但如果外部實(shí)現(xiàn)代理叶堆，代理的優(yōu)先級(jí)高。
3. photoDataArray:
/**
圖片數(shù)據(jù)源（需要自己實(shí)現(xiàn)代理）
*/
@property (nonatomic, copy, nonnull) NSArray *photoDataArray;
photoDataArray 圖片數(shù)據(jù)源斥杜，里面主要包含圖片URL或是本地圖片的image虱颗，如果傳入這個(gè)參數(shù)，就需要實(shí)現(xiàn)代理來(lái)獲取占位圖和原圖位置蔗喂。
4. isForbidLandscape:
是否禁止橫屏忘渔，如果為YES,橫屏?xí)r，圖片瀏覽依然保持豎屏狀態(tài)缰儿。如果為NO畦粮，橫屏?xí)r就進(jìn)行橫屏適配。
5. isHidesOriginal:
圖片瀏覽拖動(dòng)時(shí)候是否隱藏原來(lái)的圖片乖阵。
三. 使用方法
1. photoModeArray的使用方法(UICollectionView中)
- 生成
imageModels：
self.imageModels = [NSMutableArray array];
// *************************綁定JKPhotoModel*********************************
[self.bigImageArray enumerateObjectsUsingBlock:^(NSString *imageUrl, NSUInteger idx, BOOL * _Nonnull stop) {
FJImageModel * photoModel = [[FJImageModel alloc] init];
photoModel.imageInfo = imageUrl;
[self.imageModels addObject:photoModel];
}];
- 對(duì)原圖賦值
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
FJCollectionImageViewCell *cell = [FJCollectionImageViewCell cellWithCollectionView:collectionView atIndexPath:indexPath];
[cell.imageView sd_setImageWithURL:[NSURL URLWithString:self.smallImageArray[indexPath.row]] placeholderImage:[UIImage imageNamed:KFJPhotoBrowserDefaultImage]];
// *************************綁定cell和imageView*********************************
FJImageModel * photoModel = self.imageModels[indexPath.row];
photoModel.imageView = cell.imageView;
return cell;
}
- 顯示圖片瀏覽器
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
FJPictureBrowserView *photosView = [[FJPictureBrowserView alloc] init];
photosView.photoBrowserType = self.switchShowBtn.selected;
photosView.photoModeArray = self.imageModels;
photosView.selectedIndex = indexPath.row;
photosView.isHidesOriginal = YES;
[photosView showPhotoBrowser];
}
2. photoDataArray的使用方法(UICollectionView中)
- 顯示圖片瀏覽器
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
[tableView deselectRowAtIndexPath:indexPath animated:NO];
FJImageBrowserView *photosView = [[FJImageBrowserView alloc] init];
photosView.photoDataArray = self.bigImageArray;
photosView.selectedIndex = indexPath.row;
photosView.photoBrowserDelegate = self;
[photosView showPhotoBrowser];
}
- 實(shí)現(xiàn)代理方法
************************************* PhotosViewDelegate ***************************************/
// 返回圖片占位小圖
- (UIImageView *)photoBrowser:(FJPictureBrowserView *)browser placeholderImageForIndex:(NSInteger)index {
ChatTableViewCell *cell = (ChatTableViewCell *)[self tableView:self.tableView cellForRowAtIndexPath:[NSIndexPath indexPathForItem:index inSection:0]];
return cell.imgView;
}
// 返回原圖片位置
- (CGRect)photoBrowser:(FJPictureBrowserView *)browser targetRectForIndex:(NSInteger)index {
NSIndexPath *tmpIndexPath = [NSIndexPath indexPathForItem:index inSection:0];
ChatTableViewCell *cell = (ChatTableViewCell *)[self tableView:self.tableView cellForRowAtIndexPath:tmpIndexPath];
CGRect newImageViewFrame = [cell.imgView convertRect:cell.imgView.bounds toView:self.view];
// 先計(jì)算cell的位置,再轉(zhuǎn)化到view中的位置.
CGRect rectInTableView = [self.tableView rectForRowAtIndexPath:tmpIndexPath];
CGRect rectInSuperView = [self.tableView convertRect:rectInTableView toView:[UIApplication sharedApplication].keyWindow];
newImageViewFrame.origin = CGPointMake(newImageViewFrame.origin.x, rectInSuperView.origin.y + 10);
return newImageViewFrame;
}
四. 難點(diǎn)分析
1.拖動(dòng)和左右滑動(dòng)的兼容
// 讓 scrollView 能夠 同時(shí) 相應(yīng) 上下拖動(dòng) 和 作用滑動(dòng) 兩種手勢(shì)
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
return YES;
}
同時(shí)還要防止手勢(shì)之間測(cè)沖突宣赔，因?yàn)橥蟿?dòng)也包括左右的拖動(dòng)這就和左右的滑動(dòng)產(chǎn)生了沖突，所以需要在最外層的TMMuiLazyScrollView的UIScrollViewDelegate里面添加判斷瞪浸。
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
self.isHorizontalScrolling = YES;
NSInteger index = (NSInteger)roundf(scrollView.contentOffset.x / self.photoBrowserScrollView.width);
self.pageControl.currentPage = index;
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
self.isHorizontalScrolling = NO;
}
如果當(dāng)前正在左右滑動(dòng)儒将，那拖動(dòng)手勢(shì)不響應(yīng)，如果沒(méi)有正在左右滑動(dòng)对蒲，則響應(yīng)拖動(dòng)手勢(shì)钩蚊。
2.上下拖動(dòng)的同時(shí)改變圖片大小
這里的規(guī)則是:
當(dāng)圖片超過(guò)中心線往上拖，圖片大小保持不變齐蔽，背景色透明度也不變只是左右隨拖動(dòng)手勢(shì)進(jìn)行改變，如果圖片超過(guò)中心線往下拖床估，圖片位置和大小隨拖動(dòng)手勢(shì)進(jìn)行改變含滴，背景色透明度也隨著改變。
當(dāng)圖片拖動(dòng)結(jié)束后丐巫，如果圖片低于下半部分中心線則直接返回原圖位置谈况，如果沒(méi)有低于中心線則直接返回圖片瀏覽的中心勺美。
// 拖曳 手勢(shì)
- (void)handlePanGesture:(UIPanGestureRecognizer *)recognizer {
// 非滾動(dòng)圖 和 非禁止pan手勢(shì)
if (self.parentPhotosView.isBanPanGesture == NO && self.presentImageView.height <= self.scrollView.height) {
CGPoint location = [recognizer locationInView:self];
if (recognizer.state == UIGestureRecognizerStateBegan) {
// 記錄初始點(diǎn)
self.isScrollHorizontal = NO;
self.panGestureBeginPoint = location;
}
else if (recognizer.state == UIGestureRecognizerStateChanged && [self.parentPhotosView isHorizontalScrolling] == NO) {
CGFloat verticalMargin = location.y - self.panGestureBeginPoint.y;
CGFloat horizontalMargin = location.x - self.panGestureBeginPoint.x;
if (fabs(verticalMargin) < fabs(horizontalMargin) && self.isScrollHorizontal == NO) {
self.isScrollHorizontal = YES;
return;
}
// 上下 移動(dòng) 禁止 左右 滑動(dòng) 手勢(shì)
if ([self.parentPhotosView isPanGestureRecognizerEnable]) {
[self.parentPhotosView setPanGestureRecognizerEnable:NO];
}
// 向下
self.isPanGestureDirectionDown = verticalMargin;
CGFloat height = self.bounds.size.height / 2.0;
CGFloat zoomScale = 1 - (verticalMargin / height) * 0.6;
if (zoomScale >= 1) {
zoomScale = 1.0f;
}else {
[self.parentPhotosView setStatusBarHiddenStatus:NO];
}
[self hiddenOriginImageView];
self.scrollView.zoomScale = zoomScale;
self.parentPhotosView.view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:zoomScale];
self.presentImageView.center = CGPointMake(self.imageViewOriginalCenter.x + horizontalMargin, self.imageViewOriginalCenter.y + verticalMargin);
}
else if (recognizer.state == UIGestureRecognizerStateEnded ) {
if ([self.parentPhotosView isPanGestureRecognizerEnable] == NO) {
[self.parentPhotosView setPanGestureRecognizerEnable:YES];
// 最后的手勢(shì)不是向下，則將imageView還原到1.0比例碑韵，并移到原始中心點(diǎn)
if (self.isPanGestureDirectionDown == NO) {
[self restorePresentImageViewOriginalPosition];
}
else {
if (self.scrollView.zoomScale > 0.6) {
[self restorePresentImageViewOriginalPosition];
}
else {
[self handleSingleTap:nil];
}
}
}
}
}
}
這里隨手勢(shì)拖動(dòng)改變self.scrollView的大小主要是通過(guò)改變self.scrollView.zoomScale 的屬性赡茸，我之前是通過(guò)計(jì)算frame來(lái)改變，效果顯得特別不自然祝闻。
3.橫豎屏轉(zhuǎn)換
這里有兩個(gè)難點(diǎn):
- 當(dāng)前手機(jī)橫屏之后占卧，點(diǎn)擊圖片進(jìn)行拖動(dòng)，背景透明联喘，可以看到原來(lái)界面必須還是豎屏?xí)r候的操作华蜒。
這里主要在屏幕旋轉(zhuǎn)UIApplicationDidChangeStatusBarOrientationNotification的通知中，獲取原來(lái)界面的視圖豁遭，根據(jù)方向進(jìn)行將原來(lái)viewController的view的transform進(jìn)行改變叭喜，同時(shí)屏幕旋轉(zhuǎn)之后要根據(jù)方向重新設(shè)置TMMuiLazyScrollView和UIPageControls的frame;
// 屏幕 旋轉(zhuǎn) 通知
- (void)didChangeStatusBarOrientationNotification: (NSNotification*)notify {
self.isHorizontalScrolling = NO;
CGFloat itemSizeHeight = [UIScreen mainScreen].bounds.size.height;
CGFloat itemSizeWidth = [UIScreen mainScreen].bounds.size.width;
//收到的消息是上一個(gè)InterfaceOrientation的值
UIInterfaceOrientation currInterfaceOrientation = [[UIApplication sharedApplication] statusBarOrientation];
//計(jì)算旋轉(zhuǎn)角度
CGFloat tmpAngle = -M_PI_2;
if (currInterfaceOrientation == UIInterfaceOrientationLandscapeLeft) {
tmpAngle = M_PI_2;
}
else if(currInterfaceOrientation == UIInterfaceOrientationPortrait) {
tmpAngle = 0;
}
CGAffineTransform transform = CGAffineTransformMakeRotation(tmpAngle);
[[UIViewController fj_navigationTopViewController].tabBarController.view setTransform:transform];
[UIViewController fj_navigationTopViewController].tabBarController.view.frame = CGRectMake(0, 0, itemSizeWidth, itemSizeHeight);
CGFloat currentPageIndex = self.pageControl.currentPage;
self.photoBrowserScrollView.frame = CGRectMake(0, 0, itemSizeWidth+ [self getCellSpacing], itemSizeHeight);
self.photoBrowserScrollView.contentSize = CGSizeMake(self.photoBrowserScrollView.width * self.photoModeArray.count, self.view.frame.size.height);
self.pageControl.frame = CGRectMake(0, itemSizeHeight -40, itemSizeWidth, 40);
[self.photoBrowserScrollView setContentOffset:CGPointMake(currentPageIndex* self.photoBrowserScrollView.frame.size.width, 0) animated:NO];
[self.photoBrowserScrollView reloadData];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.01 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
self.isHorizontalScrolling = NO;
});
}
- 手機(jī)橫屏之后，圖片的顯示規(guī)則以及圖片旋轉(zhuǎn)的效果蓖谢。
我最開(kāi)始用UICollectionView來(lái)做捂蕴，但是UICollectionView在圖片旋轉(zhuǎn)的過(guò)程中，會(huì)看到圖片旋轉(zhuǎn)的陰影闪幽，這個(gè)問(wèn)題我寫(xiě)了demo看了下啥辨，好像UICollectionView都會(huì)這樣，所以最后才用UIScroollView來(lái)寫(xiě)沟使。
橫屏之后圖片的顯示委可，需要先獲取當(dāng)前圖片的寬高比跟當(dāng)前屏幕的寬高比進(jìn)行比較，如果大于：
imageH = imageH * (screenHeight / imageW);
imageW = screenHeight;
如果小于:
if (imageH <= imageW/2) {
imageH = screenHeight - 80.0f;
}
else {
imageH = screenHeight;
}
imageW = imageH * ratio;
if (imageW > screenWidth) {
imageW = screenWidth;
}
這樣的顯示主要是根據(jù)微信圖片瀏覽器的展示效果來(lái)調(diào)節(jié)出來(lái)的腊嗡。
以上三點(diǎn)是重寫(xiě)過(guò)程中耗時(shí)比較大着倾，其他的問(wèn)題，都還好燕少。
五.最后
有興趣的同學(xué)卡者，可以看下，如果用問(wèn)題客们，煩請(qǐng)您指出來(lái)崇决。謝謝！
