Comment créer un effet de parallaxe dans UITableView avec UIImageView dans leurs cellules prototypes
Je suis en train de construire une application dans iOS 8.4 avec Swift.
J'ai un UITableView
avec une coutume UITableViewCell
qui comprend un UILabel
et UIImageView
. Tout ceci est assez simple et le tout rend très bien.
Je suis en train de créer un effet de parallaxe similaire à celui démontré dans cette démo.
J'ai actuellement ce code dans mon tableView.cellForRowAtIndexPath
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
var cell = self.tableView.dequeueReusableCellWithIdentifier("myitem", forIndexPath: indexPath) as! MixTableViewCell
cell.img.backgroundColor = UIColor.blackColor()
cell.title.text = self.items[indexPath.row]["title"]
cell.img.image = UIImage(named: "Example.png")
//ideally it would be cool to have an extension allowing the following
//cell.img.addParallax(50) //or some other configurable offset
return cell
}
Ce bloc existe à l'intérieur d'une classe qui ressemble à class HomeController: UIViewController, UITableViewDelegate, UITableViewDataSource { ... }
Je suis aussi conscient que je peux écouter pour faire défiler les événements dans ma classe via func scrollViewDidScroll
.
Autre que cela, l'aide est apprécié!
source d'informationauteur ded
Vous devez vous connecter pour publier un commentaire.
J'ai tout compris! L'idée était de le faire sans la mise en œuvre de toutes les bibliothèques supplémentaires, en particulier compte tenu de la simplicité de la mise en œuvre.
Première... dans le tableau personnalisé vue
Cell
classe, vous devez créer un wrapper de vue. Vous pouvez sélectionner votreUIImageView
dans le Prototype de la cellule, puis choisissezEditor > Embed in > View
. Faites glisser les deux dans votre Cellule en tant que points de vente, puis définissezclipToBounds = true
pour le contenant de vue. (rappelez-vous également de définir les contraintes qui entravent le même que celui de votre image.Puis dans votre
UITableViewController
sous-classe (ou son délégué), de mettre en œuvre lascrollViewDidScroll
— de là, vous aurez continuellement mettre à jour l'UIImageView
's.frame
de la propriété. Voir ci-dessous:Le voir en action.
Je n'étais pas trop heureux avec @ded la solution nécessitant une enveloppe de vue, alors je suis venu avec un autre qui utilise la mise en page automatique et est assez simple.
Dans le storyboard, vous n'avez qu'à ajouter votre imageView et 4 contraintes sur l'ImageView:
Les deux dernières contraintes (en haut et en hauteur) besoin de référencement des points de vente à votre custom UITableViewCell (au-dessus du pic, double-cliquez sur le lien dans la colonne la plus à droite, puis Montrer le lien de l'inspecteur de l'icône d'une flèche dans un cercle)
Votre UITableViewCell devrait ressembler à quelque chose comme ceci:
Donc, fondamentalement, nous vous racontons l'image pour prendre autant d'espace que possible, mais nous clip à la cellule de trame.
Maintenant votre TableViewController devrait ressembler à ceci:
Notes:
Donc là vous l'avez, la parallaxe UITableViewCells qui devrait fonctionner avec n'importe quel modèle, et peut également être adapté à CollectionViews.
Cette méthode fonctionne avec la vue de la table et la vue de collection.
Si vous souhaitez mettre en œuvre ce à collectionView il suffit de changer le tableView vairable à votre collectionView variable
et c'est tout. je ne suis pas sûr si c'est le meilleur moyen. mais cela fonctionne pour moi. espérons que cela fonctionne pour vous aussi. et laissez-moi savoir si il ya un problème