Déplacement progressif dans UITableView et UICollectionView Comme la plupart des développeurs iOS le savent, l'affichage de jeux de données est une tâche assez courante dans la construction d'une application mobile. Apples SDK fournit deux composants pour aider à effectuer une telle tâche sans avoir à tout mettre en œuvre à partir de zéro: Une vue de table (UITableView) et une vue de collection (UICollectionView). Les vues de table et les vues de collection sont toutes deux conçues pour prendre en charge l'affichage de jeux de données qui peuvent être défilés. Toutefois, lors de l'affichage d'une très grande quantité de données, il pourrait être très délicat pour parvenir à un défilement parfaitement lisse. Ce n'est pas idéal car il affecte négativement l'expérience utilisateur. En tant que membre de l'équipe de développement iOS pour l'application Capital One Mobile, j'ai eu la chance d'expérimenter avec des vues de table et des vues de collection ce post reflète mon expérience personnelle dans l'affichage de grandes quantités de données défilables. Dans celui-ci, bien examiner les conseils les plus importants pour optimiser la performance des composants SDK mentionnés ci-dessus. Cette étape est primordiale pour obtenir une expérience de défilement très lisse. Notez que la plupart des points suivants s'appliquent à la fois UITableView et UICollectionView comme ils partagent une bonne quantité de leur sous le capot comportement. Quelques points sont spécifiques à UICollectionView, car cette vue met des détails de mise en page supplémentaires sur les épaules du développeur. Commençons par un aperçu rapide des composants mentionnés ci-dessus. UITableView est optimisé pour afficher les vues sous la forme d'une suite de lignes. Comme la mise en page est prédéfinie, le composant SDK prend en charge la plupart de la mise en page et fournit aux délégués qui sont principalement axés sur l'affichage du contenu de cellule. UICollectionView. D'autre part, offre une flexibilité maximale que la mise en page est entièrement personnalisable. Cependant, la flexibilité dans une vue de collection vient aux frais d'avoir à s'occuper des détails supplémentaires concernant comment la disposition doit être exécutée. Conseils communs à UITableView et UICollectionView REMARQUE: Je vais utiliser UITableView pour mes extraits de code. Mais les mêmes concepts s'appliquent également à UICollectionView. Le rendu des cellules est une tâche critique L'interaction principale entre UITableView et UITableViewCell peut être décrite par les événements suivants: Pour tous les événements ci-dessus, l'affichage de la table passe l'index (ligne) pour lequel l'interaction a lieu. Voici une visualisation du cycle de vie UITableViewCell: Tout d'abord, la méthode tableView (: cellForRowAt :) doit être aussi rapide que possible. Cette méthode est appelée chaque fois qu'une cellule doit être affichée. Plus vite il s'exécute, le défilement plus lisse de la vue de table sera. Il ya quelques choses que nous pouvons faire pour nous assurer que nous rendre la cellule aussi vite que possible. Ce qui suit est le code de base pour rendre une cellule, extrait de la documentation de Apple: Après avoir récupéré l'instance de cellule qui est sur le point d'être réutilisé (dequeueReusableCell (withIdentifier: for :)), nous devons le configurer en assignant les valeurs requises à ses propriétés . Jetons un regard sur la façon dont nous pouvons faire notre code exécuter rapidement. Définir le modèle de vue pour les cellules Une façon est d'avoir toutes les propriétés dont nous avons besoin pour montrer être facilement disponible et juste attribuer ceux à la contrepartie cellule appropriée. Pour ce faire, nous pouvons tirer parti du modèle MVVM. Supposons que nous devons afficher un ensemble d'utilisateurs dans notre vue de tableau. Nous pourrions définir le modèle pour l'utilisateur comme: Définir un modèle de vue pour l'utilisateur est simple: récupérer les données asynchrone et modèles de vue de cache Maintenant que nous avons défini notre modèle et le modèle de vue, les laisse fonctionner Nous allons chercher les données Pour les utilisateurs via un service web. Bien sûr, nous voulons mettre en œuvre la meilleure expérience possible. Par conséquent, nous nous occuperons des éléments suivants: Évitez de bloquer le thread principal lors de la recherche de données. Mise à jour de la vue de la table juste après la récupération des données. Cela signifie que nous chercherons les données de façon asynchrone. Nous allons effectuer cette tâche à l'aide d'un contrôleur spécifique afin de conserver la logique d'extraction séparée à la fois du modèle et du modèle de vue, comme suit: Maintenant, nous pouvons récupérer les données et mettre à jour la vue de table de façon asynchrone comme illustré dans l'extrait de code suivant: Nous pouvons utiliser l'extrait ci-dessus pour extraire les données des utilisateurs de différentes façons: Seul le moment de charger la vue de la table la première fois, en la plaçant dans viewDidLoad (). Chaque fois que l'affichage de la table est affiché, en le plaçant dans viewWillAppear (:). Sur demande de l'utilisateur (par exemple via un pull-down-to-refresh), en le plaçant dans l'appel de méthode qui prendra soin de rafraîchir les données. Le choix dépend de la fréquence à laquelle les données peuvent être modifiées sur le backend. Si les données sont essentiellement statiques ou ne changent pas souvent, la première option est meilleure. Autrement, nous devrions opter pour le second. Charger des images de manière asynchrone et les mettre en cache Il est très fréquent de charger des images pour nos cellules. Depuis essayaient d'obtenir les meilleures performances de défilement possibles, nous ne voulons certainement pas bloquer le thread principal pour aller chercher les images. Une façon simple d'éviter cela est de charger des images de façon asynchrone en créant un wrapper simple autour de URLSession: Cela nous permet d'extraire chaque image à l'aide d'un thread d'arrière-plan, puis de mettre à jour l'interface utilisateur une fois les données requises disponibles. Nous pouvons améliorer encore plus nos performances en mettant en cache les images. Si nous ne voulons pas - ou ne pouvons pas nous permettre - d'écrire des images asynchrones personnalisées de téléchargement et de mise en mémoire cache, nous pouvons profiter des bibliothèques telles que SDWebImage ou AlamofireImage. Ces bibliothèques fournissent la fonctionnalité recherchent out-of-the-box. Personnaliser la cellule Afin de tirer pleinement parti des modèles de vue mis en cache, nous pouvons personnaliser la cellule Utilisateur en la sous-classant (depuis UITableViewCell pour les vues de table et depuis UICollectionViewCell pour les vues de collection). L'approche de base consiste à créer une sortie pour chaque propriété du modèle qui doit être affichée et l'initialiser à partir du modèle de vue: Utiliser des couches opaques et éviter les dégradés Étant donné que l'utilisation d'une couche transparente ou l'application d'un dégradé nécessite une bonne quantité de calcul, Possible, nous devrions éviter de les utiliser pour améliorer les performances de défilement. En particulier, nous devrions éviter de changer la valeur alpha et utiliser de préférence une couleur RVB standard (éviter UIColor. clear) pour la cellule et toute image qu'elle contient: Mettre tout ensemble: Optimisation du rendu des cellules A ce stade, configurer la cellule une fois son temps à Rendez-le devrait être facile et facile parce que: Nous utilisons les données du modèle de vue en cache. Nous cherchons les images de manière asynchrone. Voici le code mis à jour: Conseils spécifiques à UITableView Utilisez des cellules d'autodimensionnement pour les cellules de hauteur variable Si les cellules que nous voulons afficher dans notre vue de table ont une hauteur variable, nous pouvons utiliser des cellules auto-dimensionnables. Fondamentalement, nous devrions créer des contraintes appropriées de mise en page automatique pour vous assurer que les composants d'interface utilisateur qui ont une hauteur variable s'étirer correctement. Dans ce cas malheureux, nous ne pouvons pas utiliser des cellules d'auto-dimensionnement (par exemple, si le support pour iOS7 est toujours nécessaire), nous devons appliquer tableView (: heightForRowAt :) pour calculer chaque Hauteur de la cellule. Il est encore possible, cependant, d'améliorer les performances de défilement en: Conseils spécifiques à UICollectionView Nous pouvons facilement personnaliser la plupart de notre vue de collection en implémentant la méthode de protocole UICollectionViewFlowLayoutDelegate appropriée. Calculez votre taille de cellule Nous pouvons personnaliser notre taille de cellule de la collection en appliquant collectionView (: layout: sizeForItemAt :): UITableView étendre les arêtes sous la barre supérieure 107 J'ai sous-classé SlackTextViewController pour créer ma propre UITableView, mais j'ai trouvé que la vue de la table n'était pas étendue sous Barre de navigation supérieure. L'inspecteur de l'interface utilisateur de Xcode confirme également cela. Je me demande comment je peux faire les bords d'UITableViews s'étendent sous la barre de navigation, de sorte que le contenu sur le tableview puisse apparaître par la barre translucide. Edit: Après avoir examiné le code, j'ai constaté que le problème réside dans cette méthode Si la propriété inversée est définie sur OUI, la propriété edgesFormsxt est définie automatiquement sur UIRectEdgeNone. Si j'ai supprimé cette ligne, la vue de la table se déplacera vers le haut. Dapenggao a changé le titre de UITableView étendre les bords sous la barre supérieure à UITableView étendre les bords sous la barre supérieure, effacer pour supprimer Jan 22, 2015 dapenggao a changé le titre de UITableView étendre les bords sous la barre supérieure, glisser pour supprimer à UITableView , 2015
No comments:
Post a Comment