Pauvres UICollectionView Les Performances De Défilement Avec UIImage

J'ai un UICollectionView dans mon application, et chaque cellule est une UIImageView et certaines étiquettes de texte. Le problème est que lorsque j'ai le UIImageViews l'affichage de leurs images, les performances de défilement est terrible. C'est loin d'être aussi lisse que le défilement de l'expérience d'un UITableView ou même le même UICollectionView sans UIImageView.

J'ai trouvé cette question à partir d'un il ya quelques mois, et il semble que la réponse a été trouvée, mais il est écrit en RubyMotion, et je ne comprends pas. J'ai essayé de voir comment le convertir à Xcode, mais depuis je n'ai jamais utilisé NSCache soit, c'est un peu dur pour. L'affiche il y a également souligné ici sur la mise en œuvre de quelque chose en plus de leur solution, mais je ne sais pas où mettre ce code soit. Peut-être parce que je ne comprends pas le code de la première question.

Quelqu'un pour être en mesure d'aider à traduire ceci dans Xcode?

def viewDidLoad
  ...
  @images_cache = NSCache.alloc.init
  @image_loading_queue = NSOperationQueue.alloc.init
  @image_loading_queue.maxConcurrentOperationCount = 3
  ...
end

def collectionView(collection_view, cellForItemAtIndexPath: index_path)
  cell = collection_view.dequeueReusableCellWithReuseIdentifier(CELL_IDENTIFIER, forIndexPath: index_path)
  image_path = @image_paths[index_path.row]

  if cached_image = @images_cache.objectForKey(image_path)
    cell.image = cached_image
  else
    @operation = NSBlockOperation.blockOperationWithBlock lambda {
      @image = UIImage.imageWithContentsOfFile(image_path)
      Dispatch::Queue.main.async do
        return unless collectionView.indexPathsForVisibleItems.containsObject(index_path)
        @images_cache.setObject(@image, forKey: image_path)
        cell = collectionView.cellForItemAtIndexPath(index_path)
        cell.image = @image
      end
    }
    @image_loading_queue.addOperation(@operation)
  end
end

Voici le code à partir de la deuxième question que le demandeur de la première question dit résolu le problème:

UIImage *productImage = [[UIImage alloc] initWithContentsOfFile:path];

CGSize imageSize = productImage.size;
UIGraphicsBeginImageContext(imageSize);
[productImage drawInRect:CGRectMake(0, 0, imageSize.width, imageSize.height)];
productImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

Encore une fois, je ne suis pas sûr de savoir comment/où à la mettre en œuvre.

Merci beaucoup.

Poster votre code! Qu'avez-vous essayé? Pourquoi les performances de votre application lent? Quel est le résultat de profilage pour voir ce qu'il se passe?
Ce n'est pas la totalité de mon application qui est d'avoir de lenteur, c'est seulement le défilement à travers les cellules de la UICollectionView. Le reste de l'appli fonctionne très bien. Je suis actuellement à l'aide cell.cardImageView.image = [UIImage imageWithData:[NSData dataWithContentsOfFile:tempCard]]; de régler l'image. L'image utilisée(s) ne fait pas partie de l'app bundle, mais généralement téléchargés et stockés dans les Caches dossier.

InformationsquelleAutor Nick | 2013-04-03

19

Voici le modèle que j'ai suivi. Toujours charger asynch et de mettre en cache le résultat. Ne font aucune hypothèse sur l'état de la vue lorsque l'asynch charge de finitions. J'ai une classe qui simplifie les charges comme suit:
```
//
// ImageRequest.h
//This class keeps track of in-flight instances, creating only one NSURLConnection for
//multiple matching requests (requests with matching URLs).  It also uses NSCache to cache
//retrieved images.  Set the cache count limit with the macro in this file.
#define kIMAGE_REQUEST_CACHE_LIMIT  100
typedef void (^CompletionBlock) (UIImage *, NSError *);
@interface ImageRequest : NSMutableURLRequest
- (UIImage *)cachedResult;
- (void)startWithCompletion:(CompletionBlock)completion;
@end
//
// ImageRequest.m
#import "ImageRequest.h"
NSMutableDictionary *_inflight;
NSCache *_imageCache;
@implementation ImageRequest
- (NSMutableDictionary *)inflight {
if (!_inflight) {
_inflight = [NSMutableDictionary dictionary];
}
return _inflight;
}
- (NSCache *)imageCache {
if (!_imageCache) {
_imageCache = [[NSCache alloc] init];
_imageCache.countLimit = kIMAGE_REQUEST_CACHE_LIMIT;
}
return _imageCache;
}
- (UIImage *)cachedResult {
return [self.imageCache objectForKey:self];
}
- (void)startWithCompletion:(CompletionBlock)completion {
UIImage *image = [self cachedResult];
if (image) return completion(image, nil);
NSMutableArray *inflightCompletionBlocks = [self.inflight objectForKey:self];
if (inflightCompletionBlocks) {
//a matching request is in flight, keep the completion block to run when we're finished
[inflightCompletionBlocks addObject:completion];
} else {
[self.inflight setObject:[NSMutableArray arrayWithObject:completion] forKey:self];
[NSURLConnection sendAsynchronousRequest:self queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *error) {
if (!error) {
//build an image, cache the result and run completion blocks for this request
UIImage *image = [UIImage imageWithData:data];
[self.imageCache setObject:image forKey:self];
id value = [self.inflight objectForKey:self];
[self.inflight removeObjectForKey:self];
for (CompletionBlock block in (NSMutableArray *)value) {
block(image, nil);
}
} else {
[self.inflight removeObjectForKey:self];
completion(nil, error);
}
}];
}
}
@end
```
Maintenant la cellule (collection ou un tableau) mise à jour est assez simple:
```
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
NSURL *url = [NSURL URLWithString:@"http://some url from your model"];
//note that this can be a web url or file url
ImageRequest *request = [[ImageRequest alloc] initWithURL:url];
UIImage *image = [request cachedResult];
if (image) {
UIImageView *imageView = (UIImageView *)[cell viewWithTag:127];
imageView.image = image;
} else {
[request startWithCompletion:^(UIImage *image, NSError *error) {
if (image && [[collectionView indexPathsForVisibleItems] containsObject:indexPath]) {
[collectionView reloadItemsAtIndexPaths:@[indexPath]];
}
}];
}
return cell;
}
```
- Merci pour cela. J'ai essayé de le mettre dans mon application, et url est toujours à venir nil. Toute pensée?
- Avez-vous remplacer l'horrible chaîne j'ai utilisé comme un exemple avec une vraie adresse web?
- Oui, j'ai fait remplacer. Cependant, je suis à l'aide d'une URL pointant vers les Caches répertoire plutôt qu'à une adresse web. Qui ne devrait pas être un problème, non? Base de Données utilise un NSURL au point de l'app store localement.
- Je n'ai jamais essayé avec de l'URL locale, mais votre idée semble droit. Peut-être juste la force d'une adresse web d'une image dans la là pour prouver qu'il fonctionne et règle les locaux chose. Aussi peut-être avoir le cache, il suffit de répondre à une imageNamed: juste pour prouver le code. C'est bon code, je l'utilise tout le temps - mais j'ai dû modifier certains de retirer mes détails de l'application.
- J'ai trouvé ce qui était à l'origine url être nul. J'ai été en utilisant un chemin plutôt que url. Essentiellement, j'ai été absent de la file:// partie de la chaîne. Je suis maintenant en mesure de voir l'intégralité de l'URL qui est généré, mais c'est toujours pas le chargement de l'image. Quand j'ai mis l'URL dans Safari sur mon ordinateur, il charge l'image parfaitement, donc je sais que l'URL est valide. Cependant, le chargement d'une image à partir de mon serveur plutôt que localement fonctionne, et le scrolling est étonnamment lisse. En suivant les étapes, à la fois locaux et distants Url comportent de la même façon, donc je ne sais pas où est la question.
- Ainsi est-il votre conception afin de toujours obtenir les images à partir du système de fichiers local? Si c'est le cas, nous devrions simplement optimiser et oublier de faire les requêtes web. J'ai construit ce code sur les images à distance. Locaux devrait être plus facile. Je peux bricoler quelque chose ensemble si pure locales est ce que vous faites.
- Eh bien, oui et non. Généralement, le temps que l'utilisateur obtient de cette partie de l'application, il est ont déjà sauvegardé une copie locale de l'image. Cependant, je viens de modifier votre code ici, donc il peut aussi enregistrer une copie locale de l'image. Je ne sais pas comment lui dire de charger la version locale (si elle existe) au lieu de regarder à distance ou le chargement à partir d' (je suppose) le Cache.db fichier. Il me semble qu'il n'en garder une copie locale de l'image quelque part parce que, après l'exécution de l'application une fois, il ne retourna jamais à - (void)startWithCompletion:(void (^)(UIImage *, NSError *))completion
- heureusement pour vous, ou si vous êtes tous ensemble pour quiconque de trouver cela plus tard, je l'ai corrigé et testé dans certaines situations difficiles, y compris les url de fichiers, y compris de nombreux fichier de correspondance ou les demandes web.
- Vous êtes les meilleurs!!! Ce code fonctionne parfaitement! Mon UICollectionView défile aussi bien avec les images comme il le fait sans. Merci beaucoup!
- INCROYABLE! Merci beaucoup!
- peut être améliorée avec l'collectionView:didEndDisplayingCell:forItemAtIndexPath: je suppose
- Merci beaucoup pour cette! C'est génial de travailler! Pour quelque raison, quand j'ai faites défiler mon collectionview rapide (seulement si j'ai faites défiler vers la droite lors de l'ouverture de l'application), j'obtiens une exception: trop de mise à jour des animations sur un point de vue limite est le 31 en vol à l'heure. Aucune idée de ce que pourrait être la cause de cela? Merci encore! 🙂
- J'ai googlé, et il ressemble à un véritable phénomène de beaucoup d'actions individuelles sur une collection de point de vue. Le consensus fix semble être en groupe, mais je vais devoir réfléchir à la façon de l'appliquer ici.
- Vous ne savez pas si vous pourriez avoir ce problème avec la façon dont il est construit ici, mais si vous êtes en mode asynchrone chargement de l'image à l'intérieur de l'affichage de la collection de la cellule de code, vous pouvez frapper une erreur si l'image est toujours en cours de chargement lorsque le UICollectionView a disparu (peut-être sauté une pile de navigation). Pour la fixer, utiliser la faiblesse de l'/strong danse sur la collectionView variable et appeler l'reloadItemsAtIndexPaths si le collectionView variable n'est pas nulle.
- Merci @MichaelMcGuire. C'est un bon exemple de quand ne pas utiliser une faible copie du bloc de variables. C'est le bloc de maintien de la collectionView (et soi-même, le vc) qui nous protège d'eux se soit libéré avant la demande de finitions. Dans le scénario que vous mentionnez, certains manette de navigation peut libérer la vc (et donc de la collection), et les demandes de finition tout à fait correcte, sans danger mise à jour de la désormais invisible points de vue.
- Seulement ce n'est pas ce qui arrive à tous. Si le UICollectionView a été sauté par la manette de navigation, et vous essayez d'exécuter le reloadItemsAtIndexPaths, vous obtenez un EXC_BAD_ACCESS KERN_INVALID_ADDRESS de la UICollectionView. Il n'est pas dans un état où vous pouvez mettre à jour les lignes. Encore une fois, cela peut être parce que j'ai été l'exécution de ce code à l'intérieur de la UICollectionViewCell lui-même par l'intermédiaire d'une méthode qui se. L'un des paramètres passés en était le UICollectionView lui-même.
- Je viens de vérifier, et vous avez raison. Lors de l'exécution de la présente directement dans le point de vue du contrôleur, vous n'obtenez pas de conserver cycle (évidemment). Cependant, dans mon cas, où j'ai été l'appel à la cellule, en passant une instance de la UICollectionView, j'ai été faire un conserver cycle, qui a été la cause de mon erreur.
- Dans mon cas, l'application a été s'écraser lors de la tentative d'extraction d'une image distante qui n'existait pas dans le serveur. J'ai donc ajouté la condition suivante à l'intérieur de ImageRequest.m à l'intérieur du gestionnaire d'achèvement de la ligne de ~47. if (!erreur && [(NSHTTPURLResponse*)réponse statusCode] == 200) { [...] cheers
- Ce qui se passe dans cette ligne if (image) return completion(image, nil);. La ligne renvoie une block à l'intérieur d'un void méthode, quelle est donc la block étant retourné?
- Cela ne veut pas retourner le bloc, c' appelle le bloc, donnant l'appelant (qui a passé le bloc), la promise de l'image. La partie de retour interrompt l'exécution de la fonction.
InformationsquelleAutor danh
5

En général mauvais comportement de défilement pour UICollectionViews ou UITableViews se produit parce que les cellules sont retirés et construit dans le thread principal par iOS. Il y a peu de liberté de cellules préalablement mis en cache ou de les construire dans un thread d'arrière-plan, au lieu de cela, ils sont retirés et construit comme vous le faites défiler le blocage de l'INTERFACE utilisateur. (Personnellement, je trouve cette mauvaise conception par Apple tous si elle n'simplifier les choses, parce que vous n'avez pas à être au courant au sujet de potentiels problèmes de threading. Je pense qu'ils devraient avoir donné un crochet bien que de fournir une implémentation personnalisée pour un UICollectionViewCell/UITableViewCell piscine qui peut gérer la file d'attente, de réutiliser des cellules).

Les causes les plus importantes pour diminuer les performances sont en effet liées à des données de l'image (dans l'ordre décroissant) sont en mon expérience:
- Des appels synchrones pour télécharger les données de l'image: toujours le faire de manière asynchrone et d'appel [UIImageView setImage:] avec l'image construite lorsque tout est prêt, dans le thread principal
- Des appels synchrones pour construire des images à partir de données sur le système de fichiers local ou à partir d'autres données sérialisées: le faire de manière asynchrone. (par exemple, [UIImage imageWithContentsOfFile:], [UIImage imageWithData:], etc).
- Les appels vers un [UIImage imageNamed:]: la première fois que cette image est chargée, elle est servie à partir du système de fichiers. Vous pouvez préalablement mis en cache des images (juste par chargement [UIImage imageNamed:] avant que la cellule est en fait construit de telle manière qu'ils peuvent être servis à partir de la mémoire immédiate.
- Appelant [UIImageView setImage:] n'est pas la méthode la plus rapide, mais ne peut pas être évitée sauf si vous utilisez des images statiques. Pour les images statiques, il est parfois plus rapide d'utiliser les différentes vues d'images qui vous mis à, cachés ou non, selon qu'elles devraient être affichées au lieu de changer l'image sur le même affichage de l'image.
- Première fois qu'une cellule est retiré, il est chargé soit à partir d'une Plume ou construit avec alloc-init et une première mise en page ou les propriétés sont définies (probablement aussi des images si vous en avez utilisé). Ce les causes de la mauvaise défilement comportement la première fois qu'une cellule est utilisée.
Parce que je suis très pointilleux sur la lisse de défilement (même si c'est seulement la première fois qu'une cellule est utilisé) j'ai construit un cadre préalablement mis en cache par les cellules sous-classement UINib (ce qui est essentiellement le seul crochet que vous obtenez dans la file d'attente des processus utilisés par iOS). Mais peut-être au-delà de vos besoins.

InformationsquelleAutor Werner Altewischer
0

J'ai eu des questions à propos de UICollectionView de défilement.

Ce qui a fonctionné (presque) comme un charme pour moi: j'ai renseigné les cellules avec des vignettes au format png 90x90. Je dis "presque" parce que le premier complet de défilement n'est pas si lisse, mais jamais écrasé plus.

Dans mon cas, la taille de la cellule est 90x90.

J'ai eu beaucoup de png d'origine tailles avant, et c'était très agitée quand png taille d'origine était supérieure à ~1000x1000 (nombreux accidents sur le premier parchemin).

Donc, je sélectionne 90x90 (ou similaire) sur le UICollectionView et afficher l'original de la png (peu importe la taille). espérons qu'il peut aider d'autres personnes.

InformationsquelleAutor Paulo Souto

Vous devez vous connecter pour publier un commentaire.