How to implement CollectionView in SwiftUI

Debabrata Roy

28 January 2021

In this tutorial, we will learn about CollectionView and how can we create CollectionView using List & ScrollView in SwiftUI.

SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift. Build user interfaces for any Apple device using just one set of tools and APIs. With a declarative Swift syntax that’s easy to read and natural to write, it works seamlessly with new Xcode design tools to keep your code and design perfectly in sync. Automatic support for Dynamic Type, Dark Mode, localization, and accessibility means your first line of SwiftUI code is already the most powerful UI code you’ve ever written.

let’s create the Collection view using List and display random colours collection.

Getting Started

SwiftUI version: 2
iOS version: 14
Xcode: 12

Using List:

First Create a SwiftUI project.

List() {
    ForEach(0..<8) { i in
        HStack {
            ForEach(0..<3) { j in
                ZStack(alignment: .center) {
                }
                .frame(width:size, height:size)
                .background(Color.random)
            }
        }
    }
}

List() {

ForEach(0..<8) { i in

HStack {

ForEach(0..<3) { j in

ZStack(alignment: .center) {

}

.frame(width:size, height:size)

.background(Color.random)

}

var size = UIScreen.main.bounds.width/3-16

1	var size = UIScreen.main.bounds.width/3-16

Here, I have use 2 ForEach loop to create Collection View and I have write a extension of Color.

extension Color {
    static var random: Color {
        return Color(
            red: .random(in: 0...1),
            green: .random(in: 0...1),
            blue: .random(in: 0...1)
        )
    }
}

extension Color {

static var random: Color {

return Color(

red: .random(in: 0...1),

green: .random(in: 0...1),

blue: .random(in: 0...1)

)

}

Thats enough code to create a CollectionView Using List.

Screenshot

Using ScrollView:

We can also create collectionview layout using ScrollView. Just Replace ScrollView with ScrollView

ScrollView{
    ForEach(0..<8) { i in
        HStack {
            ForEach(0..<3) { j in
                ZStack(alignment: .center) {
                }
                .frame(width:size, height:size)
                .background(Color.random)
            }
        }
    }
}

ScrollView{