如何在 iOS 上创建图库

How To Create A Gallery on iOS

提问by patrick

I'm starting to develop a simple application for iOS, and this application is a simple gallery of some photo (taken from a website). The first problem I encountered is how to create the view for the gallery.

我开始为 iOS 开发一个简单的应用程序，这个应用程序是一些照片的简单画廊（取自网站）。我遇到的第一个问题是如何为画廊创建视图。

The view should be something like this (or the Photo App):

视图应该是这样的（或照片应用程序）：

however doing a view this way is problematic, first because it uses fixed dimension, and I think is a bit difficult to implement (for me).

然而，以这种方式进行视图是有问题的，首先是因为它使用固定维度，而且我认为实现起来有点困难（对我来说）。

The other way is to use a custom cell within a tableview, like this:

另一种方法是在 tableview 中使用自定义单元格，如下所示：

but it is still using fixed dimension.

但它仍然使用固定尺寸。

What's the best way to create a gallery, without using any third part lib (like Three20)?

在不使用任何第三方库（如 Three20）的情况下，创建画廊的最佳方式是什么？

Thanks for any reply :)

感谢您的任何回复:)

PS. I think that using fixed dimension is bad because of the new iphone 4 (with a different resolution), am I right?

附注。我认为由于新的 iphone 4（具有不同的分辨率），使用固定尺寸是不好的，对吗？

回答by keno

You should check out AQGridViewwhich does exactly what you are trying to achieve. Even if you want to write your own custom code, have a look at the AQGridView source as more than likely you will need to use a UIScrollView as a base.

您应该查看AQGridView，它完全符合您要实现的目标。即使您想编写自己的自定义代码，请查看 AQGridView 源代码，因为您很有可能需要使用 UIScrollView 作为基础。

回答by chuckSaldana

In case that you want to use third party classes, the next tutorials can be mixed, they worked for me. Here's a good grid view:
custom image picker like uiimagepicker

如果您想使用第三方类，下一个教程可以混合使用，它们对我有用。这是一个很好的网格视图：
自定义图像选择器，如 uiimagepicker

And if you want to load them asynchronously, use this: image lazy loading

如果你想异步加载它们，请使用： 图像延迟加载

Both tutorials are very well described and have source code.

这两个教程都有很好的描述并且有源代码。

回答by nyaray

The difference in resolution shouldn't be an issue since iOS, if I recall correctly, scales up UI components and images to the right resolution if it detects that it has a retina display. An aside; remember to start making hi/lo-res versions of your graphics if you intend to support both screen sizes without degradation of quality.

分辨率的差异不应该是一个问题，因为 iOS，如果我没记错的话，如果它检测到它有一个视网膜显示，就会将 UI 组件和图像放大到正确的分辨率。一边; 如果您打算在不降低质量的情况下支持两种屏幕尺寸，请记住开始制作高/低分辨率版本的图形。

As long as you design things in terms of points instead of pixels (which is the way it's done in XCode 4), iOS will be able to handle scaling for you transparently. On a small screen one point will be one pixel, whereas it will be two pixels on a retina display. This allows it to render things with a crisper look on retina displays. Source

只要您根据点而不是像素来设计事物（这是在 XCode 4 中完成的方式），iOS 将能够透明地为您处理缩放。在小屏幕上，一个点将是一个像素，而在视网膜显示器上它将是两个像素。这使它能够在视网膜显示器上以更清晰的外观呈现事物。来源

I know this question is old, but I didn't see anyone addressing the issue of fixed widths, so I thought I'd contribute for once.

我知道这个问题很老，但我没有看到有人解决固定宽度的问题，所以我想我会贡献一次。

回答by Rob

Um, since ios6 came out, the right way to do this is with Collection Views:

嗯，自从 ios6 出来后，正确的做法是使用 Collection Views：

Apple Docs on CollectionViews

CollectionViews 上的 Apple 文档

Also, see the two WWDC 2012 sessions on them:

另外，请参阅有关它们的两个 WWDC 2012 会议：

Introduction to Collection Views
Advanced Collection Views

集合视图简介
高级集合视图

Sadly, Apple did not include a simple gallery or coverflow layout, but it's pretty easy to make one.

遗憾的是，Apple 没有提供简单的画廊或封面布局，但制作起来非常容易。

回答by brandontreb

I wrote a tutorial on building a media gallery using a UICollectionView. It populates from the user's photo library. I think it will work perfectly for what you are trying to do.

我写了一篇关于使用 UICollectionView 构建媒体库的教程。它从用户的照片库中填充。我认为它非常适合您尝试做的事情。

iPhone Programming Tutorial: Creating An Image Gallery Like Over – Part 1

iPhone 编程教程：创建像 Over 一样的图库 - 第 1 部分

Hope that helps. Cheers!

希望有帮助。干杯!

回答by Andre Compagno

I did something very similar to this in a project of my own. I just show some parts of the code here, but if you want to view the full code you can view it on GitHub GitHub Repo

我在自己的一个项目中做了与此非常相似的事情。我这里只展示部分代码，但如果你想查看完整代码，你可以在 GitHub GitHub Repo上查看

First I made a custom Collection View cell with an ImageView

首先，我使用 ImageView 创建了一个自定义的 Collection View 单元格

in CustomCollectionCell.h

在 CustomCollectionCell.h

#import <UIKit/UIKit.h>

@interface CustomCollectionCell : UICollectionViewCell

@property (nonatomic , retain) UIImageView *imageView;
@end

in CustomCollectionCell.m

在 CustomCollectionCell.m 中

#import "CustomCollectionCell.h"

@implementation CustomCollectionCell
- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        [self setupImageView];
    }
    return self;
}

#pragma mark - Create Subviews

- (void)setupImageView {
    self.imageView = [[UIImageView alloc] initWithFrame:self.bounds];
    self.imageView.autoresizingMask = UIViewAutoresizingNone;//UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    [self addSubview:self.imageView];
}

@end

Then in the view where you want to have the thumbnails you set up the CollectionView

然后在您想要拥有缩略图的视图中设置 CollectionView

in ThumbNailViewController.m (snippet)

在 ThumbNailViewController.m（片段）中

UICollectionView *collectionViewThumbnails;

in ThumbNailViewController.m (snippet)

在 ThumbNailViewController.m（片段）中

UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init];
collectionViewThumbnails=[[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height - 50) collectionViewLayout:layout];
if (collectionViewThumbnails && layout)
{
    [collectionViewThumbnails setDataSource:self];
    [collectionViewThumbnails setDelegate:self];
    [collectionViewThumbnails registerClass:[CustomCollectionCell class] forCellWithReuseIdentifier:@"cellIdentifier"];
    [collectionViewThumbnails setBackgroundColor:[UIColor blackColor]];

    [self.view addSubview:collectionViewThumbnails];
}

Then you have the required methods for the collection views. Here you can set up what you

然后您就拥有了集合视图所需的方法。在这里你可以设置你想要的

//Number of items in the collectionview
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return [galleryData count];
}

//Set up what each cell in the collectionview will look like
//Here is where you add the thumbnails and the on define what happens when the cell is clicked 
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    //initialize custom cell for the collectionview
    CustomCollectionCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];

    [cell.imageView setClipsToBounds:YES];

    cell.imageView.contentMode = UIViewContentModeScaleAspectFill;

    //format url to load image from
    NSString *url = [NSString stringWithFormat:@"http://andrecphoto.weebly.com/uploads/6/5/5/1/6551078/%@",galleryData[indexPath.item]];

    //load thumbnail
    [cell.imageView setImageWithURL:[NSURL URLWithString:url]
                   placeholderImage:[UIImage imageNamed:@"placeholder.png"]];

    //Sets up taprecognizer for each cell. (onlcick)
    UITapGestureRecognizer *tap=[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap:)];
    [cell addGestureRecognizer:tap];

    //sets cell's background color to black
    cell.backgroundColor=[UIColor blackColor];
    return cell;
}

//Sets size of cells in the collectionview
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(100, 100);
}

//Sets what happens when a cell in the collectionview is selected (onlclicklistener)
- (void)handleTap:(UITapGestureRecognizer *)recognizer  {
    //gets the cell thats was clicked
    CustomCollectionCell *cell_test = (CustomCollectionCell *)recognizer.view;

    //gets indexpath of the cell
    NSIndexPath *indexPath = [collectionViewThumbnails indexPathForCell:cell_test];

    if (isConnectedGal)
    {
        //sets the image that will be displayed in the photo browser
        [photoGallery setInitialPageIndex:indexPath.row];

        //pushed photobrowser
        [self.navigationController pushViewController:photoGallery animated:YES];
    }
}

Hopefully that answers your question.

希望这能回答你的问题。

回答by Dan Ray

If you don't want to use a third party library, you should do this in UITableView rows. Because of the way UITableView caches cells, it's relatively lightweight in memory. Certainly more so than a possibly very large UIView inside a UIScrollView. I've done it both ways, and I was much happier with the UITableView.

如果您不想使用第三方库，则应在 UITableView 行中执行此操作。由于 UITableView 缓存单元格的方式，它在内存中相对较轻。当然比 UIScrollView 中可能非常大的 UIView 更重要。我已经两种方式都做了，而且我对 UITableView 更满意。

That said, next time I need to do this? I plan to use AQGridView.

也就是说，下次我需要这样做吗？我打算使用 AQGridView。

回答by Subbu

Here is a very good library called FGalleryfor iOS

这是一个非常好的库，名为FGalleryfor iOS

-Supports auto-rotation

- 支持自动旋转

-thumbnail View

-缩略图视图

-zoom

-飞涨

-delete

-删除