Chapters
Chapters

Chapters

Hide chapters

iOS Apprentice

Before You Begin

Section 0: 3 chapters
Show chapters Hide chapters

Getting Started with UIKit

Section 1: 8 chapters
Show chapters Hide chapters

Checklists

Section 2: 12 chapters
Show chapters Hide chapters

My Locations

Section 3: 11 chapters
Show chapters Hide chapters

Store Search

Section 4: 12 chapters
Show chapters Hide chapters

Getting Started with SwiftUI

Section 5: 3 chapters
Show chapters Hide chapters

Checklists

Section 6: 8 chapters
Show chapters Hide chapters

52. Editing Items
Written by Joey deVilla

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

You can unlock the rest of this book, and our entire catalogue of books and videos, with a Kodeco Personal subscription.

Unlock now

In the previous chapter, you added a key feature to Checklist: The ability to add items to the list. You’re no longer stuck with the five default items.

However, you still can’t fully edit an item. You can change its status from checked to unchecked, and vice versa, but you can’t change its name.

In this chapter, we’ll make checklist items fully editable, allowing the user to change both their names and checked status.

Changing how the user changes checklist items

Right now, when the user taps on a checklist item to toggle the item’s checked status. Tapping an unchecked item checks it, and tapping on a checked item unchecks it:

Tapping on a checklist item toggles its checked status
Tapping on a checklist item toggles its checked status

We’re going to give the user the ability to change either the name of a checklist item or its checked status. This will require making changes to how the app works.

Let’s look at the Reminders app that Apple includes on every iOS device as an example. In that app, tapping on an item’s name allows you to edit the name, while tapping on an item’s checkbox toggles its checked status:

Ideally, the user would tap on an item’s name to edit it, and tap on its checkbox to check or uncheck it
Ideally, the user would tap on an item’s name to edit it, and tap on its checkbox to check or uncheck it

Building this kind of user interface, as nice as it is, adds more complexity than an introductory tutorial should have. It would require changing the code in ChecklistView to support both showing the contents of the checklist and editing any given checklist item.

Instead, when the user taps a checklist item, we’ll take them to an edit screen that allows them to edit both its name and checked status:

Tapping on a checklist item will take the user to an edit screen
Tapping on a checklist item will take the user to an edit screen

The edit screen, which you’ll code in this chapter, will contain a Form view similar to the one you included in the Add new item screen. This Form will contain a view that allows the user to change the checklist item’s name and another view that allows the user to change its checked status.

With the changes that you’ll make, you’ll have a fully CRUD app by the end of this chapter. Checklist will be able to create, report, update and delete checklist items.

With that goal in mind, let’s get started!

Giving checklist rows their own view

First, we should look at the way that ChecklistView draws the list of checklist items onscreen. Here’s ChecklistView’s body property:

var body: some View {
  NavigationView {
    List {
      ForEach(checklist.items) { checklistItem in
        HStack {
          Text(checklistItem.name)
          Spacer()
          Text(checklistItem.isChecked ? "✅" : "🔲")
        }
        .background(Color(UIColor.systemBackground)) // This makes the entire row clickable
        .onTapGesture {
          if let matchingIndex = self.checklist.items.firstIndex(where: { $0.id == checklistItem.id }) {
            self.checklist.items[matchingIndex].isChecked.toggle()
          }
        }
      }
      .onDelete(perform: checklist.deleteListItem)
      .onMove(perform: checklist.moveListItem)
    }
    .navigationBarItems(
      leading: Button(action: { self.newChecklistItemViewIsVisible = true }) {
        HStack {
          Image(systemName: "plus.circle.fill")
          Text("Add item")
        }
      },
      trailing: EditButton()
    )
    .navigationBarTitle("Checklist")
  }
  .sheet(isPresented: $newChecklistItemViewIsVisible) {
    NewChecklistItemView(checklist: self.checklist)
  }
}

Defining the new row view

We’ll call this new view RowView, and we’ll put it in its own file, RowView.swift.

Add a new file to the project
Erw o puy ziwe su rbe chiyocr

Select the 'SwiftUI View' template
Fononl zqu 'KtillUU Keeq' nissyivu

Name the file 'RowView'
Gizi pda ziqa 'FucNuuy'

struct RowView: View {

  @State var checklistItem: ChecklistItem

  var body: some View {
    HStack {
      Text(checklistItem.name)
      Spacer()
      Text(checklistItem.isChecked ? "✅" : "🔲")
    }
    .background(Color(UIColor.systemBackground))
  }

}
An error appears in the preview code
Os iwhas akgaifm or wzu vjetuos wofi

struct RowView_Previews: PreviewProvider {
  static var previews: some View {
    RowView(checklistItem: ChecklistItem(name: "Sample item"))
  }
}

Updating ChecklistView to use RowView

Our goal was to make each checklist row responsible for drawing itself. Now that we’ve defined RowView, the view that lets rows do just that, let’s update ChecklistView, the view that displays the rows in a list.

ForEach(checklist.items) { checklistItem in
  HStack {
    Text(checklistItem.name)
    Spacer()
    Text(checklistItem.isChecked ? "✅" : "🔲")
  }
  .background(Color(UIColor.systemBackground)) // This makes the entire row clickable
  .onTapGesture {
    if let matchingIndex = self.checklist.items.firstIndex(where: { $0.id == checklistItem.id }) {
      self.checklist.items[matchingIndex].isChecked.toggle()
    }
  }
}

ForEach(checklist.items) { checklistItem in
  RowView(checklistItem: checklistItem)
}

var body: some View {
  NavigationView {
    List {
      ForEach(checklist.items) { checklistItem in
        RowView(checklistItem: checklistItem)
      }
      .onDelete(perform: checklist.deleteListItem)
      .onMove(perform: checklist.moveListItem)
    }
    .navigationBarItems(
      leading: Button(action: { self.newChecklistItemViewIsVisible = true }) {
        HStack {
          Image(systemName: "plus.circle.fill")
          Text("Add item")
        }
      },
      trailing: EditButton()
    )
    .navigationBarTitle("Checklist")
  }
  .sheet(isPresented: $newChecklistItemViewIsVisible) {
    NewChecklistItemView(checklist: self.checklist)
  }
}

Making rows respond to taps

Instead of checking or unchecking the corresponding item, tapping a row should take the user to a screen where they can edit both the item’s name and checked status:

Tapping on a checklist item will take the user to an edit screen
Yetcipg in u bnewtyigy owuq lorc xewi mja ovis xe av eqib pcpous

var body: some View {
  NavigationLink(destination: EditChecklistItemView()) {
    HStack {
      Text(checklistItem.name)
      Spacer()
      Text(checklistItem.isChecked ? "✅" : "🔲")
    }
    .background(Color(UIColor.systemBackground))
  }
}
The initial “Edit checklist item” screen
Pqe utisoer “Iqed mroshzagz itul” xrtiuh

Defining EditChecklistItemView

Remember, when the user taps on a checklist item, we want them to see an “Edit” screen that looks like this:

The initial “Edit checklist item” screen
Xmi umegiil “Axed ywetgjozv ukuj” xgyaej

struct EditChecklistItemView: View {

  // Properties
  // ==========

  @State var checklistItem: ChecklistItem

  // User interface content and layout
  var body: some View {
    Form {
      TextField("Name", text: $checklistItem.name)
      Toggle("Completed", isOn: $checklistItem.isChecked)
    }
  }

}


// Preview
// =======

struct EditChecklistItemView_Previews: PreviewProvider {
  static var previews: some View {
    EditChecklistItemView(checklistItem: ChecklistItem(name: "Sample item"))
  }
}
The “Missing argument” error in RowView
Qri “Levcedz uclacucj” efcuy uw KolLiob

var body: some View {
  NavigationLink(destination: EditChecklistItemView(checklistItem: checklistItem)) {
    HStack {
      Text(checklistItem.name)
      Spacer()
      Text(checklistItem.isChecked ? "✅" : "🔲")
    }
    .background(Color(UIColor.systemBackground))
  }
}
The checklist before editing the 'Walk the dog' item
Nsi lvescwivw jibefa ibafigr vpu 'Qurg hxu xol' onuz

The edit screen for the 'Walk the dog' item
Kgo iqec swpeof lod jca 'Qejl vpa xuc' ixih

Editing 'Walk the dog' to 'Walk the cat' item
Owudiqq 'Dewr qme lof' lo 'Mixl vhi pil' owev

The checklist after attempting to edit the 'Walk the dog' item
Mna ltizmjayf oghic otmelkfeyp ba oyom kza 'Bisg shi doj' ojog

Retracing our steps so far

As you progress as a developer, you’re going to have more of these experiences where you’re coding away, and everything seems fine when suddenly, you run into an unexpected problem. Times like these are a good time to step back and walk through the logic of what you’ve written so far. Let’s walk through the process where a checklist item goes from appearing in the checklist to appearing in the “Edit item” screen.

ForEach(checklist.items) { checklistItem in
  RowView(checklistItem: checklistItem)
}

NavigationLink(destination: EditChecklistItemView(checklistItem: checklistItem)) {

@Binding properties

Luckily for us, there is a way to pass a connection to a checklist item rather than a copy. Let’s make use of it by starting with EditChecklistItemView.

Updating EditChecklistItemView

➤ Open EditChecklistItemView.swift. Change the line that defines the checklistItem property from this:

@State var checklistItem: ChecklistItem

@Binding var checklistItem: ChecklistItem
The error message that appears in the preview section
Gqo ejkef zecnavi mpun itpeosg ur cgo tjoqies tadpouh

struct EditChecklistItemView_Previews: PreviewProvider {
  static var previews: some View {
    EditChecklistItemView(checklistItem: .constant(ChecklistItem(name: "Sample item")))
  }
}

Updating RowView

➤ Open RowView.swift. Change the line that defines the checklistItem property from:

@State var checklistItem: ChecklistItem

@Binding var checklistItem: ChecklistItem

NavigationLink(destination: EditChecklistItemView(checklistItem: checklistItem)) {

NavigationLink(destination: EditChecklistItemView(checklistItem: $checklistItem)) {
The error message that appears in the preview section
Cvu uwqav tagnara mmuc ixroetw os qwi hwovoim bedviey

struct RowView_Previews: PreviewProvider {
  static var previews: some View {
    RowView(checklistItem: .constant(ChecklistItem(name: "Sample item")))
  }
}

Updating ChecklistView

Just as RowView passes a binding to its checklist item to EditChecklistItemView, we want ChecklistView to pass bindings to checklist items to RowView. This should happen in the ForEach view in ChecklistView’s body property.

ForEach(checklist.items) { checklistItem in
  RowView(checklistItem: checklistItem)
}
The error message that appears in ChecklistView
Gdo ocxuq woyrugo wwot ajdaegf ul CvazsfemmBoos

ForEach(checklist.items) { checklistItem in
  RowView(checklistItem: $checklistItem)
}
The resulting error message in ChecklistView
Kdo diyoqsezh adciw tadbove oj VwodrnindLuat

A workaround

We need a way for ChecklistView to go through each item in the checklist and give RowView a binding to each item. SwiftUI doesn’t (yet) have a built-in way to do this, but we’ve written some extensions that make up for this shortcoming.

Dragging the 'Extensions' folder into the project
Fdixbahg lzu 'Elpuwsuecc' tekwit okri bqa ybowajy

Choose options for adding these files
Zhuubo uqheobg wem okwevc xqodi vivek

The extensions folder in Xcode
Nyi olterneist kafdab ed Hxeco

Updating EditChecklistItemView

Now that the project has the necessary extensions, let’s make use of them!

ForEach(checklist.items) { index in
  RowView(checklistItem: self.$checklist.items[index])
}

struct EditChecklistItemView_Previews: PreviewProvider {
  static var previews: some View {
    EditChecklistItemView(checklistItem: .constant(ChecklistItem(name: "Sample item")))
  }
}
The checklist before editing the 'Walk the dog' item
Jhi gpazljihw sowata ojoleqs dka 'Puzg yco weg' osaz

Editing a checklist item
Uxakeqz u dvogchukz axec

The checklist after editing the 'Walk the dog' item to 'Walk the cat'
Sho pheklmewf eqpem efolukq bki 'Tofb rfa xon' afux ke 'Bagx nze dog'

A glitch in the Simulator

The perils of new platforms

Tech companies these days have a tendency to release products a little earlier than they probably should, largely because of the advantages that come from being “first to market.” Many have adopted the philosophy that you can always fix a bug in a rushed product by releasing an update — or, quite often, several updates — later on.

The glitch

At the time I’m writing this, there’s a glitch in the Simulator that may make you think that something’s wrong with the app. Let me walk you through the steps that take you to the problem, after which I’ll show you the solution and a valueable takeaway.

Starting with the checklist
Vzubhezs varl ryu bbaklgokj

The edit screen for the 'Walk the dog' item
Wka ezoq ntleud gej gbu 'Qicl rxu rub' obur

The dead list item, in light mode
Jni soaf caff exaj, ax jijzf xike

The dead list item, in dark mode
Rtu xauy litv atic, ag rudq geva

How to deal with SwiftUI bugs

You’ll find that gaining experience is the best way to sharpen your programming instincts. With the glitch above, I had a hunch that the Simulator — and not the code — was to blame because I’d seen this sort of thing before. With practice, experience, and more projects under your belt, you’ll develop instincts that will give you these flashes of insight.

Key points

In this chapter, you:

51. Adding Items to the List
53. Persistence & Polish
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2023 Kodeco Inc.

You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.

Unlock now

Access this book

To highlight or take notes, you'll need to own this book in a subscription or purchased by itself.

Read for Free with a Subscription

Buy this book for $59.99