Search code examples
iosuicollectionviewswiftuiios13

UICollectionView and SwiftUI?

How to create grid of square items (for example like in iOS Photo Library) with SwiftUI?

I tried this approach but it doesn't work:

var body: some View {
    List(cellModels) { _ in
        Color.orange.frame(width: 100, height: 100)
    }
}

List still has UITableView style:

enter image description here

Solution

  • iOS 18 Update:

    The ForEach.init(subviewOf:content:) and Group.init(subviewsOf:transform:) seem to provide the right solution. I highly encourage you to watch this short WWDC video. It highlights all of these new APIs.

    iOS 14 Update:

    Since iOS 14 (beta) we can use Lazy*Stack to at least achieve the performance of the collection view in the SwiftUI. When it comes to the layout of cells I think we still have to manage it manually on a per-row/per-column basis.

    Before iOS 14:

    One of the possible solutions is to wrap your UICollectionView into UIViewRepresentable. See Combining and Creating Views SwiftUI Tutorial, where they wrap the MKMapView as an example.

    By now there isn’t an equivalent of UICollectionView in the SwiftUI and there’s no plan for it yet. See a discussion under that tweet.

    To get more details check the Integrating SwiftUI WWDC video (~8:08).