How to make nine cells side by side in collection view [Xcode] [Swift 3]

Question

I have never worked with collection view before and although there are several tutorials I didn't find the answer on my questions. I use a collection view inside a ViewController, not inside a CollectionViewController.

I want to make an special number of cells (in my project: nine) side by side. But I want to have borders around the cells (eventually they could be have a different thickness, but that is not important).

Can anybody help me?

Thank you.

score 1 · Answer 1 · edited May 23 '17 at 12:26

1

This will help you to get started with horizontal scrolling Creating a horizontal scrolling collectionview in Swift

For setting of the cell you will need to implement UICollectionViewDelegate and method (here you can set your cell with data):

func dequeueReusableCell(withReuseIdentifier identifier: String, for indexPath: IndexPath) -> UICollectionViewCell

just do not forget to register nib or class for cell otherwise it will not work(you do not need to do it in code, if you add the cell to the collection view in storyboard)

edited May 23 '17 at 12:26

Community

1
1

answered Apr 29 '17 at 08:51

Luzo

1,336
10
15

I am not completely new with this. I have worked several times with tableViews and I can program it. I have made a good working program with a working collection view `UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout, UITextFieldDelegate`, but the problem is: how can I format it, that nine cells are side by side. – Bla Bla Apr 29 '17 at 09:32
ok so then set `collectionViewFlowLayout.scrollDirection = .horizontal` – Luzo Apr 29 '17 at 09:59

score 0 · Answer 2 · answered Apr 29 '17 at 10:01

Tell me if this can help you.

I don't use Storyboard.

AppDelegate.swift

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.

        window = UIWindow(frame: UIScreen.main.bounds)
        window?.makeKeyAndVisible()

        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal

        let nineCellsController = NineCellsController(collectionViewLayout: layout)

        window?.rootViewController = nineCellsController
        return true
    }

NineCellsController.swift

import UIKit

class NineCellsController: UICollectionViewController, UICollectionViewDelegateFlowLayout {

    let cellIdentifier = "cellIdentifier"
    let numberOfCells = 9

    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView?.backgroundColor = .white

        setupCollectionView()    
    }

    func setupCollectionView() {
        collectionView?.register(UICollectionViewCell.self, forCellWithReuseIdentifier: cellIdentifier)
    }

    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return numberOfCells
    }

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellIdentifier, for: indexPath)
        cell.backgroundColor = randomColor()
        return cell
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: view.frame.size.width, height: view.frame.size.height)
    }

    fileprivate func randomColor() -> UIColor {
        let red = CGFloat(drand48())
        let green = CGFloat(drand48())
        let blue = CGFloat(drand48())
        return UIColor(red: red, green: green, blue: blue, alpha: 1)
    }
}

How to make nine cells side by side in collection view [Xcode] [Swift 3]

2 Answers2