xcode 如何在我的 viewController 中显示与下面的屏幕截图相同的图像？

How can I display my images in my viewController the same as the below screen shot?

提问by Christina

In my iPad program I have an array which holds images. How can I display my all images (from an image array) in my viewController the same as the below screen shot? Is there a good way to do it, any sample application paths to refer or sample code?

在我的 iPad 程序中，我有一个保存图像的数组。如何在我的 viewController 中显示我的所有图像（来自图像数组），与下面的屏幕截图相同？有没有好的方法可以参考或示例代码的任何示例应用程序路径？

I need the following functionality.

我需要以下功能。

1. Tapping an image will show it full screen
2. A close button to close this view as the same as the screen shot.
3. Two buttons to display the remaining and previous images.

1. 点击图像将全屏显示
2. 关闭此视图的关闭按钮与屏幕截图相同。
3. 两个按钮用于显示剩余图像和先前图像。

A sample screen shot is attached below. We can see that the below application is showing all images at the right side of the screen.

下面附上一个示例屏幕截图。我们可以看到下面的应用程序在屏幕右侧显示了所有图像。

回答by Nick Weaver

Alright, this should be easy, though a bit of coding is needed. Start out with a simple view basedapp template.

好的，这应该很容易，尽管需要一些编码。从一个简单的基于视图的应用程序模板开始。

I don't know where the images come from so I just put all the images to be shown in the resources folder.

我不知道图像来自哪里，所以我只是将所有要显示的图像放在资源文件夹中。

The view controller PictureViewControllerwill accept an array of UIImages and should be presented modally. I'll post the code below.

视图控制器PictureViewController将接受一组 UIImages 并且应该以模态呈现。我将在下面发布代码。

The code to show the PictureViewControlleris placed in the view controller created by the template. I just added a simple UIButton to the view to trigger an action which looks something like this:

显示的代码PictureViewController放置在模板创建的视图控制器中。我只是在视图中添加了一个简单的 UIButton 来触发一个看起来像这样的动作：

- (IBAction)onShowPictures
{
    // Load all images from the bundle, I added 14 images, named 01.jpg ... 14.jpg
    NSMutableArray *images = [NSMutableArray array];
    for (int i = 1; i <= 14; i++) {
        [images addObject:[UIImage imageNamed:[NSString stringWithFormat:@"%02d.jpg", i]]];
    }

    PictureViewController *picViewController = [[PictureViewController alloc] initWithImages:images];

    [self presentModalViewController:picViewController animated:YES];

    [picViewController release];
}

The view controller's view was created with interface builder, looking like this:

视图控制器的视图是使用界面构建器创建的，如下所示：

PictureViewController.xib

图片视图控制器.xib

View Hierarchy

查看层次结构

The fullscreen image is linked to an outlet fullScreenImageseen in the following header file. Actions are connected as well.

全屏图像链接到fullScreenImage以下头文件中的插座。动作也是相互关联的。

I've set the fullscreen imageView's content mode to Aspect Fit.

我已将全屏 imageView 的内容模式设置为 Aspect Fit。

The Thumbnails will be added dynamically with code. Here's the view controller's code

缩略图将随代码动态添加。这是视图控制器的代码

PictureViewController.h

图片视图控制器.h

@interface PictureViewController : UIViewController 
{
    NSMutableArray *imageViews;

    NSArray *images;

    UIImageView *fullScreenImage;

    int currentPage;
}

@property (nonatomic, retain) NSMutableArray *imageViews;
@property (nonatomic, retain) NSArray *images;
@property (nonatomic, retain) IBOutlet UIImageView *fullScreenImage;

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

- (IBAction)onClose;
- (IBAction)onNextThumbnails;
- (IBAction)onPreviousThumbnails;

@end

PictureViewController.m

图片视图控制器.m

The define MAX_THUMBNAILSon top defines the maximum of thumbnails seen. A UITapGestureRecognizerwill take care of the tap events for the thumbnails. Adjust the CGRectMakein setupThumbnailImageViewsto position the thumbnails as you wish. This controller is just a basic approach without orientation support.

在限定MAX_THUMBNAILS在顶部定义最大看到缩略图。AUITapGestureRecognizer将处理缩略图的点击事件。调整CGRectMakeinsetupThumbnailImageViews以根据需要定位缩略图。这个控制器只是一个没有方向支持的基本方法。

#import "PictureViewController.h"

#define MAX_THUMBNAILS 6

@interface PictureViewController ()

- (void)showSelectedImageFullscreen:(UITapGestureRecognizer *)gestureRecognizer;
- (void)setupThumbnailImageViews;
- (void)setThumbnailsForPage:(int)aPage;
- (UIImage *)imageForIndex:(int)anIndex;

@end


@implementation PictureViewController

@synthesize imageViews, images, fullScreenImage;


- (id)initWithImages:(NSArray *)someImages
{
    self = [super init];
    if (self) {
        self.images = someImages;
        self.imageViews = [NSMutableArray array];
        currentPage = 0;
    }
    return self;
}

- (void)viewDidLoad
{
    self.fullScreenImage.image = [images objectAtIndex:0];
    [self setupThumbnailImageViews];
    [self setThumbnailsForPage:0];
}

- (void)showSelectedImageFullscreen:(UITapGestureRecognizer *)gestureRecognizer
{
    UIImageView *tappedImageView = (UIImageView *)[gestureRecognizer view];

    fullScreenImage.image = tappedImageView.image;
}

- (void)setupThumbnailImageViews
{
    for (int i = 0; i < MAX_THUMBNAILS; i++) {
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(20.0, 
                                                                               166.0 + (130.0 * i), 
                                                                               130.0, 
                                                                               90.0)];

        UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self 
                                                                                               action:@selector(showSelectedImageFullscreen:)];
        tapGestureRecognizer.numberOfTapsRequired = 1;
        tapGestureRecognizer.numberOfTouchesRequired = 1;
        [imageView addGestureRecognizer:tapGestureRecognizer];
        [tapGestureRecognizer release];

        imageView.userInteractionEnabled = YES;

        [imageViews addObject:imageView];
        [self.view addSubview:imageView];
    }
}

- (void)setThumbnailsForPage:(int)aPage
{
    for (int i = 0; i < MAX_THUMBNAILS; i++) {
        UIImageView *imageView = (UIImageView *)[imageViews objectAtIndex:i];
        UIImage *image = [self imageForIndex:aPage * MAX_THUMBNAILS + i];

        if (image) {
            imageView.image = image;
            imageView.hidden = NO;          
        } else {
            imageView.hidden = YES;
        }
    }
}

- (UIImage *)imageForIndex:(int)anIndex
{
    if (anIndex < [images count]) {
        return [images objectAtIndex:anIndex];
    } else {
        return nil;
    }
}


#pragma mark -
#pragma mark user interface interaction

- (IBAction)onClose
{
    [self dismissModalViewControllerAnimated:YES];
}

- (IBAction)onNextThumbnails
{
    if (currentPage + 1 <= [images count] / MAX_THUMBNAILS) {
        currentPage++;
        [self setThumbnailsForPage:currentPage];
    }
}

- (IBAction)onPreviousThumbnails
{
    if (currentPage - 1 >= 0) {
        currentPage--;  
        [self setThumbnailsForPage:currentPage];    
    }
}


#pragma mark -
#pragma mark memory management

- (void)didReceiveMemoryWarning 
{
    [super didReceiveMemoryWarning];

    [images release];   
}

- (void)viewDidUnload 
{
    [super viewDidUnload];

    [imageViews release];   
    [fullScreenImage release];
}

- (void)dealloc 
{
    [images release];
    [imageViews release];   
    [fullScreenImage release];

    [super dealloc];
}

@end

The result:

结果：