Advertise here




Advertise here

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Embedding an interactive slideshow into UITableViewCell (like Pulse News Reader/BBC)

ermikermik Posts: 8New Users
edited August 2011 in iPhone SDK Development
To the topic:
These how Pulse News mini and BBC News fo iPhone are made:
mzl.vmoiylpi.320x480-75.jpgmzl.xmzothru.320x480-75.jpg
There are basically Cells which are slidable inside, while non interactive on their own - Images inside are.
I have Slideshow code:
@interface SlideshowView : UIView
{
	NSArray *mImages;
	
	UIImageView *mLeftImageView;
	UIImageView *mCurrentImageView;
	UIImageView *mRightImageView;
	
	NSUInteger mCurrentImage;
	
	BOOL mSwiping;
	CGFloat mSwipeStart;
}

@property (nonatomic, retain) NSArray *mImages;

@property (nonatomic, retain) UIImageView *mLeftImageView;
@property (nonatomic, retain) UIImageView *mCurrentImageView;
@property (nonatomic, retain) UIImageView *mRightImageView;

@property (nonatomic) NSUInteger mCurrentImage;

@property (nonatomic) BOOL mSwiping;
@property (nonatomic) CGFloat mSwipeStart;


- (id)initWithImages:(NSArray *)inImages;

@end
and implementation:
#import "Slideshow.h"

@implementation SlideshowView

@synthesize mImages;

@synthesize mLeftImageView;
@synthesize mCurrentImageView;
@synthesize mRightImageView;

@synthesize mCurrentImage;

@synthesize mSwiping;
@synthesize mSwipeStart;

- (UIImageView *)createImageView:(NSUInteger)inImageIndex
{
	if (inImageIndex >= [mImages count])
	{
		return nil;
	}
	
	UIImageView * result = [[UIImageView alloc] initWithImage:[mImages objectAtIndex:inImageIndex]];
	result.opaque = YES;
	result.userInteractionEnabled = NO;
	result.backgroundColor = [UIColor whiteColor];
	result.contentMode = UIViewContentModeScaleAspectFit;
	result.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
	
	return result;
}

- (id)initWithImages:(NSArray *)inImages {
	if (self = [super initWithFrame:CGRectZero]) {
		mImages = [inImages retain];
		
		NSUInteger imageCount = [inImages count];
		if (imageCount > 0) {
			mCurrentImageView = [self createImageView:0];
			[self addSubview:mCurrentImageView];
			
			if (imageCount > 1) {
				mRightImageView = [self createImageView:1];
				[self addSubview:mRightImageView];
			}
			
		}
		
		self.opaque = YES;
		self.backgroundColor = [UIColor whiteColor];
		self.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
	}
	
	return self;
}

- (void)dealloc {
	[mImages release];
	[super dealloc];
}



- (void)layoutSubviews
{
	if (mSwiping)
		return;
	
	CGSize contentSize = self.frame.size;
	mLeftImageView.frame = CGRectMake(-contentSize.width, 0.0f, contentSize.width, contentSize.height);
	mCurrentImageView.frame = CGRectMake(0.0f, 0.0f, contentSize.width, contentSize.height);
	mRightImageView.frame = CGRectMake(contentSize.width, 0.0f, contentSize.width, contentSize.height);
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
	if ([touches count] != 1)
		return;
	
	mSwipeStart = [[touches anyObject] locationInView:self].x;
	mSwiping = YES;
	
	mLeftImageView.hidden = NO;
	mCurrentImageView.hidden = NO;
	mRightImageView.hidden = NO;
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
	if (! mSwiping || [touches count] != 1)
		return;
	
	CGFloat swipeDistance = [[touches anyObject] locationInView:self].x - mSwipeStart;
	
	CGSize contentSize = self.frame.size;
	
	mLeftImageView.frame = CGRectMake(swipeDistance - contentSize.width, 0.0f, contentSize.width, contentSize.height);
	mCurrentImageView.frame = CGRectMake(swipeDistance, 0.0f, contentSize.width, contentSize.height);
	mRightImageView.frame = CGRectMake(swipeDistance + contentSize.width, 0.0f, contentSize.width, contentSize.height);
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
	if (! mSwiping)
		return;
	
	CGSize contentSize = self.frame.size;
	
	NSUInteger count = [mImages count];
	
	CGFloat swipeDistance = [[touches anyObject] locationInView:self].x - mSwipeStart;
	if (mCurrentImage > 0 && swipeDistance > 50.0f)
	{
		[mRightImageView removeFromSuperview];
		[mRightImageView release];
		
		mRightImageView = mCurrentImageView;
		mCurrentImageView = mLeftImageView;
		
		mCurrentImage--;
		if (mCurrentImage > 0)
		{
			mLeftImageView = [self createImageView:mCurrentImage - 1];
			mLeftImageView.hidden = YES;
			
			[self addSubview:mLeftImageView];
		}
		else
		{
			mLeftImageView = nil;
		}
	}
	else if (mCurrentImage < count - 1 && swipeDistance < -50.0f)
	{
		[mLeftImageView removeFromSuperview];
		[mLeftImageView release];
		
		mLeftImageView = mCurrentImageView;
		mCurrentImageView = mRightImageView;
		
		mCurrentImage++;
		if (mCurrentImage < count - 1)
		{
			mRightImageView = [self createImageView:mCurrentImage + 1];
			mRightImageView.hidden = YES;
			
			[self addSubview:mRightImageView];
		}
		else
		{
			mRightImageView = nil;
		}
	}
	
	[UIView beginAnimations:@"swipe" context:NULL];
	[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
	[UIView setAnimationDuration:0.3f];
	
	mLeftImageView.frame = CGRectMake(-contentSize.width, 0.0f, contentSize.width, contentSize.height);
	mCurrentImageView.frame = CGRectMake(0.0f, 0.0f, contentSize.width, contentSize.height);
	mRightImageView.frame = CGRectMake(contentSize.width, 0.0f, contentSize.width, contentSize.height);
	
	[UIView commitAnimations];
	
	mSwiping = NO;
}


@end
I want to have interactive slideshow in my UITableView Cell, which you can swipe left to right, and from the chosen image on non-swipe tap you go to the desired follow up View.

Here's a lit tricky problem. I hope the solution will be interesting for many people.
Post edited by ermik on

Replies

Sign In or Register to comment.