第三方集成前端基础

图片框架MWPhotoBrowser详解（一）

2018-10-11  本文已影响274人  明若晴空

MWPhotoBrowser是项目中用到的一个图片浏览框架。一直说系统的研究一下其中加载图片的过程，以及图片浏览时的对于图片在内存中的处理。基本上按照自己看代码的流程来研读的，所以可能思路会比较细碎一些。下面分两篇来写对MWPhotoBrowser的理解。

（一）、MWPhotoBrowser的介绍和使用方法：

MWPhotoBrowser是一个简单的iOS图片和视频浏览框架，带有网格视图，标题，选择按钮等。
MWPhotoBrowser可以通过提供资源库的UIImage对象，PHAsset对象，以及URL来展示一个或多个图片，视频。这个图片浏览器可以下载和缓存网络图片。还可以缩放，平移图片，展示可定制的标题。

这个图片浏览器还可以允许用户使用网格图片视图或主图片视图来选择一张或多张图片。

可运行在iOS7及之后的系统上。所有字符串都可以本地化，因此可用于支持多种语言的app。

依赖于其他三个第三方库，分别是：

使用：

MWPhotoBrowser是在导航控制器内呈现的。使用非常简单：
1、#import “MWPhotoBrowser.h"到源文件中。

2、设置代理（MWPhotoBrowserDelegate）；

3、实现其中以MWPhoto来提供图片浏览数据的两个要求实现的代理方法；

我们可以通过提供UIImage对象，PHAsset对象，或者包含文件、网络图片、资源库图片路径的URL来创建MWPhoto对象。

MWPhoto对象处理缓存，文件管理，下载网络图片，以及各种优化。如果我们想使用自己的数据模型来展示图片，只需要确保这个模型遵守了MWPhoto协议就可以了。然后我们就可以自己来处理缓存、下载管理。关于这个更多信息我们可以在MWPhotoProtocol.h中查看。

图片

关于如何实现图片浏览器的示例，可以参看下面的demo片段：

1、设置代理（MWPhotoBrowserDelegate）；
// 创建MWPhoto对象数组
self.photos = [NSMutableArray array];

// 添加图片
[photos addObject:[MWPhoto photoWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"photo2l" ofType:@"jpg"]]]];//文件
[photos addObject:[MWPhoto photoWithURL:[NSURL URLWithString:@"http://farm4.static.flickr.com/3629/3339128908_7aecabc34b.jpg"]]];//URL
[photos addObject:[MWPhoto photoWithURL:[NSURL URLWithString:@"http://farm4.static.flickr.com/3590/3329114220_5fbc5bc92b.jpg"]]];//URL

// 通过海报图片添加视频
MWPhoto *video = [MWPhoto photoWithURL:[NSURL URLWithString:@"https://scontent.cdninstagram.com/hphotos-xpt1/t51.2885-15/e15/11192696_824079697688618_1761661_n.jpg"]];
video.videoURL = [[NSURL alloc] initWithString:@"https://scontent.cdninstagram.com/hphotos-xpa1/t50.2886-16/11200303_1440130956287424_1714699187_n.mp4"];
[photos addObject:video];

// 每次图片浏览器展示时创建，图片浏览器对象不能复用
MWPhotoBrowser *browser = [[MWPhotoBrowser alloc] initWithDelegate:self];

// 设置可选项
browser.displayActionButton = YES; // 是否展示允许分享，复制等操作项按钮，默认是YES
browser.displayNavArrows = NO; // 是否在工具栏展示左右导航箭头，默认为NO
browser.displaySelectionButtons = NO; // 是否在每张照片上展示选择按钮，默认为NO
browser.zoomPhotosToFill = YES; //即将填满屏幕的图片会被缩放至填满，默认YES
browser.alwaysShowControls = NO; //控制条和控件是否始终可见，或者是否在全图展示时隐去，默认NO
browser.enableGrid = YES; // 是否允许网格缩略图视图，默认YES
browser.startOnGrid = NO; // 是否以缩略图网格开始，而不是第一张图片，默认NO
browser.autoPlayOnAppear = NO; // 自动播放第一个视频

// 按需定制选择图片时的颜色
browser.customImageSelectedIconName = @"ImageSelected.png";
browser.customImageSelectedSmallIconName = @"ImageSelectedSmall.png";

// 设置当前可见图片索引
[browser setCurrentPhotoIndex:1];

// 呈现
[self.navigationController pushViewController:browser animated:YES];

// 操作设置
[browser showNextPhotoAnimated:YES];
[browser showPreviousPhotoAnimated:YES];
[browser setCurrentPhotoIndex:10];
2、实现其中以MWPhoto来提供图片浏览数据的两个要求实现的代理方法；

接着，实现必须的代理方法：

- (NSUInteger)numberOfPhotosInPhotoBrowser:(MWPhotoBrowser *)photoBrowser {
    return self.photos.count;
}

- (id <MWPhoto>)photoBrowser:(MWPhotoBrowser *)photoBrowser photoAtIndex:(NSUInteger)index {
    if (index < self.photos.count) {
        return [self.photos objectAtIndex:index];
    }
    return nil;
}

我们可以把图片浏览器封装在新的导航控制器中来呈现。demo中可以在两种呈现方式中切换。

视频

我们可以通过一个video URL创建一个标准的MWPhoto对象来表示视频。我们也可以使用PHAsset对象或者视频资源的URL来创建MWPhoto对象。

// 使用视频的海报图片URL创建MWPhoto
MWPhoto *video = [MWPhoto photoWithURL:[NSURL URLWithString:@"https://scontent.cdninstagram.com/hphotos-xpt1/t51.2885-15/e15/11192696_824079697688618_1761661_n.jpg"]];
video.videoURL = [NSURL URLWithString:@"https://scontent.cdninstagram.com/hphotos-xpa1/t50.2886-16/11200303_1440130956287424_1714699187_n.mp4"];

// 使用视频的PHAsset创建MWPhoto
MWPhoto *video = [MWPhoto photoWithAsset:asset targetSize:[UIScreen mainScreen].bounds.size]; // Example sizing

// 使用视频的ALAsset创建MWPhoto
MWPhoto *video = [MWPhoto photoWithURL:asset.defaultRepresentation.url];
if ([asset valueForProperty:ALAssetPropertyType] == ALAssetTypeVideo) {
    photo.videoURL = asset.defaultRepresentation.url;
}

// 使用没有海报图片的视频的URL创建MWPhoto
MWPhoto *video = [MWPhoto videoWithURL:[NSURL URLWithString:@"https://scontent.cdninstagram.com/hphotos-xfa1/t50.2886-16/11237510_945154435524423_2137519922_n.mp4"]];

// 使用视频的网格缩略图URL创建MWPhoto
MWPhoto *videoThumb = [MWPhoto photoWithURL:[NSURL URLWithString:@"https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s150x150/e15/11240463_963135443745570_1519872157_n.jpg"]];
videoThumb.isVideo = YES;

// 使用没有海报图片的视频的网格缩略图创建MWPhoto
MWPhoto *videoThumb = [MWPhoto new];
videoThumb.isVideo = YES;

Grid：网格展示

为了恰当地展示出缩略图的网格，我们必须确保设置enableGrid属性为YES，并实现下面的代理方法：

- (id <MWPhoto>)photoBrowser:(MWPhotoBrowser *)photoBrowser thumbPhotoAtIndex:(NSUInteger)index;

图片浏览器也可以通过启用startOnGrid属性来以网格开始浏览。

Action

默认情况下，如果Action按钮是可见的，那么图片就会被发送到UIActivityViewController
我们可以通过实现下面的代理方法来自定义Action：

- (void)photoBrowser:(MWPhotoBrowser *)photoBrowser actionButtonPressedForPhotoAtIndex:(NSUInteger)index {
    // Do your thing!
}

Photo Caption

图片的标题可以通过设置指定图片的caption属性来展示。

MWPhoto *photo = [MWPhoto photoWithURL:[NSURL URLWithString:@"http://farm4.static.flickr.com/3629/3339128908_7aecabc34b.jpg"]];
photo.caption = @"Campervan";

如果没有设置，就不会展示标题。

自定义Captions

默认情况下，caption是通过一个简单的黑色透明label视图来展示图片的caption。如果我们想实现自己的caption视图，只要遵循下面几步：

- (MWCaptionView *)photoBrowser:(MWPhotoBrowser *)photoBrowser captionViewForPhotoAtIndex:(NSUInteger)index {
    MWPhoto *photo = [self.photos objectAtIndex:index];
    MyMWCaptionViewSubclass *captionView = [[MyMWCaptionViewSubclass alloc] initWithPhoto:photo];
    return captionView;
}

Selections

照片浏览器展示了复选框来允许用户选择一个或多个图片。要想使用这个特征，只需启用displaySelectionButtons属性，并实现夏敏的代理方法即可：

- (BOOL)photoBrowser:(MWPhotoBrowser *)photoBrowser isPhotoSelectedAtIndex:(NSUInteger)index {
    return [[_selections objectAtIndex:index] boolValue];
}

- (void)photoBrowser:(MWPhotoBrowser *)photoBrowser photoAtIndex:(NSUInteger)index selectedChanged:(BOOL)selected {
    [_selections replaceObjectAtIndex:index withObject:[NSNumber numberWithBool:selected]];
}
上一篇下一篇

猜你喜欢

热点阅读