Как создать галерею на iOS - PullRequest
       306

Как создать галерею на iOS

30 голосов
/ 05 октября 2010

Я начинаю разрабатывать простое приложение для iOS, и это приложение представляет собой простую галерею некоторых фотографий (взятых с веб-сайта). Первая проблема, с которой я столкнулся, заключается в том, как создать представление для галереи.

Вид должен быть примерно таким (или приложением Photo): Sample View

однако сделать представление таким образом проблематично, во-первых, потому что он использует фиксированное измерение, и я думаю, что это немного сложно реализовать (для меня).

Другой способ - использовать пользовательскую ячейку в табличном представлении, например так: custom cell

но он все еще использует фиксированный размер.

Какой лучший способ создать галерею без использования третьей части библиотеки (например, Three20)?

Спасибо за любой ответ:)

PS. Я думаю, что использование фиксированного размера плохо из-за нового iphone 4 (с другим разрешением), я прав?

Ответы [ 8 ]

36 голосов
/ 05 октября 2010

Вы должны проверить AQGridView , который делает именно то, что вы пытаетесь достичь.Даже если вы хотите написать свой собственный код, взгляните на исходный код AQGridView, так как более чем вероятно, что вам понадобится использовать UIScrollView в качестве основы.

8 голосов
/ 06 октября 2010

Если вы хотите использовать сторонние классы, следующие уроки могут быть смешаны, они работают для меня.Вот хороший вид сетки:
пользовательский инструмент выбора изображений, такой как uiimagepicker

И если вы хотите загрузить их асинхронно, используйте это: отложенная загрузка изображений

Оба руководства очень хорошо описаны и имеют исходный код.

6 голосов
/ 05 июля 2011

Разница в разрешении не должна быть проблемой, поскольку iOS, если я правильно помню, масштабирует компоненты пользовательского интерфейса и изображения до правильного разрешения, если обнаруживает, что у него есть дисплей сетчатки. В сторону; не забудьте начать создавать версии графики высокого / низкого разрешения, если вы намерены поддерживать оба размера экрана без ухудшения качества.

Пока вы разрабатываете вещи с точки зрения точек, а не пикселей (как это делается в XCode 4), iOS сможет прозрачно обрабатывать масштабирование для вас. На маленьком экране одна точка будет одним пикселем, тогда как на дисплее сетчатки будет два пикселя. Это позволяет ему визуализировать вещи с более четким видом на дисплеях сетчатки. Источник

Я знаю, что этот вопрос старый, но я не видел, чтобы кто-нибудь занимался проблемой фиксированной ширины, поэтому я решил внести свой вклад на этот раз.

2 голосов
/ 03 ноября 2013

Я сделал нечто очень похожее на это в своем собственном проекте.Я просто показываю некоторые части кода здесь, но если вы хотите просмотреть полный код, вы можете просмотреть его на GitHub GitHub Repo

Сначала я создал настраиваемую ячейку Collection View с ImageView

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

Надеемся, что это отвечает на ваш вопрос.

2 голосов
/ 13 августа 2013

Я написал учебник по созданию медиа-галереи с использованием UICollectionView. Заполняется из библиотеки фотографий пользователя. Я думаю, что это будет отлично работать для того, что вы пытаетесь сделать.

Учебник по программированию для iPhone: создание галереи изображений, как Over-Part 1

Надеюсь, это поможет. Ура!

2 голосов
/ 01 февраля 2013

Гм, с тех пор как вышел ios6, правильный способ сделать это с помощью Collection Views:

Документы Apple на CollectionViews

Также смотрите две сессии WWDC 2012 на них:

Введение в коллекцию представлений
Расширенный просмотр коллекции

К сожалению, Apple не включила простую галерею или макет обложки, но сделать ее довольно легко.

2 голосов
/ 05 октября 2010

Если вы не хотите использовать стороннюю библиотеку, вы должны делать это в строках UITableView.Из-за того, что UITableView кэширует ячейки, он относительно легок в памяти.Конечно, больше, чем, возможно, очень большой UIView внутри UIScrollView.Я сделал это обоими способами, и я был намного счастливее с UITableView.

Тем не менее, в следующий раз, когда мне нужно это сделать?Я планирую использовать AQGridView.

1 голос
/ 19 сентября 2013

Вот очень хорошая библиотека под названием FGallery для iOS

-Поддержка автоматического поворота

-просмотр миниатюр

-zoom

-удалено

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...