DevFright

One of the benefits of SwiftUI is the ability to see a preview of the UI you are building in code. As you modifiy views, the preview to the side updates to reflect your changes.

When you first create an app, it comes with a simple preview as follows:

#Preview {
    ContentView()
}

#Preview is a macro used to preview the view specified, in this case, the ContentView. It is the newer version of PreviewProvider, although that can still be used. An example of that will be shown later in this tutorial.

As you generate views, you’ll quickly run into problems with being unable to preview because ContentView, or another view, might require something to be passed in. In this tutorial, I’ll go through some basics to help you get the most out of the preview macro.

The Preview macro and other view tools allow you to quickly test different varients across different devices, ensuring that your UI works on devices of all sizes and dark/light mode settings.

In an earlier post, we went over what a ForEach loop is used for. In this tutorial, we’ll look at the List.

A List is designed to show a collection of views in a table format, much like how you see your emails, contacts, music and so on. This is similar to the UITableView in concept, but how it is implemented is very different.

If you have read the ForEach loop tutorial, the last example showed how to put four capsules or pills horizontally on the screen. Here is the code we used for this:

struct TagListView: View {
 
    let discussionPoints = [
        DiscussionPoint(title: "Meeting Agenda", tag: "Important"),
        DiscussionPoint(title: "Budget Review", tag: "Finance"),
        DiscussionPoint(title: "Project Updates", tag: "Development"),
        DiscussionPoint(title: "Team Building", tag: "HR")
    ]
     
    var body: some View {
        HStack {
            ForEach(discussionPoints) { point in
                Text(point.tag)
                    .padding(.horizontal, 12)
                    .padding(.vertical, 6)
                    .background(Capsule().fill(Color.blue.opacity(0.2)))
                    .foregroundColor(.blue)
            }
        }
    }
}
 
struct DiscussionPoint: Identifiable {
    let id = UUID()
    let title: String
    let tag: String
}

SwiftUI provides several ways to iterate over collections, including the ForEach loop.

Unlike a SwiftUI List, which represents views in a single column, similar to a UITableView, ForEach provides more flexibility to break away from the single column. This can be useful for more complex repeating layouts, although you don’t get the same functionality found in a List, such as swipe gestures. This tutorial will cover some examples of when to use ForEach.

The following shows a very basic ForEach loop:

var body: some View {
    ForEach(0..<5) { index in
        Text(index.description)
            .frame(width: 60, height: 30)
            .background(Capsule().fill(Color.blue.opacity(0.6)))
    }
}