Question

I have made a Xcode project for a tabbed application that displays images of color swatches in a Scrollview. How do I link One of the images in my scrollview to go to the next View Controller? Below is my code and pictures. So when you click on one of the images or swatch color in the scrollview it links to the New Controller.

I have multiple images that scroll down the page of the iPhone, Do I have to loop the images cause there are 24 images. I was able to make one button and link it to the next scene with the interface builder, But I can fit 5 images on the screen..

DecorsViewController_iPhone.h

 #import <UIKit/UIKit.h>

 @interface DecorsViewController_iPhone : UIViewController

 {
IBOutlet UIScrollView *scrollViewDecors;
 }

@property (nonatomic, retain) UIView *scrollViewDecors;

@end

DecorsViewController_iPhone.m

#import "DecorsViewController_iPhone.h"

@interface DecorsViewController_iPhone ()

@end

@implementation DecorsViewController_iPhone


@synthesize scrollViewDecors;


const CGFloat kScrollObjHeight  = 81.5;
const CGFloat kScrollObjWidth   = 320.0;
const NSUInteger kNumImages     = 24;


- (void)layoutScrollImages
{
UIImageView *view = nil;
NSArray *subviews = [scrollViewDecors subviews];

// reposition all image subviews in a horizontal serial fashion
CGFloat curXLoc = 0;
CGFloat curYLoc = 0;
CGFloat curYSpace = 1;

for (view in subviews)
{
    if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
    {
        CGRect frame = view.frame;
        frame.origin = CGPointMake(curXLoc, curYLoc);
        view.frame = frame;

        curYLoc += (curYSpace + kScrollObjHeight);
    }
}

// set the content size so it can be scrollable
    [scrollViewDecors setContentSize:CGSizeMake(([scrollViewDecors bounds].size.width), (kNumImages * kScrollObjHeight))]; // Vertical Option
 }

- (void)viewDidLoad
{
self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];

// 1. setup the scrollview for multiple images and add it to the view controller
//
// note: the following can be done in Interface Builder, but we show this in code for clarity
[scrollViewDecors setBackgroundColor:[UIColor blackColor]];
[scrollViewDecors setCanCancelContentTouches:NO];
scrollViewDecors.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollViewDecors.clipsToBounds = YES;       // default is NO, we want to restrict drawing within our scrollview
scrollViewDecors.scrollEnabled = YES;

// pagingEnabled property default is NO, if set the scroller will stop or snap at each photo
// if you want free-flowing scroll, don't set this property.
// scrollView1.pagingEnabled = YES;

// load all the images from our bundle and add them to the scroll view
NSUInteger i;
for (i = 1; i <= kNumImages; i++)
{


    NSString *imageName = [NSString  stringWithFormat:@"Artwork_iPhone_Decors_Scrollview_%d.png", i];
    UIImage *image = [UIImage imageNamed:imageName];
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

    // setup each frame to a default height and width, it will be properly placed when we call "updateScrollList"
    CGRect rect = imageView.frame;
    rect.size.height = kScrollObjHeight;
    rect.size.width = kScrollObjWidth;
    imageView.frame = rect;
    imageView.tag = i;  // tag our images for later use when we place them in serial fashion
    [scrollViewDecors addSubview:imageView];
    //[imageView release];
}

[self layoutScrollImages];  // now place the photos in serial layout within the scrollview

}

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

//- (void)viewDidLoad
//{
// [super viewDidLoad];
//  // Do any additional setup after loading the view, typically from a nib.
//}

- (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) {
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
} else {
    return YES;
}
}

@end

Answer 1

Firstly, you need to add a gesture recogniser to your view with something like:

UITapGestureRecognizer *singleTapGestureRecognizer = [[UITapGestureRecognizer alloc]
                                                          initWithTarget:self
                                                          action:@selector(flipView:)];
    [singleTapGestureRecognizer setNumberOfTapsRequired:1];
    [self.view addGestureRecognizer:singleTapGestureRecognizer];

You then need to implement the ‘flipView’ method:

- (void)flipView:(UIPanGestureRecognizer *)recognizer {
    [self performSegueWithIdentifier:@"textView" sender:self];
}

As you can see in my case, when the method is triggered I perform a segue (see below):

- (void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    if ([segue.identifier isEqualToString:@"textView"])
    {
        //---Pass text to view
        CGRect visibleRect;
        visibleRect.origin = scrollView.contentOffset;
        visibleRect.size = scrollView.bounds.size;
        
        int number;
        
        if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad) {
            number = visibleRect.origin.x / 768;
        }
        else {
            number = visibleRect.origin.x / 320;
        }

        TextViewController *textViewController = segue.destinationViewController;
        AppDelegate *appDelegate = [[UIApplication sharedApplication] delegate];
        textViewController.text = [appDelegate.textArray objectAtIndex:number];
    }
}

The ‘number’ variable is used to decide which image has been clicked, I divide the visible rects origin by the width of the screen in pixels to calculate which image has been pressed and therefore what data to send to my new view.

In your case, you would use the Y coordinate to perform a calculation to decide which colour has been pressed, possibly something like:

int number;
            
            if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad) {
                number = visibleRect.origin.y / <height of each image on iPad in pixels>;
            }
            else {
                number = visibleRect.origin.y / <height of each image on iPhone in pixels>;
            }

Alternatively, you could use a UITableView and just populate the cells with the appropriate colour and then display the new view based on which cell was pressed.

EDIT
Use a UITableView, and populate each cell with your image using custom tableview cells. This is a much easier approach than what you are suggesting.

See these links:
adding images to UItableView

If using iOS 5 –
http://kurrytran.blogspot.co.uk/2011/10/ios-5-storyboard-uitableview-tutorial.html
if not –
http://www.iosdevnotes.com/2011/10/uitableview-tutorial/

You are overcomplicating this task massively, follow the above tutorials and you’ll be done in no time.