Giter VIP home page Giter VIP logo

buffer-ios-image-viewer's Introduction

BFRImageViewer

Demo

Summary

The BFRImageViewer is a turnkey solution to present images within your iOS app ๐ŸŽ‰!

It features swipe gestures to dismiss, automatic image scaling, zooming and panning, supports multiple images, image types, URL backloading, custom view controller transitions, built in parallax effect, live photos and plays nicely with 3D touch! We use it all over the place in Buffer for iOS :-).

We've got code samples of each feature in the demo app, feel free to take a peek ๐Ÿ‘€.

Installation

The BFRImageViewer is hosted on CocoaPods and is the recommended way to install it:

pod 'BFRImageViewer'

Quickstart

To get up and running quickly with BFRImageViewer, just initialize it - that's really about it!

//Image source can be an array containing a mix of PHAssets, NSURLs, URL strings, UIImage, PHLivePhoto or BFRBackLoadedImageSource
BFRImageViewController *imageVC = [[BFRImageViewController alloc] initWithImageSource:@[image]];
let imageVC = BFRImageViewController(imageSource: [image])

From there, you'll have every photo automagically loaded up and be able to page between them. If you want some additional context, just fire up the demo project and take a peek ๐Ÿ‘Œ!

Custom Transition

If you'd like to use a custom view controller transition, which zooms the selected image into the image viewer, just set up some properties on the dedicated image viewer animator class:

// In viewDidLoad...
self.imageViewAnimator = [BFRImageTransitionAnimator new];

// Later on, when you want to show an image...
self.imageViewAnimator.animatedImageContainer = self.imageView;
self.imageViewAnimator.animatedImage = self.imageView.image;
self.imageViewAnimator.imageOriginFrame = self.imageView.frame;
self.imageViewAnimator.desiredContentMode = self.imageView.contentMode; //Optional

BFRImageViewController *imageVC = [[BFRImageViewController alloc] initWithImageSource:@[self.imageView.image]];
imageVC.transitioningDelegate = self.imageViewAnimator; 

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

That will give you this effect (excuse the low quality gif ๐Ÿ™ˆ):

AnimationDemo

URL Backloading

Say you've got a thumbnail of an image, but also a URL of the higher fidelity version too. Using URL backloading, you can quickly show the lower resolution image while loading the better version in the background. When it loads - we'll automatically swap it out for you. This allows you to have the best of worlds. You don't need to have users wait for the URL to load, or settle for always viewing the degraded image.

- (void)openImageViewer {
    BFRBackLoadedImageSource *backloadedImage = [[BFRBackLoadedImageSource alloc] initWithInitialImage:[UIImage imageNamed:@"lowResImage"] hiResURL:[NSURL URLWithString:@"cdn.theURl.png"]];
    BFRImageViewController *imageVC = [[BFRImageViewController alloc] initWithImageSource:@[backloadedImage]];
    [self presentViewController:imageVC animated:YES completion:nil];
}

Going Forward

We regularly maintain this code, and you can also rest assured that it's been battle tested against thousands of users in production ๐Ÿ‘. That said, we get things wrong from time to time - so feel free to open an issue for anything you spot!

We are always happy to talk shop, so feel free to give us a shout on Twitter:

Or, hey - why not work on the BFRImageViewer and get paid for it!? We're hiring!


Licence

This project uses MIT License.

buffer-ios-image-viewer's People

Contributors

ay8s avatar bre7 avatar ezhes avatar humberaquino avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.