CollectionView сетки с изображениями. Изображения не вписываются в сетку

Question

Я пытаюсь создать макет сетки, который показывает некоторые снимки. Теперь я использую FlowLayout и я создаю мой CollectionView так:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { 
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath]; 


    Gop *g = _images[(NSUInteger) indexPath.row]; 

    @weakify(self); 
    [[self.imageService fetchImageFromURLAsString:g.imageUrl] subscribeNext:^(UIImage *img) { 
     @strongify(self); 
     UIImageView *imageView = [[UIImageView alloc] initWithImage:img]; 
     imageView.contentMode = UIViewContentModeScaleAspectFill; 
     [cell.contentView addSubview:imageView]; 
    } error:^(NSError *error) { 
     [_snackbar displaySnackbarWithMsg:NSLocalizedString(@"snackbar.error.no.network", nil)]; 
    } completed:^{ 
     DDLogDebug(@"Fetched image"); 
    }]; 

    return cell; 
} 

#pragma mark – UICollectionViewDelegateFlowLayout 

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { 
    return CGSizeMake(100,100); 
} 

Не беспокойся за реактивную часть какао, он просто получает изображение из Интернета.

Теперь изображение 1920 x 1080, но я хочу, чтобы галерея изображений размером 100 х 100, например. Поэтому я реализовал метод UICollectionViewDelegateFlowLayout и создал размер размером 100x100. Теперь мое изображение не показывает 100 x 100, и мое изображение не видно. Я вижу только изображение из левого угла, которое я предполагаю (из более крупного изображения).

Как я могу поместить свои изображения в 100 х 100 и все в порядке друг с другом?

Скриншот, что я сейчас:

Я надеялся на результат что-то вроде этого: http://www.appcoda.com/wp-content/uploads/2013/01/RecipePhoto-App-First-Version.jpg

Answer 1

Пара вещей :

Вы не должны быть показаны: 1920x1080 изображений в UICollectionView, так как это приведет к действительно плохой производительности. Не показывает ли ваш веб-сервис предварительный просмотр?

- (CGSize)collectionView:layout:sizeForItemAtIndexPath: влияет только на размер UICollectionViewCell, не изменяет размер изображения. Поскольку вы не предоставили фрейм UIImageView, он примет размер его UIImage, который в вашем случае равен 1920x1080. Легко исправить будет:

//@weakify(self); not necessary, as you are not referencing self inside the blocks 
[[self.imageService fetchImageFromURLAsString:g.imageUrl] subscribeNext:^(UIImage *img) { 
    //@strongify(self); 
    UIImageView *imageView = [[UIImageView alloc] initWithImage:img]; 
    imageView.frame = cell.bounds; // set the frame of the UIImageView 
    imageView.clipsToBounds = YES; // do not display the image outside of view, if it has different aspect ratio 
    imageView.contentMode = UIViewContentModeScaleAspectFill; 
    [cell.contentView addSubview:imageView]; 
} error:^(NSError *error) { 
    [_snackbar displaySnackbarWithMsg:NSLocalizedString(@"snackbar.error.no.network", nil)]; 
} completed:^{ 
    DDLogDebug(@"Fetched image"); 
}]; 

Кроме того, подумайте о повторном использовании клеток: если клетка повторно, все, что код будет выполняться несколько раз, что приведет к кратному UIImageViews в одной и той же клетке. Вы можете решить эту проблему путем добавления UIImageView к UICollectionViewCell в Interface Builder и только доступ к нему в коде (например, через tag):

... 
UIImageView *imageView = (UIImageView*)[cell viewWithTag:YOUR_TAG]; 
... 

Кроме того, клетки могут быть потенциально повторно до того, как изображение было загружено с веб-службы , что приведет к тому, что несколько изображений будут асинхронно загружены в одну ячейку, что довольно беспорядочно.

Я бы предложил взглянуть на библиотеки вроде AFNetworking или SDWebImage, которые уже решили эту нетривиальную проблему.

Answer 2

Добавить эту строку в код конфигурации ячейки:

imageView.clipsToBounds = YES