2017-09-21 4 views
0

J'ai un UICollectionView avec un scroll horizontal. Voici mon collectionView:UICollectionView scrolling horizontal

fileprivate(set) lazy var collectionView: UICollectionView = { 
     let width = UIScreen.main.bounds.width.multiplied(by: 0.9) 
     let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout() 
     layout.itemSize = CGSize(width: width, height: 50) 

     layout.sectionInset = UIEdgeInsets(top: 20, left: 20, bottom: 10, right: 20) 
     layout.scrollDirection = .horizontal 
     layout.minimumLineSpacing = 20 

     let collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: self.frame.width, height: 50), collectionViewLayout: layout) 
     collectionView.translatesAutoresizingMaskIntoConstraints = false 
     collectionView.backgroundColor = .red 
     collectionView.isPagingEnabled = true 
     return collectionView 
    }() 

et il ressemble à ça:

enter image description here

Comme vous le voyez, j'ai collectionView.isPagingEnabled = true dans le code que je veux l'effet de pagination. Donc ce que je suis en train de réaliser est de rendre les articles ressemblent dans l'image ci-dessus (20 espacement à gauche et à droite) dans toutes les autres pages, mais jusqu'à présent je reçois:

enter image description here

Toutes les idées/conseils comment arriver au comportement désiré?

+0

Je n'utilise pas storyboards et j'ai mis la propriété déjà si vous regardez à nouveau le code. – radioaktiv

+0

essayez ceci. isScrollEnabled: vrai. –

+0

layout.itemSize = CGSize (largeur: largeur - 40, hauteur: 50) –

Répondre

1

Voici le UICollectionViewDelegateFlowLayout que j'ai utilisé dans mon projet de test pour réaliser ce que vous voulez.

func collectionView(_ collectionView: UICollectionView, 
        layout collectionViewLayout: UICollectionViewLayout, 
        sizeForItemAt indexPath: IndexPath) -> CGSize { 
    return CGSize(width: UIScreen.main.bounds.width.multiplied(by: 0.9), height: 50.0) 
} 

// item spacing = vertical spacing in horizontal flow 
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat { 
    return (UIScreen.main.bounds.width.multiplied(by: 0.1)) 
} 

// line spacing = horizontal spacing in horizontal flow 
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat { 
    return (UIScreen.main.bounds.width.multiplied(by: 0.1)) 
} 

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets { 
    return UIEdgeInsets(top: 0, left: (UIScreen.main.bounds.width.multiplied(by: 0.1)/2.0), bottom: 0, right: (UIScreen.main.bounds.width.multiplied(by: 0.1)/2.0)) 
} 

Avec votre code, il serait comme ça:

fileprivate(set) lazy var collectionView: UICollectionView = { 
    let width = UIScreen.main.bounds.width.multiplied(by: 0.9) 
    let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout() 
    layout.itemSize = CGSize(width: width, height: 50) 

    layout.sectionInset = UIEdgeInsets(top: 20, left: UIScreen.main.bounds.width.multiplied(by: 0.1)/2.0, bottom: 10, right: UIScreen.main.bounds.width.multiplied(by: 0.1)/2.0) 
    layout.scrollDirection = .horizontal 
    layout.minimumLineSpacing = UIScreen.main.bounds.width.multiplied(by: 0.1) 
    layout.minimumInteritemSpacing = UIScreen.main.bounds.width.multiplied(by: 0.1) // or any value you want 

    let collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: self.frame.width, height: 50), collectionViewLayout: layout) 
    collectionView.translatesAutoresizingMaskIntoConstraints = false 
    collectionView.backgroundColor = .red 
    collectionView.isPagingEnabled = true 
    return collectionView 
}() 
+1

Soulution parfaite! Merci :) – radioaktiv