A simple iOS photo and video browser with grid view, captions and selections.

Related tags

Image MWPhotoBrowser
Overview

MWPhotoBrowser

Version License Platform

Flattr this git repo

A simple iOS photo and video browser with optional grid view, captions and selections.

MWPhotoBrowser can display one or more images or videos by providing either UIImage objects, PHAsset objects, or URLs to library assets, web images/videos or local files. The photo browser handles the downloading and caching of photos from the web seamlessly. Photos can be zoomed and panned, and optional (customisable) captions can be displayed.

The browser can also be used to allow the user to select one or more photos using either the grid or main image view.

Alt    Alt    Alt    Alt    Alt    Alt

Works on iOS 7+. All strings are localisable so they can be used in apps that support multiple languages.

Usage

MWPhotoBrowser is designed to be presented within a navigation controller. Simply set the delegate (which must conform to MWPhotoBrowserDelegate) and implement the 2 required delegate methods to provide the photo browser with the data in the form of MWPhoto objects. You can create an MWPhoto object by providing a UIImage object, PHAsset object, or a URL containing the path to a file, an image online or an asset from the asset library.

MWPhoto objects handle caching, file management, downloading of web images, and various optimisations for you. If however you would like to use your own data model to represent photos you can simply ensure your model conforms to the MWPhoto protocol. You can then handle the management of caching, downloads, etc, yourself. More information on this can be found in MWPhotoProtocol.h.

See the code snippet below for an example of how to implement the photo browser. There is also a simple demo app within the project.

// 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];

Then respond to the required delegate methods:

- (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;
}

You can present the browser modally simply by wrapping it in a new navigation controller and presenting that. The demo app allows you to toggle between the two presentation types.

Videos

You can represent videos in MWPhoto objects by providing a standard MWPhoto image object with a videoURL. You can also use a PHAsset object or a URL to an assets library video.

// 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;

Grid

In order to properly show the grid of thumbnails, you must ensure the property enableGrid is set to YES, and implement the following delegate method:

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

The photo browser can also start on the grid by enabling the startOnGrid property.

Actions

By default, if the action button is visible then the image (and caption if it exists) are sent to a UIActivityViewController.

You can provide a custom action by implementing the following delegate method:

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

Photo Captions

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

MWPhoto *photo = [MWPhoto photoWithURL:[NSURL URLWithString:@"http://farm4.static.flickr.com/3629/3339128908_7aecabc34b.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:

  1. Optionally use a subclass of MWPhoto for your photos so you can store more data than a simple caption string.
  2. Subclass MWCaptionView 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 in MWCaptionView.h
  3. Implement the -photoBrowser:captionViewForPhotoAtIndex: MWPhotoBrowser delegate method (shown below).

Example delegate method for custom caption view:

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

Selections

The photo browser can display check boxes allowing the user to select one or more of the photos. To use this feature, simply enable the displaySelectionButtons property, and implement the following delegate methods:

- (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]];
}

Installation

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

pod "MWPhotoBrowser"

Usage

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

Then import the photo browser into your source files (or into your bridging header if you're using with Swift and not using frameworks with Cocoapods):

#import "MWPhotoBrowser.h"

If you are using Swift and frameworks, then you can just import the browser into your Swift source file:

import MWPhotoBrowser

Author

Michael Waterfall, [email protected]

License

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

Notes

Demo photos kindly provided by Oliver Waters.

Comments
  • Crashing when loading very large photos

    Crashing when loading very large photos

    MWPhotoBrowser keeps crushing if I use it to open more than 30 or 40 files, each of which is about the size of 2~3M. A few of them are 5M

    I did see "Received memory warning." Then app crushes but XCode did not show me which _cmd caused the crushing.

    I tried to call releaseAllUnderlyingPhotos before it got "Received memory warning." But that did not help.

    And idea how to fix it ?

    Update: sometime when I use it to open a picture of size 5M, it will just crush too.

    opened by qiulang 28
  • Not working with ios8

    Not working with ios8

    Since this internally uses SDWebImage, which is not updated for ios8, the app crashes at "SDWebImageDownloaderOperation.h" which I could fix by synthesizing the variables @synthesize executing = _executing; @synthesize finished = _finished; It did not completely fix the issue, app still crashes at start connection method. self.connection = [[NSURLConnection alloc] initWithRequest:self.request delegate:self startImmediately:NO];

    opened by spandanabatchu 18
  • Only show the first photo when add MWPhotoBrowser as subview

    Only show the first photo when add MWPhotoBrowser as subview

    I've created the MWPhotoBrowser object in my viewcontroller as a subview from my self.view:

    For 1 to 3 { [photos addObject:[MWPhoto photoWithURL:[NSURL URLWithString:@"http://farm4.static.flickr.com/3590/3329114220_5fbc5bc92b_b.jpg"]]]; }

    self.photos = photos;

    MWPhotoBrowser *browser = [[MWPhotoBrowser alloc] initWithDelegate:self];

    browser.displayActionButton = NO; browser.wantsFullScreenLayout = NO;

    [self.view addSubview:browser.view]; [self.view bringSubviewToFront:browser.view];

    and, so, only show me the first image, but the scroller works fine for the three images. However if I define the MWPhotoBrowser object so:

    [self.navigationController pushViewController:browser animated:YES];

    The browser show me correctly the three images.

    And idea how to fix it with the first method?

    Sorry for my english and congratulations for this project. Thanks a lot

    opened by popomanel 18
  • Use SDWebImage '>= 3.5' or '< 4.0'?

    Use SDWebImage '>= 3.5' or '< 4.0'?

    I just had a pull request merged in to SDWebImage, it would be nice if the Podspec would change to something like '>= 3.5' or just remove the version and allow users to override the dependency within their own Podfile. I'm not sure if this would work, but maybe '< 4.0' would be safe as well as I doubt any methods will be removed and/or deprecated until the next major release. Thoughts?

    opened by vincentjames501 13
  • Grid mode reloaddata

    Grid mode reloaddata

    I reload the data in the grid mode but it shows the toolbar at bottom, and I think it's a bug, as I reloaded it, the grid cannot be touch anymore, can you help me to solve it? TKS

    opened by iPermanent 12
  • Updated SDWebImage to version 3.5.4

    Updated SDWebImage to version 3.5.4

    Build failed with SDWebImage 3.5.4 because SDWebImage's progress block interface was changed from ^(NSUInteger receivedSize, long long expectedSize) to ^(NSInteger receivedSize, NSInteger expectedSize). I've fixed this incompatible issue with below modification.

    • Modified progress block interface
    • Renew MWPhotoBrowser/Libraries/SDWebImage
    • Update podspec
    opened by ninjinkun 12
  • Is there an easy way to integrate a title for each photo?

    Is there an easy way to integrate a title for each photo?

    Hi Michael,

    Is there an easy way to integrate a title for each photo, like in the facebook app? or is it something you are planning to add?

    Another thing is that, when I added MWPhotoBrowser to my project, there were a few irregularities (I can't see those in your project but I couldn't figure out why they are in my app)

    1. After single tap, the navigationBar disappears (as it should). but when it appears again, it appears with a gap of 20 px between the status bar the navBar
    2. The status bar disappears but the space just becomes plain white.

    Thanks and regards, Ashish.

    opened by difficultashish 12
  • Save/restore navbar state, plus two toolbar bug fixes

    Save/restore navbar state, plus two toolbar bug fixes

    Holy crap! You saved my bacon with this class. It's EXACTLY what I was looking for after struggling with the buggy Ego classes and three20's bloat.

    Here are small targeted fixes for a few issues. First, it saves/restores the navbar and statusbar state in viewDidAppear: and viewWillDisappear:. This means it's safe to use with navbars with custom tint colors, not to mention it doesn't muck with your status bar except when it's onscreen. The way it's done should be safe even if you push a further view controller past the MWPhotoBrowser.

    Second, it hides any toolbars or tabbars by default by setting hidesBottomBarWhenPushed to YES in -initWithPhotos:. This is usually what you want (since it looks weird to have a toolbar nested like that). Users can still override this by just setting it back to NO after they init the browser.

    Finally, the toolbar now has a proper autoresize mask so it doesn't end up floating in the middle of the image (which happened to me, not sure why).

    opened by adamjernst 11
  • warnings with xcode 7.0.1

    warnings with xcode 7.0.1

    I get 17 warnings overall with xcode 7.0.1 in MWGridViewController.m and MWPhotoBrowser.m:

    7x 'interfaceOrientation' is deprecated: first deprecated in iOS 8.0

    8x 'UIBarMetricsLandscapePhone' is deprecated: first deprecated in iOS 8.0 - Use UIBarMetricsCompact instead

    1x 'setCompletionHandler:' is deprecated: first deprecated in iOS 8.0 - Use completionWithItemsHandler instead.

    1x Conflicting return type in implementation of 'supportedInterfaceOrientations': 'UIInterfaceOrientationMask' (aka 'enum UIInterfaceOrientationMask') vs 'NSUInteger' (aka 'unsigned long')


    project builds ok, most of them are just "deprecated" warnings but would be nice if these could be fixed sometime anyway, who knows what will happen when the next iOS version arrives :) And it's kind of ugly to have 17 yellow exclamation marks in the project.

    Thanks, Tom

    opened by TomMajor 10
  • [UIImage sd_imageWithData]: unrecognized selector

    [UIImage sd_imageWithData]: unrecognized selector

    I'm trying to move my project to the iOS7 SDK, but it won't compile anymore. I keep getting an error on line 292 of SDWebImage library.

    UIImage *image = [UIImage sd_imageWithData:self.imageData];

    unrecognized selector sent to class.

    This worked in iOS 5 + 6, but broke as soon as I try to view the Photo Browser in iOS 7. Is there another library that needs to be linked in now?

    opened by corgalore 10
  • Image Scale with Aspect Fit

    Image Scale with Aspect Fit

    I'm moving to this from the Three20 photo gallery. One thing that Three20 does (that this does not) is it has the images fit the display, be it in portrait or landscape mode. (That is, smaller images start off fitting in the available space.)

    It seems to be the one showstopper keeping me from using this library. I've tried modifying MWZoomingScrollView, but I end up having problems during rotation.

    Has anyone else needed this and figured it out? I'm willing to fork the code base and expose the photoImageView's content mode as a developer-controlled setting.

    Thanks!

    opened by jdandrea 10
  • PSTCollectionView Compile error

    PSTCollectionView Compile error

    I have an old app (2 years ago) which uses MWPhotoBrowser. When I try to compile it I get this error : Import of module 'Darwin.POSIX.dlfcn' appears within function 'PSTSimulatorAnimationDragCoefficient'

    This is the reference for the code: CGFloat PSTSimulatorAnimationDragCoefficient(void) { static CGFloat (UIAnimationDragCoefficient)(void) = NULL; //#if TARGET_IPHONE_SIMULATOR #if TARGET_OS_SIMULATOR #import <dlfcn.h> static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ UIAnimationDragCoefficient = (CGFloat ()(void))dlsym(RTLD_DEFAULT, "UIAnimationDragCoefficient"); }); #endif return UIAnimationDragCoefficient ? UIAnimationDragCoefficient() : 1.f; }

    Thank you !

    opened by tehilata 0
  • Cannot build due to missing components

    Cannot build due to missing components

    Project as cloned is missing XCTest.framework, libPods-MWPhotoBrowser_Example.a, libPods-MWPhotoBrowser_Tests.a. Local Media folder shows as missing (red in Xcode) but images inside it are OK. Build fails with "Library not found -lDACircularProgress. How can fix this?

    opened by SimonKravis 1
  • memory leak

    memory leak

    WX20200704-111511@2x
    #import "UIImage+MWPhotoBrowser.h"
    
    @implementation UIImage (MWPhotoBrowser)
    
    + (UIImage *)imageForResourcePath:(NSString *)path ofType:(NSString *)type inBundle:(NSBundle *)bundle {
        return [UIImage imageWithContentsOfFile:[bundle pathForResource:path ofType:type]];
    }
    
    + (UIImage *)clearImageWithSize:(CGSize)size {
        UIGraphicsBeginImageContextWithOptions(size, NO, [UIScreen mainScreen].scale);
        UIImage *blank = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return blank;
    }
    
    @end
    
    
    

    memory leak: [UIImage imageWithContentsOfFile:[bundle pathForResource:path ofType:type]];

    opened by hw20101101 0
Owner
Michael Waterfall
iOS at @ASOS • Creator of @MomentoApp
Michael Waterfall
Jogendra 113 Nov 28, 2022
DTPhotoViewerController - A fully customizable photo viewer ViewController to display single photo or collection of photos, inspired by Facebook photo viewer.

DTPhotoViewerController Example Demo video: https://youtu.be/aTLx4M4zsKk DTPhotoViewerController is very simple to use, if you want to display only on

Tung Vo 277 Dec 17, 2022
Photo Browser / Viewer inspired by Facebook's and Tweetbot's with ARC support, swipe-to-dismiss, image progress and more

IDMPhotoBrowser IDMPhotoBrowser is a new implementation based on MWPhotoBrowser. We've added both user experience and technical features inspired by F

Thiago Peres 2.7k Dec 21, 2022
React-native-photo-editor - Photo editor using native modules for iOS and Android

?? Image editor using native modules for iOS and Android. Inherit from 2 available libraries, ZLImageEditor (iOS) and PhotoEditor (Android)

Baron Ha. 244 Jan 5, 2023
CameraButton - A simple camera button that can be used for photo and video capturing

CameraButton A simple camera button that can be used for photo and video capturi

Erik Drobne 9 Dec 22, 2022
DGCropImage - A photo cropping tool which mimics Photo.app written by Swift

DGCropImage A photo cropping tool which mimics Photo.app written by Swift. This

donggyu 11 Jul 14, 2022
Photo-Sharing-App - Photo Sharing App With Swift

Photo Sharing App You can register and log in to this application and share your

Yağız Savran 2 Jun 14, 2022
LoremPicsum - Simple UIKit based app for displaying grid of pictures

LoremPicsum - Simple UIKit based app for displaying grid of pictures

Paweł Dziennik 0 Jan 20, 2022
A free, multiplatform SDK for real-time facial motion capture using blendshapes, and rigid head pose in 3D space from any RGB camera, photo, or video.

mocap4face by Facemoji mocap4face by Facemoji is a free, multiplatform SDK for real-time facial motion capture based on Facial Action Coding System or

Facemoji 592 Jan 1, 2023
A simplest & base on protocol & swifty way to browse photo or video with hero animation.

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

逸风 22 Dec 19, 2022
Full aspect ratio grid layout for iOS

Greedo Layout for iOS A library that computes what size the UICollectionView cells should be to display images in a variable height fixed aspect ratio

500px 831 Dec 17, 2022
This simple cordova plugin will download picture from an URL and save to IOS Photo Gallery.

Photo Viewer This plugin is intended to download a picture from an URL into IOS Photo library.. How to Install Cordova: cordova plugin add https://git

Alwin jose 1 Oct 23, 2021
FMPhotoPicker is a modern, simple and zero-dependency photo picker with an elegant and customizable image editor

FMPhotoPicker is a modern, simple and zero-dependency photo picker with an elegant and customizable image editor Quick demo Batch select/deselect Smoo

Cong Nguyen 648 Dec 27, 2022
PhotoApp - A Simple Photo App using Swift and MVC pattern

PhotoApp A Simple Photo App using Swift and MVC pattern After App launch, you wi

null 2 Aug 14, 2022
Simple PhotoBrowser/Viewer inspired by facebook, twitter photo browsers written by swift

SKPhotoBrowser [![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-) Simple PhotoBrowser

keishi suzuki 2.4k Jan 6, 2023
DOMKit - Swift framework to interact with the DOM in the browser

DOMKit Swift framework to interact with the DOM in the browser. Note: This proje

null 1 Jul 8, 2022
FlightTicketBrowser - A SwiftUI sample app for flight ticket browser

FlightTicketBrowser This app is a SwiftUI sample app for flight ticket browser.

Takuya Aso 6 Nov 14, 2022
Bill's Conversion of UI Browser to Swift

UI Browser 4 As part of the handover by Bill Cheeseman of his UI Browser application to Late Night Software, we received the source code to an unfinis

Mark Alldritt 184 Dec 24, 2022
Custom iOS camera and photo picker with editing capabilities

Overview Paparazzo is a component for picking and editing photos. Key Features ?? Taking photos using camera ?? Picking photos from user's photo libra

avito.tech 757 Jan 4, 2023