[翻译] IDMPhotoBrowser

IDMPhotoBrowser

IDMPhotoBrowser is a new implementation based on MWPhotoBrowser.

IDMPhotoBrowser实现了图片浏览器的功能,基于MWPhotoBrowser.

We've added both user experience and technical features inspired by Facebook's and Tweetbot's photo browsers.

我把Facebook与Tweetbot's的图片浏览器效果整合在一起了.

New features:

• Uses ARC 使用ARC
• Uses AFNetworking for image loading 使用AFNetworking作为图片加载器
• Image progress shown 显示图片加载进度
• Minimalistic Facebook-like interface, swipe up/down to dismiss 模仿Facebook样式的用户体验,向上/下轻轻滑动而消失
• Ability to add custom actions on the action sheet 你可以添加自定义的动作到动作清单上去

Features

• Can display one or more images by providing either UIImage objects, file paths to images on the device, or URLs to images online
• Handles the downloading and caching of photos from the web seamlessly
• Photos can be zoomed and panned, and optional captions can be displayed
• 可以显示一张或者多张图片,格式支持UIImage对象,文件路径,或者是来自网络的图片
• 下载并缓存图片没有丝毫停顿,非常流畅
• 图片可以缩放以及拖拽,也可以让可有可无的文案显示出来

Usage

See the code snippet below for an example of how to implement the photo browser.

看一下代码片段,你就会知道怎么使用了.

First create a photos array containing IDMPhoto objects:

首先,你需要创建一个图片数组,包含了所有的IDMPhoto对象.

// URLs array
NSArray *photosURL = @[[NSURL URLWithString:@"http://farm4.static.flickr.com/3567/3523321514_371d9ac42f_b.jpg"],
[NSURL URLWithString:@"http://farm4.static.flickr.com/3629/3339128908_7aecabc34b_b.jpg"],
[NSURL URLWithString:@"http://farm4.static.flickr.com/3364/3338617424_7ff836d55f_b.jpg"],
[NSURL URLWithString:@"http://farm4.static.flickr.com/3590/3329114220_5fbc5bc92b_b.jpg"]];

// Create an array to store IDMPhoto objects
NSMutableArray *photos = [NSMutableArray new];

for (NSURL *url in photosURL) {
    IDMPhoto *photo = [IDMPhoto photoWithURL:url];
    [photos addObject:photo];
}

// Or use this constructor to receive an NSArray of IDMPhoto objects from your NSURL objects
NSArray *photos = [IDMPhoto photosWithURLs:photosURL];

There are two main ways to presente the photoBrowser, with a fade on screen or with a zooming effect from an existing view.

有两种方式用来显示出photoBrowser,第一种是从屏幕渐变出来,第二种则是从已有的view中缩放出来.

Using a simple fade transition:

使用简单的渐变效果示例:

IDMPhotoBrowser *browser = [[IDMPhotoBrowser alloc] initWithPhotos:photos];

Zooming effect from a view:

使用缩放效果示例:

IDMPhotoBrowser *browser = [[IDMPhotoBrowser alloc] initWithPhotos:photos animatedFromView:sender];

When using this animation you can set the scaleImage property, in case the image from the view is not the same as the one that will be shown on the browser, so it will dynamically scale it:

动力使用动画效果时,你可以设置scaleImage属性,这是缩放参数,设置了后,图片就不会按照原样显示出来.

browser.scaleImage = buttonSender.currentImage;

Presenting using a modal view controller:

用一种modal view的方式来显示出来:

[self presentViewController:browser animated:YES completion:nil];

Customization

Toolbar

You can customize the toolbar. There are three boolean properties you can set: displayActionButton (default is YES), displayArrowButton (default is YES) and displayCounterLabel (default is NO). If you dont want the toolbar at all, you can set displayToolbar = NO.

你可以定制toolbar.有3个属性你可以设置:displayActionButton(默认值是YES),displayArrowButton(默认值是YES)以及displayCounterLabel(默认值是NO).如果你不想让toolbar显示出来,你可以将displayToolbar设置成NO.

Toolbar setup example:

Toolbar设置示例:

browser.displayActionButton = NO;
browser.displayArrowButton = YES;
browser.displayCounterLabel = YES;

It is possible to use your own image on the toolbar arrows:

你也可以用你自己的图片来替换成toolbar的箭头:

browser.leftArrowImage = [UIImage imageNamed:@"IDMPhotoBrowser_customArrowLeft.png"];
browser.rightArrowImage = [UIImage imageNamed:@"IDMPhotoBrowser_customArrowRight.png"];
browser.leftArrowSelectedImage = [UIImage imageNamed:@"IDMPhotoBrowser_customArrowLeftSelected.png"];
browser.rightArrowSelectedImage = [UIImage imageNamed:@"IDMPhotoBrowser_customArrowRightSelected.png"];

If you want to use custom actions, set the actionButtonTitles array with the titles for the actionSheet. Then, implement the photoBrowser:didDismissActionSheetWithButtonIndex:photoIndex: method, from the IDMPhotoBrowser delegate

如果你想用自定义的actions,设置actionButtonTitles数组,然后实现photoBrowser:didDismissActionSheetWithButtonIndex:photoIndex:代理方法.

browser.actionButtonTitles = @[@"Option 1", @"Option 2", @"Option 3", @"Option 4"];

Others

Others customizations you can make are: use white background color, don't display the done button and change the done button background image:

其他的一些可以定制的有:使用白色的背景色,不要显示出done按钮以及修改done按钮的背景图:

browser.useWhiteBackgroundColor = YES;
browser.displayDoneButton = NO;
browser.doneBackgroundImage = [UIImage imageNamed:@"IDMPhotoBrowser_customDoneButton.png"];

Photo Captions

Photo captions can be displayed simply by setting the caption property on specific photos:

你可以通过设置标题属性来显示图片标题:

IDMPhoto *photo = [IDMPhoto photoWithFilePath:[[NSBundle mainBundle] pathForResource:@"photo2l" ofType:@"jpg"]];
photo.caption = @"Campervan";

No caption will be displayed if the caption property is not set.

如果标题属性没有设置,那么这个标题是不会显示出来的.

Custom Captions

By default, the caption is a simple black transparent view with a label displaying the photo's caption in white. If you want to implement your own caption view, follow these steps:

默认情况下,标题其实是一个半透明的view上面添加了一个label,用来显示图片的标题.如果你想实现你自己的标题view,遵循以下几步:

1. Optionally use a subclass of IDMPhoto for your photos so you can store more data than a simple caption string. 可以使用IDMPhoto类来作为你图片的容器,因为他可以显示更多的内容
2. Subclass IDMCaptionView and override -setupCaption and -sizeThatFits: (and any other UIView methods you see fit) to layout your own view and set it's size. More information on this can be found inIDMCaptionView.h 继承IDMCaptionView然后重写-setupCaption与-sizeThatFits: 方法
3. Implement the -photoBrowser:captionViewForPhotoAtIndex: IDMPhotoBrowser delegate method (shown below). 实现-photoBrowser:captionViewForPhotoAtIndex:代理方法

Example delegate method for custom caption view:

以下是实现代理方法的地方:

- (IDMCaptionView *)photoBrowser:(IDMPhotoBrowser *)photoBrowser captionViewForPhotoAtIndex:(NSUInteger)index {
    IDMPhoto *photo = [self.photos objectAtIndex:index];
    MyIDMCaptionViewSubclass *captionView = [[MyIDMCaptionViewSubclass alloc] initWithPhoto:photo];
    return captionView;
}

Adding to your project

Using CocoaPods

Just add pod 'IDMPhotoBrowser' to your Podfile.

在Podfile中添加'IDMPhotoBrowser'即可.

Including Source Directly Into Your Project

Simply add the files inside IDMPhotoBrowser/Classes to your Xcode project, copying them to your project's directory if required. And also any library inside IDMPhotoBrowser/ExternalLibraries needed.

你也可以直接将IDMPhotoBrowser/Classes类拖到你的项目当中,记得要选中copying选项.

Opensource libraries used

• AFNetWorking
• DACircularProgress
• SVProgressHUD