如何在iOS上創建圖庫

Question

我開始為iOS開發一個簡單的應用程序，這個應用程序是一個簡單的一些照片庫（摘自網站）。 我遇到的第一個問題是如何為圖庫創建視圖。

視圖應該是這樣的（或照片應用程序）：

然而，以這種方式進行視圖是有問題的，首先是因為它使用固定維度，我認為有點難以實現（對我來說）。

另一種方法是在tableview中使用自定義單元格，如下所示：

但它仍在使用固定尺寸。

在不使用任何第三方庫（如Three20）的情況下，創建圖庫的最佳方法是什么？

謝謝你的回復:)

PS。 我認為使用固定尺寸是不好的，因為新的iphone 4（具有不同的分辨率），我是對的嗎？

Answer 1

您應該查看AQGridView ，它完全符合您的要求。 即使您想編寫自己的自定義代碼，也要查看AQGridView源代碼，因為您可能需要使用UIScrollView作為基礎。

Answer 2

如果您想使用第三方課程，下一個教程可以混合使用，它們適合我。 這是一個很好的網格視圖：
自定義圖像選擇器，如uiimagepicker

如果要異步加載它們，請使用： image lazy loading

這兩個教程都有很好的描述，並有源代碼。

Answer 3

分辨率的差異不應該是一個問題，因為iOS，如果我沒記錯的話，如果檢測到它具有視網膜顯示，則將UI組件和圖像放大到正確的分辨率。 一邊; 如果您打算在不降低質量的情況下支持兩種屏幕尺寸，請記得開始制作高/低分辨率版本的圖形。

只要您根據點而不是像素（這是在XCode 4中完成的方式）設計事物，iOS將能夠透明地為您處理縮放。 在小屏幕上，一個點將是一個像素，而在視網膜顯示器上它將是兩個像素。 這使它能夠在視網膜顯示器上呈現更加清晰的外觀。 資源

我知道這個問題已經過時了，但我沒有看到有人解決固定寬度的問題，所以我認為我會做出一次貢獻。

Answer 4

嗯，自ios6問世以來，正確的方法是使用Collection Views：

CollectionViews上的Apple Docs

另外，請參閱兩個WWDC 2012會議：

集合視圖簡介
高級集合視圖

可悲的是，Apple沒有包含簡單的畫廊或封面布局，但制作一個很容易。

Answer 5

我寫了一篇關於使用UICollectionView構建媒體庫的教程。 它從用戶的照片庫中填充。 我認為它將完美地適用於你想要做的事情。

iPhone編程教程：像第1部分一樣創建圖像庫

希望有所幫助。 干杯!

Answer 6

我在自己的項目中做了一些非常類似的事情。 我只是在這里展示代碼的一些部分，但如果你想查看完整的代碼，你可以在GitHub GitHub Repo上查看它

首先，我使用ImageView創建了一個自定義的Collection View單元格

在CustomCollectionCell.h中

#import <UIKit/UIKit.h>

@interface CustomCollectionCell : UICollectionViewCell

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

在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

然后在您想要縮略圖的視圖中設置CollectionView

在ThumbNailViewController.m（片段）

UICollectionView *collectionViewThumbnails;

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

然后，您具有集合視圖所需的方法。 在這里你可以設置你

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

希望能回答你的問題。

Answer 7

如果您不想使用第三方庫，則應在UITableView行中執行此操作。 由於UITableView緩存單元格的方式，它在內存中相對輕量級。 當然比UIScrollView中可能非常大的UIView更重要。 我已經完成了兩個方面，我對UITableView感到非常高興。

那說，下次我需要這樣做？ 我計划使用AQGridView。

Answer 8

這是一個非常好的庫，名為FGallery for iOS

- 支持自動旋轉

-thumbnail查看

-放大

-刪除