SwiftUI - List Example - iOSDevCenter

As you have seen drastic change in SwiftUI code. Updates in software industry is necessary. Time by time everything gets setup well as like when Swift was introduces. When Autolayout introduced and now we all are very handy with the same.

After reviewing several forums over internet i feels i mean it will take time to be used in program. For the development of SwiftUI you need Xcode 11 Beta or onwards. SwiftUI is providing live preview of your code in Canvas section but you will must have to macOS Catalina.

Let's come to the point. List is the UITableView of Swift. Key point for List is it's no longer need of delegate and datasource methods like numberOfRows and cellForRowAt to declare cells. It's totally different than Swift.

Create a new project

There is a language option. If you select ObjC then User Interface will have only Storyboard option If you select Swift as a language you will find SwiftUI and Storyboard. Select SwiftUI and go ahead.

Above is the default look for SwiftUI project. By running without any change in the code Hello World will looks as it is.

- ContentView.swift will be as ViewController in Swift.

- Default loading of ViewController was controlled from Storyboard as it's Initial ViewController for the project.

- For same in SwiftUI you can find the code in SceneDelegate.swift how ContentView is initialised. And logic behind SceneDelegate is written in info.plist

- To load SceneDelegate info.plist has configuration part and it is calling from AppDelegate.swift. You can check "Default Configuration".

Text("Hello World") is the Label for SwiftUI. In SwiftUI you can find UI controls has changes for name and syntax too.

To proceed in our target we will create Array for Contacts.

struct Contact: Identifiable {
    var id = UUID()
    var name: String
    var image: String
    var number: String
}

Create an array for the same:

let arrayContacts: [Contact] = [
        Contact(name: "Chetan Prajapati", image: "default", number:"+919999999999"),
        Contact(name: "Kirit Modi", image: "default", number: "+919999999999"),
        Contact(name: "Rahul Mehta", image: "default", number: "+919999999999"),
        Contact(name: "Jay Sharma", image: "default", number: "+919999999999"),
        Contact(name: "Maya Fins", image: "default", number: "+919999999999")
    ]

To check simple List:

var body: some View {
     List {
        Text("Hello Moon!")
        Text("Hello Earth!")
        Text("Hello Sun!")
     }
 }

It will show you output as above. Yes above code is enough to display that such list. Here you don't need to give a style of the cell or no numberOfRow and cellForRowAtIndexPath.

Let's Go ahead.

List(arrayContacts) { contact in
        HStack {
            Image(contact.image).resizable().frame(width: 25, height: 25, alignment: .center)
              VStack(alignment: .leading) {
                  Text(contact.name)
                  Text(contact.number)
               }
           }
       }

Above code will done our stuff. Let's see the output.

I hope you are very familiar with closure. We have same thing with the List. Iteration of arrayContacts will draw cell

Let's understand basics of code.

- HStack, VStack, ZStack are the StackViews type to arrange views.

- resizable() is necessary to write when you wish to control content mode for the Image to fit into given size. Otherwise image size will be actual dimension of the Image.

- VStack(alignment: .leading) If we not write this then SwiftUI will by default put the label in Centre aligned.

Now let's do same thing with Custom Cell:

Create New swift file or add new struct into same file. Move List closure code into body of newly created struct's body. Create variable for the Contact struct.

struct ContactCell: View {

var contact: Contact!

var body: some View {
    HStack {
        Image(contact.image).resizable().frame(width: 25, height: 25, alignment: .center)
        VStack(alignment: .leading) {
            Text(contact.name)
            Text(contact.number)
        }
     }
   }
}

And Below is the updated code for List:

var body: some View {
        List(arrayContacts) { contact in
         ContactCell(contact: contact)
      }
  }

You will find same output as previous one. Nothing changed!

Cool!!!

Something missing here? Guess.... It's NavigationBar. :)

Below code will do.

var body: some View {
        NavigationView {
            List(arrayContacts) { contact in
                ContactCell(contact: contact)
            }.navigationBarTitle("My Contacts")
        }
    }