loading...

SwiftUI automatic placeholders

bestelrich profile image Bartolome Estelrich ・2 min read

SwiftUI has recently added a new interesting functionality that allows us to quickly mark texts in our views as placeholders. It may be worth mentioning that this feature is currently in beta, like any other upcoming Xcode 12 features, and the actual implementation may vary on the final release. That being said let's dive into the specifics of how to use this useful resource.

To show that feature in action, I've prepared a simple app with the only requirements of being written in SwiftUI and with its deployment target set to iOS14. The app itself is a basic interface that displays a list of contacts, which details can be shown or hidden when the Navigation-bar button is tapped. Here you have a first look of how placeholders look like in SwiftUI.

Alt Text
!

For the purposes of this quick blog we won't go in much detail about how to create a list in SwiftUI or the actual model of the app. However, there is a link here of my code samples repo, where you can find all the project files and play around with placeholders by yourself.

This is how the actual ContactView looks like.

struct ContactView: View {
  var contact: Contact
  var isConfidential: Bool

  var body: some View {
    VStack(alignment: .leading, spacing: 15) {
      // Name and nickname
      HStack {
        Image(systemName: "person.crop.circle.fill")
          .foregroundColor(.white)
          .padding(10)
          .background(Circle().fill(Color.secondary)).font(.title)

        VStack(alignment: .leading) {
          Text(contact.fullName).font(.title)

          Text("Nickname: " + contact.nickName)
            .font(.subheadline)
            .foregroundColor(.gray)
        }
      }

      // Details
      VStack(alignment: .leading, spacing: 5) {
        HStack {
          Image(systemName: "phone.bubble.left.fill")
          Text(contact.phone)
        }

        HStack {
          Image(systemName: "house.fill")
          Text(contact.address)
        }
      }
    }
    .redacted(reason: isConfidential ? .placeholder : .init())
    .padding(.vertical)
    .frame(width: UIScreen.main.bounds.width, alignment: .leading)
  }
}

Once we apply the redacted(reason: .placeholder) modifier to the parent VStack of the view, all its content gets immediately affected making its implementation as straightforward as it can be. On the other hand, in cases like this where we are planning to toggle the placeholder in some way, we can initiate the method with an empty option set, that would be the same of having an empty placeholder that shows our data as usual.

.redacted(reason: isConfidential ? .placeholder : .init())

Having a placeholder baked right into the SwiftUI framework opens a lot of possibilities for its future usage. From basic samples were we hide information on user's demand, to other cases where perhaps our app is hiding the entire data from the current screen when the user activates the App Switcher.

At the same time it looks quite possible to see some additions to this modifier in the future where we can pixelate or blur out other types of information as well.

Discussion

pic
Editor guide