How can you determine spacing between items in UICollectionView?

Question

I have a colors collectionView like this:
But the space between rows in my collection view is too big. I try to set minimumInteritemSpacing, minimumLineSpacing, sectionInset and try some way in stackoverflow but none of them are worked. Can anyone help me to fix this issue? Here's my code:

import UIKit

let reuseIdentifier = "ColorCell"

@objc protocol ColorMessageSettingDelegate{
    optional func changeColorText(colorPicker: ColorCollectionViewController, color: UIColor)
}

class ColorCollectionViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, ColorMessageSettingDelegate, UIScrollViewDelegate, UICollectionViewDelegateFlowLayout {
    var colors: [UIColor] = COLORS
    var selectedColor = -1
    var selectedImageColor = UIImage(named: "ic_selected")
    var delegate: ColorMessageSettingDelegate?
    @IBOutlet var pageControl: UIPageControl!
    @IBOutlet var colorCollectionView: UICollectionView!
    //var viewHeight: CGFloat = SCREEN_HEIGHT/2

    override func viewDidLoad() {
        super.viewDidLoad()

        let viewLayout = UICollectionViewFlowLayout()
        viewLayout.scrollDirection = UICollectionViewScrollDirection.Vertical
        viewLayout.minimumInteritemSpacing = 2
        viewLayout.minimumLineSpacing = 2
        viewLayout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0)

        self.colorCollectionView = UICollectionView(frame: self.colorCollectionView.frame, collectionViewLayout: viewLayout)`enter code here`

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        //#warning Incomplete method implementation -- Return the number of sections
        return 1
    }


    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        //#warning Incomplete method implementation -- Return the number of items in the section
        return colors.count
    }

    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as ColorCollectionViewCell
        cell.backgroundColor = colors[indexPath.row]
        if (indexPath.row == selectedColor) {
            //cell.iconStamp
            cell.iconStamp.hidden = false;
        }
        else {
            cell.iconStamp.hidden = true;
        }

        let pages = floor(collectionView.contentSize.width / collectionView.frame.width) + 1
        pageControl.numberOfPages = Int(pages)

        return cell
    }

    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        selectedColor = indexPath.row
        collectionView.reloadData()

        delegate?.changeColorText!(self, color: colors[selectedColor])
    }

    func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
        let pageWidth = colorCollectionView.frame.width
        let currentPage = colorCollectionView.contentOffset.x / pageWidth
        if (0 != fmod(currentPage, 1)){
            pageControl.currentPage = Int(currentPage) + 1
        } else {
            pageControl.currentPage = Int(currentPage)
        }
    }

    @IBAction func changeStampPage(sender: AnyObject) {
        var x: CGFloat = CGFloat(pageControl.currentPage) * colorCollectionView.frame.size.width
        colorCollectionView.setContentOffset(CGPointMake(x, 0), animated: true)
    }
}

Answer 1

If you are using storyboard to design your layout, use the Size inspector by selecting the UICollectionView

Answer 2

The problem with your code is that you're creating a flow layout and setting that on a collection view that you create in code, but never add to your view. You also have a collection view outlet, so I presume you made the collection view there (in the storyboard). Delete this line,

self.colorCollectionView = UICollectionView(frame: self.colorCollectionView.frame, collectionViewLayout: viewLayout)

Your viewDidLoad method should look like this,

override func viewDidLoad() {
    super.viewDidLoad()

    let viewLayout = self.colorCollectionView.collectionViewLayout as UICollectionViewFlowLayout // you should already have a layout object that came in with the collection view. This gets a reference to it
    viewLayout.scrollDirection = .Vertical
    viewLayout.minimumInteritemSpacing = 2
    viewLayout.minimumLineSpacing = 2
}

You don't need to set the sectionInset if you want it to be all zeros; that's the default.

Answer 3

CollectionView Delegates do the work for customizing cell according to task. First exentd UICollectionViewDelegate , UICollectionViewDelegateFlowLayout and use following delegate method :

#pragma mark UICollectionView Delegates
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    return CGSizeMake(100,100);
}

-(UIEdgeInsets)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    return UIEdgeInsetsMake(0, 8, 0, 8); // [ top, left, bottom, right ]
}

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
    return 2.0;
}

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
    return 1.0;
}