MWPhotoBrowser
MBProgressHUD 1.1.0,DACircularProgress 2.3.1,SDWebImage 4.2.2
pod "MWPhotoBrowser", :podspec =>'https://raw.githubusercontent.com/moinku07/MWPhotoBrowser/master/MWPhotoBrowser.podspec'
一个简单的 iOS 照片和视频浏览器,可选网格视图、标题和选择。
MWPhotoBrowser 可以通过提供 UIImage
对象、PHAsset
对象或库资源、网络图片/视频或本地文件的 URL 来显示一个或多个图片或视频。照片浏览器可以无缝地处理从网络下载和缓存照片。图片可以进行缩放和滑动,并可以显示可选的(可自定义)标题。
浏览器还可以用于允许用户通过网格或主要图像视图选择一个或多个图片。
支持iOS 7及以上版本。所有字符串都支持本地化,可以用于支持多种语言的App中。
使用说明
MWPhotoBrowser旨在在导航控制器中显示。只需设置代表(必须符合 MWPhotoBrowserDelegate
),并实现2个必需的代理方法以将照片浏览器提供的数据形式为 MWPhoto
对象。您可以通过提供 UIImage
对象、PHAsset
对象或包含文件路径、在线图片或资源库资源的URL来创建 MWPhoto
对象。
MWPhoto
对象处理缓存、文件管理、网络图片下载以及各种优化。如果您想使用自己的数据模型来表示照片,请确保您的模型符合 MWPhoto
协议。然后您可以自行处理缓存、下载等管理。有关此信息的更多信息,请参阅 MWPhotoProtocol.h
。
下面的代码片段展示了如何实现照片浏览器。项目中还包含一个简单的示例App。
// Create array of MWPhoto objects
self.photos = [NSMutableArray array];
// Add photos
[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"]]];
[photos addObject:[MWPhoto photoWithURL:[NSURL URLWithString:@"http://farm4.static.flickr.com/3590/3329114220_5fbc5bc92b.jpg"]]];
// Add video with poster photo
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];
// Create browser (must be done each time photo browser is
// displayed. Photo browser objects cannot be re-used)
MWPhotoBrowser *browser = [[MWPhotoBrowser alloc] initWithDelegate:self];
// Set options
browser.displayActionButton = YES; // Show action button to allow sharing, copying, etc (defaults to YES)
browser.displayNavArrows = NO; // Whether to display left and right nav arrows on toolbar (defaults to NO)
browser.displaySelectionButtons = NO; // Whether selection buttons are shown on each image (defaults to NO)
browser.zoomPhotosToFill = YES; // Images that almost fill the screen will be initially zoomed to fill (defaults to YES)
browser.alwaysShowControls = NO; // Allows to control whether the bars and controls are always visible or whether they fade away to show the photo full (defaults to NO)
browser.enableGrid = YES; // Whether to allow the viewing of all the photo thumbnails on a grid (defaults to YES)
browser.startOnGrid = NO; // Whether to start on the grid of thumbnails instead of the first photo (defaults to NO)
browser.autoPlayOnAppear = NO; // Auto-play first video
// Customise selection images to change colours if required
browser.customImageSelectedIconName = @"ImageSelected.png";
browser.customImageSelectedSmallIconName = @"ImageSelectedSmall.png";
// Optionally set the current visible photo before displaying
[browser setCurrentPhotoIndex:1];
// Present
[self.navigationController pushViewController:browser animated:YES];
// Manipulate
[browser showNextPhotoAnimated:YES];
[browser showPreviousPhotoAnimated:YES];
[browser setCurrentPhotoIndex:10];
响应必需的代理方法
- (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;
}
您只需在新的导航控制器中包装浏览器并将其呈现,就可以以模态方式呈现浏览器。示例App允许您在两种呈现类型之间切换。
视频
您可以通过提供一个具有videoURL
的标准MWPhoto图像对象,在MWPhoto对象中代表视频。您还可以使用PHAsset
对象或资产库视频的URL。
// Video with URL including poster photo
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"];
// Video with PHAsset
MWPhoto *video = [MWPhoto photoWithAsset:asset targetSize:[UIScreen mainScreen].bounds.size]; // Example sizing
// Video with ALAsset
MWPhoto *video = [MWPhoto photoWithURL:asset.defaultRepresentation.url];
if ([asset valueForProperty:ALAssetPropertyType] == ALAssetTypeVideo) {
photo.videoURL = asset.defaultRepresentation.url;
}
// Video with no poster photo
MWPhoto *video = [MWPhoto videoWithURL:[NSURL URLWithString:@"https://scontent.cdninstagram.com/hphotos-xfa1/t50.2886-16/11237510_945154435524423_2137519922_n.mp4"]];
// Video grid thumbnail
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;
// Video grid thumbnail for video with no poster photo
MWPhoto *videoThumb = [MWPhoto new];
videoThumb.isVideo = YES;
网格
为了正确显示缩略图网格,您必须确保属性enableGrid
设置为YES
,并实现以下代理方法
- (id <MWPhoto>)photoBrowser:(MWPhotoBrowser *)photoBrowser thumbPhotoAtIndex:(NSUInteger)index;
照片浏览器也可以通过启用startOnGrid
属性在网格上开始。
动作
默认情况下,如果操作按钮可见,则图像(如果存在则包括标题)将被发送到UIActivityViewController。
您可以提供自定义操作,通过实现以下代理方法
- (void)photoBrowser:(MWPhotoBrowser *)photoBrowser actionButtonPressedForPhotoAtIndex:(NSUInteger)index {
// Do your thing!
}
照片标题
通过在特定照片上设置caption
属性,可以简单地显示照片标题
MWPhoto *photo = [MWPhoto photoWithURL:[NSURL URLWithString:@"http://farm4.static.flickr.com/3629/3339128908_7aecabc34b.jpg"]];
photo.caption = @"Campervan";
如果没有设置标题属性,则不会显示标题。
自定义标题
默认情况下,标题是一个简单的黑色透明视图,带有一个标签,以白色显示照片的标题。如果您想实现自己的标题视图,请按照以下步骤操作
- 可选地,使用
MWPhoto
的子类来存储比简单的标题字符串更多的数据。 - 继承
MWCaptionView
并覆盖-setupCaption
和-sizeThatFits:
(以及您认为合适的任何其他UIView方法)来布局您的视图并设置其大小。更多关于这方面的信息,可以在MWCaptionView.h
中找到 - 实现
-photoBrowser:captionViewForPhotoAtIndex:
MWPhotoBrowser代理方法(如下所示)。
自定义标题视图的示例代理方法
- (MWCaptionView *)photoBrowser:(MWPhotoBrowser *)photoBrowser captionViewForPhotoAtIndex:(NSUInteger)index {
MWPhoto *photo = [self.photos objectAtIndex:index];
MyMWCaptionViewSubclass *captionView = [[MyMWCaptionViewSubclass alloc] initWithPhoto:photo];
return captionView;
}
选择
相册浏览器可以显示复选框,使用户可选择一张或多张照片。要使用此功能,只需启用 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]];
}
安装
MWPhotoBrowser 通过 CocoaPods 提供。要安装它,只需将以下行添加到您的 Podfile 中
pod "MWPhotoBrowser"
使用
要运行示例项目,请克隆存储库,然后先从 Example 目录运行 pod install
。
然后将相册浏览器导入您的源文件(如果您使用的是 Swift 并未使用 Cocoapods 的框架,则导入 bridge header)
#import "MWPhotoBrowser.h"
如果您使用的是 Swift 和框架,则只需将浏览器导入 Swift 源文件
import MWPhotoBrowser
作者
Michael Waterfall,[email protected]
许可
MWPhotoBrowser 在 MIT 许可下提供。有关更多信息,请参阅 LICENSE 文件。
注解
演示图片由 Oliver Waters 赠送。