Git Product home page Git Product logo

photostack's Introduction

PhotoStack -- An iOS class to create a stack of photos, inspired by the eBay App

Photo Stack

I've always liked the way the eBay app for iPad handles multiple photos for a listing. For those that haven't seen it, the way it works is that all photos are stacked on top of one another, and the user flicks through the pile.

PhotoStack is my attempt to re-create this user interface.

  • iOS 5+
  • ARC Enabled

Demo

I've uploaded a YouTube video demonstrating the provided demo project here. .

Installation

First, download the source (including example Xcode project), then include PhotoStackView.h, PhotoStackView.m and PhotoBorder.png files into your project. Include PhotoStackView.h and you're ready to go!

To create a PhotoStack object, first initialise it as you would with a normal view:

PhotoStackView *photoStack = [[PhotoStackView alloc] initWithFrame:CGRectMake(0, 0, 300, 300)];

Set Up DataSource

To populate with photos, you'll need to set the controller class as a PhotoStackViewDataSource.

photoStack.dataSource = self;

The PhotoStackViewDataSource protocol requires two methods to be implemented. These are modelled off Apple's TableView convention so they should be familiar to most developers.

-(NSUInteger)numberOfPhotosInPhotoStackView:(PhotoStackView *)photoStack;

The above should return the number of photos in the PhotoStack view.

-(UIImage *)photoStackView:(PhotoStackView *)photoStack photoForIndex:(NSUInteger)index;

The above should return a UIImage for the provided index.

Set Up Delegate

There is also a PhotoStackViewDelegate protocol which can be used like so:

photoStack.delegate = self;

This protocol contains four optional methods:

-(void)photoStackView:(PhotoStackView *)photoStackView willStartMovingPhotoAtIndex:(NSUInteger)i

Called when the user starts to pan the top photo with their finger.

-(void)photoStackView:(PhotoStackView *)photoStackView willFlickAwayPhotoAtIndex:(NSUInteger)index;

Called when the user flicks the top photo left or right with sufficient velocity to cause it to fly away and go to the bottom of the stack.

-(void)photoStackView:(PhotoStackView *)photoStackView didRevealPhotoAtIndex:(NSUInteger)index;

Called when a new card is revealed at the top of the stack because the previous one was flicked away.

-(void)photoStackView:(PhotoStackView *)photoStackView didSelectPhotoAtIndex:(NSUInteger)index;

Called when the user taps on the top photo of the stack.

Properties

A PhotoStackView has a number of useful properties for controlling the appearance of the stack.

@property (nonatomic, strong) UIImage *borderImage;

The image to use for the border (default is white rounded corner, similar to eBay's).

@property BOOL showBorder;

Whether or not to show a border at all (default is YES).

@property float borderWidth;

The width of the border (default is 5.0).

@property float rotationOffset;

How many degrees each photo in the stack could be rotated (Default is 4.0). For example, a value of 10.0 will randomly rotate each photo from -10 to +10 degrees.

@property (nonatomic, strong) UIColor *highlightColor;

The overlay colour that appears when the user taps on a photo (Default is black at 0.15 alpha).

##Other Methods

Just two public methods currently:

-(void)reloadData;

Reloads the data, re-fetching photos from the PhotoStackViewDataSource.

-(void)goToPhotoAtIndex:(NSUInteger)index;

Brings the photo at the specified index to the front.

photostack's People

Contributors

kgn avatar tomlongo 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.