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 t
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?
Yes, it looks like it is rendered on to a layer. You should read the Quartz 2D Programming Guide to get a handle on drawing and working with layers.
To divide the space equally in all devices (3 boxes/buttons horizontally) I found this answer answer. Is this the right approach?
This would be an option, but would not give you the separators look you like from your screen shot.
I would have my cell view's backgroundColor is set to clearColor, and then set the UICollectionView's backgroundView property to a view containing your separators and the blur effect. Make sure the UICollectionView's backgroundColor property is set to clearColor.
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).
If you use the backgroundView property of the UICollectionView to handle your separators and blur then your cells would only need to have their backgroundColor set to clearColor.
You should note that there is more than one way to do this, each way will have it's own drawbacks choose what works for you best.