Grid layout with CollectionView in Swift
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
Result:
1) First of all, I think you need to change how you look at that layout. There are no separators. Just UICollectionView Cells with spacing between cells, lowered opacity and some blur.
This settings will give you something close to image you posted, you can edit it for your needs later:
On storyboard go to your UICollectionView's size inspector.
Min Spacing-> For Cells = 2, For Lines = 2.
Section Insets-> Left = 7, Right = 7.
2) I'm using this on my app to divide space equally for 3 cells. Changed it for your settings. Just copy/paste and you are good to go.
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize { let screenSize: CGRect = UIScreen.mainScreen().bounds let screenWidth = screenSize.width return CGSize(width: (screenWidth/3)-6, height: (screenWidth/3)-6); } }
And as the last step put two images on top of CollectionView, to the left and right of the view and make widths equal to 7 and heights equal to UICollectionView. These images should have same opacity/background with cells. This will make it look like the image you want.
I hope my answer works for you. Good luck.
The first thing I would like to say is, your all above result can be achieved from UICollectionViewFlowLayout, Which is the default layout for UICollectionView.
UICollectionViewDelegateFlowLayout
has all of the methods that can fulfill your requirements.
The flowLayout has
minimumLineSpacingForSectionAtIndex
andminimumInteritemSpacingForSectionAtIndex
for giving the spacing between the cells(both horizontally and vertically).Its not a good way of giving cell frame in
cellForItemAtIndexPath
(like you submit the answer link). For that flowLayout provides a delegate for sizing cellsizeForItemAtIndexPath
.About the third question, yes you can use
UIVisualEffectView
for bluring purpose but compatible for only after iOS 8 and has issue with iPad2 I guess. But for your problem I would blur each cell rather than collectionView itself(since cell spacing is not blur).