Xcode 图像将 ImageView 链接到下一个 View Controller

Question

我已经为一个选项卡式应用程序制作了一个 Xcode 项目，该应用程序在 Scrollview 中显示颜色样本的图像。如何链接我的滚动视图中的一个图像以转到下一个视图控制器？下面是我的代码和图片。因此，当您在滚动视图中单击其中一个图像或样本颜色时，它会链接到新控制器。

我有多个图像可以向下滚动 iPhone 的页面，我是否必须循环图像，因为有 24 个图像。我可以用界面生成器制作一个按钮并将其链接到下一个场景，但我可以在屏幕上放置 5 张图像..

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

首先，您需要在视图中添加手势识别器，例如：

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

然后你需要实现'flipView'方法：

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

正如你在我的例子中看到的，当方法被触发时，我执行了一个 segue（见下文）：

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

“数字”变量用于决定单击了哪个图像，我将可见矩形原点除以屏幕宽度（以像素为单位），以计算出哪个图像已被按下，因此将哪些数据发送到我的新视图。

在您的情况下，您将使用 Y 坐标来执行计算以确定按下了哪种颜色，可能类似于：

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

或者，您可以使用 UITableView 并使用适当的颜色填充单元格，然后根据按下的单元格显示新视图。

编辑 使用 UITableView，并使用自定义表格视图单元格用您的图像填充每个单元格。这比您建议的方法要容易得多。

查看这些链接： adding images to UItableView

如果使用 iOS 5 - http://kurrytran.blogspot.co.uk/2011/10/ios-5-storyboard-uitableview-tutorial.html 如果不 - http://www.iosdevnotes.com/2011/10/uitableview-tutorial/

您使这项任务过于复杂，请按照上述教程进行操作，您很快就会完成。如果此答案对您有帮助，请标记为正确。

Answer 2

您可以自定义您的 UIImageView。例如，MyImageView。将其委托设置为您的主 ScrollView 并添加 UITapGestureRecognizer 和 TapDetecting 委托方法。 您可以在 MyImageView 中实现：

- (void)handleSingleTap:(UIGestureRecognizer *)gestureRecognizer {
// single tap 
if ([_delegate respondsToSelector:@selector(myImageViewWasSingleTapped:)])
    [_delegate myImageViewWasSingleTapped:self];
}

然后在您的主 ScrollView（MyImageView 的代表）中：

- (void)myImageViewWasSingleTapped:(MyImageView *)miv {
    AnotherViewController *asv = [[AnotherViewController alloc] initWithImage: miv];
    [self.navigationController pushViewController: asv animated:YES];
    [asv release];
}

Answer 3

您可以使用按钮而不是 UIImageView，并将按钮的图像设置为您的图像。你在 viewDidLoad 中的循环是这样的：

// 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];
    UIButton *imageButton = [[UIButton alloc] init];
    [imageButton setImage:image forState:UIControlStateNormal];
    [imageButton addTarget:self action:@selector(pushNextViewController:) forControlEvents:UIControlEventTouchUpInside];

    // setup each frame to a default height and width, it will be properly placed when we call "updateScrollList"
    CGRect rect = CGRectMake(0, 0, kScrollObjWidth, kScrollObjHeight);
    imageButton.frame = rect;
    imageButton.tag = i;  // tag our images for later use when we place them in serial fashion
    [scrollViewDecors addSubview:imageButton];
    // Release imageButton unless you're using ARC
}

然后你需要为 imageButton 定义一个动作，在这种情况下我称之为 pushNextViewController：

- (void)pushNextViewController:(id)sender
{
    UIViewController *yourNextViewController = // initialise your next view controller here
    [self.navigationController pushViewController:yourNextViewController animated:YES];
}