Slider

rollano · juin 2017

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 ?

Céroce · juin 2017

Le mot que tu cherches est "Carousel".

Draken · juin 2017

On doit pouvoir faire ça en animant une modification de la propriété .transform des vues.

rollano · juin 2017

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...

iLandes · juin 2017

Tu as regarder sur cocoapod ?

rollano · juin 2017

Tu as regarder sur cocoapod ?

Oui également enfin sur cocoaControls

Joanna Carter · juin 2017

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

rollano · juin 2017

Oui également enfin sur cocoaControls

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

mais c'est pas tout a fais ça

Joanna Carter · juin 2017

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

rollano · juin 2017

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

rollano · juin 2017

Merci à tous

Joanna Carter · juin 2017

Je vais essayer l'option collectionView

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

Draken · juin 2017

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 Carter · juin 2017

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 ::)

Draken · juin 2017

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.

rollano · juin 2017

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

On vas éviter alors looooool

rollano · juin 2017

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.

Draken · juin 2017

Excuses acceptées, capitaine Needa !

Draken · juin 2017

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;

}

Draken · juin 2017

Mea Culpa ..

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 Carter · juin 2017

On pourrait la faire dans une animation je crois ?

Joanna Carter · juin 2017

Je ne l'ai pas vérifié mais j'ai trouvé ça : http://www.inspiresmart.com/creating-a-custom-transition-page-effect-for-ios-part-ii

rollano · juin 2017

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 ?

Draken · juin 2017

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.

rollano · juin 2017

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éroce · juin 2017

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é.

rollano · juin 2017

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 Carter · juin 2017

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)

}

}

rollano · juin 2017

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 Carter · juin 2017

Oui. En Swift on n'a qu'un fichier par type.

rollano · juin 2017

30 erreurs

Slider

Réponses