Grid layout with CollectionView in Swift

后端 未结 5 926
失恋的感觉
失恋的感觉 2021-01-30 14:04

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

5条回答
  •  北恋
    北恋 (楼主)
    2021-01-30 14:23

    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.

提交回复
热议问题