Introduction

iOS 26 introduced a revolutionary swipe-to-go-back feature that allows users to navigate back from any white space area on the screen, not just from the edges. This gesture enhances user experience by making navigation more intuitive and fluid. However, this article will guide you through implementing a custom version of this behavior for your own applications.

Motivation: Why Implement Custom Swipe-Back?

There are two compelling reasons to implement custom swipe-back gestures in your iOS apps:

1. Limited iOS 26 Support: The native iOS 26 swipe-to-go-back feature only works when navigation links use the default back button. If you customize the back button—for example, replacing it with a toolbar item like an SF Symbol "xmark" close button—the swipe gesture may not function as expected.

2. Backward Compatibility: Supporting this behavior on older iOS versions ensures your app remains accessible and user-friendly across all supported devices, not just those running the latest OS version.

Step-by-Step Implementation

The following implementation provides a reusable view modifier that enables full-screen swipe-back gestures on navigation controllers:

Step 0: Create example/caller screen to observe difference beweten native behavior and unsupported use cage

    struct ContentView: View {
        @State private var showingDetail = false
        
        var body: some View {
            NavigationStack {
                List {
                    NavigationLink(destination: DetailView()) {
                        Text("Default Behavior")
                    }
                    
                    NavigationLink(destination: AnotherDetailView()) {
                        Text("Custom Behavior")
                    }
                }
//                .enableSwipeBackGesture()  // We'll be building this modifier
            }
        }
    }

    struct DetailView: View {
        var body: some View {
            VStack(spacing: 20) {
                Text("Detail Content")
                    .font(.title2)
                
                Button("Close") {
                    // Custom close action
                }
                .buttonStyle(.bordered)
            }
            .navigationTitle("Detail")
        }
    }

    struct AnotherDetailView: View {
        @Environment(\.dismiss) var dismiss
        var body: some View {
            Text("Another Detail View")
                .navigationTitle("Another")
                .navigationBarBackButtonHidden()
                .toolbar {
                    ToolbarItem(placement: .topBarLeading) {
                        Button {
                            dismiss()
                        } label: {
                            Label("Close", systemImage: "xmark")
                                .labelStyle(.iconOnly)
                        }

                    }
                }
        }
    }

This screen contains two navigation links. First one is default behavior, where users can navigate back to parent view from destination by swiping back from any blank space area. Second doesn't support this bahavior because of custom tool bar item.

Step 1: Create the ViewController Class

final class ViewController: UIViewController, UIGestureRecognizerDelegate {
    private var fullScreenSwipeBackGesture: UIPanGestureRecognizer?

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        enableSwipeBackIfNeeded()
    }

    override func didMove(toParent parent: UIViewController?) {
        super.didMove(toParent: parent)
        enableSwipeBackIfNeeded()
    }

    func enableSwipeBackIfNeeded() {
        guard let navigationController else {
            return
        }
        navigationController.interactivePopGestureRecognizer?.isEnabled = true
        navigationController.interactivePopGestureRecognizer?.delegate = nil

        installFullScreenSwipeBackGesture(on: navigationController)
    }
}

Step 2: Install the Full-Screen Gesture Recognizer

private func installFullScreenSwipeBackGesture(on navigationController: UINavigationController) {
    guard fullScreenSwipeBackGesture == nil else {
        return
    }

    guard
        let gestureRecognizer = navigationController.interactivePopGestureRecognizer,
        let targets = gestureRecognizer.value(forKey: "targets") as? [NSObject],
        let target = targets.first?.value(forKey: "target")
    else {
        return
    }

    let panGestureRecognizer = UIPanGestureRecognizer(
        target: target,
        action: NSSelectorFromString("handleNavigationTransition:")
    )
    panGestureRecognizer.maximumNumberOfTouches = 1
    panGestureRecognizer.delegate = self
    panGestureRecognizer.name = "FullScreenSwipeBack"
    navigationController.view.addGestureRecognizer(panGestureRecognizer)
    fullScreenSwipeBackGesture = panGestureRecognizer
}

Step 3: Implement Gesture Filtering Logic

func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
    guard let navigationController, navigationController.viewControllers.count > 1 else {
        return false
    }

    guard let panGestureRecognizer = gestureRecognizer as? UIPanGestureRecognizer else {
        return false
    }

    let translation = panGestureRecognizer.translation(in: gestureRecognizer.view)
    return translation.x > 0 && abs(translation.x) > abs(translation.y)
}

Step 4: Create the UIViewControllerRepresentable Wrapper

private struct SwipeBackGestureEnabler: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> ViewController {
        ViewController()
    }

    func updateUIViewController(_ uiViewController: ViewController, context: Context) {
        uiViewController.enableSwipeBackIfNeeded()
    }
}

Step 5: Add the View Modifier Extension

extension View {
    func enableSwipeBackGesture() -> some View {
        background(SwipeBackGestureEnabler())
    }
}

Example Usage

Here's how to integrate this modifier into your SwiftUI app:

struct ContentView: View {
    @State private var showingDetail = false
    
    var body: some View {
        NavigationStack {
            List {
                NavigationLink(destination: DetailView()) {
                    Text("Default Behavior")
                }
                
                NavigationLink(destination: AnotherDetailView()) {
                    Text("Custom Behavior")
                }
            }
            .enableSwipeBackGesture()  // Uncommented this line 
        }
    }
}

Key Components Explained:

1. UIViewControllerRepresentable: This protocol bridges SwiftUI views with UIKit view controllers, allowing us to manage the lifecycle of our custom ViewController.

2. UIGestureRecognizerDelegate: By conforming to this protocol, we gain control over gesture recognition behavior through the gestureRecognizerShouldBegin(_:) method.

3. Gesture Filtering Logic: The implementation ensures that swipe gestures only trigger when:

   • There are multiple view controllers in the navigation stack (preventing accidental dismissals on root views)

   • The horizontal translation exceeds vertical translation (ensuring it's a swipe, not a tap or scroll)

4. Full-Screen Coverage: Unlike edge-based swipes, this implementation captures gestures anywhere on the screen by adding the gesture recognizer to the navigation controller's view.

Benefits of This Implementation

• Customizable Back Button: You can now use custom toolbar items (like SF Symbols) while maintaining swipe-back functionality

• Consistent UX: Users experience the same intuitive navigation pattern regardless of how you configure your navigation UI

• Cross-Version Support: Works on iOS versions that don't have native full-screen swipe support built-in

Conclusion

Implementing a custom swipe-back gesture gives you greater control over user navigation in your iOS applications. By using the enableSwipeBackGesture() view modifier, you can seamlessly integrate this feature while maintaining clean, declarative SwiftUI code. This approach ensures your app provides a modern, fluid navigation experience that works consistently across different configurations and iOS versions.

If you found this article helpful, please consider supporting my work on Buy Me a Coffee. Don't forget to subscribe to my newsletter for more tutorials like this!

PS: The code in this post is available here.

🧱 Step 1: Set up a navigation view with a list

Use NavigationView to gain access to the new iOS 26 toolbar system.

if #available(iOS 26, *) {
    NavigationView {
        List {
            LinearGradient(colors: [.blue, .green], startPoint: .leading, endPoint: .trailing)
                .listRowInsets(.init())

            Toggle("Enables Toolbar Spacer", isOn: $isToolbarSpacerEnabled)

            Text("Item 1")
            Text("Item 2")
            Text("Item 3")
        }
    }
}

Using #available(iOS 26, *) ensures that the new APIs don’t cause crashes on older OS versions.

The linear gradient is just for demo purpose to make the glass effect more visible.

🔤 Step 2: Set the Navigation Title and Subtitle

New in iOS 26 is the .navigationSubtitle(_:) modifier. This lets you add a small subtitle under the main title.

.navigationTitle(Text("Favorites"))
.navigationSubtitle("Synced just now")

See the subtitle below the regular nav title? As always, when your scroll up, both titles in large display mode will become inline automatically.

🧰 Step 3: Add Toolbar Items (with APIs before iOS 26)

We now define toolbar items, for example with three buttons.

.toolbar {
        ToolbarItem(placement: .topBarTrailing) {
            Button("Add", systemImage: "plus") { }
        }
        ToolbarItem(placement: .topBarTrailing) {
            Button("Download", systemImage: "square.and.arrow.down") { }
        }
        ToolbarItem(placement: .topBarTrailing) {
            Button("Share", systemImage: "square.and.arrow.up") { }
        }
}

See in iOS 26, the new design grouped all three toolbar items together. Also, inline navtile title and subtile got pushed to the leading side if trailing items took much space.

🔸 Step 4: New API ToolbarSpacer and ToolbarGroup

iOS 26 introduces ToolbarSpacer, which gives you fine-grained control over toolbar layout. Let’s replace the toolbar content with the code below.

ToolbarItemGroup(placement: .topBarTrailing) {
    Button("Add", systemImage: "plus") { }
    Button("Download", systemImage: "square.and.arrow.down") { }
}
ToolbarSpacer(placement: .topBarTrailing)
ToolbarItemGroup(placement: .topBarTrailing) {
    Button("Share", systemImage: "square.and.arrow.up") { }
}

Using ToolbarItemGroup allows us to group buttons together, while ToolbarSpacer inserts spacing between them to seperate different type of functionalities.

✅ Summary

With iOS 26, SwiftUI gives us:

• navigationSubtitle(_:) for better context in navigation bars

• ToolbarItemGroup to logically group actions

• ToolbarSpacer to space groups apart visually and functionally

These additions make it easier to design adaptive, organized toolbars that better reflect user intent.

This lets you separate logical sections of toolbar items — improving both UX and layout responsiveness.

Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email. If you like my posts, 😚consider tipping me at buymeacoffee.com/xavierios.

iOS 26 brings a refined aesthetic to TabView—with a native liquid glass effect and powerful new APIs like .tabViewBottomAccessory. In this tutorial, we’ll walk through building a searchable, tinted TabView with a floating bottom action, which the fancy liquid glass effect.

Let’s get started! 🚀 PS: The code in this post is available here.

Step 1: Create a Placeholder List View

This simple list helps demonstrate the colorful aesthetics behind the liquid glass. You can swap this with real data later.

private var placeholderList: some View {
    List {
        ForEach(Array(0...10), id: \.self) { index in
            Text("Row \(index)")
                .foregroundStyle(.black)
                .bold()
                .padding(.vertical)
                .listRowBackground(
                    Color(hue: CGFloat(index) / 10, saturation: 0.55, brightness: 0.9)
                )
        }
    }
}

💡 Each row gets a unique hue, helping you visualize transparency and layering effects.

Step 2: Build the TabView with Search and Navigation

The Tab API introduced in iOS 18 (and enhanced in iOS 26) lets you customize each tab with SF Symbols and roles. In iOS 26, Tab with search role (SwiftUI alternative of UISearchTab in UIKit), got a new look.

@available(iOS 18, *)
var tabView: some View {
    TabView {
        Tab("Search", systemImage: "magnifyingglass", role: .search) {
            NavigationStack {
                placeholderList
                    .searchable(text: $searchText, prompt: "Looking for something?")
                    .navigationTitle("Search")
            }
        }
        Tab("Home", systemImage: "house") {
            NavigationStack {
                placeholderList
                    .navigationTitle("Home")
            }
        }
        Tab("Settings", systemImage: "gear") {
            NavigationStack {
                placeholderList
                    .navigationTitle("Settings")
            }
        }
    }
    .tint(.teal) // adjust this color based on your use case
}

Note that the order/position of tab with search role matters. If it’s the first tab in tab view, search tab will show with search bar expanded by default. Otherwise others tabs will show and users have to tap on the magnifying glass icon to expand the search bar.

Step 3: Add the Liquid Glass Bottom Accessory

In iOS 26, TabView supports .tabViewBottomAccessory, perfect for floating call-to-action buttons.

@ViewBuilder
var mainView: some View {
    if #available(iOS 26.0, *) {
        tabView
            .tabViewBottomAccessory {
                Button {
                    // Your action goes here
                } label: {
                    HStack {
                        Image(systemName: "plus")
                        Text("Add a new record now")
                    }
                }
                .bold()
                .tint(.primary)
            }
    } else if #available(iOS 18, *) {
        tabView // Fallback for older versions
    }
}

🧪 This button floats above the TabView like a piece of interactive glass.

✅ Final Thoughts

This is how you can build a modern, beautiful TabView experience in iOS 26 with SwiftUI. You now have:

• A searchable list

• A three-tab interface using the modern Tab API

• A floating bottom accessory

• Liquid glass effect and dynamic coloring baked in

🧼 Bonus Tip: Clean Design Matters

• Use .tint(_:) consistently for accent color theming.

• Keep your NavigationStacks lightweight.

• Use #available checks to maintain backward compatibility.

Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email. If you like my posts, 😚consider tipping me at buymeacoffee.com/xavierios.

In this tutorial, we'll explore how to create a vibrant radial pattern using SwiftUI. We'll use gradients and circles to form a stunning geometric design. If you’re looking to add visually appealing elements to your apps, this radial pattern is a great way to start. PS: The code in this post is available here.

Final Result

We'll build a radial pattern of colored dots that rotate around a central point, masked by a colorful linear gradient, making it stand out beautifully.

Step 1: Defining the Dots View

The Dots view is responsible for arranging dots evenly around the center of the pattern.

struct Dots: View {
            let count: Int
            let dotSize: CGFloat
            let xOffset: CGFloat

            var body: some View {
                ZStack {
                    ForEach(0..<count, id: \.self) {
                        dot.rotationEffect(.degrees(Double($0 * 365 / count)))
                    }
                }
            }

            var dot: some View {
                Group {
                    Circle()
                        .frame(width: dotSize, height: dotSize)
                        .hidden()
                    Circle()
                        .frame(width: dotSize, height: dotSize)
                        .offset(x: xOffset)
                }
            }
        }

Breakdown:

• count: Number of dots in the ring.

• dotSize: Size of each individual dot.

• xOffset: The horizontal distance of each dot from the center of the view.

• ForEach: We use this to repeat the dots around the circle.

• rotationEffect: This evenly spaces the dots around the center by rotating them based on their index in the ForEach loop.

• offset: This moves the dots horizontally, positioning them along the radius of the circle.

Long story short, Dots view is used to present a group circles in a circle. Below is a preview of DotsView with a count of 8.

Step 2: Creating the Radial Pattern

Next, we’ll define the RadialPattern view. It will consist of multiple circles (dots) arranged in concentric rings (by using Dots view defined above).

    struct RadialPattern: View {
        private let size: CGFloat = 250
        var body: some View {
            ZStack {
                Circle()
                    .fill(Color.clear)
                Dots(count: 20, dotSize: size / 10, xOffset: size / 2)
                Dots(count: 20, dotSize: size / 15, xOffset: size / 2.4)
                    .rotationEffect(.degrees(25))
                Dots(count: 20, dotSize: size / 20, xOffset: size / 2.9)
                Dots(count: 20, dotSize: size / 15, xOffset: size / 1.7)
                    .rotationEffect(.degrees(25))
                Dots(count: 20, dotSize: size / 20, xOffset: size / 1.6)
            }
        }
    }

Breakdown:

• ZStack: This stacks all the circles and dots on top of each other.

• Circle(): A base circle filled with Color.clear (invisible) is used as a center point for our pattern.

• Dots: This is a custom view we defined above, which will handle the arrangement of dots. We call this view multiple times to create concentric rings with different offsets and sizes.

• rotationEffect: This rotates the dots slightly, adding a subtle rotation for each ring to create a dynamic design.

Step 3: Applying a Linear Gradient

We’ll start by adding a LinearGradient as the background of our view. This will be masked by the radial pattern later, creating a colorful effect.

Here’s the code for the gradient:

    struct ContentView: View {
        var body: some View {
            LinearGradient(colors: [
                .red, .orange, .yellow, .green, .blue, .purple
            ], startPoint: .leading, endPoint: .trailing)
            .mask(RadialPattern())
        }
    }

Breakdown:

• LinearGradient: A gradient transitioning between red, orange, yellow, green, blue, and purple colors.

• The gradient spans from the left (.leading) to the right (.trailing) of the screen.

• mask(RadialPattern()): This masks the gradient with our RadialPattern.

Voila! And of course, you can change the look of this pattern by masking it on another view, like a solid color, radial gradient or image etc.

Final Thoughts

By masking a colorful gradient with a radial pattern of dots, you can create stunning and dynamic designs in SwiftUI. This technique can be extended further by experimenting with different shapes, colors, or even animating the pattern.

Feel free to play around with the parameters to make the design your own!

Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email. If you like my posts, 😚consider tipping me at buymeacoffee.com/xavierios.

With a custom toggle, you have the freedom to imbue your interface with a distinctive personality that aligns perfectly with your brand or app theme. Beyond aesthetics, customization grants you precise control over the behavior and animations of the toggle, ensuring a seamless and engaging user experience.

Without further ado, let’s get started.

PS: The code in this post is available here.

Step 1: Set up basic toggle view skeleton and content view for preview

1. Create a ToggleView struct that conforms to View.

2. In side Toggle View’s body, create a HStack that contains a Text, a Spacer and a RoundedRectangle.

3. Add a text property that allows we pass a text to the toggle.

4. Make the corner radius for the rounded rectangle large to make the edges smoother. You can also replace it with a Capsule if you prefer.

5. Add a binding bool called isOn, which reads and writes a bool from outside.

6. Alter the foreground color of the rounded rectangle based on isOn, using an ternary operator isOn ? onColor : offColor. Ideally the color should be configurable, for this tutorial, we’ll keep it simple and use .orange and .accentColor.

    struct ToggleView: View {
        let text: LocalizedStringKey
        @Binding var isOn: Bool
        var body: some View {
            HStack {
                Text(text)
                Spacer()
                RoundedRectangle(cornerRadius: 50)
                    .foregroundColor(isOn ? .orange : .accentColor)
                    .frame(width: 51, height: 31)
                    .onTapGesture { isOn.toggle() }
            }
        }
    }

In the content view, create two toggles and pass a constant true and false for the binding so that we can easily see how the view looks when toggle is on and off at the same time.

    struct ContentView: View {
        var body: some View {
            VStack {
                ToggleView(text: "Custom Toggle On", isOn: .constant(true))
                ToggleView(text: "Custom Toggle Off", isOn: .constant(false))
            }
            .padding()
        }
    }

Below is how it looks as of now. Next step is to add a circle to indicate the toggle state (on or off).

Step 2 - Circle Overlay

To show if the toggle is on or off, we need a circle (or another shape you prefer) a horizontal offset.

1. Add a computed property that determines the offset based on isOn. i.e. var circleOffset: CGFloat { isOn ? 11: -11 }

2. Add an overlay for the rounded rectangle. Inside the overlay, add a circle with x offset of the offset defined above.

    struct ToggleView: View {
        let text: LocalizedStringKey
        @Binding var isOn: Bool
        // -------------- New in Step 2
        private var circleOffset: CGFloat {
            isOn ? 11 : -11
        }
        var body: some View {
            HStack {
                Text(text)
                Spacer()
                RoundedRectangle(cornerRadius: 50)
                    .foregroundColor(isOn ? .orange : .accentColor)
                    .frame(width: 51, height: 31)
                    // -------------- New in Step 2
                    .overlay(
                        Circle()
                            .frame(width: 25,
                                   height: 25)
                            .foregroundColor(.white)
                            .padding(3)
                            .offset(x: circleOffset)
                    )
            }
        }
    }

Now the circle will pushed to right hand side when toggle is on and left hand side if toggle is off.

Step 3 - Image Overlay for the Circle (Optional)

This step is optional. If you want, you can also provide a small icon as an overlay of the circle. This icon will definitely look better if its color is changing based on the toggle state.

Below is an example using "checkmark" and "xmark" SF symbol.

Circle()
    .frame(width: 25,
           height: 25)
    .foregroundColor(.white)
    .padding(3)
    // -------------- New in Step 3
    .overlay(
        Image(systemName: isOn ? "checkmark" : "xmark")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .font(.title.weight(.bold))
            .frame(width: 10,
                   height: 10)
            .foregroundColor(isOn ? .orange : .accentColor)
    )
    .offset(x: circleOffset)

Step 4 - Simple but important logic

As a toggle, don’t forget to change the binding bool value when it’s tapped.

So add an onTapGesture for the RoundedRectangle. To ensure smooth transition, we can also give it a faster animation.

RoundedRectangle(cornerRadius: 50)
    .foregroundColor(isOn ? .orange : .accentColor)
    .frame(width: 51,
           height: 31)
    .overlay(
        Circle()
            .frame(width: 25,
                   height: 25)
            .foregroundColor(.white)
            .padding(3)
            .overlay(
                Image(systemName: isOn ? "checkmark" : "xmark")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .font(.title.weight(.bold))
                    .frame(width: 10,
                           height: 10)
                    .foregroundColor(isOn ? .orange : .accentColor)
            )
            .offset(x: circleOffset)
    )
    // -------------- New in Step 4
    .animation(.linear(duration: 0.15), value: isOn)
    .onTapGesture { isOn.toggle() }

And that’s it! Our toggle is done.

One more thing, in this tutorial, we hardcoded the on and off colors, label as a text etc, actually these can all be a parameter so that the toggle is more customizable, and you can then pass a view as the label instead of a string/localized string key, or pass two colors for design the rounded rectangle color, or even the image/icon on the circle. But I believe this post can give you an idea of the basic customization.

That’s everything for this post.

Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email. If you like my posts, 😚consider tipping me at buymeacoffee.com/xavierios.

In the world of iOS app development, SwiftUI has gained significant popularity due to its modern, declarative approach to building user interfaces. However, there are times when you may need to leverage existing Objective-C view controllers in your SwiftUI project. Integrating Objective-C view controllers with SwiftUI allows you to tap into the vast ecosystem of Objective-C libraries, frameworks, and UI components while enjoying the benefits of SwiftUI's flexibility and simplicity. In this blog post, we will explore the seamless integration of Objective-C view controllers with SwiftUI, unlocking new possibilities for your app development endeavors.

The code in this post is available here.

If you like my posts, 😚consider tipping me at buymeacoffee.com/xavierios

What We’ll be Making

For demonstration purposes, we’re going to build a SwiftUI View which contains an Objective-C(OC) ViewController with a UILabel. And when we tap on the label, the label text switch between "Hello, SwiftUI View!" and "Hello, Objective-C ViewController!". Without further talking, let’s get started!

Step 1. Create an OC View Controller

Go to the project navigation and select a group where you’d like to save the OC view controller, right click and select New File…, then select Cocoa Touch Class.

Tap Next and name the class as OCViewController and make sure it’s a subclass of UIViewController and the language is OC.

Step 2 - Create a Bridging Header

To use an OCView or OCViewController, the OC class should be exposed to Swift. Therefore, we need an OC bridging header that contains import expressions to expose the OC classes we need.

After Step 1, you should see an auto warning like below, select Create Bridging Header. If you canceled or selected Don’t Create accidentally, simply manually create a header file named as ProjectName-Bridging-Header.h.

Inside the header file, we just need an import expression to expose the class we need in Swift.

#import "OCViewController.h"

If you’re using a different name for the OC class, remember to replace the header name with the class name of your choice.

Step 3. Define the UILabel

Since we need access of the UILabel in Swift, it should be defined as a property and exposed in the header of the view controller header.

So go to OCViewController.h and declare a property of type UILabel.

@interface OCViewController : UIViewController
@property(nonatomic, strong, readwrite) UILabel *label;
@end

Step 4. Set up the UILabel in the View Controller

Now go to OCViewController.m to configure the UILabel and add it to the root view inside viewDidLoad method of the OCViewController.

@implementation DemoObjectiveCIntegration20230630_OCViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor systemBackgroundColor];
    _label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 300, 50)];
    _label.adjustsFontSizeToFitWidth = YES;
    _label.textColor = [UIColor systemCyanColor];
    _label.textAlignment = NSTextAlignmentCenter;
    _label.center = self.view.center;
    [self.view addSubview:_label];
}

@end

The code above:

• Sets the background color of the view to the system background color using [UIColor systemBackgroundColor].

• Creates an instance of UILabel with a frame of (0, 0, 300, 50) and assigns it to the **_label** property defined in Step 3.

• Sets the adjustsFontSizeToFitWidth property of _label to YES, which enables adjusting the font size to fit the width of the label.

• Sets the text color of _label to the system cyan color using [UIColor systemCyanColor].

• Sets the text alignment of _label to center using NSTextAlignmentCenter.

• Sets the center of _label to the center of the view using self.view.center.

• Adds _label as a subview to the root view using [self.view addSubview:_label].

Step 5 - Create a SwiftUI View

Similar to Step 1, add a new file, but select SwiftUI View as the template. We’re going to replace the default text view Text("Hello, World!") with the OC view later.

//MARK: - SwiftUI View
    struct ContentView: View {
        var body: some View {
                        Text("Hello, World!")
        }
    }
    //MARK: - SwiftUI Preview
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }

Step 6 - Create a UIViewControllerRepresentable Struct

To bring the OC view controller into SwiftUI view, we need to make a UIViewControllerRepresentable structure. This step is similar to integrating Swift UIKit to SwiftUI as demonstrated in the previous post Integrating UIKit into SwiftUI.

To do this, let’s create a struct called OCView and make it conform to the protocol UIViewControllerRepresentable. And this protocol contains two required methods - makeUIViewController and updateUIViewController.

struct OCView: UIViewControllerRepresentable {
        func makeUIViewController(context: Context) -> OCViewController {
            return OCViewController()
        }

        func updateUIViewController(_ uiViewController: OCViewController, context: Context) {
        }
    }

Step 8. Add Binding Logic

To toggle the UILabel text, we need a binding bool in the OCView struct, and then in the updateUIViewControllermethod, we can change the UILabel text.

struct OCView: UIViewControllerRepresentable {
        @Binding var showOC: Bool
        func makeUIViewController(context: Context) -> OCViewController {
            return OCViewController()
        }

        func updateUIViewController(_ uiViewController: OCViewController, context: Context) {
            uiViewController.label.text = showOC ? "Hello, Objective-C ViewController!" : "Hello, SwiftUI View!"
        }
    }

Inside the OCView struct, add the @Binding bool property called showOC.

Then inside the updateUIViewController method, we can use a ternary operator to check the value of showOC and update the UILabel text value accordingly.

Step 9. Update SwiftUI View

And finally, we can bring the OCView to the SwiftUI View. And to toggle the UILabel text, let’s add a state boolean property called showOC with an initial value of false. Then an onTapSture view modifier to toggle showOC then the OCView is tapped.

struct ContentView: View {
        @State private var showOC: Bool = false
        var body: some View {
            OCView(showOC: $showOC)
                .onTapGesture {
                    showOC.toggle()
                }
        }
    }

And that’s it! See how the integration works below:

Initial stage:

After tapping:

That’s all about OC integration with SwiftUI. In short, after definition of OC view controller and SwiftUI view, we need to make a representable struct for the OC view controller and use the struct inside SwiftUI whenever needed!

Again, If you like my posts, 😚consider tipping me at buymeacoffee.com/xavierios. Don’t forget to subscribe to my newsletter to get more posts like this via email updates!

In today’s post, we’re going to take a look at LazyVGrid in SwiftUI and create a custom calendar view with it. As you can tell from the cover, this calendar view will display the weekdays in the title for each month and allow the user to navigate between months and there a button to switch back to today. Today will be highlighted with a crimson circle and the selected date will be highlighted with a skyblue circle. Apart from LazyVGrid, we’ll also create some functions that work with Calendar and Date classes.

The code in this post is available here.

If you like my posts, 😚consider tipping me at buymeacoffee.com/xavierios

Intro

Creating a custom calendar view in SwiftUI can be a useful and practical addition to your app. While SwiftUI provides built-in components like DatePicker and CalendarView, they may not always meet your specific requirements in terms of functionality or design. By building a custom calendar view, you have complete control over the layout, styling, and interaction of the calendar, allowing you to tailor it to your app's unique needs.

A custom calendar view can be beneficial in various scenarios. For instance, you might want to display events or appointments for a specific date or allow users to select dates within a particular range. You may also want to highlight certain dates or provide additional features such as navigating between months or displaying weekdays in the title.

In this tutorial, we'll walk through the process of creating a custom calendar view in SwiftUI step-by-step. We'll cover essential concepts such as working with dates, using SwiftUI's layout system, handling user interactions, and more. By the end of this tutorial, you'll have a functional and customizable calendar view that you can integrate into your SwiftUI app.

So let's get started and build our own custom calendar view

Step 1: Create a New SwiftUI Project

Open Xcode and create a new SwiftUI project. Name it "CustomCalendarView" or choose any name you prefer.

Step 2: Set Up the Calendar View

Replace the contents of the ContentView.swift file with the following code:

import SwiftUI
struct ContentView: View {
    @State private var month = 1
    @State private var year = 1970
    @State private var selectedDate = Date()
    let skyblue: Color = .init(red: 118/255, green: 169/255, blue: 255/255)
    let crimson: Color = .init(red: 233/255, green: 28/255, blue: 76/255)
    let calendar = Calendar.current
    let dateFormatter: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateFormat = "d"
        return formatter
    }()

    var body: some View {
        // Calendar view code goes here
    }
}

In this step, we set up the initial structure for our calendar view. We defined some state variables for the month, year, and selected date. Additionally, we declared color constants and created a date formatter to format the day numbers.

Step 3: Create the Calendar Title and Navigation Buttons

Inside the body property of the ContentView struct, add the following code:

VStack {
    HStack {
        // Title
        Spacer()
        Text("\\(calendar.monthSymbols[month - 1]) \\(String(year))")
            .font(.title)
            .fontDesign(.monospaced)
        Spacer()
        Button {
            showToday()
        } label: {
            Text("Today")
                .bold()
        }
    }
    // Calendar content
}
.padding()

In this step, we added a VStack to organize the calendar view. Inside the VStack, we created an HStack to display the calendar title. We used the monthSymbols property of the Calendar struct to get the month name based on the monthvariable. The Today button will call the showToday() function when tapped.

Step 4: Implement Calendar Navigation

Below the HStack, add the following code to enable navigation between months:

HStack(spacing: 2) {
    Image(systemName: "chevron.backward.circle.fill")
        // Previous month button
    // Calendar month view
    Image(systemName: "chevron.forward.circle.fill")
        // Next month button
}
.padding(.horizontal, 20)

In this step, we added two Image views to represent the previous and next month buttons. We'll implement their functionality in the upcoming steps.

Step 5: Create the Calendar Month View

Inside the HStack created in the previous step, add the following code to create the calendar month view:

LazyVGrid(columns: Array(repeating: GridItem(), count: 7), spacing: 10) {
    Group {
        Text("SUN")
        Text("MON")
        Text("TUE")
        Text("WED")
        Text("THU")
        Text("FRI")
        Text("SAT")
    }
    .bold()
    .foregroundColor(.secondary)
    .fontDesign(.monospaced)

    ForEach(getCalendarDays(), id: \\.self) { date in
        // Calendar day cell
    }
}
.frame(width: UIScreen.main.bounds.width*0.8)

In this step, we created a LazyVGrid to display the calendar days. The Group at the beginning contains the weekday labels (SUN, MON, TUE, etc.). We then use a ForEach loop to iterate through the getCalendarDays() function, which will return the dates for the current month. We will implement the functionality of the calendar day cell in the next step.

Step 6: Implement Calendar Day Cell

Inside the ForEach loop in the previous step, add the following code to create the calendar day cell:

ZStack {
    // Show crimson circle for today
    // Show sky blue circle for selected date
    // Show date number on the top
    // Transparent circle for padding
}
.onTapGesture {
    // Handle date selection
}

In this step, we created a ZStack to stack different elements in the calendar day cell. We use Circle views to represent the selected date and today's date. The date number is displayed on top of the circles. Finally, we added an onTapGesturemodifier to handle date selection.

Step 7: Implement Calendar Navigation Actions

Below the LazyVGrid, add the following code to implement the navigation actions:

Image(systemName: "chevron.backward.circle.fill")
    .resizable()
    .scaledToFit()
    .foregroundColor(.secondary)
    .frame(width: 35, height: 35)
    .onTapGesture {
        // Navigate to previous month
    }

Image(systemName: "chevron.forward.circle.fill")
    .resizable()
    .scaledToFit()
    .foregroundColor(.secondary)
    .frame(width: 35, height: 35)
    .onTapGesture {
        // Navigate to next month
    }

In this step, we added the previous and next month buttons. We used the SF Symbols system icon "chevron.backward.circle.fill" and "chevron.forward.circle.fill" to represent the buttons. We also implemented the onTapGesture modifiers to handle the navigation actions.

Step 8: Implement Calendar Helper Functions

Below the body property of the ContentView struct, add the following extension to implement helper functions for the calendar:

extension ContentView {
    // Load current year and month
    func showToday() {
        year = calendar.component(.year, from: Date())
        month = calendar.component(.month, from: Date())
    }

    func getCalendarDays() -> [Date] {
        let startDate = calendar.date(from: DateComponents(year: year, month: month))!
        return getDatesForMonthToPresent(for: startDate)
    }

    func isCurrentMonth(date: Date) -> Bool {
        let components = calendar.dateComponents([.year, .month], from: date)
        return components.month == month && components.year == year
    }

    // Calendar functions go here

    // Date functions go here
}

In this step, we added an extension to the ContentView struct to include helper functions for the calendar. The showToday() function sets the year and month variables to the current date. The getCalendarDays() function retrieves the dates for the current month. The isCurrentMonth() function checks if a given date belongs to the current month.

Step 9: Implement Calendar Functions

Inside the extension, add the following code to implement the calendar functions:

// Get all dates of a month
func getDatesInMonth(dateInterval: DateInterval, dateComponent: DateComponents) -> [Date] {
    var dates: [Date] = []
    dates.append(dateInterval.start)

    calendar.enumerateDates(startingAfter: dateInterval.start, matching: dateComponent, matchingPolicy: .nextTime) { date, _, stop in
        guard let date = date else {
            return
        }

        if date < dateInterval.end {
            dates.append(date)
        } else {
            stop = true
        }
    }

    return dates
}

// Get all dates of a month + ending days from last month + startings days from next month
func getDatesForMonthToPresent(for month: Date) -> [Date] {
    guard
        let monthInterval = calendar.dateInterval(of: .month, for: month),
        let monthFirstWeek = calendar.dateInterval(of: .weekOfMonth, for: monthInterval.start),
        let monthLastWeek = calendar.dateInterval(of: .weekOfMonth, for: monthInterval.end)
    else {
        return []
    }

    return self.getDatesInMonth(
        dateInterval: DateInterval(start: monthFirstWeek.start, end: monthLastWeek.end),
        dateComponent: DateComponents(hour: 0, minute: 0, second: 0)
    )
}

// Other date functions go here

In this step, we implemented two calendar functions. The getDatesInMonth() function retrieves all the dates within a given month. The getDatesForMonthToPresent() function returns the dates for the current month, including the ending days from the last month and the starting days from the next month.

Step 10: Implement Date Functions

Inside the extension, add the following code to implement the date functions:

// Check if two dates are the same day
func isSameDay(_ date1: Date, _ date2: Date) -> Bool {
    let components: Set<Calendar.Component> = [.year, .month, .day]
    return calendar.dateComponents(components, from: date1) == calendar.dateComponents(components, from: date2)
}

In this step, we implemented the isSameDay() function, which checks if two dates are the same day by comparing their year, month, and day components.

Step 11: Complete the Calendar View

Finally, replace the existing ContentView struct in the ContentView.swift file with the following code:

struct ContentView: View {
    @State private var month = 1
    @State private var year = 1970
    @State private var selectedDate = Date()
    let skyblue: Color = .init(red: 118/255, green: 169/255, blue: 255/255)
    let crimson: Color = .init(red: 233/255, green: 28/255, blue: 76/255)
    let calendar = Calendar.current
    let dateFormatter: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateFormat = "d"
        return formatter
    }()

    var body: some View {
        VStack {
            HStack {
                Spacer()
                Text("\\(calendar.monthSymbols[month - 1]) \\(String(year))")
                    .font(.title)
                    .fontDesign(.monospaced)
                Spacer()
                Button {
                    showToday()
                } label: {
                    Text("Today")
                        .bold()
                }
            }
            HStack(spacing: 2) {
                Image(systemName: "chevron.backward.circle.fill")
                    .resizable()
                    .scaledToFit()
                    .foregroundColor(.secondary)
                    .frame(width: 35, height: 35)
                    .onTapGesture {
                        navigateToPreviousMonth()
                    }

                LazyVGrid(columns: Array(repeating: GridItem(), count: 7), spacing: 10) {
                    Group {
                        Text("SUN")
                        Text("MON")
                        Text("TUE")
                        Text("WED")
                        Text("THU")
                        Text("FRI")
                        Text("SAT")
                    }
                    .bold()
                    .foregroundColor(.secondary)
                    .fontDesign(.monospaced)

                    ForEach(getCalendarDays(), id: \\.self) { date in
                        ZStack {
                            Circle()
                                .foregroundColor(isSameDay(date, Date()) ? crimson : .clear)
                                .frame(width: 35, height: 35)

                            Circle()
                                .foregroundColor(isSameDay(date, selectedDate) ? skyblue : .clear)
                                .frame(width: 25, height: 25)

                            Text(dateFormatter.string(from: date))
                                .font(.headline)
                                .bold()
                                .foregroundColor(isCurrentMonth(date: date) ? .primary : .secondary)
                                .frame(width: 25, height: 25)
                        }
                        .onTapGesture {
                            selectedDate = date
                        }
                    }
                }
                .frame(width: UIScreen.main.bounds.width*0.8)

                Image(systemName: "chevron.forward.circle.fill")
                    .resizable()
                    .scaledToFit()
                    .foregroundColor(.secondary)
                    .frame(width: 35, height: 35)
                    .onTapGesture {
                        navigateToNextMonth()
                    }
            }
            .padding(.horizontal, 20)
        }
        .padding()
    }

    func showToday() {
        year = calendar.component(.year, from: Date())
        month = calendar.component(.month, from: Date())
    }

    func navigateToPreviousMonth() {
        if month == 1 {
            year -= 1
            month = 12
        } else {
            month -= 1
        }
    }

    func navigateToNextMonth() {
        if month == 12 {
            year += 1
            month = 1
        } else {
            month += 1
        }
    }

    func getCalendarDays() -> [Date] {
        let startDate = calendar.date(from: DateComponents(year: year, month: month))!
        return getDatesForMonthToPresent(for: startDate)
    }

    func isCurrentMonth(date: Date) -> Bool {
        let components = calendar.dateComponents([.year, .month], from: date)
        return components.month == month && components.year == year
    }

    func getDatesInMonth(dateInterval: DateInterval, dateComponent: DateComponents) -> [Date] {
        var dates: [Date] = []
        dates.append(dateInterval.start)

        calendar.enumerateDates(startingAfter: dateInterval.start, matching: dateComponent, matchingPolicy: .nextTime) { date, _, stop in
            guard let date = date else {
                return
            }

            if date < dateInterval.end {
                dates.append(date)
            } else {
                stop = true
            }
        }

        return dates
    }

    func getDatesForMonthToPresent(for month: Date) -> [Date] {
        guard
            let monthInterval = calendar.dateInterval(of: .month, for: month),
            let monthFirstWeek = calendar.dateInterval(of: .weekOfMonth, for: monthInterval.start),
            let monthLastWeek = calendar.dateInterval(of: .weekOfMonth, for: monthInterval.end)
        else {
            return []
        }

        return self.getDatesInMonth(
            dateInterval: DateInterval(start: monthFirstWeek.start, end: monthLastWeek.end),
            dateComponent: DateComponents(hour: 0, minute: 0, second: 0)
        )
    }

    func isSameDay(_ date1: Date, _ date2: Date) -> Bool {
        let components: Set<Calendar.Component> = [.year, .month, .day]
        return calendar.dateComponents(components, from: date1) == calendar.dateComponents(components, from: date2)
    }
}

This completes the implementation of the calendar view. Run the app, and you should see a calendar interface with navigation buttons, the month and year displayed, and the ability to select dates. The selected date will be highlighted with a sky blue circle, and today's date will be highlighted with a crimson circle.

As you can see from the cover, in today’s post, I’m going to demonstrate how to create a dynamic list of transactions in SwiftUI using an enumerated array to make background color alternating. A ForEach would do the trick for the list, however, to make the row background conditional, we need to have access to the index of each row inside ForEach. In short, we can use an array of enumerated array. Continue reading to learn how.

The code in this post is available here.

If you like my posts, 😚consider tipping me at buymeacoffee.com/xavierios

Transaction Model

First of all, let’s build a model for the transaction data.

This struct conforms to the Identifiable protocol, which means it has a unique identifier. The struct has three properties:

1. id: This property is of type UUID (Universally Unique Identifier) and is initialized with a randomly generated unique identifier using the UUID() initializer.

2. date: This property represents a date and is of type Date.

3. amount: This property represents a numeric amount and is of type Double.

struct Transaction: Identifiable {
        let id = UUID()
        let date: Date
        let amount: Double
    }

Array of Transactions

The next step is to prepare an array of transactions to be displayed. Let’s use a private state property.

struct ContentView: View {
    @State private var transactions: [Transaction] = []
    var body: some View {
        VStack {}
    }
}

And then populate the array with random data when the view loads. We can do this inside an onAppear view modifier. Then we need to populate the array and we can do this by generating 50 random transactions with dates ranging from 2010 to 2022 and amounts between 10 and 200.

struct ContentView: View {
    @State private var transactions: [Transaction] = []
    var body: some View {
            VStack {}
                .onAppear {
                        for _ in 0...49 {
                    transactions.append(.init(
                        date: Calendar.current.date(from: .init(year: Int.random(in: 2010...2022), month: Int.random(in: 2...10), day: Int.random(in: 1...20)))!,
                        amount: Double.random(in: 10...200))
                    )
                }
                transactions.sort { $0.date > $1.date }
                }
    }
}

• The date property is set to a randomly generated date between the years 2010 and 2022, with a random month between 2 and 10, and a random day between 1 and 20. The Calendar.current.date(from:) method is used to create a Date object from the specified components.

• The amount property is set to a random double value between 10 and 200.

And last step of the data prep is to sort the transactions in descending order based on their dates.

struct ContentView: View {
    @State private var transactions: [Transaction] = []
    var body: some View {
            VStack {}
                .onAppear {
                        for _ in 0...49 {
                    transactions.append(.init(
                        date: Calendar.current.date(from: .init(year: Int.random(in: 2010...2022), month: Int.random(in: 2...10), day: Int.random(in: 1...20)))!,
                        amount: Double.random(in: 10...200))
                    )
                }
                                // ------ New Code Below -------
                transactions.sort { $0.date > $1.date }
                }
    }
}

After the loop, the transactions array is sorted in descending order based on the date property using the sort method and a closure. The $0 and $1 are shorthand arguments referring to two elements being compared, and the closure specifies the sorting criteria ($0.date > $1.date), meaning it sorts the transactions based on the date property in descending order.

UI Setup

Now let’s set up the UI before moving forward:

Embed the VStack inside a NavigationView and change the VStack to a ScrollView. Then give it a navigation title of “Transaction Records”.

struct ContentView: View {
        @State private var transactions: [Transaction] = []
        var body: some View {
            NavigationView {
                ScrollView {

                }
                .navigationTitle("Transaction Records")
            }
            .onAppear {
                                //... code from above
            }
        }
    }

Build the list with ForEach

Now inside the ScrollView, we need a ForEach to iterate over the transactions.

ForEach(transactions) { transaction in
                        HStack {
                            Text(transaction.date.formatted(date: .abbreviated, time: .omitted))
                            Spacer()
                            Text("$" + transaction.amount.toString1(2))
                        }
                        .padding(.horizontal, 20)
                        .padding(.vertical, 5)
                    }

The code above is a ForEach loop that iterates over the transactions array and creates a view for each element in the array.

Inside the loop, a HStack view is created to display the transaction information. It consists of two Text views and a Spacer.

The first Text view displays the formatted date of the transaction using the formatted method. It specifies the date style as .abbreviated, which will display the date in an abbreviated format, and the time style as .omitted, which will exclude the time component.

The second Text view displays the amount of the transaction. The amount is converted to a string with two decimal places using the String(format, value) method, and then concatenated with the "$" symbol.

The HStack view is then modified with padding using the .padding modifier. It adds horizontal padding of 20 points and vertical padding of 5 points to the view.

Background Color Time!

Now it’s time to work on the background color alternating between rows.

Since we need the index of each row, we can use enumerated() function to access the index. However, this method returns a type called EnumeratedSequence and we need an array for ForEach, hence we need an extra wrapper to convert it back to an array. The item inside the array will be a pair of index (offset) and the element (transaction).

ForEach(Array(transactions.enumerated()), id: \\.element.id) { offset, transaction in
                        HStack {
                            Text("\\(offset + 1)").frame(width: 40)
                            Text(transaction.date.formatted(date: .abbreviated, time: .omitted))
                            Spacer()
                            Text("$" + transaction.amount.toString1(2))
                        }
                        .padding(.horizontal, 10)
                        .padding(.vertical, 11)
                        .background(offset % 2 == 0 ? Color.secondary.opacity(0.5) : Color.clear)
                    }

This time we use Array(transactions.enumerated()) to get pairs of index and transaction. And we need to specify the id with a keypath \\.element.id. The ForEach closure signature also updates from transaction to offset, transaction.

Then inside the HStack we add an extra Text View to display the offset value added by one as the row number.

And finally, we use a background view modifier to make the conditional background color, whose value is set with a ternary operator, checking if the offset value is even. If yes, the background color will be secondary, otherwise, it’s set to clear. Et voilà!

And that’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.

I’ll see you in the next post!

The code in this post is available here.

If you like my posts, 😚consider tipping me at buymeacoffee.com/xavierios

Set up the basic view structure

In the SettingsView struct, start by creating a NavigationView and a List view inside it. The List will contain the different sections and settings items.

struct SettingsView: View {
    var body: some View {
        NavigationView {
            List {
                // settings sections and items will go here
            }
            .listStyle(GroupedListStyle())
            .navigationTitle("Settings")
        }
    }
}

Here, we're also adding a GroupedListStyle to the List and setting the navigation title to "Settings".

Add the settings sections and items

Inside the List, create the different Section views for each group of settings items. Then, add NavigationLink views inside each section to represent the different settings items.

    struct SettingsView: View {
        var body: some View {
            NavigationView {
                List {
                    Section(header: Text("GENERAL")) {
                        NavigationLink(destination: Text("Do Not Disturb")) {
                            HStack {
                                Image(systemName: "moon")
                                Text("Do Not Disturb")
                            }
                        }
                        NavigationLink(destination: Text("Display & Brightness")) {
                            HStack {
                                Image(systemName: "textformat.size")
                                Text("Display & Brightness")
                            }
                        }
                        NavigationLink(destination: Text("Sounds & Haptics")) {
                            HStack {
                                Image(systemName: "speaker.2")
                                Text("Sounds & Haptics")
                            }
                        }
                        NavigationLink(destination: Text("Screen Time")) {
                            HStack {
                                Image(systemName: "hourglass")
                                Text("Screen Time")
                            }
                        }
                    }
                    Section(header: Text("ACCOUNTS")) {
                        NavigationLink(destination: Text("iCloud")) {
                            HStack {
                                Image(systemName: "icloud")
                                Text("iCloud")
                            }
                        }
                        NavigationLink(destination: Text("Password & Security")) {
                            HStack {
                                Image(systemName: "lock")
                                Text("Password & Security")
                            }
                        }
                    }
                    Section(header: Text("ABOUT")) {
                        NavigationLink(destination: Text("General")) {
                            HStack {
                                Image(systemName: "info.circle")
                                Text("General")
                            }
                        }
                        NavigationLink(destination: Text("Software Update")) {
                            HStack {
                                Image(systemName: "arrow.up.right.circle")
                                Text("Software Update")
                            }
                        }
                    }
                }
                .listStyle(GroupedListStyle())
                .navigationTitle("Settings")
            }
        }
    }

Here, we're using header to add a title to each section, and destination to specify the detail view that should be shown when the user taps on the NavigationLink. We're also using a HStack to combine an image (using the Image view with a system name) and a text label (using the Text view).

ListStyle

We can make the the section rows more like rounded rectangles by changing the value of the view modifier .listStyle from GroupedListStyle() to InsetGroupedListStyle(), or even simpler .insetGrouped.

.listStyle(.insetGrouped)

or

.listStyle(InsetGroupedListStyle())

And that’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.

I’ll see you in the next post!

The code in this post is available here.

If you like my posts, 😚consider tipping me at buymeacoffee.com/xavierios

Step 1: Create a View Model

The first step is to create a view model that will be responsible for loading the data. The view model should have a method that starts loading the data and sets a property to indicate whether the data is being loaded or not.

class ViewModel: ObservableObject {
  @Published var isLoading = false
  var data: [String] = []

  func loadData() {
    isLoading = true
    // Code to load data goes here
    DispatchQueue.main.asyncAfter(deadline: .now() + 2) { // Simulate loading delay
      self.data = ["Data 1", "Data 2", "Data 3"]
      self.isLoading = false
    }
  }
}

In this example, we use the @Published property wrapper to publish the isLoading property and allow it to be observed by the view. The loadData method simulates loading data with a delay of 2 seconds and updates the data property and the isLoading property accordingly.

Step 2: Create an Animating View

The next step is to create an animating view that will be displayed while the data is being loaded. In this example, we will create a simple spinner view that rotates continuously.

struct SpinnerView: View {
  @State private var isAnimating = false

  var body: some View {
    VStack {
      Circle()
        .trim(from: 0, to: 0.7)
        .stroke(Color.blue, lineWidth: 4)
        .frame(width: 50, height: 50)
        .rotationEffect(Angle(degrees: isAnimating ? 360 : 0))
        .animation(Animation.linear(duration: 3).repeatForever(autoreverses: false), value: UUID())
        .onAppear {
          self.isAnimating = true
        }
    }
  }
}

In this example, we use the Circle shape to create the spinner and the rotationEffect modifier to rotate it continuously. We also use the animation modifier to animate the rotation and the onAppear modifier to start the animation when the view appears.

Step 3: Create the Main View

The final step is to create the main view that will display the animating view while the data is being loaded. In this example, we will use the if statement to conditionally display the spinner view or the loaded data based on the value of the isLoading property.

struct ContentView: View {
  @StateObject var viewModel = ViewModel()

  var body: some View {
    VStack {
      if viewModel.isLoading {
        SpinnerView()
      } else {
        List(viewModel.data, id: \.self) { item in
          Text(item)
        }
      }
    }
    .onAppear {
      viewModel.loadData()
    }
  }
}

In this example, we use the if statement to conditionally display the SpinnerView or the loaded data in a List view. We also use the onAppear modifier to start loading the data when the view appears.

Conclusion

Creating an animating view in SwiftUI while loading data is a simple yet effective way to provide feedback to the user and prevent them from getting frustrated. By following the steps outlined in this blog post, you can easily create an animating view that fits your app’s design and style. It's worth noting that there are many different ways to create animating views in SwiftUI, and this is just one example.

In summary, creating an animating view in SwiftUI while loading data involves creating a view model that loads the data and sets a property to indicate whether the data is being loaded or not, creating an animating view that is displayed while the data is being loaded, and creating the main view that conditionally displays the animating view or the loaded data based on the value of the isLoading property. By following these steps, you can create a great user experience that makes your app feel responsive and engaging.

And that’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email. If you like my posts, 😚consider tipping me at buymeacoffee.com/xavierios

I’ll see you in the next post!

The code in this post is available here.

What the heck is MVVM

First, let's take a brief look at the three components of MVVM:

1. Model: This represents the data and how the data get structured. In most cases, a model is a struct or multiple structs.

2. View: This represents the user interface of the application. It includes things like buttons, labels, text fields, and other UI elements, and of course, a representation of the data in the front end.

3. ViewModel: This acts as a mediator between the View and the Model. It exposes data from the Model to the View and handles user interactions from the View to the Model. Basically, it handles the business logic, such as preparing data, sorting, event handling.

Implementation

Let’s create a simple List-of-Posts app to taste MVVM.

First of all, we need to build up the model.

    struct Post {
        let id: Int
        let title: String
        let description: String
    }

In the example above, we created a struct called Post with three properties. And later we’re going to display the content of Post items. Here Post is our model since it defines what data we are going to process.

Second, we build the view model to prepare the post data for the view.

    class PostViewModel: ObservableObject {
        @Published var posts: [Post] = []
        func getPosts() {
            posts = [
                .init(id: 1, title: "Lorem ipsum dolor sit amet", description: "consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"),
                .init(id: 2, title: "quis nostrud exercitation", description: "ullamco laboris nisi ut aliquip ex ea commodo consequat"),
                .init(id: 3, title: "Duis aute irure dolor in reprehenderit", description: "in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
            ]
        }
    }

In this example, we have a class called PostViewModel that has a posts property and a function called getPosts that is responsible for loading the posts from an API. (For demo purpose, I’m initializing some values manually.) The @Published property wrapper is used to make the posts property observable, which allows the View to update itself whenever the property changes.

And finally, it comes to the view. In SwiftUI, Views are typically created using declarative syntax. This means that we define the UI elements and their properties using a hierarchy of views. Here's an example of a view that displays a list of posts:

    struct ContentView: View {
        @StateObject var vm = PostViewModel()
        var body: some View {
            NavigationView {
                List {
                    ForEach(vm.posts, id: \.id) { post in
                        HStack {
                            VStack(alignment: .leading) {
                                Text(post.title).bold()
                                Text(post.description)
                                    .lineLimit(2)
                                    .font(.footnote)
                                    .foregroundColor(.secondary)
                            }
                            Spacer()
                            Text("\(post.id)")
                                .bold()
                                .foregroundColor(.secondary)
                                .padding()
                        }
                    }
                }
                .navigationTitle("Posts - MVVM")
            }
            .onAppear {
                vm.getPosts()
            }
        }
    }

In this example, we have a view called ContentView displaying a list of posts. The view has a reference to a PostViewModel, which is responsible for loading the posts and providing them to the view. The List element is used to display the posts in a scrollable list, and each post has a row with its title, description and ID. The onAppear modifier calls the getPosts function inside the view model so that all three posts will get ready when the view loads.

Now that all MVVM components are done, we can check the preview canvas and you can see that all three posts are shown. Our code is simply and clean, we only have to call the getPosts function in the view and the view itself only defines what the UI should look like, without touching the business logic (getPosts function in our case).

In summary, MVVM is a powerful architectural pattern that can be used to build scalable and maintainable applications. With SwiftUI, it is easier than ever to implement MVVM in your projects. The sample list of posts shown here demonstrates how MVVM can be used to build a simple, yet functional, application.

And that’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.

I’ll see you in the next post!

The code in this post is available here.

Using String Interpolation formatter

One way to format decimal places in Swift is by using string interpolation. You can use the String(format: ) method to specify the number of decimal places you want to display. Here's an example:

extension Double {
    //MARK: - Using string interpolation
    func toString1(_ numOfDecimal: Int) -> String {
        return String(format: "%.\(numOfDecimal)f", self)
    }
}

In this example, we used the format specifier to indicate that we want to display how many decimal places after the decimal point. For instance, if the integer passed into the function is 2, the format specifier would be "%.2f" and the result of Double(3).toString1(2) is "3.00".

Using NSNumber Formatter

NumberFormatter is a class in Swift that allows you to format NSNumbers in various ways, including specifying the number of decimal places to display. Here's an example:

extension Double {
    //MARK: - Using NSNumberFormatter
    func toString2(_ numOfDecimal: Int) -> String {
        let formatter = NumberFormatter()
        formatter.numberStyle = .decimal
        formatter.maximumFractionDigits = numOfDecimal
        return formatter.string(from: self as NSNumber) ?? ""
    }
}

In this example, we created an instance of NumberFormatter and set the numberStyle property to .decimal to format the number with decimal separators. We also set the maximumFractionDigits property to 2 to display two decimal places after the decimal point, if numOfDecimal is 2.

Usage of the functions above

We can build a simple SwiftUI view to check how the function can be used.

struct ContentView: View {
    let pi = Double.pi
    @State private var digit: Int = 0
    var body: some View {
        NavigationView {

            VStack {
                Stepper("Number of digit (0-16)", value: $digit)
                    .onChange(of: digit) { newValue in
                        if newValue < 0 {
                            digit = 0
                        }
                        if newValue >= 16 {
                            digit = newValue - 1
                        }
                    }
                getRow("Unformatted", "\(pi)")
                getRow("String interpolation", pi.toString1(digit))
                getRow("NSNumberFormatter", pi.toString2(digit))
            }
            .padding(.horizontal, 20)
        }
    }
    func getRow(_ type: String, _ value: String) -> some View {
        VStack {
            Divider()
            HStack {
                Text(type).bold()
                Spacer()
                Text(value)
            }
        }
    }
}

The SwiftUI view example above contains a function that creates rows (technically a VStack with a Divider and an HStack inside), and each HStack contains two texts separated by a Spacer, one of which is bolded.

The main view contains a stepper to control the digit numbers, with an onChange modifier to limit the number between 0 ~ 16 digits. The getRow function is called three times to create three rows: The first row shows the unformatted string interpolation of the math π (Double.pi), and the second and third rows show the value returned by the functions above inside a Text View.

In conclusion, formatting decimal places in Swift is easy and can be done using 2 methods, including string interpolation, and NSNumber Formatter. Depending on your needs, you can choose the method that works best for you.

The code in this post is available here.

Define the Environment Object

The first step in using Environment Object is to define it. You can do this by creating a class or struct that conforms to the ObservableObject protocol, and adding the @EnvironmentObject property wrapper to any view that needs access to it. Here's an example of how to define an Environment Object:

class UserData: ObservableObject {
    @Published var username = "Guest"
}

In this example, we define a UserData class that conforms to the ObservableObject protocol, and has a published property called username.

Use the Environment Object in Views

Once you have defined your Environment Object, you can use it in your views by adding the @EnvironmentObject property wrapper. Here's an example of how to use the UserData object we defined earlier:

struct ContentView: View {
    @EnvironmentObject var userData: UserData

    var body: some View {
        Text("Welcome, \(userData.username)!")
    }
}

In this example, we add the @EnvironmentObject property wrapper to the userData property, and use it to display the username property in the Text view.

Don't Overuse Environment Object

While Environment Object is a powerful tool, it's important to use it sparingly. Overusing Environment Object can make your code harder to read and maintain, and can lead to performance issues. Instead, consider using other data-sharing techniques such as passing data through view modifiers or using a dedicated data store.

Keep Environment Object Small

When defining an Environment Object, it's important to keep it small and focused on a single task. For example, if you have a large data set that needs to be shared across multiple views, consider breaking it down into smaller, more focused Environment Objects.

Use Lazy Initialization

When using Environment Object, it's a good idea to use lazy initialization to create the object. This ensures that the object is only created when it's needed, and can help to improve performance. Here's an example of how to use lazy initialization with an Environment Object:

struct ContentView: View {
    @EnvironmentObject var userData: UserData

    var body: some View {
        VStack {
            Text("Welcome, \(userData.username)!")
            Button(action: {
                userData.username = "John"
            }) {
                Text("Update Username")
            }
        }
    }
}

struct MainView: View {
    var body: some View {
        ContentView().environmentObject(UserData())
    }
}

In this example, we use lazy initialization to create the UserData object when it's needed in the ContentView view. (The instance of UserData is created inside MainView when the environmentObject is needed, instead of inside the ContentView.)

Conclusion

Environment Object is a powerful tool for managing shared data in SwiftUI, but it's important to use it wisely. By defining small, focused Environment Objects and using lazy initialization, you can ensure that your code is easy to read and maintain, and that your app performs well. With these best practices, you can make the most of Environment Object in your SwiftUI app.

And that’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.

I’ll see you in the next post!

The code in this post is available here.

Single Day-of-Week Picker using Picker

To implement a day of the week picker in SwiftUI, we first need to create an array of the days of the week. We can do this using an enum, like this:

enum Day: String, CaseIterable {
    case Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday
}

Here, we've defined an enum called Day that has seven cases, one for each day of the week. We've also used the CaseIterable protocol to make it easy to iterate over all the cases of the enum.
Next, we can create a Picker view that displays the days of the week. Here's an example of how to do this:

struct DayPicker: View {
    @State private var selectedDay = Day.Monday

    var body: some View {
        Picker("Day", selection: $selectedDay) {
            ForEach(Day.allCases, id: \.self) {
                Text($0.rawValue).tag($0)
            }
        }
    }
}

Here, we've defined a DayPicker view that contains a Picker. We've also defined a @State variable called selectedDay that will hold the user's selected day of the week.

The Picker itself is created using the Picker initializer. We pass in a string that will be used as the label for the Picker, and a binding to the selectedDay variable. This will update the variable whenever the user selects a new day of the week.

We then use a ForEach loop to create a Text view for each day of the week. We use the id parameter to ensure that each item in the loop has a unique identifier. We also use the tag method to set the tag of each Text view to the corresponding Day enum value.

Finally, we can use the DayPicker view in our app wherever we need a day of the week picker. For example, we could use it in a form to allow the user to schedule a recurring event on a specific day of the week.

Custom Days-of-Week Picker supporting multiple choices

To create a custom days of week picker, we need a @State property of type array of Day to hold the options picked. And inside the body property, let’s create an HStack to display all the options.

struct DaysPicker: some View {
    @State private var selectedDays: [Day] = []
    var body: some View {
        HStack {
            // more code will go here.
        }
    }
}

Inside the HStack, we need a ForEach to show all the options, for better user experience, we can use the first letter of the raw value of the Day options.

struct DaysPicker: some View {
    @State private var selectedDays: [Day] = []
    var body: some View {
        HStack {
            ForEach(Day.allCases, id: \.self) { day in
                Text(String(day.rawValue.first!))
            }
        }
    }
}

Now we can style the text and remember to make the view modifiers conditional to indicate if a day is selected or not.

struct DaysPicker: View {
    @State private var selectedDays: [Day] = []
    var body: some View {
        HStack {
            ForEach(Day.allCases, id: \.self) { day in
                Text(String(day.rawValue.first!))
                    .bold()
                    .foregroundColor(.white)
                    .frame(width: 30, height: 30)
                    .background(selectedDays.contains(day) ? Color.cyan.cornerRadius(10) : Color.gray.cornerRadius(10))
            }
        }
    }
}

In the example above, we added the bold modifier and a white foreground color and a frame for each text view. Then we used a ternary operator to check if the array selectedDays contains the specific item in the ForEach - if true, the background color is cyan and if false, the background color will be gray.

Finally, we can add an onTapGesture to update the state array selectedDays .

struct DaysPicker: View {
    @State private var selectedDays: [Day] = []
    var body: some View {
        HStack {
            ForEach(Day.allCases, id: \.self) { day in
                Text(String(day.rawValue.first!))
                    .bold()
                    .foregroundColor(.white)
                    .frame(width: 30, height: 30)
                    .background(selectedDays.contains(day) ? Color.cyan.cornerRadius(10) : Color.gray.cornerRadius(10))
                    .onTapGesture {
                        if selectedDays.contains(day) {
                            selectedDays.removeAll(where: {$0 == day})
                        } else {
                            selectedDays.append(day)
                        }
                    }
            }
        }
    }
}

In the example above, we added an onTapGesture modifier, in which we are checking if the day being processed by ForEach is there in the array, if yes, the code will remove it from the array, otherwise, the day will be added to the array.

Now you should be able to see the selected days having a cyan background.

In conclusion, SwiftUI makes it easy to implement a day of the week picker. By using an enum and the Picker view or HStack, we can create a simple and intuitive UI element that allows the user to select a day of the week with ease.

And that’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.

I’ll see you in the next post!

The code in this post is available here.

To use regex in SwiftUI, you first need to import the Foundation framework, which contains the NSRegularExpression class for working with regex. Here's an example of how to use regex to validate an email address in SwiftUI:

import SwiftUI
import Foundation

struct ContentView: View {
    @State private var email: String = ""
    @State private var isEmailValid: Bool = false

    var body: some View {
        VStack {
            TextField("Enter email", text: $email)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            Text("Email is \(isEmailValid ? "valid" : "invalid")")
                .foregroundColor(isEmailValid ? .green : .red)
                .padding()

            Button("Validate email") {
                isEmailValid = isValidEmail(email)
            }
            .padding()
        }
    }

    func isValidEmail(_ email: String) -> Bool {
        let regex = try! NSRegularExpression(pattern: "^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$", options: [.caseInsensitive])
        return regex.firstMatch(in: email, options: [], range: NSRange(location: 0, length: email.utf16.count)) != nil
    }
}

In the above code, we define a TextField for entering an email address, and a Text view that displays whether the email is valid or not. When the "Validate email" button is tapped, we call the isValidEmail function, which uses a regex pattern to validate the email address.

Let’s take a closer look at the regex value:

^[A-Z0-9._%+-]+ - The string being checked must start with one or more (+) of characters that’s a letter(A-Z), a number(0-9) or one of the following special characters (. _ % + -).

@ - The string being checked must contain an "at" sign @, following the characters mentioned above.

[A-Z0-9.-]+ The string being checked must contain one or more letters(A-Z), numbers(0-9), a dot(.) or a hyphen(-), following the "at" sign(@).

\\.[A-Z]{2,}$ The string being checked must ends with($) a dot(.) following by at least 2 ({2,})characters of letters([A-Z]).

For a better user experience, we can also replace the Button with a onChange view modifier so that the email will be checked against the regex whenever its value gets changed.

import SwiftUI
import Foundation

struct ContentView: View {
    @State private var email: String = ""
    @State private var isEmailValid: Bool = false

    var body: some View {
        VStack {
            TextField("Enter email", text: $email)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            Text("Email is \(isEmailValid ? "valid" : "invalid")")
                .foregroundColor(isEmailValid ? .green : .red)
                .padding()

//            Button("Validate email") {
//                isEmailValid = isValidEmail(email)
//            }
//            .padding()
                .onChange(of: email) { newValue in
                    isEmailValid = isValidEmail(newValue)
                }
        }
    }

    func isValidEmail(_ email: String) -> Bool {
        let regex = try! NSRegularExpression(pattern: "^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$", options: [.caseInsensitive])
        return regex.firstMatch(in: email, options: [], range: NSRange(location: 0, length: email.utf16.count)) != nil
    }
}

Here are a few more examples of how to use regex in SwiftUI:

• Masking a phone number:

    func maskAPhoneNumber(_ phoneNumber: String) -> String {
        let regex = try! NSRegularExpression(pattern: "^\\d{3}\\d{3}\\d{4}$", options: [])
        return regex.stringByReplacingMatches(in: phoneNumber, options: [], range: NSRange(location: 0, length: phoneNumber.utf16.count), withTemplate: "***-***-$3")
    }

• Extracting hashtags from a string:

    func extractHashtag(_ string: String) -> [String] {
        let regex = try! NSRegularExpression(pattern: "#\\w+", options: [])
        let matches = regex.matches(in: string, options: [], range: NSRange(location: 0, length: string.utf16.count))
        return matches.map { match in
            (string as NSString).substring(with: match.range)
        }
    }

• Replacing all instances of a word in a string:

    func replace(_ old: String, with new: String, in string: String) -> String {
        let regex = try! NSRegularExpression(pattern: "\\b\(old)\\b", options: [.caseInsensitive])
        return regex.stringByReplacingMatches(in: string, options: [], range: NSRange(location: 0, length: string.utf16.count), withTemplate: new)
    }

• Validating a password:

    func isValidPassword(_ password: String) -> Bool {
        let regex = try! NSRegularExpression(pattern: "^(?=.*[A-Z])(?=.*\\d)[A-Za-z\\d@$!%*?&]{8,}$", options: [])
        return regex.firstMatch(in: password, options: [], range: NSRange(location: 0, length: password.utf16.count)) != nil
    }

And that’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.

I’ll see you in the next post!

In this blog post, we will learn how to implement drag-and-drop reordering in a SwiftUI List using the onMove modifier. Let's get started!

The code in this post is available here.

Step 1: Create a List with data

First, let's create a simple list with some data. For this example, we will create a list of colors.

struct ContentView: View {
    @State var colors = ["Red", "Green", "Blue", "Yellow", "Purple"]

    var body: some View {
        List {
            ForEach(colors, id: \.self) { color in
                Text(color)
            }
        }
    }
}

Step 2: Add onMove modifier

Now, we need to add the onMove modifier to the List view to enable drag and drop reordering. The onMove modifier is called when the user initiates a drag on a list item. We can then update the data source with the new order.

struct ContentView: View {
    @State var colors = ["Red", "Green", "Blue", "Yellow", "Purple"]

    var body: some View {
        List {
            ForEach(colors, id: \.self) { color in
                Text(color)
            }
            .onMove(perform: move)
        }
    }

    private func move(from source: IndexSet, to destination: Int) {
        colors.move(fromOffsets: source, toOffset: destination)
    }
}

Step 3: Add reordering handle

Finally, we can add a reordering handle to the list items to make it more clear to the user that the items can be reordered. We can use the move button provided by SwiftUI.

struct ContentView: View {
    @State var colors = ["Red", "Green", "Blue", "Yellow", "Purple"]

    var body: some View {
        List {
            ForEach(colors, id: \.self) { color in
                Text(color)
            }
            .onMove(perform: move)
        }
        .onAppear {
            UITableView.appearance().isEditing = true
        }
    }

    private func move(from source: IndexSet, to destination: Int) {
        colors.move(fromOffsets: source, toOffset: destination)
    }
}

We also need to set the UITableView's isEditing property to true in order to enable the reordering handles.

And that's it! With just a few lines of code, we have added drag-and-drop reordering to our SwiftUI List.

Note: If you find it difficult to drop the item while testing this functionality in the Preview Canvas, try to update the .app file by placing the ContentView inside it and drag-and-drop an item in the Xcode Simulator.

Conclusion

In this blog post, we learned how to implement drag-and-drop reordering in a SwiftUI List using the onMove modifier. We also added a reordering handle to make it more clear to the user that the items can be reordered. SwiftUI provides a simple and elegant way to implement complex functionality like this, making it easy to create great user experiences.

And that’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.

I’ll see you in the next post!

The code in this post is available here.

The UIKit Integration in SwiftUI

SwiftUI provides a way to integrate UIKit components into your app using the UIViewRepresentable protocol. This protocol allows you to create a SwiftUI view that wraps a UIKit view.

To use UIViewRepresentable, you need to create a struct that conforms to the protocol. This struct must implement two methods: makeUIView(context:) and updateUIView(_:context:).

The makeUIView(context:) method is responsible for creating the UIKit view, while the updateUIView(_:context:) method updates the view with new data or properties.

Here's a basic example of how to create a UIViewRepresentable struct for a UIActivityIndicatorView:

struct ActivityIndicator: UIViewRepresentable {
    func makeUIView(context: Context) -> UIActivityIndicatorView {
        return UIActivityIndicatorView(style: .large)
    }

    func updateUIView(_ uiView: UIActivityIndicatorView, context: Context) {
        uiView.startAnimating()
    }
}

In this example, we created a UIActivityIndicatorView and returned it from the makeUIView(context:) method. In the updateUIView(_:context:) method, we started animating the activity indicator.

Using the UIKit Component in SwiftUI

To use the UIViewRepresentable struct in SwiftUI, you can simply add it as a view. Here's an example of how to add the ActivityIndicator view to a VStack:

struct ContentView: View {
    var body: some View {
        VStack {
            ActivityIndicator()
            Text("Loading...")
        }
    }
}

In this example, we added the ActivityIndicator view to a VStack, and then added a Text view below it.

Wrapping Multiple UIKit Views in One View

You can also wrap multiple UIKit views in a single UIViewRepresentable struct. Here's an example of how to create a UIStackView and add two UILabel views to it:

struct LabelStack: UIViewRepresentable {
    func makeUIView(context: Context) -> UIStackView {
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.alignment = .leading
        stackView.spacing = 5

        let label1 = UILabel()
        label1.text = "Label 1"

        let label2 = UILabel()
        label2.text = "Label 2"

        stackView.addArrangedSubview(label1)
        stackView.addArrangedSubview(label2)

        return stackView
    }

    func updateUIView(_ uiView: UIStackView, context: Context) {
    }
}

In this example, we created a UIStackView and added two UILabel views to it. We then returned the UIStackView from the makeUIView(context:) method.

To use the LabelStack view in SwiftUI, we can simply add it to a VStack or any other SwiftUI container view.

Conclusion

Integrating UIKit components into SwiftUI is a powerful technique that can give your app additional capabilities and flexibility. By using the UIViewRepresentable protocol, you can seamlessly integrate UIKit views into your SwiftUI app.

And that’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.

I’ll see you in the next post!

The code in this post is available here.

Using Image Cache

One way to cache images in SwiftUI is to create an ImageCache class. This class can store a cache of UIImage objects, and it can be accessed from any part of your app. Here's an example of how you can create an ImageCache class:

class ImageCache {
    static let shared = ImageCache()

    private let cache = NSCache<NSString, UIImage>()

    private init() {}

    func set(_ image: UIImage, forKey key: String) {
        cache.setObject(image, forKey: key as NSString)
    }

    func get(forKey key: String) -> UIImage? {
        return cache.object(forKey: key as NSString)
    }
}

In this example, we've created a singleton ImageCache object using the shared property. The cache property is an NSCache object that stores UIImage objects, and we've defined set(_:,forKey:) and get(forKey:) methods to add and retrieve images from the cache.

Caching Images with URL

Another common use case for caching images in SwiftUI is when loading images from a remote server. In this case, you can use the dataTask(with:completionHandler:) method of the URLSession API to load the image data asynchronously. Once the image data is loaded, you can cache it using the ImageCache class.

struct RemoteImage: View {
    @ObservedObject var imageLoader: ImageLoader

    init(url: String) {
        imageLoader = ImageLoader(url: url)
    }

    var body: some View {
        if let image = imageLoader.image {
            Image(uiImage: image)
                .resizable()
        } else {
            ProgressView()
        }
    }
}

class ImageLoader: ObservableObject {
    @Published var image: UIImage?

    private var url: String
    private var task: URLSessionDataTask?

    init(url: String) {
        self.url = url
        loadImage()
    }

    private func loadImage() {
        if let cachedImage = ImageCache.shared.get(forKey: url) {
            self.image = cachedImage
            return
        }

        guard let url = URL(string: url) else { return }

        task = URLSession.shared.dataTask(with: url) { data, response, error in
            guard let data = data, error == nil else { return }

            DispatchQueue.main.async {
                let image = UIImage(data: data)
                self.image = image
                ImageCache.shared.set(image!, forKey: self.url)
            }
        }
        task?.resume()
    }
}

In this example, we've created a RemoteImage view that loads an image from a remote server using the ImageLoader class. The ImageLoader class is an ObservableObject that uses the dataTask(with:completionHandler:) method to load the image data asynchronously. We've also added a check for cached images using the ImageCache class, which avoids fetching the image from the remote server if it's already cached.

Note: To validate the implementation above, you can use the image from the project iOSDevX with the URL: "https://github.com/xavier7t/iOSDevX/blob/main/iOSDevX/Assets.xcassets/demo.imageset/demo.png?raw=true". You can write a simple SwiftUI View like the one below:

struct ContentView: View {
    let urlString = "https://github.com/xavier7t/iOSDevX/blob/main/iOSDevX/Assets.xcassets/demo.imageset/demo.png?raw=true"
    var body: some View {
        VStack {
            RemoteImage(url: urlString)
                .frame(width: 150, height: 150, alignment: .center)
                .cornerRadius(10)
        }
    }
}

Conclusion

Caching images is an important technique for optimizing the performance of your SwiftUI app. By creating an ImageCache class and using it to cache images, you can avoid repeating time-consuming image-loading operations.

And that’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.

I’ll see you in the next post!

The code in this post is available here.

The basics of withAnimation

In SwiftUI, withAnimation is a function that takes a closure that contains the changes you want to animate. The closure can contain any kind of view manipulation, such as changing the position or opacity of a view.

Here's a simple example that shows how to animate a button when it's tapped:

struct ContentView: View {
    @State private var scale: CGFloat = 1.0

    var body: some View {
        Button("Tap me to enlarge!") {
            withAnimation {
                self.scale *= 1.5
            }
        }
        .scaleEffect(scale)
    }
}

In this example, we first declare a state property called scale, which is used to control the size of the button. When the button is tapped, we use withAnimation to animate the scale property. The scaleEffect modifier is then used to apply the scale factor to the button.

Compare the following three screenshots to see the animation:

1-Original

2-Tapped once

3-Tapped twice

Animating view transitions

One of the most common uses of animations in app development is to animate transitions between views. SwiftUI makes this task incredibly easy with its built-in support for view transitions.

To animate a view transition in SwiftUI, you simply need to use one of the built-in transition modifiers. There are several different transition modifiers to choose from, such as opacity, move, and scale.

Here's an example that shows how to animate a transition between two views:

struct ContentView2: View {
    @State private var showDetails = false

    var body: some View {
        VStack {
            Button((showDetails ? "Hide" : "Show") + " details") {
                withAnimation {
                    self.showDetails.toggle()
                }
            }
            if showDetails {
                Text("Here are some details")
                    .transition(.opacity)
            }
        }
    }
}

In this example, we use the showDetails state property to control whether the details view is shown or hidden. When the "Show details" button is tapped, we use withAnimation to animate the showDetails property. The details view is then shown or hidden using the if statement.

The transition modifier is used to animate the opacity of the details view. When the view appears or disappears, it fades in or out.

You can also replace the transition value .opacity to .scale, .slide or .identity to feel the different types of transition in the preview or the simulator.

Conclusion

Animations are an essential part of modern app development, and SwiftUI makes it easy to create fluid and dynamic animations. In this blog post, we've explored some of the basics of SwiftUI animations and how to use them to create engaging and intuitive user interfaces.

And that’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.

I’ll see you in the next post!

The code in this post is available here.

Why Encrypt Passwords?

Encrypting passwords is essential because it ensures that the user's sensitive data remains safe in case of a security breach. When a user creates an account in your app, they typically choose a password that they can remember easily. However, if that password is not encrypted, it can be easily stolen by malicious actors. Encrypting the password makes it much more difficult for attackers to obtain and use.

Choosing an Encryption Algorithm

There are many encryption algorithms available, but not all of them are suitable for password encryption. A common algorithm used for password encryption is bcrypt. Bcrypt is a slow hashing algorithm that is designed specifically for password storage. It is computationally expensive, which makes brute-force attacks much more difficult.

SwiftUI does not have built-in support for bcrypt, but there are libraries available that make it easy to use. One popular library is called CryptoKit.

Using CryptoKit to Encrypt Passwords

To use CryptoKit to encrypt passwords, we'll start by importing the library in our Swift file:

import CryptoKit

Next, we'll create a function that will take a password string as input and return an encrypted password string:

func encryptPassword(password: String) -> String {
    let salt = "mysalt"
    let saltedPassword = password + salt

    guard let saltedPasswordData = saltedPassword.data(using: .utf8) else {
        return ""
    }

    let hashedPassword = SHA256.hash(data: saltedPasswordData)
    let hashedPasswordString = hashedPassword.compactMap { String(format: "%02x", $0) }.joined()

    return hashedPasswordString
}

In this code, we're using the SHA256 hashing function from CryptoKit to hash the salted password string. We're then converting the hashed data to a hexadecimal string and returning it.

Note that we're using a salt value to increase the security of our password encryption. The salt value is a random string that is added to the password before it is hashed. This makes it much more difficult for attackers to crack passwords using precomputed hash tables.

Using the Encrypt Password Function in SwiftUI

Now that we have our encryptPassword function, we can use it in our SwiftUI views. Let's create a simple view with a text field for the user to enter their password, and a button to encrypt the password.

struct ContentView: View {
    @State var password: String = ""
    @State var encryptedPassword: String = ""

    var body: some View {
        VStack {
            TextField("Password", text: $password)

            Button("Encrypt Password") {
                encryptedPassword = encryptPassword(password: password)
            }

            Text("Encrypted Password: \(encryptedPassword)")
        }
    }
}

In this code, we're using the @State property wrapper to create two state variables: password and encryptedPassword. We're creating a text field for the user to enter their password, and a button to encrypt the password using our encryptPassword function. We're then displaying the encrypted password in a Text view.

Redaction

After implementing the encryption functionalities, we can improve our logic by adding a button to hide the encrypted password with redaction. For more about Redaction, check my previous post here.

struct ContentView: View {
    @State var password: String = ""
    @State var encryptedPassword: String = ""
    @State var hideEncryptedPassword: Bool = false

    var body: some View {
        VStack {
            TextField("Password", text: $password)

            Button("Encrypt Password") {
                encryptedPassword = encryptPassword(password: password)
            }

            Text("Encrypted Password:")
                .bold()
            Group {
                if hideEncryptedPassword {
                    Text("\(encryptedPassword)")
                        .redacted(reason: .placeholder)
                } else {
                    Text("\(encryptedPassword)")
                }
            }
            Button(hideEncryptedPassword ? "Show" : "Hide") {
                hideEncryptedPassword.toggle()
            }
        }
    }
}

In the example above, we added a @State property of type Bool to indicate if the encrypted password text is hidden. Then we replaced the encrypted password text with a Group which is conditional to redact the text if hideEncryptedPassword is true. And we added another button to toggle the boolean value of hideEncryptedPassword.

UI Enhancement

And finally, we can make some UI Enhancement by adding borders, frames, bolding and / or colors to our text field and buttons.

struct ContentViewEnhanced: View {
    @State var password: String = ""
    @State var encryptedPassword: String = ""
    @State var hideEncryptedPassword: Bool = false
    var body: some View {
        VStack {
            TextField("Password", text: $password)
                .frame(width: 200, height: 40, alignment: .center)
                .border(.black)
            Button("Encrypt") {
                encryptedPassword = encryptPassword(password: password)
            }
            .bold()
            .foregroundColor(.white)
            .frame(width: 200, height: 40, alignment: .center)
            .background(Color.blue.cornerRadius(10))
            Text("Encrypted Password:")
                .bold()
            Group {
                if hideEncryptedPassword {
                    Text("\(encryptedPassword)")
                        .redacted(reason: .placeholder)
                } else {
                    Text("\(encryptedPassword)")
                }
            }
            Button(hideEncryptedPassword ? "Show" : "Hide") {
                hideEncryptedPassword.toggle()
            }
            .bold()
            .foregroundColor(.white)
            .frame(width: 200, height: 40, alignment: .center)
            .background(Color.blue.cornerRadius(10))
        }
        .padding(.horizontal)
    }
}

And that’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.

I’ll see you in the next post!