SwiftUI - Build Your Second iOS App in Swift : Part One

Note: This article is fourth of the multi-part SwiftUI tutorial series; if you haven’t read the first article (SwiftUI - Beginning with SwiftUI) click here.

If you are a beginner and you find it difficult to understand things written in this article. Feel free to ask questions on my Reddit page or Twitter. Remember, you can do it. ; )

---

Navigation View, Lists and Forms are widely used in developing applications. Our Second iOS App will use all these types of View, and We will create a Contacts application with features limited to the educational purposes of this article. We will start by exploring Lists in SwiftUI; If you have been working with UIKit, you will find Lists in SwiftUI is entirely different. So, let’s start building our Second iOS App.

Download Project Files by clicking here.

Let’s Start

We will start by creating a Custom View for our List. Please download the project files if you haven’t and follow along.

Change the body of ContactView.swift file to the code mentioned below.

var body: some View {
        
        HStack(spacing: 12) {
            
            Text("S")
                .foregroundColor(.white)
                .frame(width: 40, height: 40, alignment: .center)
                .background(Color(.systemBlue))
                .clipShape(Circle())
            
            VStack(alignment: .leading) {
                Text("Steve Jobs")
                Text("steve@swiftpal.io")
                    .font(.footnote)
            }
            Spacer()
        }
        .padding()
    }

The best part about SwiftUI is the code is self-explanatory, but that can’t be a reason to get away without explaining to you guys the details of it.

As you guys can see, I have used a few modifiers to look our Text with a character “S” look better.

Using modifiers can be tricky for example using the  .clipShape(Circle()) modifier before the  .background(Color(.systemBlue)) will not produce a clipping effect.

So, if you get stuck somewhere and are not able to see the output you desire, try reordering your code.

If you guys don’t know what Modifiers are, please read my article Exploring Modifiers and Previews.

Your View should look like the one shown in the image below.

List

It’s time to create a new SwiftUI file for our List.

Choose File > New > File to open the template selector. In the User Interface section, select SwiftUI View and click Next. Name the file ContactList.swift and click Create.

In your  ContactList.swift  file, replace the  Text  with the code mentioned below

var body: some View {
     List(contacts) { item in
          ContactView()
     }
}

Note: In the List, we are passing contacts which is used from Contact.swift  file. There are two essential files pre-loaded in the Project Files available for download on the top of this article.

Now in your Canvas, click on Resume if the list is not rendered. You will see a list of static data, but this not what we want, right?

Let’s do some modifications in the ContactView.swift  file, please make the changes as mentioned below.

Note: The changes I have done are marked with comments consisting of numbers.

struct ContactView: View {
    
    var contact: Contact // 1
    
    var body: some View {
        
        HStack(spacing: 12) {
            
            Text(String(contact.firstName.first!)) // 2
                .foregroundColor(.white)
                .frame(width: 40, height: 40, alignment: .center)
                .background(Color(.systemBlue))
                .clipShape(Circle())
            
            VStack(alignment: .leading) {
                Text(contact.getFullName()) // 3
                Text(contact.email) // 4
                    .font(.footnote)
            }
            Spacer()
        }
        .padding()
    }
}

struct ContactView_Previews: PreviewProvider {
    static var previews: some View {
        ContactView(contact: contacts[0]) // 5
    }
}

Now finally in your  ContactList.swift  file change the line marked with a comment as mentioned below.

struct ContactList: View {
    var body: some View {
        List(contacts) { item in
            ContactView(contact: item) // 1
        }
    }
}

Click Resume in Canvas, and your view should look exactly like the screenshot shown below.

Now Run the application.

The screen you will see is ContactView, but what we want to see is the List of Contacts. So, open the SceneDelegate.swift file and do the changes in the line marked with the comment.

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            window.rootViewController = UIHostingController(rootView: ContactList()) // 1
            self.window = window
            window.makeKeyAndVisible()
        }
    }

Notice, We have changed the ContactView()  with ContactList() 

Now, if you rerun the application, you should see the list of Contacts.

Next, let’s embed our List in a Navigation View. Modify  ContactList.swift  file to match the code below.

var body: some View {
        NavigationView {
            
            List(contacts) { item in
                ContactView(contact: item)
            }

            .navigationBarTitle(Text("Contacts"))
        }
}

Let’s Run the application and see the final look of our Contacts List.

In the next part of Your Second iOS App, we will be learning about handling user’s input by adding deleting functionality to our List view.

Please don’t forget to subscribe to keep receiving updates about my new articles.

Click here to download the final project.

If you have any suggestions or questions, Feel free to connect me on Twitter. 😉

The next part of the article is available here.