Note: This article is the last of the multi-part SwiftUI tutorial series, and the second part of Your Second iOS App tutorial; If you haven’t read Part One of this article (SwiftUI - Your Second iOS App : Part One) click here. ; if you haven’t read the first article of this series (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. ; )
In this article, we will be exploring how to handle the user’s input and navigate views. The final app will look something like the one shown below.
Click here to Download Project Files for this article.
Let’s Start
Create a new SwiftUI file and name it ContactDetail.swift .
Replace your struct with the one mentioned below.
struct ContactDetail: View {
var contact: Contact
var body: some View {
NavigationView {
VStack {
Text(String(contact.firstName.first!))
.font(.largeTitle)
.fontWeight(.medium)
.foregroundColor(.white)
.frame(width: 100, height: 100)
.background(Color(.systemBlue))
.clipShape(Circle())
Text(contact.getFullName())
.font(.largeTitle)
.padding()
HStack {
VStack(alignment: .leading) {
Text("email")
Text(contact.email)
.foregroundColor(Color(.systemBlue))
.padding(.top, 5)
Divider()
}
Spacer()
}
.padding()
Spacer()
}
}
}
}
struct ContactDetail_Previews: PreviewProvider {
static var previews: some View {
ContactDetail(contact: contacts[0])
}
}
Our struct starts with a property:
var contact: Contactthe contact will be received here from the Contacts List view.
Next, the body of the struct starts with VStack embedded in NavigationView. There isn’t much to explain here as the code is self-explanatory.
If you find anything difficult to understand, feel free to ask questions in the comment section.
Navigating Views
Navigating Views in SwiftUI is easy and won’t require much coding.
Let's start by opening the ContactList.swift file and change the code to match with the one below.
List(contacts) { item in
// Changes done below
NavigationLink(destination: ContactDetail(contact: item)) {
ContactView(contact: item)
}
}
That’s it. You can now Navigate to Contact Detail view. You can see in the parameters of Navigation Link as the destination we have passed our Contact Detail view as an argument with the contact, which will be selected by the user.
It is all that takes to Navigate to a View in SwiftUI.
Click on the Live Preview button located in the Canvas next to your Preview, and click on any contact to see the Contact Detail View.
In the next section, you’ll learn how to handle the user’s input by adding a delete functionality in your List view.
Handling User’s Input
Before we start with user’s input we need to do some modifications in the ContactDetail.swift file.
So, open it, and start by extracting our code to make it look more readable. Command + Click the HStack in which the email is shown (Refer to the image), and click on Extract Subview, rename your subview to EmailView .
Create a new SwiftUI file, name it EmailView and move the extracted code in it.
Next, in your EmailView.swift file, add a new variable and make sure your file contains the same code as below. Don’t forget to make changes in your second struct.
struct EmailView: View {
var contact: Contact // 1
var body: some View {
HStack {
VStack(alignment: .leading) {
Text("email")
Text(contact.email)
.foregroundColor(Color(.systemBlue))
.padding(.top, 5)
Divider()
}
Spacer()
}
.padding()
}
}
struct EmailView_Previews: PreviewProvider {
static var previews: some View {
EmailView(contact: contacts[0]) // 2
.previewLayout(.sizeThatFits)
}
}
If you see your Canvas now, the size of the Preview has changed. We should not be asking Xcode to render whole devices when it’s not required, which will in return reflect with Xcode working smoother.
Next, let’s do the final bit of this tutorial. Open your ContactList.swift file and modify your code with the one shown below.
struct ContactList: View {
@State private var contactsList = contacts
var body: some View {
NavigationView {
List {
ForEach(contactsList) { contact in
NavigationLink(destination: ContactDetail(contact: contact)) {
ContactView(contact: contact)
}
}
.onDelete(perform: delete(at:))
}
.navigationBarTitle(Text("Contacts"))
}
}
func delete(at offsets: IndexSet) {
contactsList.remove(atOffsets: offsets)
}
}
In the above code, We have added a new property for our List to reflect the changes done to our contacts list, which in this code is about deleting the contact.
Next, in our List we have removed the existing function, which was iterating our array and used ForEach instead to support our deletion of cells.
Next, just before the end of our List we have used the onDelete(perform:) modifier and passed delete(at:) function as an argument, which will be called whenever the user tries to delete the contact.
Next, we have created delete(at:) function, which we passed in the argument to remove the contact from the list.
Voila! You have just coded your Second iOS App.
Now, Click on the Live Preview button, and try deleting the contacts by swiping the cells.
If you have any suggestions or questions, Feel free to connect me on Twitter. 😉
I hope you guys enjoyed exploring SwiftUI with me, please subscribe to my website, so. that I can keep you posted about my new articles.