Collection View positioning like instagram app swift

Question

I’ve been programming app like instagram for learn swift and ios programming. Now I’d created UIStackView that would be a top bar, and 3 bottom buttons that posts requests and change images.

The problem that I have - I can’t set position, width and delete cell spacing on CollectionView. I want to: CollectionView full width on all devices cell spacing between images = 1 CollectionView should be positioned between top bar and bottom buttons full height

What did I have now?

screen of my emulator: http://prntscr.com/d1mmu1

screen of my storyboard: http://prntscr.com/d1mnhr

I’d tried do this with StoryBoard, had changed all of parametres but hasnt reached my goals. If I add equal height to CollectionView and main view of app it takes all screen and after scrolling it disapears… How can I set that position and width, height, and cell spacing on it?

here is a code of my viewcontroller for CollectionView -

// MARK: - UICollectionViewDataSource protocol

// tell the collection view how many cells to make
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return self.items.count
}

// make a cell for each cell index path
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    // get a reference to our storyboard cell
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath as IndexPath) as! MyCollectionViewCell

    // Use the outlet in our custom class to get a reference to the UILabel in the cell
    cell.imageView.image = UIImage(named: "main/p\(self.items[indexPath.item].code)/main/main.jpg")
    print("main_card_images/p\(self.items[indexPath.item].code)/main/main")
    return cell
}

// MARK: - UICollectionViewDelegate protocol

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    // handle tap events
    print("You selected cell #\(indexPath.item)!")
    print(self.items[indexPath.item])
}

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    let yourNextViewController = (segue.destination as! ViewControllerCard)
    let indexPath = collectionView.indexPath(for: sender as! UICollectionViewCell)
    yourNextViewController.mainCardImage = self.items[(indexPath?.item)!]
}

check my answer http://stackoverflow.com/questions/40325327/adjust-cellsize-for-fit-all-screens/40325452#40325452 — Joe, Nov 01 '16 at 11:27

score 1 · Answer 1 · edited May 23 '17 at 10:32

Try this code.

Note : Below code works only for 4 column layout tested on all iPhone models.If you want different number of column.You need to play with cell width and height or look at my other answer Adjust cellsize for fit all screens?

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: IndexPath) -> CGSize {
    let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
    layout.sectionInset = UIEdgeInsets(top: 3, left: 3, bottom: 3, right: 3)
    layout.minimumInteritemSpacing = 03
    layout.minimumLineSpacing = 03
    layout.invalidateLayout()

    return CGSize(width: ((self.view.frame.width/4) - 4), height:((self.view.frame.width / 4) - 4));
}

Output:

Collection View positioning like instagram app swift

1 Answers1