Grid layout with CollectionView in Swift

Question

I would like to achieve this result:

Searching around I found out that probably the way to do it is using UICollectionView, so no problem with that since there are many tutorials and questions on Stack Overflow. I have 3 questions:

1. I cannot find anything about the "separators" (the line that divides all the boxes). I like that it doesn't touch the screen borders horizontally. Is it done programmatically?

2. To divide the space equally in all devices (3 boxes/buttons horizontally) I found this answer answer. Is this the right approach?

3. For the Blur effect I found this answer: How to implement UIVisualEffectView in UITableView with adaptive segues

For a TableView it would be:

if (!UIAccessibilityIsReduceTransparencyEnabled()) { tableView.backgroundColor = UIColor.clearColor() let blurEffect = UIBlurEffect(style: .Light) let blurEffectView = UIVisualEffectView(effect: blurEffect) tableView.backgroundView = blurEffectView } 

Can I do something like this?

     @IBOutlet var collectionView: UICollectionView!     if (!UIAccessibilityIsReduceTransparencyEnabled()) {     collectionView.backgroundColor = UIColor.clearColor()     let blurEffect = UIBlurEffect(style: .Light)     let blurEffectView = UIVisualEffectView(effect: blurEffect)     collectionView.backgroundView = blurEffectView     } 

Answer 1

Create the UICollectionViewController like this in a file that sub-classes from UICollectionViewController:

convenience override init() {     var layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()     layout.itemSize = CGSizeMake(<width>, <height>)     // Setting the space between cells     layout.minimumInteritemSpacing = <Space between columns>     layout.minimumLineSpacing = <Space between rows>     return (self.init(collectionViewLayout: layout)) } 

In the viewDidLoad you an set the background color like this:

self.collectionView.backgroundColor = UIColor.orangeColor() 

My guess is you can set a background image like this:

self.collectionView?.backgroundColor = UIColor(patternImage: UIImage(named: "image.png")!) 

The blur effect that you found looks good. I am having trouble figuring out how it would work though. Probably set it using the backgroundView property.

I'll update if I find the answer.

Update:

Here is an idea of something that might work for blurring the cells.

Create a cocoa-touch class that sub-classes from UICollectionViewCell, then add this code to it:

convenience override init(frame: CGRect) {     self.init(frame: frame)     var blurEffect: UIVisualEffect     blurEffect = UIBlurEffect(style: .Light)     var visualEffectView: UIVisualEffectView     visualEffectView = UIVisualEffectView(effect: blurEffect)     visualEffectView.frame = self.maskView!.bounds     self.addSubview(visualEffectView) }  override func layoutSubviews() {     super.layoutSubviews()     self.maskView!.frame = self.contentView.bounds } 

Then in the CollectionViewController file, in the viewDidLoad, change this line of code:

self.collectionView!.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier) 

Change UICollectionViewCell.self to <Name of CollectionViewCell file>.self