Slider

Bonjour à  tous,

Je cherche à  faire un slider en page d'accueil d'une application mais je ne sais pas que chercher sur Google pour un éventuel tuto.

Le slider que je souhaiterais est celui utilisé par le National Geographic (City Guides)

Svp avez-vous une idée par quoi je pourrais commencer ?


 


CityGuideSwipe.gif


«13

Réponses

  • CéroceCéroce Membre, Modérateur
    Le mot que tu cherches est "Carousel".
  • On doit pouvoir faire ça en animant une modification de la propriété .transform des vues.



  • Le mot que tu cherches est "Carousel".




     


    J'ai essayé, c'est justement cela qui m'as rediriger vers l'application de NG


     


    Mais je ne trouve pas de tuto...

  • Tu as regarder sur cocoapod ?




  • Tu as regarder sur cocoapod ?




     


    Oui également enfin sur cocoaControls

  • Joanna CarterJoanna Carter Membre, Modérateur

    Ou, pour le faire toi-même, le plus simple, c'est d'utiliser une UICollectionView ou une UIPageView




  • Oui également enfin sur cocoaControls




     


    https://cocoapods.org/?q=carousel


     


    mais c'est pas tout a fais ça

  • Joanna CarterJoanna Carter Membre, Modérateur
    juin 2017 modifié #9


    https://cocoapods.org/?q=carousel


     


    mais c'est pas tout a fais ça




     


    Ce de NG est, probablement qqch. qu'ils ont fait "in house". Je doute que ce serait dispo




  • Ce de NG est, probablement qqch. qu'ils ont fait "in house". Je doute que ce serait dispo




     


    Très certainement oui


     


    Je vais essayer l'option collectionView

  • Merci à  tous :)


  • Joanna CarterJoanna Carter Membre, Modérateur


    Je vais essayer l'option collectionView




     


    UIPageViewController gère automatiquement les gestures ; avec UICollectionView, il faudrait réinventer la roue  :-*



  • UIPageViewController gère automatiquement les gestures ; avec UICollectionView, il faudrait réinventer la roue  :-*




     


    Oui, mais est-il possible d'avoir des effets de transitions sophistiqués avec UIPageViewController ? Il ne me semble pas que l'animation de la vidéo ressemble à  un effet standard iOS. Il faut plonger les mains dans le cambouis pour reproduire quelque chose de similaire, en passant par la propriété transform des vues.

  • Joanna CarterJoanna Carter Membre, Modérateur
    juin 2017 modifié #14


    Oui, mais est-il possible d'avoir des effets de transitions sophistiqués avec UIPageViewController ? Il ne me semble pas que l'animation de la vidéo ressemble à  un effet standard iOS. Il faut plonger les mains dans le cambouis pour reproduire quelque chose de similaire, en passant par la propriété transform des vues.




     


    Pas seulement les mains, il faut une pelle  ::)


  • DrakenDraken Membre
    juin 2017 modifié #15

    Euh .. franchement rollano t'abuse un peu là  .. Tu n'as pas dus chercher bien longtemps ! 


     


    Ta vidéo est une DEMONSTRATION de raywenderlich montrant l'utilisation d'un composant graphique iOS RGCardViewLayout qu'il a écrit lui-même.


     


    Voici le GitHub avec le source complet (Objective-C)  


     


    https://github.com/terminatorover/RGCardViewLayout


     


    C'est une viewCollection personnalisée avec un effet de transformation utilisant CATransform3D.



  • UIPageViewController gère automatiquement les gestures ; avec UICollectionView, il faudrait réinventer la roue  :-*




     


    On vas éviter alors looooool



  • Euh .. franchement rollano t'abuse un peu là  .. Tu n'as pas dus chercher bien longtemps ! 


     


    Ta vidéo est une DEMONSTRATION de raywenderlich montrant l'utilisation d'un composant graphique iOS RGCardViewLayout qu'il a écrit lui-même.


     


    Voici le GitHub avec le source complet (Objective-C)  


     


    https://github.com/terminatorover/RGCardViewLayout


     


    C'est une viewCollection personnalisée avec un effet de transformation utilisant CATransform3D.




     


    Mes excuses Draken faudra peut-être que je revoie mes modes de recherches.

    Dans tous les cas, je te remercie pour ton aide. 

  • Excuses acceptées, capitaine Needa !



  • Pas seulement les mains, il faut une pelle  ::)




    Une petite pelle, alors ..



    - (CATransform3D)transformFromView:(UIView *)view
    {
    CGFloat angle = [self angleForView:view];
    CGFloat height = [self heightOffsetForView:view];
    BOOL xAxis = [self xAxisForView:view];
    return [self transformfromAngle:angle height:height xAxis:xAxis];
    }

    - (CATransform3D)transformfromAngle:(CGFloat)angle height:(CGFloat)height xAxis:(BOOL)axis
    {
    CATransform3D t = CATransform3DIdentity;
    t.m34 = 1.0/-500;

    if (axis)
    {
    t = CATransform3DRotate(t,angle, 1, 1, 0);
    }
    else
    {
    t = CATransform3DRotate(t,angle, -1, 1, 0);
    }

    return t;
    }

  • DrakenDraken Membre
    juin 2017 modifié #20

    Mea Culpa .. :o


    La vidéo provient bien de Ray Wenderlich, mais le source dont je t'ai donné le lien n'est pas de lui. C'est un clone écrit par Robera Geleta, un fan de Ray, reproduisant un effet similaire. 

  • Joanna CarterJoanna Carter Membre, Modérateur
    On pourrait la faire dans une animation je crois ?
  • Joanna CarterJoanna Carter Membre, Modérateur


  • Euh .. franchement rollano t'abuse un peu là  .. Tu n'as pas dus chercher bien longtemps ! 


     


    Ta vidéo est une DEMONSTRATION de raywenderlich montrant l'utilisation d'un composant graphique iOS RGCardViewLayout qu'il a écrit lui-même.


     


    Voici le GitHub avec le source complet (Objective-C)  


     


    https://github.com/terminatorover/RGCardViewLayout


     


    C'est une viewCollection personnalisée avec un effet de transformation utilisant CATransform3D.




     


     


    C'est pas très expliquer loool


     


    J'arrive pas à  l'utiliser


     


    j'ai installer le pod qui à  eu comme effet d'ajouter les deux fichiers objectif c


     


    c'est quoi la suite ?

  • DrakenDraken Membre
    juin 2017 modifié #24

    Est-ce que le programme de démo fonctionne chez toi ? Il tourne parfaitement bien de mon coté.


     


    Je ne sais pas comment utiliser de l'objective-C avec Swift. C'est certainement très simple, mais comme j'ai une violente allergie à  l'obj-C... Joanna ou une autre âme courageuse (ou encore le livre Apple (iBook gratuit - Using Swift with Cocoa and Obective-C) te montreront la voie.


     


    Je n'ai pas le temps de me pencher sur le portage des routines en Swift en ce moment, mais le problème m'intéresse. Donne-moi quelques jours et je fais ma propre version du truc en Swift, en utilisant une animation et une transformation 3D.



  • Est-ce que le programme de démo fonctionne chez toi ? Il tourne parfaitement bien de mon coté.


     


    Je ne sais pas comment utiliser de l'objective-C avec Swift. C'est certainement très simple, mais comme j'ai une violente allergie à  l'obj-C... Joanna ou une autre âme courageuse (ou encore le livre Apple (iBook gratuit - Using Swift with Cocoa and Obective-C) te montreront la voie.


     


    Je n'ai pas le temps de me pencher sur le portage des routines en Swift en ce moment, mais le problème m'intéresse. Donne-moi quelques jours et je fais ma propre version du truc en Swift, en utilisant une animation et une transformation 3D.




     


     


    Merci beaucoup :)


     


    oui la demo fonctionne. et j'ai scruter tous les fichiers à  la recherche d'indice ou autres....mais rien

  • CéroceCéroce Membre, Modérateur

    Je ne sais pas comment utiliser de l'objective-C avec Swift. C'est certainement très simple, mais comme j'ai une violente allergie à  l'obj-C...

    Oui, c'est très simple. D'ailleurs, il n'y a rien de particulier à  faire. Quoique je n'ai pas bien compris le rôle du Bridging Header... j'ai l'impression qu'il n'est plus trop d'actualité.


  • Oui, c'est très simple. D'ailleurs, il n'y a rien de particulier à  faire. Quoique je n'ai pas bien compris le rôle du Bridging Header... j'ai l'impression qu'il n'est plus trop d'actualité.




     


    Quand on intègre par pod il n'ya pas de bridge.

  • Joanna CarterJoanna Carter Membre, Modérateur

    Voilà  le code pour le layout traduit en Swift. Il n'était pas le meilleur code en Objective-C ; je n'ai que le traduit le mieux que possible mais, si je le faisais pour moi-même, je le ferais un peu différent.



    class RGCardViewLayout : UICollectionViewFlowLayout
    {
    var previousOffset: CGFloat = 0.0

    var mainIndexPath: IndexPath?

    var movingInIndexPath: IndexPath?

    var difference: CGFloat = 0.0

    override func prepare()
    {
    setupLayout()

    super.prepare()
    }

    func setupLayout()
    {
    guard let collectionView = collectionView else
    {
    return
    }

    let inset = floor(collectionView.bounds.size.width * (6/64.0))

    itemSize = CGSize(width: collectionView.bounds.size.width - (2 * inset), height: collectionView.bounds.size.height * 3 / 4)

    sectionInset = UIEdgeInsetsMake(0, inset, 0, inset)

    scrollDirection = .horizontal
    }

    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes?
    {
    let attributes = super.layoutAttributesForItem(at: indexPath)

    applyTransform(to: attributes)

    return attributes
    }

    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool
    {
    return true
    }

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]?
    {
    let attributes = super.layoutAttributesForElements(in: rect)

    guard let collectionView = collectionView else
    {
    return nil
    }

    let cellIndices = collectionView.indexPathsForVisibleItems

    switch cellIndices.count
    {
    case 0:
    return attributes
    case 1:
    mainIndexPath = cellIndices.first
    movingInIndexPath = nil
    default:
    let firstIndexPath = cellIndices.first
    if firstIndexPath == mainIndexPath
    {
    movingInIndexPath = cellIndices[1]
    }
    else
    {
    movingInIndexPath = cellIndices.first
    mainIndexPath = cellIndices[1]
    }
    }

    difference = collectionView.contentOffset.x - previousOffset

    previousOffset = collectionView.contentOffset.x

    attributes?.forEach { applyTransform(to: $0) }

    return attributes
    }

    func applyTransform(to layoutAttributes:UICollectionViewLayoutAttributes?)
    {
    guard let layoutAttributes = layoutAttributes,
    let collectionView = collectionView,
    let mainIndexPath = mainIndexPath else
    {
    return
    }

    if layoutAttributes.indexPath.section == mainIndexPath.section
    {
    if let cell = collectionView.cellForItem(at: mainIndexPath)
    {
    layoutAttributes.transform3D = self.transformFromView(cell)
    }
    }
    else
    {
    guard let movingInIndexPath = movingInIndexPath else
    {
    return
    }

    if layoutAttributes.indexPath.section == movingInIndexPath.section
    {
    if let cell = collectionView.cellForItem(at: movingInIndexPath)
    {
    layoutAttributes.transform3D = self.transformFromView(cell)
    }
    }
    }
    }

    func baseOffsetForView(_ view: UIView) -> CGFloat
    {
    guard let collectionView = collectionView,
    let cell = view as? UICollectionViewCell,
    let indexPath = collectionView.indexPath(for: cell) else
    {
    return 0.0
    }

    return CGFloat(indexPath.section) * collectionView.bounds.size.width
    }

    func heightOffsetForView(_ view: UIView) -> CGFloat
    {
    guard let collectionView = collectionView else
    {
    return 0.0
    }

    let baseOffsetForCurrentView = baseOffsetForView(view)

    let currentOffset = collectionView.contentOffset.x

    let scrollViewWidth = collectionView.bounds.size.width

    return abs(120 * (currentOffset - baseOffsetForCurrentView) / scrollViewWidth)
    }

    func angleForView(_ view: UIView) -> CGFloat
    {
    guard let collectionView = collectionView else
    {
    return 0.0
    }

    let baseOffsetForCurrentView = baseOffsetForView(view)

    let currentOffset = collectionView.contentOffset.x

    let scrollViewWidth = collectionView.bounds.size.width

    return (currentOffset - baseOffsetForCurrentView) / scrollViewWidth
    }

    func xAxisForView(_ view: UIView) -> Bool
    {
    guard let collectionView = collectionView else
    {
    return false
    }

    let baseOffsetForCurrentView = baseOffsetForView(view)

    let currentOffset = collectionView.contentOffset.x

    let offset = (currentOffset - baseOffsetForCurrentView)

    return offset >= 0
    }


    func transformFromView(_ view: UIView) -> CATransform3D
    {
    let angle = angleForView(view)

    let height = heightOffsetForView(view)

    let xAxis = xAxisForView(view)

    return transformFrom(angle: angle, height:height, axis:xAxis)
    }

    func transformFrom(angle: CGFloat, height: CGFloat, axis: Bool) -> CATransform3D
    {
    var t = CATransform3DIdentity

    t.m34 = 1.0 / -500

    return CATransform3DRotate(t, angle, axis ? 1 : -1, 1, 0)
    }
    }
  • rollanorollano Membre
    juin 2017 modifié #29

    Voilà  le code pour le layout traduit en Swift. Il n'était pas le meilleur code en Objective-C ; je n'ai que le traduit le mieux que possible mais, si je le faisais pour moi-même, je le ferais un peu différent.




    Je crée un module du coup en remplacement des deux fichiers en objectif c ?
  • Joanna CarterJoanna Carter Membre, Modérateur
    juin 2017 modifié #30
    Oui. En Swift on n'a qu'un fichier par type.
Connectez-vous ou Inscrivez-vous pour répondre.