DevFright

When creating views in SwiftUI you will almost certainly use View Modifiers to adjust how a view looks from its font, to border, to colours, and so on. It is not uncommon to have serveral modifiers applied to each item in the view to get the look that you desire.

SwiftUI provides a way to group these modifiers together so that you can apply them as a group. There are a few benefits to this:

First, it cleans up the code in your view because you can have just a single custom modifier applied and keep all of the details encapsulated elsewhere in the code.

Second, it allows you to reuse the same group of modifiers elsewhere in the app so that you can keep your code DRY (don’t repeat yourself). A change in the custom modifier would affect all views that use the custom modifier.

In this tutorial we’ll look at how we can create our own custom modifier and how this can be applied to a view.

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
}