A simple photo browser for extension

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

Usage

Just create an array of photos and specify the initial index to show, then use MFModalPhotoBrowser or MFPushPhotoBrowser to present the photo browser.

MFGenericPhoto *photo1 = [MFGenericPhoto new];
photo1.photoData = [NSURL URLWithString:@"https://graph.facebook.com/olivier.poitrey/picture"];
MFGenericPhoto *photo2 = [MFGenericPhoto new];
photo2.photoData = [UIImage imageNamed:@"avatar-placeholder.png"];
NSArray *photoModels = @[photo1, photo2];

[MFModalPhotoBrowser showInViewController:parentVC 
photoModels:photoModels initialIndex:1];

Features

Although the main goal of MFPhotoBrowser is to provide the ways for easy extensibility, there are some basic features:

• Modal/Push transition
• Double-tap/Pan to zoom in/out
• Device rotation
• Support UIImage, NSURL and PHAsset

Extension

This project is designed for extension. It's composed of three components (loader, item view and browser). They works with each other based on interface.

Loader

Loader is responsible for loading photo data and render to the specified image view.

Currently we have three types of photo loaders that support UIImage, NSURL and PHAsset respectively.

You can subclass MFPhotoLoader to support your custom type and register it with MFPhotoLoaderFactory.

Item view

Item view plays the role of cell in photo browser, but it has to conforms to the protocol - MFPhotoItemView that defines a set of APIs to control the lifecycle of item view.

Currently we have one kind of item view (MFGenericPhotoItemView) which only has an image view on it.

Like cell, you can create your custom UI by subclassing UIView and implementing below three methods (required on the protocol - MFPhotoItemView), e.g. create a new item view with a descriptive label, that's frequently-used in news app.

- (void)prepareForReuse;
- (void)render;
- (void)dismissWithCompletion:(void (^)(void))completion;

Browser

As the name suggests, browser is the controller in the MVC design pattern which controls the browsing behaviour.

There are serveral ways to do your customization.

• Override it to customize your presentation style, e.g. modal, present from bottom, push onto the navigation stack.

  - (void)showInViewController:(UIViewController *)viewController;

• Override it to use the item view you create in the last step.

  - (UIView<MFPhotoItemView> *)createPhotoItemView;

• Override it to customize UI on the top of the browser's view, e.g. add a fake navigation bar.

  - (void)setupTopView;

• Override it to customize UI on the bottom of the browser's view, e.g. add a bottom bar to comment/share/like.

  - (void)setupBottomView;

• Override them to handle event, e.g. scroll, single tap, double tap.

  - (void)scrollViewDidScroll:(UIScrollView *)scrollView NS_REQUIRES_SUPER;
  
  - (BOOL)handleSingleTap:(NSUInteger)page;
  
  - (BOOL)handleDoubleTap:(NSUInteger)page;

Installation

MFPhotoBrowser is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "MFPhotoBrowser"

TODO

• State Machine: Ensure photo loader working as expected.

Thanks

MFPhotoBrowser builds on inspiration from open source tools that came before it. The following resources have been particularly helpful:

• CorePhotoBroswerVC: Another photo browser
• SDWebImage: A library provides a category for UIImageView with support for remote images coming from the web.

Author

Jiangling Zheng, [email protected]

License

MFPhotoBrowser is available under the MIT license. See the LICENSE file for more info.