Getting Started with SwiftUI

Create your basic ListView with Swift UI. | TableView in SwiftUI

ListView Previews

Requirements -

Before getting started with the SwiftUI you required Xcode 11 or later and It will support macOS Catalina 11.15 version or latest.

Creating ListView -

Open XCode creates a new project.

If you having inside your XCode for the Project User Interface Storyboard then you need to change it with SwiftUI.

SwiftUI User interface

After that open your project then you will be seen in the place of ViewController now ContentView come. Once you will be open ContentView it will look like the below image.

ContentView

On the top left side Click on the resume then it will start to display preview automatically.

Writing your code for the ListView now.

struct ContentView: View {
    var body: some View {
        List(0...5, id: \.self){ value in
           Text("Values - \(value)")
        }
    }
}

Preview for this code will be-

Basic List View

Now I am going to add some more components inside the ListView.

Creating a new Cell with more components.

struct ContentView: View {
    let placeList = PlaceDetails.fetchMockList()
    
    var body: some View {
        List(placeList, id: \.name){ model in
            HStack(alignment: .top){
                VStack(alignment: .leading){
                    Text(model.name)
                        .foregroundColor(.white)
                        .font(Font.headline)
                        .padding()
                        .background(Color.white.opacity(0.05))
                    Text(model.details)
                        .font(Font.subheadline)
                        .foregroundColor(.white)
                        .padding()
                        .background(Color.white.opacity(0.05))
                }.background(Color.black.opacity(0.3))
                    .background(Image(model.image)
                        .scaledToFit()
                        .padding(.all, 1))
            }.background(Color.white)
                .clipped()
        }
    }
}

adding Navigation bar

var body: some View {
      NavigationView{
            //... you cell code
        .navigationBarTitle(Text("Place List"))
      } 
}

Now making code more clean and clear for the final result. Creating a new SwiftUI file for the Custom cell.

struct PlaceDetailCell: View {
    //test data model 
    let model: PlaceDetails
    var body: some View{
        //Cell code add here 
    }
}

Your final code for the ListView.

struct ContentView: View {
    let placeList = PlaceDetails.fetchMockList()
    
    var body: some View {
        NavigationView{
            List(placeList, id: \.name){ model in
                PlaceDetailCell(model: model)
                 .shadow(color: .black, radius: 5)
                 .padding(20.0)
                }
            .navigationBarTitle(Text("Place List"))
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

The Previews will look like the cover photo which I have added to the top of the blog.

What’s inside the cell?

StackView, Labels, ImageView, Shadow, and opacity.

You can find this full source code from the here- SwiftUI-BasicListView.

Conclusion

In this part, you come to know how to create ListView in SwiftUI. Inside this code, you will get thepadding code for the UI elements. For make UI more attractive added few details like shadow and Navigation Bar . One more important key 🔑 inside this part if have noticed List(0…5, id: \.self){ value in why id ? It’s required for the identification of the particular cell id.

SwiftUI is more advance and reducing the code for the UI and making it easier.

I hope you like this post. 🎉

Thanks for reading 🙌🏼

If you having any queries regarding this tutorial? | If you think you can do more simple way or little bit more extra things with this stuff please let me know questions, feedback or comments -on Twitter