DEV Community: Dean Thompson

[SwiftUI] Drawing the Line: A Practical Guide to Borders in SwiftUI

Dean Thompson — Sun, 02 Feb 2025 07:51:33 +0000

Preamble

Honestly, I never thought I’d need to write an entire article on borders in SwiftUI, but this week at work, I was tasked with updating the UI of some photo selection screens. Essentially, I would need to add a border to selected images. One of the requirements was that the border needed to be able to handle different corner types, rounded and square, but ideally would also be open for extension.

As I dove into implementing the UI, I quickly realized that choosing the right modifier for building a border/outline requires a bit more consideration - a bit more than slapping .border() onto each view.

In this article, I’ll go over modifiers available for creating borders in SwiftUI with some examples. At the end, I’ll share the custom view modifier I created at work to meet the requirements above.

Key Modifiers for Borders in SwiftUI

SwiftUI provides several modifiers for creating borders, each suited to different use cases. Let’s go through the most common ones and check out their behavior.

`.border(_:width:)`

The .border(_:width:) modifier is the simplest way to add a border around a view. It draws the border inside the frame of the view and defaults to a width of 1 pixel when no value is provided.

VStack(spacing: 16) {
    Rectangle()
        .frame(width: 100, height: 100)
        .border(Color.blue, width: 4)
    RoundedRectangle(cornerRadius: 20)
        .frame(width: 100, height: 100)
        .border(Color.green)
    Circle()
        .frame(width: 100, height: 100)
        .border(Color.purple, width: 6)
    Text("This is a sentence with a border.")
        .padding()
        .border(Color.red)
    Image(systemName: "eyes")
        .resizable()
        .scaledToFit()
        .frame(width: 100, height: 100)
        .padding()
        .border(Color.yellow, width: 12)
}

At first glance, .border() seems simple, but it comes with a pretty significant limitation: it only outlines the frame of a view, not the actual shape. This is why, in the example above, the RoundedRectangle and Circle views don’t have borders that follow their curves. Instead, the border is applied to their rectangular frames.

From the docs:

Use this modifier to draw a border of a specified width around the view’s frame.

Of course there are cases where that is adequate, but I would like a to know a solution that could border the Shape.

This leads to the next modifier.

`.stroke(_:style:)` and `.stroke(lineWidth:)`

The .stroke() modifiers are specifically designed for views that conform to the Shape protocol. They add an outline (or stroke) that matches the shape of the view.

You will notice one of the modifiers has a parameter, style. This refers to StrokeStyle. You can customize the stroke quite extensively using the following parameters.

var lineWidth: CGFloat
The width of the stroked path.
var lineCap: CGLineCap
The endpoint style of a line.
var lineJoin: CGLineJoin
The join type of a line.
var miterLimit: CGFloat
A threshold used to determine whether to use a bevel instead of a miter at a join.
var dash: [CGFloat]
The lengths of painted and unpainted segments used to make a dashed line.
var dashPhase: CGFloat
How far into the dash pattern the line starts.

I will only use lineWidth in this article as StrokeStyle is beyond its scope.

Let's give the .stroke() modifiers a whirl.

VStack {
    Rectangle()
        .stroke(.blue, lineWidth: 4)
        .frame(width: 100, height: 100)
    RoundedRectangle(cornerRadius: 20)
        .stroke(.green, lineWidth: 4)
        .frame(width: 100, height: 100)
    Circle()
        .stroke(.black, style: StrokeStyle(lineWidth: 6))
        .frame(width: 100, height: 100)
}

Looks like this:

You have probably noticed 2 things.

Where is Text() and Image()
.stroke() is written before .frame()

Let me address each one.

Unfortunately stroke can only be used with views that conform to Shape. It doesn’t apply to standard views like Text or Image. If you are looking to add a rounded borders or circular border to a view, I suggest using .overlay. Let me show you an example of a rounded corner border around Text and a circular border around an Image.

VStack(spacing: 16) {
    Text("This is a sentence with a border.")
        .padding()
        .overlay {
            RoundedRectangle(cornerRadius: 8)
                .stroke(.yellow, lineWidth: 4)
            }
    Image(systemName: "eyes")
        .resizable()
        .scaledToFit()
        .frame(width: 100, height: 100)
        .padding(32)
        .overlay {
             Circle()
                 .stroke(.purple, lineWidth: 4)
        }
}

2.The .stroke modifier applies a stroke to a Shape. However, if you apply a .frame modifier before calling .stroke, the Shape is converted into a generic View. Since View does not have a .stroke modifier, attempting to call .stroke after .frame results in an error: Value of type 'some View' has no member 'stroke'.

In these cases it is always important to remember that view modifiers are called sequentially from top to bottom - messing up the order can cause unexpected behavior.

One More Thing

There is actually one more issue. The following code will make it clear.

Rectangle()
     .fill(.white)
     .border(.red, width: 1)
     .frame(width: 150, height: 150)

Here is Rectangle with a 1 pixel border, representing its frame.

Ok let's now add a blue stroke with 15 pixels

Rectangle()
     .stroke(.blue, lineWidth: 15)
     .border(.red, width: 1)
     .frame(width: 150, height: 150)

Hmm.. stroke goes beyond the views frame???

The explanation is ridiculously simple: .stroke draws its border centered on the edge of the shape’s frame, meaning the stroke grows both outward and inward from the edge. On the other hand, .border only draws the border inside the view’s frame. So even if I made the border 15 pixels as well it would add 15 pixels with in the view.

Thanks to .stroke's behavior, we get to learn about one more key modifier.

`.strokeBorder(_:lineWidth:antialiased:)`

This modifier is very similar to stroke, except it draws within the frame - it acts similar to .border.

let's contrast it to stroke to see how it works.

HStack(spacing: 24) {
    Rectangle()
        .strokeBorder(.blue, lineWidth: 15)
        .border(.red)
    Rectangle()
        .stroke(.blue, lineWidth: 15)
        .border(.red)
}
.frame(height: 150)
.padding()

Ok. So there you go that is the general overview of most use cases using border and stroke. Let's jump into what I did at work.

What did I do at work?

At work I was tasked with creating a image selection modifier for the two screens below. Pretend the blue are photos, the first one similar to photos app and the second one to choose panorama images.

Screen 1 Before

Screen 2 Before

Essentially I had to build below:

Add a 2-pixel border to selected images.
Handle both rounded and square corners.
Add a semi-transparent black mask when selected.
Display a checkmark in the bottom-right corner when selected.

Here is what it looks like:

Screen 1 After

Screen 2 After

Here’s how I implemented it using .strokeBorder(), .overlay() and a custom ViewModifier:

struct SelectedImageStyleModifier: ViewModifier {
    enum CornerStyle {
        case rounded(CGFloat)
        case square
    }

    private static let iconSize = CGSize(width: 20, height: 20)
    private static let frameSize = CGSize(width: 24, height: 24)
    private static let opacity: Double = 0.15
    private static let borderWidth: CGFloat = 2
    private static let roundedCornerRadius: CGFloat = 8

    let isSelected: Bool
    let cornerStyle: CornerStyle

    func body(content: Content) -> some View {
        content
            .overlay {
                switch cornerStyle {
                case .rounded(let cornerRadius):
                    RoundedRectangle(cornerRadius: cornerRadius)
                        .strokeBorder(isSelected ? Color.red : Color.clear, lineWidth: Self.borderWidth)
                case .square:
                    Rectangle()
                        .strokeBorder(isSelected ? Color.red : Color.clear, lineWidth: Self.borderWidth)
                }
            }
            .overlay {
                if isSelected {
                    switch cornerStyle {
                    case .rounded(let cornerRadius):
                        RoundedRectangle(cornerRadius: cornerRadius)
                            .fill(Color.black.opacity(Self.opacity))
                    case .square:
                        Rectangle()
                            .fill(Color.black.opacity(Self.opacity))
                    }
                }
            }
            .overlay(alignment: .bottomTrailing) {
                if isSelected {
                    ZStack {
                        Circle()
                            .fill(.white)
                            .frame(size: Self.frameSize)
                        Image(systemName: "checkmark.circle.fill")
                            .resizable()
                            .scaledToFit()
                            .foregroundStyle(Color.red)
                            .frame(size: Self.iconSize)
                    }
                    .padding(8)
                }
            }
    }
}

extension View {
    func selectedImageStyle(
        isSelected: Bool,
        cornerStyle: SelectedImageStyleModifier.CornerStyle
    ) -> some View {
        self.modifier(
            SelectedImageStyleModifier(
                isSelected: isSelected,
                cornerStyle: cornerStyle
            )
        )
    }

    func frame(size: CGSize) -> some View {
        self.frame(width: size.width, height: size.height)
    }
}

Note that the .rounded case takes CGFloat as an associated value so we can use this modifier with any corner radius.

Below is the Mock Photo views' code.

struct MockPhotoGrid: View {
    private let numbers: [Int] = Array(1...20)
    @State private var selectedNumbers: [Int] = []
    private static let spacing: CGFloat = 2
    private let columns: [GridItem] = Array(repeating: .init(.flexible(), spacing: Self.spacing), count: 3)

    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: Self.spacing) {
                ForEach(numbers, id: \.self) { num in
                    Button {
                        select(num)
                    } label: {
                        Rectangle()
                            .frame(height: 100)
                            .selectedImageStyle(isSelected: selectedNumbers.contains(num), cornerStyle: .square)
                    }
                }
            }
        }
    }

    private func select(_ num: Int) {
        if selectedNumbers.contains(num) {
            selectedNumbers.removeAll(where: { $0 == num })
        } else {
            selectedNumbers.append(num)
        }
    }
}

struct MockPanoramaView: View {
    private let numbers: [Int] = Array(1...20)
    @State private var selectedNumbers: [Int] = []
    private static let spacing: CGFloat = 16
    private static let cornerRadius: CGFloat = 8

    var body: some View {
        ScrollView {
            LazyVStack(spacing: Self.spacing) {
                ForEach(numbers, id: \.self) { num in
                    Button {
                        select(num)
                    } label: {
                        Rectangle()
                            .frame(height: 100)
                            .cornerRadius(Self.cornerRadius)
                            .selectedImageStyle(isSelected: selectedNumbers.contains(num), cornerStyle: .rounded(Self.cornerRadius))
                    }
                }
            }
        }
        .padding()
    }

    private func select(_ num: Int) {
        if selectedNumbers.contains(num) {
            selectedNumbers.removeAll(where: { $0 == num })
        } else {
            selectedNumbers.append(num)
        }
    }
}

Conclusion

Borders in SwiftUI are cheeky. While .border() works for simple cases, .stroke() and .strokeBorder() offer the precision needed for more advanced designs. Combining these techniques with .overlay() lets you handle a wide range of use cases, from shapes to views.

Thanks for checking out the post. If you enjoyed the article, feel free to give it a like!

Dean Thompson

Follow me!
LinkedIn
Twitter
Instagram

References

[WWDC2023] New Additions to ScrollView in iOS17 Part 2 (Scroll Transitions)

Dean Thompson — Fri, 30 Jun 2023 08:36:59 +0000

With the introduction of iOS 17, Apple has added a load of new ScrollView modifiers that promise to greatly enhance our app development experience. I tested out four modifiers in Part 1. This article will focus on the modifier scrollTransition(_:axis:transition:). Scroll transitions allow us to modify views transitioning in and out of the visible region within a ScrollView. Let's get into it and check them out in depth.

If you like this article feel free to like it or give me a follow.

Below we have a simple vertical ScrollView showing random pictures from Lorem Picsum.

The Code:

struct ScrollExampleTransition: View {
    var body: some View {
        NavigationStack {
            ScrollView(.vertical) {
                LazyVStack(spacing: 16) {
                    ForEach(0..<50, id: \.self) { index in
                        ZStack {
                            RoundedRectangle(cornerRadius: 16)
                                .fill(.white.gradient)
                            VStack {
                                AsyncImage(url: URL(string: "https://picsum.photos/320/240")!) { image in
                                    image
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                } placeholder: {
                                    Spacer()
                                    ProgressView()
                                    Spacer()
                                }
                                .cornerRadius(8)
                                .padding(.top, 16)
                                Text("Photo \(index + 1)")
                                    .font(.title)
                                    .fontWeight(.bold)
                                    .foregroundStyle(.black)
                                    .padding(.bottom, 16)
                            }
                        }
                        .padding(.horizontal, 16)
                        .frame(height: 320)
                        .containerRelativeFrame(.horizontal) 
                    }
                }
            }
            .background(.black)
            .navigationTitle("Scroll Transitions")
        }
    }
}

Let's examine 3 different ways we could add scroll transitions to modify views coming into the visible area of a ScrollView in the example above.

1.

This example demonstrates the simplest way to implement .scrollTransition(). Attach the code below to the ZStack.

.scrollTransition { view, phase in
    view
      .opacity(phase.isIdentity ? 1 : 0)
    }

The scrollTransition modifier accepts a closure with two parameters. The first one being an EmptyVisualEffect, and the second being ScrollTransitionPhase. EmptyVisualEffect is simply the existing view without any effects. ScrollTransitionPhase is an enum that defines the value or state of a transition into the viewport of a ScrollView. In the above example we name our EmptyVisualEffect view, and our ScrollTransitionPhase phase.
In the screen capture below, the opacity of each view changes as it transitions onto the screen.

Example:

To change the opacity of our view as it comes onto the screen, add the opacity modifier to the view. Then, use .isIdentity of our phase to track whether it is on the screen or not(it uses a Bool, so we can use a ternary operator). If it is on the screen, it will have an opacity of 1 (full opacity) and if not it will be 0.

Here is the full code.

struct ScrollExampleTransition: View {
    var body: some View {
        NavigationStack {
            ScrollView(.vertical) {
                LazyVStack(spacing: 16) {
                    ForEach(0..<50, id: \.self) { index in
                        ZStack {
                            // ...
                        }
                        .padding(.horizontal, 16)
                        .frame(height: 320)
                        .containerRelativeFrame(.horizontal)
                        .scrollTransition { view, phase in
                            view
                                .opacity(phase.isIdentity ? 1 : 0)
                        }
                    }
                }
            }
            .background(.black)
            .navigationTitle("Scroll Transitions")
        }
    }
}

2.

In the second example we use very similar code except this time we will use the value of our phase which ranges between -1 and 1 to add scale effect to our view. Delete the scroll transition code from example 1 and add the following code to the ZStack.

.scrollTransition { view, phase in
    view
        .scaleEffect(1 - (phase.value < 0 ? -phase.value : phase.value))
    }

Here, we add the .scaleEffect() modifier to the view. We use the value of the phase to determine the scale effect of each view. When the value is less than zero, reverse the phase value so it works the same as when the value is over 0. If you only input .scaleEffect(1 - phase.value) the views at the bottom will come in double the size. Make sure to deal with negative phase values accordingly.

Here's what it looks like!

Code for example 2:

struct ScrollExampleTransition: View {
    var body: some View {
        NavigationStack {
            ScrollView(.vertical) {
                LazyVStack(spacing: 16) {
                    ForEach(0..<50, id: \.self) { index in
                        ZStack {
                           // ...
                        }
                        .padding(.horizontal, 16)
                        .frame(height: 320)
                        .containerRelativeFrame(.horizontal)
                        .scrollTransition { view, phase in
                            view
                                .scaleEffect(1 - (phase.value < 0 ? -phase.value : phase.value))
                        }
                    }
                }
            }
            .background(.black)
            .navigationTitle("Scroll Transitions")
        }
    }
}

3.

In example 3, I will show you a couple more things we can do with the scrollTransition modifier.

Have a look at the following code:

.scrollTransition(
    topLeading: .identity,
    bottomTrailing: .interactive
) { view, phase in
    view
    // manipulate view
}

We can also configure our transitions for the topLeading (top for vertical and leading for horizontal) and the bottomTrailing (bottom for vertical and trailing for horizontal). These configurations use ScrollTransitionConfiguration. You have three options: 1. .animated, 2. .interactive, and 3. .identity. .animated adds a default animation to the view as it interpolates through phases. It can also be customized. Feel free to input your favorite animations. .interactive, as its name suggests, interactively interpolates the transition’s effect as the view appears on the screen. .identity adds nothing. Effects and animations will not be added to your view.

In my example below I have add a rotation effect to our scale effect in example 2. I made the topLeading configuration .identity so that it the view is not modified.

.scrollTransition(
    topLeading: .identity,
    bottomTrailing: .interactive
) { view, phase in
    view
        .scaleEffect(1 - (phase.value < 0 ? -phase.value : phase.value))
        .rotationEffect(phase.isIdentity ? .degrees(0) : .degrees(180))
}

And here is what it looks like!

Code for example 3:

struct ScrollExampleTransition: View {
    var body: some View {
        NavigationStack {
            ScrollView(.vertical) {
                LazyVStack(spacing: 16) {
                    ForEach(0..<50, id: \.self) { index in
                        ZStack {
                            // ...
                        }
                        .padding(.horizontal, 16)
                        .frame(height: 320)
                        .containerRelativeFrame(.horizontal)
                        .scrollTransition(
                            topLeading: .identity,
                            bottomTrailing: .interactive
                        ) { view, phase in
                            view
                                .scaleEffect(1 - (phase.value < 0 ? -phase.value : phase.value))
                                .rotationEffect(phase.isIdentity ? .degrees(0) : .degrees(180))
                        }
                    }
                }
            }
            .background(.black)
            .navigationTitle("Scroll Transitions")
        }
    }
}

Thanks for checking out the post. If you didn't read Part 1 be sure to check it out.
All the best!

Dean Thompson

Follow me!
LinkedIn
Twitter
Instagram

References

Apple Docs:
scrollTransition(_:axis:transition:)
Kavsoft's great video rounding up what's new in SwiftUI What's New in SwiftUI - iOS17
【SwiftUI】iOS17の新APIを使用してScrollViewを操る

[WWDC2023] New Additions to ScrollView in iOS17 Part 1

Dean Thompson — Tue, 20 Jun 2023 06:31:22 +0000

With the introduction of iOS 17, Apple has added a load of new ScrollView modifiers that promise to greatly enhance our app development experience. I thought it would be a great idea to test them out and report on how they work.

I'll be exploring four modifiers below.

.containerRelativeFrame(_:alignment:)
.scrollTargetLayout(isEnabled:)
.scrollTargetBehavior(_:)
.scrollPosition(id:)

If you like this article feel free to like it or give me a follow.
OK! Let's get into it!

1. `.containerRelativeFrame(_:alignment:)`

This new modifier allows us to specify a view's height, width, or both relative to its container view. In our example, we have used it on our ZStack. Here, we are setting its height and width relative to the container view, in this case, the ScrollView.

struct ScrollExamplePaging: View {
    var body: some View {
        ScrollView(.horizontal) {
            let strings: [String] = ["1", "2", "3", "4", "5"]
            LazyHStack(spacing: 16) {
                ForEach(strings, id: \.self) { string in
                    ZStack {
                        // ...
                    }
                    .padding(16)
                    .containerRelativeFrame(.horizontal)
                    .containerRelativeFrame(.vertical)
                }
            }
        }
    }
}

This can be simplified to the following:

.containerRelativeFrame([.vertical, .horizontal])

And looks like this:

This modifier is not limited to ScrollView. According to Apple's documents it can be used in the following contexts:

The window presenting a view on iPadOS or macOS, or the screen of a device on iOS.
A column of a NavigationSplitView
A NavigationStack
A tab of a TabView
A scrollable view like ScrollView or List

2. `.scrollTargetLayout(isEnabled:)`

The scroll target layout modifier is attached to the main view (container view) within a ScrollView, in this case, the ZStack. It lets the ScrollView determine where it should align to. It sets the scroll target for a given ScrollView. It is by default set to true.

struct ScrollExamplePaging: View {
    var body: some View {
        ScrollView(.horizontal) {
            let strings: [String] = ["1", "2", "3", "4", "5"]
            LazyHStack(spacing: 16) {
                ForEach(strings, id: \.self) { string in
                    ZStack {
                        // ...
                    }
                    .padding(16)
                    .containerRelativeFrame([.vertical, .horizontal])
                }
            }
            .scrollTargetLayout()
        }
    }
}

This modifier by itself will have no affect on the view, we must use it in conjunction with the modifiers in 3. and 4.

3. `.scrollTargetBehavior(_:)`

Now, let's move from setting our target in section 2 to defining our ScrollView's behavior – essentially telling how our ScrollView functions. This involves selecting behaviors like .paging or .viewAligned for our ScrollView. Let's delve deeper into each of these.

`.paging`

The .paging behavior transforms your ScrollView into a paginated interface, think TikTok's vertical scrolling or a smooth onboarding experience. This behavior makes use of the view's height and width to transition smoothly from one page to the next, ensuring a full view is always displayed without cutting any part of it.

When implementing .paging, it's important to ensure the LazyHStack's spacing is set to 0, given that this behavior requires the container view to occupy the full screen width.

Spacing set to 16 (paging behavior is disrupted)

Spacing set to 0 (normal paging behavior)

Here is the code:

struct ScrollExamplePaging: View {
    var body: some View {
        ScrollView(.horizontal) {
            let strings: [String] = ["1", "2", "3", "4", "5"]
            LazyHStack(spacing: 0) { // spacing is 0.
                ForEach(strings, id: \.self) { string in
                    ZStack {
                        RoundedRectangle(cornerRadius: 16)
                            .fill(.black.gradient)

                        Text(string)
                            .font(.system(size: 92))
                            .fontWeight(.bold)
                            .foregroundStyle(.white)

                    }
                    .padding(16)
                    .containerRelativeFrame([.vertical, .horizontal])
                }
            }
            .scrollTargetLayout()
        }
        .scrollTargetBehavior(.paging)
    }
}

`.viewAligned`

For instances when you want to incorporate spacing or create more intricate layouts, the .viewAligned behavior comes in handy. This allows for customization of your ScrollView's start position, ensuring it aligns smoothly with the container view as you scroll. This functionality offers an added level of flexibility to your layouts.

Here is the code:

struct ScrollExamplePaging: View {
    var body: some View {
        ScrollView(.horizontal) {
            let strings: [String] = ["1", "2", "3", "4", "5"]
            HStack(spacing: 16) {
                ForEach(strings, id: \.self) { string in
                    ZStack {
                        RoundedRectangle(cornerRadius: 16)
                            .fill(.black.gradient)

                        Text(string)
                            .font(.system(size: 92))
                            .fontWeight(.bold)
                            .foregroundStyle(.white)

                    }
                    .frame(width: 300)
                    .containerRelativeFrame(.vertical)
                }
            }
            .scrollTargetLayout()
        }
        .scrollTargetBehavior(.viewAligned)
    }
}

4. `.scrollPosition(id:)`

We can now keep track of the items being shown in our scroll view using scroll position. It is quite simple to use. Create a @State variable @State private var scrollPosition and then bind it to the modifier. .scrollPosition(id: $scrollPosition). Now as I scroll the ScrollView will keep track of which value it is showing. This means we are able to link this value with other Views.

Like so:

Here is the code:

struct ScrollViewExampleScrollPosition: View {
    @State private var scrollPosition: String?
    let strings: [String] = ["1", "2", "3", "4", "5"]
    var body: some View {
        GeometryReader { geo in
            let size = geo.size
            VStack {
                ScrollView(.horizontal) {
                    HStack(spacing: 16) {
                        ForEach(strings, id: \.self) { string in
                            ZStack(alignment: .center) {
                                RoundedRectangle(cornerRadius: 16)
                                    .fill(.black.gradient)

                                Text(string)
                                    .font(.system(size: 92))
                                    .fontWeight(.bold)
                                    .foregroundStyle(.white)

                            }
                            .frame(width: 300, height: 500)
                            .padding(.vertical, 16)
                            .padding(.horizontal, (size.width - 300) / 2)
                        }
                    }
                    .scrollTargetLayout()
                }
                .scrollTargetBehavior(.viewAligned)
                .scrollPosition(id: $scrollPosition)

                VStack {
                    if let scrollPosition {
                        Text(scrollPosition)
                            .font(.largeTitle)
                    }
                }
            }
        }
    }
}

Or we could use buttons to jump to the number we want to see.

like so:

Here is the code:

struct ScrollViewExampleScrollPosition: View {
    @State private var scrollPosition: String?
    let strings: [String] = ["1", "2", "3", "4", "5"]
    var body: some View {
        GeometryReader { geo in
            let size = geo.size
            VStack {
                ScrollView(.horizontal) {
                    HStack(spacing: 16) {
                        ForEach(strings, id: \.self) { string in
                            ZStack(alignment: .center) {
                                RoundedRectangle(cornerRadius: 16)
                                    .fill(.black.gradient)

                                Text(string)
                                    .font(.system(size: 92))
                                    .fontWeight(.bold)
                                    .foregroundStyle(.white)

                            }
                            .frame(width: 300, height: 500)
                            .padding(.vertical, 16)
                            .padding(.horizontal, (size.width - 300) / 2)
                        }
                    }
                    .scrollTargetLayout()
                }
                .scrollTargetBehavior(.viewAligned)
                .scrollPosition(id: $scrollPosition)

                VStack {
                    ForEach(strings, id: \.self) { string in
                        Button("Scroll to \(string)") {
                            withAnimation {
                                scrollPosition = string
                            }
                        }
                        .buttonStyle(.borderedProminent)
                    }
                }
            }
        }
    }
}

Thanks for checking out the post. In Part 2 I will check out ScrollView transitions! Follow to keep up-to-date.
All the best!

Dean Thompson

Follow me!
LinkedIn
Twitter
Instagram

References

Apple Docs for each modifier:
containerRelativeFrame(_:alignment:)
scrollTargetLayout(isEnabled:)
scrollTargetBehavior(_:)
scrollPosition(id:)
Kavsoft's great video rounding up what's new in SwiftUI What's New in SwiftUI - iOS17
【SwiftUI】iOS17の新APIを使用してScrollViewを操る

[WWDC2023] SwiftData Basic Use Case in 6 Steps

Dean Thompson — Wed, 14 Jun 2023 07:14:25 +0000

It has happened! The long-awaited successor to CoreData has been released—SwiftData! Although SwiftData retains some of CoreData's characteristics (uses the same storage architecture), it does enable us to persist data using simple, declarative code. It seems like it may be a game changer for Swift developers, so I immediately had to check it out.

As I delved into basic use cases for SwiftData, like To-Do apps, I noticed that the use of SwiftData comes down to around 6 steps. In this article, I will guide you through the process of building a simple To-Do App using SwiftData, shedding light on these basic steps. The article will not cover the app's UI implementation, as the emphasis is on SwiftData.

Here are the six steps we'll cover:

import SwiftData.
Create your model: Define a class for your data.
Set your model to the modelContainer: This lets SwiftData know what data it will be working with.
Declare @Environment(\.modelContext) in your view: This establishes the context in which your data will exist and be manipulated.
Prefix @Query to an array variable: A wrapper to access your stored data.
Interact with your context for CRUD operations.

Let's get started by diving into each of these steps in more detail.

1. Import `SwiftData`

The first step is to import SwiftData. Yes, I know it is obvious, but we all forget sometimes.



import SwiftData

2. Create your Model

In past, when using CoreData, you would open a .xcdatamodel file and implement an Entity by adding it with "Add Entity". In SwiftData we simply model data with ordinary Swift types using @Model. Here, I placed the @Model wrapper above my data class ToDoItem. This model will represent the individual tasks in our To-Do list. Each task will have a title, content, and the date it was added.



@Model
class ToDoItem {
    let title: String
    let content: String
    let dateAdded: Date

    init(title: String, content: String, dateAdded: Date = .init()) {
        self.title = title
        self.content = content
        self.dateAdded = dateAdded
    }
}

3. Set `.modelContainer()` in `App`

In SwiftData, the .modelContainer() is used to establish the storage area or "container" for your data model within your application. Think of it as designating a specific space within your app to store all the data instances of the ToDoItem model.

The container is set within the main app structure (in this case, SwiftDataToDoExampleApp because this ensures the data is accessible throughout your entire application.



@main
struct SwiftDataToDoExampleApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .modelContainer(for: ToDoItem.self)
    }
}

In this code snippet, .modelContainer(for: ToDoItem.self) is added to WindowGroup. This tells the application to create a storage area specifically for ToDoItem instances. Now, wherever we are in the app, we can manipulate our to-do items.

4. Declare `@Environment(\.modelContext)` in your view

Next, declare @Environment(.modelContext) within your View. @Environment(\.modelContext) allows us to read from our container. It sounds a bit complex, but it's essentially a way to establish a connection between your View and the data stored in your modelContainer from step 3. In other words, It acts like a portal, that our View can use to interact with the modelContainer.



struct ContentView: View {
    @Environment(\.modelContext) var context
    // ...
}

5. Prefix `@Query` to an array variable

In SwiftUI view, you can fetch data using the wrapper @Query. SwiftData and SwiftUI work in together, and when the underlying data changes, the view is automatically updated with the most recent data.



@Query var items: [ToDoItem]

Just like in CoreData, you can add SortDescriptor and Predicate to a fetch. In the case below, the ToDoItem's will be displayed in the reverse order of when they were added.



@Query(FetchDescriptor(sortBy: [SortDescriptor(\.dateAdded, order: .reverse)]),animation: .snappy) private var items: [ToDoItem]

6. Interact with your context for CRUD operations

Now that we have completed the set up of our model, container, context, and the way to communicate with the view, it is time to interact with our context. The first interaction with the context will be inserting data(ToDoItem) into the context. After inserting a ToDoItem into the context, don't forget to save it. This is a two-step process, and the changes made to the context are finalized by saving.

In the snippet below I have created two functions one to insert the item and one to then save it into the context.



func insert(_ item: ToDoItem) {
    context.insert(item)
    save()
}

func save() {
    do {
        try context.save()
    } catch {
        print(error.localizedDescription)
    }
}

The same goes for deletion. Delete from the context and then save to the context to make sure it has been updated.



func delete(_ item: ToDoItem) {
    context.delete(item)
    save()
}

And with the above 6 steps, we have implemented SwiftData into our To-do app. I will include all of the UI code below so that you are able to see how I put together the whole project. Feel free to copy and paste it into Xcode.

Finally, remember that SwiftData is still in beta, and it can randomly crash, especially after saving. These issues will be updated as Xcode 15 comes out of beta, I imagine.

App Screenshot

The Code

ContentView.swift



import SwiftUI
import SwiftData

struct ContentView: View {
    @Environment(\.modelContext) var context
    @Query var items: [ToDoItem]

    @State private var showingSheet: Bool = false
    @State private var title: String = ""
    @State private var content: String = ""

    var body: some View {
        NavigationStack {
            List {
                ForEach(items)  { item in
                    VStack(alignment: .leading) {
                        HStack(alignment: .top) {

                            Text(item.title)
                                .bold()

                            Spacer()

                            Text(item.dateAdded.formatted(date: .numeric, time: .shortened))
                                .font(.caption)
                                .foregroundStyle(.gray)

                        }

                        Text(item.content)
                            .font(.subheadline)
                    }
                    .swipeActions(content: {
                        Button(action: {
                            self.delete(item)
                        }, label: {
                            Label("Delete", systemImage: "xmark.bin.fill")
                        })
                        .tint(Color.red)
                    })
                }
            }
            .navigationTitle("To Do List")
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    Button {
                        showingSheet.toggle()
                    } label: {
                        Image(systemName: "plus")
                    }

                }
            }
            .sheet(isPresented: $showingSheet, content: {
                Form {
                    Section {
                        TextField("Add the title...", text: $title)
                    } header: {
                        Text("Title")
                    }

                    Section {
                        TextEditor(text: $content)
                    } header: {
                        Text("Content / Notes")
                    }

                    Section {
                        Button("Add Item") {
                            let item = ToDoItem(title: title, content: content)
                            insert(item)

                            showingSheet = false
                            title = ""
                            content = ""
                        }
                        .disabled(title.isEmpty || content.isEmpty)
                    }
                }
            })
        }
    }

    func insert(_ item: ToDoItem) {
        context.insert(item)
        save()
    }

    func delete(_ item: ToDoItem) {
        context.delete(item)
        save()
    }

    func save() {
        do {
            try context.save()
        } catch {
            print(error.localizedDescription)
        }
    }
}

ToDoItem.swift



import SwiftUI
import SwiftData

@Model
class ToDoItem {
    let title: String
    let content: String
    let dateAdded: Date

    init(title: String, content: String, dateAdded: Date = .init()) {
        self.title = title
        self.content = content
        self.dateAdded = dateAdded
    }
}

SwiftDataToDoExampleApp.swift



import SwiftUI

@main
struct SwiftDataToDoExampleApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .modelContainer(for: ToDoItem.self)
    }
}

Thanks for checking out the post.
All the best!

Dean Thompson

Follow me!
LinkedIn
Twitter
Instagram

References

Apple's Press Release

Great example using SwiftData from KavSoft

Great article by Alexander Logan. Also goes into depth on using SwiftData with relationships: Alexander Logan's Blog

DEV Community: Dean Thompson

[SwiftUI] Drawing the Line: A Practical Guide to Borders in SwiftUI

Preamble

Key Modifiers for Borders in SwiftUI

.border(_:width:)

.stroke(_:style:) and .stroke(lineWidth:)

One More Thing

.strokeBorder(_:lineWidth:antialiased:)

What did I do at work?

Screen 1 Before

Screen 2 Before

Screen 1 After

Screen 2 After

Conclusion

References

[WWDC2023] New Additions to ScrollView in iOS17 Part 2 (Scroll Transitions)

1.

2.

3.

References

[WWDC2023] New Additions to ScrollView in iOS17 Part 1

1. .containerRelativeFrame(_:alignment:)

2. .scrollTargetLayout(isEnabled:)

3. .scrollTargetBehavior(_:)

.paging

Spacing set to 16 (paging behavior is disrupted)

Spacing set to 0 (normal paging behavior)

.viewAligned

4. .scrollPosition(id:)

References

[WWDC2023] SwiftData Basic Use Case in 6 Steps

1. Import SwiftData

2. Create your Model

3. Set .modelContainer() in App

4. Declare @Environment(\.modelContext) in your view

5. Prefix @Query to an array variable

6. Interact with your context for CRUD operations

App Screenshot

The Code

References

`.border(_:width:)`

`.stroke(_:style:)` and `.stroke(lineWidth:)`

`.strokeBorder(_:lineWidth:antialiased:)`

1. `.containerRelativeFrame(_:alignment:)`

2. `.scrollTargetLayout(isEnabled:)`

3. `.scrollTargetBehavior(_:)`

`.paging`

`.viewAligned`

4. `.scrollPosition(id:)`

1. Import `SwiftData`

3. Set `.modelContainer()` in `App`

4. Declare `@Environment(\.modelContext)` in your view

5. Prefix `@Query` to an array variable