This is particularly useful for apps such as chat messages, emails, or anything that lists items. For chat messages, you may want to scroll back up to the first unread message.

Lets take a look at how this works.

The example below creates a ScrollView with 50 items within.

struct ContentView: View {
    @State private var offset = 35
    
    var body: some View {
        ScrollViewReader { proxy in
            VStack {
                Button("Scroll to Item \(offset)") {
                    withAnimation {
                        proxy.scrollTo(offset, anchor: .center)
                    }
                }
                ScrollView {
                    VStack(alignment: .leading) {
                        ForEach(0..<50) { i in
                            Text("Item \(i)")
                                .padding()
                                .id(i)
                                .background(i == offset ? Color.yellow.opacity(0.3) : Color.clear)
                        }
                    }
                }
            }
        }
        .padding()
    }
}

Line 2 is used to set the offset of where you want to scroll to. You wouldn’t set this here normally as you would grab some value from the backend to determine where you want to jump to, but in this case, I just set it at 35 so the scroll view scrolls to the 35th item.

Line 5 we declare the ScrollViewReader and in the closure we are provided a ScrollViewProxy. We call it “proxy”.

We create a VStack next that puts a Button view up top and a ScrollView below it. The text of the Button is “Scroll to Item 35” or whatever you set the offset to earlier.

On lines 8 to 10 we use the ScrollViewProxy and call .scrollTo on it passing in the offset and setting the anchor to .center. The anchor provides the behaviour of the scroll action. .center scrolls the item to the center of the screen in this example.

The final task is on lines 12 to 21 where we create a ScrollView that contains a VStack (optional in this example and deals mostly with spacing). We have a ForEach that is set to show 50 items numbered 0 to 49 and then on line 17 we set the id to the index. In a real applications, perhaps an email app, you might set the id to a message ID and then rather than use the offset, you get the first unread message and scrollTo that message ID.

The last part is just used to colour the Text view based on if it is the offset.

If you run the app now then tapping the button at the top will scroll to item 35 in the list. Any questions, reach out below.

The post Using ScrollViewReader for Programmatic Scrolling in SwiftUI: A Tutorial appeared first on DevFright.

In this tutorial we’ll look at using the Annotation and Marker structures that provide the means to getting annotations on your map to mark locations.

SwiftUI makes it easy to display locations on a map. For apps that target iOS 16 or later, Annotation and Marker are the way to go. For those that are targetting lower versions of iOS the equivelant to Marker is MapMarker and the equivalent of Annotation is MapAnnotation. Today we’ll look at Marker and Annotation.

A Look at using Marker in a SwiftUI Map

Out of the two options, Marker is the easiest to work with and can be used if you are not interested in visual customisation. It provides a system-styled pin and allows for a custom image, label, and colour. It can be implemented as follows:

Marker("MacDonners", coordinate: annotation.coordinate)
                                    .tint(.red)

You put the Marker inside your Map and pass it a name, coordinate, and colour. It creates a pin like seen in the centre of the image posted above. You also have the option of adding a custom system image (see how to use SF Symbols for how to find the system image you need)

Lets take a look at how to actually use this. First, we’ll define a structure to hold the details of the Marker:

struct CustomMarker: Identifiable {
    let id = UUID()
    let coordinate: CLLocationCoordinate2D
    let title: String
    let image: String
    let colour: Color
}

We will be using the CustomMarker in a ForEach in the view. For this reason, we mark it as Identifiable. This struct has a coordinate, a title, an image, and a colour. The image is a String because we specify systemImage with a string which you will see later.

Now lets create an array of CustomMarker:

var markers: [CustomMarker] {
    [
        CustomMarker(
            coordinate: CLLocationCoordinate2D(latitude: 53.8240, longitude: -1.7360),
            title: "MacDonners",
            image: "fork.knife.circle.fill",
            colour: .blue
        ),
        CustomMarker(
            coordinate: CLLocationCoordinate2D(latitude: 53.8234, longitude: -1.7348),
            title: "Eccleshill Mechanics Institute Library",
            image: "books.vertical.fill",
            colour: .red
        ),
        CustomMarker(
            coordinate: CLLocationCoordinate2D(latitude: 53.8238, longitude: -1.7385),
            title: "Eccleshill Swimming",
            image: "drop.fill",
            colour: .green
        ),
        CustomMarker(
            coordinate: CLLocationCoordinate2D(latitude: 53.8242, longitude: -1.7352),
            title: "Nafees Bakers",
            image: "birthday.cake.fill",
            colour: .purple
        ),
        CustomMarker(
            coordinate: CLLocationCoordinate2D(latitude: 53.8237, longitude: -1.7362),
            title: "Curryosity Indian Takeaway",
            image: "takeoutbag.and.cup.and.straw.fill",
            colour: .brown
        ),
        CustomMarker(
            coordinate: CLLocationCoordinate2D(latitude: 53.8250, longitude: -1.7364),
            title: "Eccleshill Working Men's Club",
            image: "person.3.fill",
            colour: .blue
        ),
        CustomMarker(
            coordinate: CLLocationCoordinate2D(latitude: 53.8235, longitude: -1.7375),
            title: "Bargains",
            image: "cart.fill",
            colour: .green
        )
    ]
}

Here we pass in the coordinate of the Marker, the title, image, and the colour.

Put the above array in the ContentView and also add this @State property wrapped variable:

struct ContentView: View {
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 53.824, longitude: -1.7365),
        span: MKCoordinateSpan(latitudeDelta: 0.005, longitudeDelta: 0.005)
    )

This is used for when we add our Map to the view. We pass it a region which has a centre and a span and essentially sets the location and zoom level that is put on the view when the app opens.

With that in place and our array of markers just below it, you can now add in the body:

var body: some View {
    Map(initialPosition: .region(region)) {
        ForEach(markers) { marker in
            Marker(marker.title,
                   systemImage: marker.image,
                   coordinate: marker.coordinate)
                .tint(marker.colour)
        }
    }
    .edgesIgnoringSafeArea(.all)
}

This is very easy to implement in SwiftUI because the framework does a lot of the lifting work.

Line 2, we add a Map to the view and pass in our region as the initialPosition of hte map. Towards the end we add this modifier: .edgesIgnoringSafeArea(.all).

Within our Map we have a ForEach that loops around the markers we created and for each iteration it adds a Marker to the view by setting its title, systemImage, and coordinate. After the Marker we add a modifier to set the colour.

If you go ahead and preview the Map now you will see Markers in various locations. Although most of the annotations are made up, I set the span so that all of them fit in the view on the Preview.

If you need to interact with the Markers then you are best using the Annotation structure that allows more customisation and specifically adds a .onTapGesture.

Using Annotation in a SwiftUI Map

If you want to just show pins on a map then Marker is the way to go, but if you need customisation then go with Annotation.

struct CustomAnnotation: Identifiable {
    let id = UUID()
    let coordinate: CLLocationCoordinate2D
    let title: String
    let image: String
    let colour: Color
}

Rename the struct from earlier. This isn’t mandatory but makes it easier to remember that we’re now working with an Annotation and not a Marker.

You can use the same array of markers, just renaming to annotations and renaming each item in the array to CustomAnnotation.

You can also keep the same region as the tutorial earlier, but add in the following @State variable.

@State private var selectedTitle: String? = nil

This will be used to update the view when an annotation is tapped.

var body: some View {
    ZStack(alignment: .top) {
        Map(initialPosition: .region(region)) {
            ForEach(annotations) { annotation in
                Annotation(annotation.title, coordinate: annotation.coordinate) {
                    VStack(spacing: 4) {
                        Image(systemName: annotation.image)
                            .font(.title)
                            .foregroundColor(annotation.colour)
                            .padding(8)
                            .background(Circle().fill(Color.white))
                            .shadow(radius: 3)
                            .onTapGesture {
                                selectedTitle = annotation.title
                            }
                        
                        Text(annotation.title)
                            .font(.caption2)
                            .padding(4)
                            .background(.ultraThinMaterial)
                            .cornerRadius(4)
                    }
                }
            }
        }
        .edgesIgnoringSafeArea(.all)
        
        if let selectedTitle = selectedTitle {
            Text("You tapped: \(selectedTitle)")
                .padding()
                .background(.thinMaterial)
                .cornerRadius(10)
                .shadow(radius: 4)
                .padding()
                .transition(.move(edge: .top))
        }
    }
}

This time we’re going to use a ZStack so that we can display some text on the map to show which annotation was tapped. Putting it in a ZStack means that the Text we use on line 29 is in front of the map and not behind it.

Initialise the Map on line 3 like done previously and add the ForEach on line 4.

This time we declare an Annotation instead of a Marker and pass in the title and coordinate.

Rather than passing in the image here, we nest a VStack and put an Image view and Text view inside. This section from the end of line 5 to line 23 is used to put our custom view in there. I opted for an Image with the annotation.image being that image, and annotation.title being the Text.

On line 13 we have the .onTapGesture that sets the selectedTitle to the annotationTitle on line 14. selectedTitle uses the @State property wrapper and when it changes, it updates the view and because of the if let on line 28, it will show the text view at the top of the Map just in front of it. Of couse, line 14 in the onTapGesture you could do anything you like here such as change to another view or a dialog to show more information.

Marker and Annotation are great for showing items on the map. Unlike MKPointAnnotation where you need to use dequeueReusableAnnotationView for efficiency, this is all built in on Marker and Annotation and you simply need to provide the title, coordinate, image, colour, and a custom view where needed.

Any questions, please ask below.

The post How to Use Annotation and Marker on a SwiftUI Map appeared first on DevFright.

Apple created a new way to share items with the introduction of ShareLink. This was first available in iOS 16 and is part of SwiftUI. Apple has conveniently built this into a View that is simple to use.

let shareURL = URL(string: "https://www.devfright.com")!
.
.
.
ShareLink(item: shareURL) {
    Label("Share URL", systemImage: "link")
}

If we put this in a View we will have a link with the text “Share URL”. If we tap on that link then the share sheet will open with the option of sharing the address of this website with someone, or with the option to open it in other apps. You can replace shareURL with shareText and pass in a String and it can also pass a string along.

Sharing an Image with ShareLink

We just shared a URL, and I mentioned that you can pass in a String as well. Lets take a look at sharing an image.

let shareImage = Image(systemName: "bolt.fill")
.
.
.
ShareLink(item: shareImageRenderer(), preview: SharePreview("Bolt Icon", image: shareImage)) {
    Label("Share Image", systemImage: "photo")
}

The code above shows how you can add a SharePreview and an image. This is what appears in the share sheet when toy tap on the ShareLink. Before we run this version we also need to implement shareImageRenderer().

func shareImageRenderer() -> URL {
    let renderer = ImageRenderer(content: shareImage)
    let tempURL = FileManager.default.temporaryDirectory.appendingPathComponent("bolt.png")
    
    if let data = renderer.uiImage?.pngData() {
        try? data.write(to: tempURL)
    }
    return tempURL
}

Line 2 is used to convert an image into a UIImage which is platform-native. ImageRenderer came along in iOS 16.

We then get a temporary directory on line 3. A temporaryDirectory is good to use for throw-away files.

With the rendered and uiImage property, we call the pndData() method and we write the file to the tempURL that was created. We then return this URL.

This gives our ShareLink in the view the directory to the image that is about to be shared.

When you hit the link, you’ll now see a preview of the image and the png file will be in the temp directory and available to share via text, WhatsApp, or any other app that is available and can accept the image.

For this example we needed to convert the Image in the view into the .png because we cannot share a View with ShareLink.

Transferable Protocol

The ShareLink view requires that anything shared conforms to the Transferable protocol. The Transferable protocol tells the system how to serialise data for sharing. In some cases, such as for URL and String, classes do not conform to Transferable, but still work. Apple handles these behind the scenes.

The post How to Use ShareLink in SwiftUI to Share Text, Images, and URLs appeared first on DevFright.

In this tutorial we are going to create a simple way of storing history of what is in your clipboard/pasteboard.

The screenshot above shows what we will be creating. It has a simple text entry field with a copy button, and a Get New Face button that reaches out to thispersondoesntexist.com.

Creating a Custom Pasteboard Item

We begin by creating an enum called PasteboardItem that represents items as text or image. It provides a unique identifier so that it can be used in a list.

enum PasteboardItem: Identifiable {
    case text(String)
    case image(UIImage, String)

    var id: String {
        switch self {
        case .text(let str): return "text-\(str)"
        case .image(_, let identifier): return "img-\(identifier)"
        }
    }
}

We declare the enum as conforming to the Identifiable protocol.

We have two cases in this enum, one is text that takes a String, and the other is an Image that requires a UIImage and String, the string being used for the identifier.

On lines 5 – 10 we implement the id var which is required to conform to Identifiable. In here we have a switch statement that checks the case being created and if text, it gets the String and returns text-somestring. If an image, then it ignores the image, but uses the description to create an id or img-somestring.

ContentView – Creating the UI

struct ContentView: View {
    @State private var pasteboardHistory: [PasteboardItem] = []
    @State private var selectedItem: PasteboardItem? = nil
    @State private var isLoadingFace = false
    @State private var customText: String = ""

We begin by adding some variables using the @State property wrapper. Anytime one of these changes the view will be reloaded.

The first one is an array of PasteboardItem. Next, we have the selectedItem which will be used for if the user taps on something in the pasteboard to show on the view. We then have isLoadingFace that is used to display a spinner, and then a variable to store some custom text.

Before implementing the body of the View, we’ll implement the methods that will be used to support this app.

func copyCustomText() {
    guard !customText.isEmpty else { return }
    UIPasteboard.general.string = customText
    let item = PasteboardItem.text(customText)
    addToHistory(item)
    saveTextItem(customText)
    customText = ""
}

There’s a few things happening in this method. First, we check to make sure we’re not copying something empty. If we are, we return at this point, although the UI also has checks in place to make sure you can only press Copy if there’s something in the field.

Next, we add this item to the UIPasteboard. Because this is the latest item it doesn’t matter that it will overwrite whatever else, if anything, was stored in the UIPasteboard.

On line 4 we create a new item which is a PasteboardItem, and then on the next line we add it to the history. After that we save the text item and then set the customText variable back to an empty string.

Lets take a look at the addToHistory and saveTextItem methods next.

func addToHistory(_ item: PasteboardItem) {
    if let existingIndex = pasteboardHistory.firstIndex(where: { $0.id == item.id }) {
        pasteboardHistory.remove(at: existingIndex)
    }
    pasteboardHistory.insert(item, at: 0)
}

func saveTextItem(_ text: String) {
    let filename = "text_\(Date().timeIntervalSince1970).txt"
    let fileURL = getDocumentsDirectory().appendingPathComponent(filename)
    try? text.write(to: fileURL, atomically: true, encoding: .utf8)
}

The first method, addToHistory, takes a PasteboardItem. We check in the pasteboardHistory array to see if the item exists on line 1, and if so, we remove the item. We then re-add the item at index 0. The reason for this is that we want the latest copies stored at the beginning of our list. By removing the old, we can then put it back at the start without causing a duplicate to happen.

Our saveToFile method takes a String, which in the case of the customText it is the actual text. It then creates a filename with the text and date and then gets the URL and writes the file to disk.

func fetchAndSaveFace() {
    isLoadingFace = true
    let url = URL(string: "https://thispersondoesnotexist.com")!
    let task = URLSession.shared.dataTask(with: url) { data, response, error in
        DispatchQueue.main.async {
            isLoadingFace = false
            guard let data = data, let image = UIImage(data: data), error == nil else {
                print("Error fetching image: \(error?.localizedDescription ?? "Unknown error")")
                return
            }
            
            let timestamp = Date().timeIntervalSince1970
            let identifier = "face_\(timestamp)"
            let filename = "\(identifier).png"
            let fileURL = getDocumentsDirectory().appendingPathComponent(filename)
            
            if let pngData = image.pngData() {
                try? pngData.write(to: fileURL)
                UIPasteboard.general.image = image
                addToHistory(.image(image, identifier))
            }
        }
    }
    task.resume()
}

This next method does a few things, which isn’t ideal, but good enough to show how it works.

First, it sets isLoadingFace to true. This is used to start a spinner going to show that something is happening.

Next, we get a URL from a String which is the website where we grab the image. This particular website is used to generate random faces.

On line 4 we create a task, specifically a dataTask from the URLSession class and .shared property. We pass in the URL which will make a network request. We dispatch this to main. It takes a closure that gets called when the request completes. There are three parameters in here which are data, response, and error.

It is dispatched to main so that when it finishes fetching the image the UI can update, although the actual network request will run on a background thread so that it doesn’t hold up the View.

The task is started when task.resume() is called (see line 24).

When the completion handler is called we first check to see if the data is valid and if the image was downloaded correctly. If all is OK, then we get a timestamp, an identifier which is face_timestamp, then a filename which is made from the identifier, and the fileURL. We then save the file, copy it to the UIPasteboard, and add it to history.

Getting the Documents Directory

We have a small helper method:

func getDocumentsDirectory() -> URL {
    FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)[0]
}

We use this in a couple of locations, so its good practice to not rewrite this each time.

Loading the Items

When we close the app, the history array will nolonger exist, this is the reason we have been saving the pasteboardItems to the documents folder. Another option could be to store them in UserDefaults. This next method is responsible for getting the array of PasteboardItem and populating the history.

func loadSavedItems() -> [PasteboardItem] {
    let docURL = getDocumentsDirectory()
    let files = (try? FileManager.default.contentsOfDirectory(at: docURL, includingPropertiesForKeys: nil)) ?? []
    
    var items: [PasteboardItem] = []
    
    for url in files {
        if url.pathExtension == "txt",
           let text = try? String(contentsOf: url, encoding: .utf8) {
            let item = PasteboardItem.text(text)
            if let existingIndex = items.firstIndex(where: { $0.id == item.id }) {
                items.remove(at: existingIndex)
            }
            items.insert(item, at: 0)
        } else if url.pathExtension == "png",
                  let image = UIImage(contentsOfFile: url.path) {
            // Image identifier based on file name to ensure consistent ID
            let identifier = url.lastPathComponent
            let item = PasteboardItem.image(image, identifier)
            if let existingIndex = items.firstIndex(where: { $0.id == item.id }) {
                items.remove(at: existingIndex)
            }
            items.insert(item, at: 0)
        }
    }
    
    return items
}

This method returns an array of PasteboardItem.

We get the documents directory first, and then get the files from that directory.

On line 5 we create an empty array of PasteboardItem and call it items. This will be populated when we iterate over the files we got from the directory and then returned at the end.

Lines 7 – 25 we loop over the files array. If the path extension is txt then we get the contents of the url and create a new PasteboardItem of type text. We check if the item already exists in the items array, which it shouldn’t. If it does, then we remove it, and then on line 14 we insert it at index 0.

If the item extension is a png then we create a UIImage with the contents of the file at the path.

We create an identifier, and then create the item with the image and identifier created.

We run the same checks in that if the item exists already then remove it. We then add it at index 0 which puts it at the beginning.

There is some diplication in here, but for tutorial purposes, you get a grasp of what it is doing.

When complete, it returns the items (array of PasteboardItem) to the caller.

Creating our View

Now that everything is in place, its time to create our view.

var body: some View {
    NavigationView {
        ZStack {
            VStack(spacing: 16) {
                HStack {
                    TextField("Enter custom text", text: $customText)
                        .textFieldStyle(.roundedBorder)
                        .onSubmit {
                            copyCustomText()
                        }
                    
                    Button(action: copyCustomText) {
                        Text("Copy")
                    }
                    .buttonStyle(.bordered)
                    .disabled(customText.isEmpty)
                }
                .padding(.horizontal)
                
                Button(action: fetchAndSaveFace) {
                    Text("Get New Face")
                }
                .buttonStyle(.borderedProminent)
                .disabled(isLoadingFace)
                
                Divider()
                
                ScrollView(.horizontal) {
                    HStack {
                        ForEach(pasteboardHistory) { item in
                            Button(action: {
                                selectedItem = item
                                switch item {
                                case .text(let str):
                                    UIPasteboard.general.string = str
                                case .image(let img, _):
                                    UIPasteboard.general.image = img
                                }
                            }) {
                                VStack {
                                    switch item {
                                    case .text(let str):
                                        Text(str)
                                            .padding(8)
                                            .background(Color.blue.opacity(0.1))
                                            .cornerRadius(8)
                                    case .image(let img, _):
                                        Image(uiImage: img)
                                            .resizable()
                                            .frame(width: 60, height: 60)
                                            .clipShape(RoundedRectangle(cornerRadius: 8))
                                    }
                                }
                            }
                        }
                    }
                    .padding(.horizontal)
                }
                
                Divider()
                
                if let selected = selectedItem {
                    Group {
                        switch selected {
                        case .text(let str):
                            Text(str)
                                .font(.title)
                                .padding()
                        case .image(let img, _):
                            Image(uiImage: img)
                                .resizable()
                                .scaledToFit()
                                .frame(maxWidth: 300, maxHeight: 300)
                        }
                    }
                    .transition(.opacity)
                } else {
                    Text("Tap an item to preview")
                        .foregroundStyle(.secondary)
                }
                
                Spacer()
            }
            .padding()
            .navigationTitle("Pasteboard History")
            .onAppear {
                pasteboardHistory = loadSavedItems()
            }
            
            if isLoadingFace {
                Color.black.opacity(0.4)
                    .ignoresSafeArea()
                VStack {
                    ProgressView()
                        .progressViewStyle(.circular)
                        .scaleEffect(1.5)
                    Text("Fetching new face...")
                        .foregroundColor(.white)
                        .padding(.top, 8)
                }
                .padding()
                .background(.ultraThinMaterial)
                .cornerRadius(12)
            }
        }
    }
}

I wont go through every line in the view as much of it is self explanatory, but as a brief overview we have a NavigationView that has a title set on line 85 of “Pasteboard History”. Within this navigation view we have ZStacks and HStacks as well as a ScrollView.

The TextField on line 6 is the place where you can write a message. It binds to $customText and when onSubmit is called, it calls the copyCustomText method we looked at earlier.

The button also is added and has an action that calls the same method. The button is disabled/enabled based on the customText being empty.

We have another Button on line 20 that has an action that calls the fetchAndSaveFace method, also discussed earlier. This button disables while isLoadingFace is true.

On line 90, ifLoadingFace is true, we show a ProgressView to let the user know that something is happening. This disapears when isLoadingFace toggles back to false.

Onto our pasteboard contents, these are shown in a ScrollView set to .horizontal. Each item copied is listed in here with the newest being at the start of the view. Each item is a Button that has an action that sets the selectedItem (line 32). The view shows either an image or a string of text each of which can be pushed to show the contents below.

Showing the contents is handled on line 62 where if there is a selectedItem, it shows on the view either as Text on line 66 or as an Image on Line 70.

If you try the app now, you’ll be able to copy text and images to the Pasteboard and retrieve them. Enhancements could include a long-tap gesture that brings up a vertical list of items in the pasteboard that you can tap on to copy into the view where a cursor is.

As mentioned earlier, it would also work in UserDefaults where you might persist the items there.

One thing that might confuse you is why we even need UIPasteboard for this tutorial. The answer is that the storage is handled in documents, but we still use the UIPasteboard to store the latest item. By integrating with the built-in pasteboard, it allows us to tap on an image or text in our history and then go to another device on the same iCloud device and paste that item across. This makes it useful because this is fairly standard behaviour with some enhancements.

The post How to build a Clipboard History App with UIPasteboard, Images, and Strings in SwiftUI appeared first on DevFright.

Implementing a Reusable View that uses UIPasteboard

We’ll look at creating a reusable View that uses the UIPasteboard that accepts a string and allows you to tap to copy.

struct CopyToPasteboardView: View {
    @State private var showTooltip = false
    let textToCopy: String

    var body: some View {
        VStack(spacing: 10) {
            HStack {
                Text(textToCopy)
                    .font(.title3)
                    .foregroundColor(.primary)

                Image(systemName: "doc.on.clipboard")
                    .foregroundColor(.gray)
                    .imageScale(.small)
            }
            .padding()
            .background(Color(.secondarySystemBackground))
            .cornerRadius(8)
            .onTapGesture {
                UIPasteboard.general.string = textToCopy
                withAnimation {
                    showTooltip = true
                }

                DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
                    withAnimation {
                        showTooltip = false
                    }
                }
            }

            if showTooltip {
                Text("Copied!")
                    .font(.caption)
                    .padding(.horizontal, 8)
                    .padding(.vertical, 4)
                    .background(Color.green.opacity(0.8))
                    .foregroundColor(.white)
                    .cornerRadius(6)
                    .transition(.opacity.combined(with: .move(edge: .top)))
            }
        }
    }
}

The view will work by accepting a string, and when that string is tapped, it will copy it to the pasteboard. A tool tip will show to let you know that the copy has happened.

Line 2 has a Bool called showToolTip that uses the @State property wrapper.

Line 3 has our textToCopy parameter that is required when the view is initialised.

We create our view with a VStack that has two Text views. The first is on line 8 that is styled and formats the text. This, and an Image view are wrapped in a HStack. The image used is from SF Symbols, see the SF Symbols tutorial here. This provides a prompt to the user to indicate that they can copy this text.

Lines 16 – 18 add some styling to the HStack.

On line 19 we use the .onTapGesture so that when the HStack is tapped, we store the textToCopy in the UIPasteboard.general.string property.

We add in withAnimation and inside that, on line 22, we set showToolTip to true. Because showToolTip uses @State, that Text view will animate and also push up the text to copy part of the view.

On line 25, on the main thread and after 1.5 seconds, we set showToolTip back to false and wrap that in withAnimation. This means that the tool tip shows for 1.5 seconds (animating in), and then disapears while animating out.

Using the CopyToPasteboardView

The final peice of the puzzle is making use of the CopyToPasteboardView. We use it as follows:

struct ContentView: View {
    var body: some View {
        CopyToPasteboardView(textToCopy: "https://www.devfright.com/feed")
            .padding()
    }
}

The ContentView is fairly self explanatory here. We make a call to our custom view called CopyToPasteBoardView and pass in the text we want to copy. For your app, that might be an email address, or anything you like.

One thing to note is that how this is setup now, you can copy just a single item. If you were to replace the string with an image, that image would overwrite the string, and vice-versa.

In another tutorial we’ll look at some more advanced features such as being able to store multiple items as well as different content types.

The post How to Add Tap to Copy with UIPasteboard in SwiftUI appeared first on DevFright.

You will see these links as message://link_to_some_page/id or evernote://some_note

Lets take a look at how this works.

The first step is to add a new entry to your info.plist file. If you add “URLScheme”URL Types”, an info.plist will appear in the sidebar. Right click on it and “Open As > Source Code”, and add the following:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>deeplink</string>
			</array>
		</dict>
	</array>
</dict>
</plist>

Line 10 is where we set our URL scheme. In this example I called it deeplink, which means our deep links will follow the format: deeplink://some_page.

Adding a Route

We will handle deep links with our own router and have an enun of known, and unknown routes. Lets implement the routes as follows:

enum AppRoute: Equatable {
    case home
    case profile
    case settings
    case unknown
    
    init(url: URL) {
        switch url.host {
        case "home":
            self = .home
        case "profile":
            self = .profile
        case "settings":
            self = .settings
        default:
            self = .unknown
        }
    }
}

This enum has an init method that accepts a URL. When we pass it a URL it determines if the URL is a home, profile, settings, or unknown route. We will use this a little later.

Router Class

class AppRouter: ObservableObject {
    @Published var route: AppRoute = .home
    
    func handle(url: URL) {
        self.route = AppRoute(url: url)
    }
}

Next, we add a Router class. This conforms to ObservableObject and has one @Published property which is an AppRoute, the struct we just created earlier.

It also has a method called handle that accepts a URL and then sets self.route based on the initialised AppRoute.

@Main

import SwiftUI

@main
struct DeepLinkApp: App {
    @StateObject private var router = AppRouter()
    
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(router)
                .onOpenURL { url in
                    router.handle(url: url)
                }
        }
    }
}

We create our AppRouter as an @StateObject. An @StateObject lives for the duration of the app with it being declared here. If declared in a view, it would stay alive for the duration fo the view.

Line 10 injects router to the environment.

Line 11 detects when the app opens from a URL and when it does, it receives that URL, something like deeplink://profile and calls the handle method on the router. This then sets the @Published property in that class to the correct AppRoute enum value, and because its @Published, the view can observer it and action accordingly.

ContentView and Displaying the Correct Content

Our next task is to have our ContentView load up the correct view:

struct ContentView: View {
    @EnvironmentObject var router: AppRouter
    
    var body: some View {
        NavigationStack {
            switch router.route {
            case .home:
                Text("Home")
            case .profile:
                Text("Profile")
            case .settings:
                Text("Settings")
            case .unknown:
                Text("Unknown Route")
            }
        }
    }
}

On line 2 we have our @EnvironmentObject which we access. This was injected in @main in the ContentView. This means that whatever happened in there when the app detected it was opened by URL, we have access to that same instance.

With that value we can use a switch statement and detect what the router’s route property is, that being .home, .profile, .settings, or .unknown. We can then display the correct view. In this test I just displayed a Text view for each.

In Closing

You don’t specifically need a route and router and can handle this anyway you want. In short, you setup the URL Scheme in info.plist. You use .onOpenURL in the Scene, and you action it.

If you were building a note taking app, your route enum might have the following cases:

.noteList
.newNote
.settings
.profile

A URL opening .newNote could immediately open the app to a new item making a great place to quickly make a note of something. It is also useful for Apple Shortcuts integration where you might have a shortcut to do something deep within your app.

The post Handling Deep Links in SwiftUI with URL Schemes appeared first on DevFright.

Adding Properties

@State private var inputText = "https://www.devfright.com"
private let context = CIContext()
private let filter = CIFilter.qrCodeGenerator()

We begin by adding these three properties into our ContentView. The first, inputText, uses the @State property wrapper so that when the inputText changes, the view is refreshed.

The latter two are constants, one that holds the CIContext and the other that uses the qrCodeGenerator method in the CIFilter class. Details of these will be discussed later on.

Generating the QR Code

The next code is what we use to generate the QR Code.

func generateQRCode(from string: String, size: CGFloat = 512) -> UIImage {
    filter.message = Data(string.utf8)

    if let outputImage = filter.outputImage {
        let scaleX = size / outputImage.extent.size.width
        let scaleY = size / outputImage.extent.size.height
        let transform = CGAffineTransform(scaleX: scaleX, y: scaleY)

        let scaledImage = outputImage.transformed(by: transform)

        if let cgimg = context.createCGImage(scaledImage, from: scaledImage.extent) {
            return UIImage(cgImage: cgimg)
        }
    }

    return UIImage(systemName: "xmark.circle") ?? UIImage()
}

We accept a string which is the string that we want creating into a QR code. We also specify a size that we want the image and tell it we want to return a UIImage.

Line 2 we use our filter (the CIFilter.qrCodeGenerator()) and set the message property to the string, but convertated to utf8 Data. This is required because the filter expects Data and not a string.

At this point we now have a QR code that can be accessed at filter.outputImage, but we’re not quite ready yet. The CIImage that has been created needs to be converted to a UIImage so that it can be seen in the view. As a CIImage is low resolution, in this test it is 27.0 points on the width and height.

Lines 4 to 14 show how we can modify the CIImage. We begin by getting the outputImage from the filter and storing that in outputImage.

Lines 5 and 6 we calculate the x and y scale by divding the outputImage’s width and height into the size, which is defaulted to 512 in the function params. These are stored in scaleX and scaleY.

Line 7 we use CGAffineTransform to scale the image in both x and y directions by passing in the scaleX/Y created on the lines earlier.

Line 9 we apply the scaling transform to the outputImage by using the transformed(by:) method. This creates a new CIImage with the desired size.

On line 11 we use our correctly sized CIImage and convert it to a CGImage. The context used here is for handling the image rendering.

If all is successful at this point, on line 12 we use our CGImage and convert it to a UIImage to return to the caller, which in our case will be the view.

Setting up the View for the QR Code to Display

Now that we have a QR code in a UIImage format, we can use that in the view. It took a few steps to create it because of starting as a CIImage, then being scaled with a transform, and then created as a CGImage to then be returned as a UIImage. With all of that logic out of the way, all we need to do is make a call to this method with a string of text and then receive a UIImage back.

var body: some View {
    NavigationView {
        VStack(spacing: 20) {
            TextField("Enter text or URL", text: $inputText)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            Image(uiImage: generateQRCode(from: inputText))
                .interpolation(.none)
                .resizable()
                .scaledToFit()
                .frame(width: 200, height: 200)
                .padding()

            Spacer()
        }
        .navigationTitle("QR Code Generator")
    }
}

We setup a standard View here that has a NavigationView with a navigationTitle set as “QR Code Generator”. We then nest a VStack inside that contains a TextField which is where the user can enter text or a URL.

The TextField uses the text property, which is bound to the @State property via $inputText. This binding ensures that any changes made in the TextField automatically update the inputText state. Since the Image view relies on inputText to generate the QR code, each time the user types, the inputText value changes. As a result, the generateQRCode method is called on every key press, and the QR code is updated in real-time as the user types.

Go ahead and run the app now. It will work in the preview, simulator, or on device.

The post How to Build a Native QR Code Generator for iPhone with SwiftUI appeared first on DevFright.

Lets begin with the app created in the ToDo List app with SwiftData. You can download this below.

Make any changes needed to the bundle ID and signing in the target as well as the container you want to use for storing the data.

.modelContainer(for: ToDoItem.self, isUndoEnabled: true)

In ToDoApp, add isUndoEnabled: true to the modelContainer. When not declared it defaults to false.

At this point, thanks to SwiftData and behind the scenes, you now have undo available in your ToDo app. To access it, make a change and then swipe left or right with three fingers to step through the changes. Swiping one way will undo changes, and swiping the other way will redo the changes.

One thing to note is that changes are only tracked on a single device. If you mark a task as complete on the iPad and it syncs across, you can’t undo that change on an iPhone with the swipe gestures.

What Else can Undo Do?

It seems a little odd to write a turorial, give you one parameter to add and then say we’re done, so lets take a look at how you can implement more to make it useful for you and your users given that many might not realise a three finger swipe would be needed to undo or redo an action, let alone know if undo is even implemented.

The undoManager @Environment variable has a number of properties that can be queried as well as methods that can be called. Some of these include the likes of canUndo which is a Bool that tells you if there are any actions that can be undone. Likewise, canRedo works the same and lets you know if you can redo a change that you just used undo on.

@Environment(\.undoManager) private var undoManager

In ContentView add the undoManager from the @Environment. The undoManager here is kept up to date when you set isUndoEnabled to true earlier.

Next, update the ContentView with the following under the ToolBarItem:

ToolbarItemGroup(placement: .bottomBar) {
    Spacer()
    Button(action : {
        undoManager?.undo()
    }) {
        Image(systemName: "arrow.uturn.backward")
    }
    .disabled(!(undoManager?.canUndo ?? false))
    
    Button(action : {
        undoManager?.redo()
    }) {
        Image(systemName: "arrow.uturn.forward")
    }
    .disabled(!(undoManager?.canRedo ?? false))
}

This adds buttons to the bottom of the NavigationView with the spacer on line 2 pushing the buttons to the right of the view.

We add in two Button views here that manually call the undo() or redo() methods in the undoManager. This is the equivalent of using the swipe gesture I mentioned earlier.

We add an Image from SF Symbols and under each button we check if the undoManaget an undo or redo. If it can, the button is enabled.

If you complete tasks now, you will see the undo arrow become enabled. If you tap it, the redo arrow enables and the undo disables.

Other methods include undoCount which is a method that returns an Int. If your UI accounted for this, you can put the number of times you can invoke the undo method. Likewise, redoCount tells you the number of times you can invoke the redo method.

There are more features available such as making groups of changes, similar to transactions in SQL, where you can group changes together and undo a whole group together.

A full list of methods and properties can be found in the UndoManager class documentation.

If you have any questions on any part of this, please do not hesitate to reach out below.

The post How to Use UndoManager with SwiftData appeared first on DevFright.

The regular Picker also has a modifier called .pickerStyle that you can attach to that view where you can pass in various picker styles that conform to the PickerStyle protocol. In this tutorial we’ll look over some of these to show you ways how you might provide ways for your users to input the required information.

Setting up Pickers

struct ContentView: View {
    @State private var selectedVehicle = "Lamborghini"
    @State private var selectedColor = Color.green
    @State private var selectedDate = Date()
    
    let vehicles = ["Lamborghini", "Ferrari", "McLaren", "McMurtry", "Rimac"]
    let colors: [Color] = [.red, .green, .blue, .yellow, .purple, .gray]
    
    var body: some View {
        ScrollView {
            VStack(spacing: 30) {
                // Selection Picker with Wheel Style
                Text("Select Your Favorite Vehicle (Wheel Style):")
                    .font(.headline)
                Picker("Select a vehicle", selection: $selectedVehicle) {
                    ForEach(vehicles, id: \.self) { vehicle in
                        Text(vehicle)
                    }
                }
                .pickerStyle(WheelPickerStyle())
                
                // Selection Picker with Segmented Style
                Text("Select Your Favorite Vehicle (Segmented Style):")
                    .font(.headline)
                Picker("Select a vehicle", selection: $selectedVehicle) {
                    ForEach(vehicles, id: \.self) { vehicle in
                        Text(vehicle)
                    }
                }
                .pickerStyle(SegmentedPickerStyle())
                
                // Selection Picker with Menu Style
                Text("Select Your Favorite Vehicle (Menu Style):")
                    .font(.headline)
                Picker("Select a vehicle", selection: $selectedVehicle) {
                    ForEach(vehicles, id: \.self) { vehicle in
                        Text(vehicle)
                    }
                }
                .pickerStyle(MenuPickerStyle())
                
                // Inline Picker with Label
                Text("Select a Color (Inline Style):")
                    .font(.headline)
                Picker("Select a color", selection: $selectedColor) {
                    ForEach(colors, id: \.self) { color in
                        Text(color.description)
                            .foregroundColor(color)
                            .tag(color)
                    }
                }
                .pickerStyle(InlinePickerStyle())
                
                Group {
                    Text("Pick a Date:")
                        .font(.headline)
                    
                    DatePicker("", selection: $selectedDate, displayedComponents: .date)
                        .datePickerStyle(WheelDatePickerStyle())
                        .padding()
                    
                    Text("DefaultDatePickerStyle")
                    DatePicker("Select a Date", selection: $selectedDate)
                        .datePickerStyle(DefaultDatePickerStyle())
                    
                    Text("GraphicalDatePickerStyle")
                    DatePicker("", selection: $selectedDate)
                        .datePickerStyle(GraphicalDatePickerStyle())
                }
                
                Text("You selected: \(selectedVehicle) - \(selectedColor.description)")
                    .font(.title2)
                    .foregroundColor(selectedColor)
                
            }
            .padding()
        }
    }
}

Lines 2 – 4 contain @State property wrappers for vehicle, colour, and Date. We use @State so that the view can update any time one of the variables changes.

On lines 6 and 7 we create two arrays. The first being an array of String that contains five vehicle manufacturers. The other line contains an array of Color.

Line 10 is inside the body of the view and wraps everything in a ScrollView as we have several pickers to show which are longer than the screen.

The first type of Picker we use is the Wheel Picker. We declare it on line 15 as a Picker, and on line 20 we apply the WheelPickerStyle in the .pickerStyle modifier. This particular picker is just a generic single wheel that you can spin up and down by providing it an array. You specify the Text for each line on line 17. Because there isn’t much to this Picker, it is recommended that you organise the contents of the array into an order that makes sense (alphabetical for example).

On line 25 we declare our next Picker. It is created the same as the previous one, but we change the style to SegmentedPickerStyle() on line 30. Because we bind to $selectedVehicle for this and the previous Picker, when one changes, so does the other.

The same Picker is used on line 35, but this time with the MenuPickerStyle() added in the view modifier.

The last one in this section is declared on line 45 and is set to the style “InlinePickerStyle()”. The only difference here is that we base this Picker on the selectedColor and because the array of colours that we loop over contains Colors and not Strings, we can access the colours description to provide the text, but also pass in the colours on lines 48 and 49 to set the foregroundColor and tag.

The DatePickers

Line 58 is where the the first DatePicker is declared. It uses the .datePickerStyle view modifier and uses WheelDatePickerStyle(). I took the title off of this because it squashes to the left of the picker and goes vertical. We bind to $selectedDate so that any updates here will cause any other reference to be updated.

The next DatePicker is declared on line 63 where we set the style to be a DefaultDatePickerStyle.

The final DatePicker we use is declared on line 67 which uses the GraphicalDatePickerStyle.

All three work similar with the exception of the first where we passed in the displayComponents we wanted to use.

Overall, Pickers and DatePickers provide a simple way for your users to select data either provided from an array, or select a date from the calendar. There are various options to suit your needed. Please do reach out with any questions.

The post Exploring SwiftUI Picker Styles: Date, Selection, Graphical, Inline etc… appeared first on DevFright.

override func viewDidLoad() {
    super.viewDidLoad()
    // Custom setup code
    print("View has loaded.")
}

We override the method, and call super.viewDidLoad(), and then have time to do our own thing such as bringing in CoreLocation and setting the delegate, or whatever else you needed. There were several of these methods:

viewDidLoad() – Called when the view controller is loaded into memory
viewWillAppear() – Called when the view is about to appear on the screen
viewDidAppear() – Called right after the view appears on screen
viewWillDisappear() – Called just prior to the view being removed from the screen
viewDidDisappear() – Called when the view has disappeared from the screen

Depending on what setup or cleanup was needed, these were the places to perform that work.

SwiftUI has simplified this and now has .onAppear and .onDisappear that can be used. Because of @State, @Binding, @ObservedObject, and so on, we now have state-driven rendering that handle views updating as needed. When changes are detected, the view will load what it needs.

.onAppear

This relaces the need for viewWillAppear and viewDidAppear. You can add this to any view as follows:

struct ContentView: View {
    var body: some View {
        Text("Some text")
            .onAppear {
                print("onAppear")
                // do something!!!
            }
    }
}

The Text view in this case has the .onAppear method applied. It gets called and completes before the first rendered frame appears. This highlights an issue that if anything takes time to process, it will hold up the entire view and not just the Text sub view. An example would be something like this:

import SwiftUI

struct ContentView: View {
    @State private var message = "Waiting..."

    var body: some View {
        VStack(spacing: 20) {
            Text("Hello, World!")

            Text(message)
                .onAppear {
                    // Simulate blocking CPU work (100 million iterations)
                    var total = 0
                    for i in 0..<100_000_000 {
                        total += i
                    }
                    message = "Finished heavy task"
                }
        }
        .padding()
    }
}

Nothing would appear on the screen until 100 million iterations have completed. You wouldn’t see the “Waiting…” message while it performs the loop because it completes before the first rendered frame.

In short, be careful what you do in .onAppear. If something takes time then its best wrapping it in a Task and using async/await so that the rest of the view loads.

This can be done the following way:

struct ContentView: View {
    @State private var message = "Waiting..."

    var body: some View {
        VStack(spacing: 20) {
            Text("Hello, World!")

            Text(message)
                .onAppear {
                    Task {
                        // Simulate blocking CPU work (100 million iterations)
                        var total = 0
                        for i in 0..<100_000_000 {
                            total += i
                        }
                        message = "Finished heavy task"
                    }
                }
        }
        .padding()
    }
}

By wrapping it in Task, the view is able to load, and when the task completes, the message @State is updated and the view is refreshed. Alternatively, you can use .task { … }.

.onDisappear

The SwiftUI .onDisappear method replaces the need for viewWillDisappear() and viewDidDisappear() from UIKit. Just like heavy work can block loading of the entire view when done in .onAppear, you can also block removal of the view when using .onDisappear, so make sure you use Task when needed. Here is an example of .onDisappear delaying the view from being removed:

struct ContentView: View {
    @State private var showingDetail = true
    @State private var status = "Waiting..."

    var body: some View {
        VStack(spacing: 20) {
            Text("Parent View")
            Text("Status: \(status)")

            if showingDetail {
                BlockingDetailView(onFinish: {
                    status = "Heavy task finished"
                })
            }

            Button(showingDetail ? "Hide Detail" : "Show Detail") {
                showingDetail.toggle()
            }
        }
        .padding()
    }
}

struct BlockingDetailView: View {
    let onFinish: () -> Void

    var body: some View {
        VStack {
            Text("Detail View")
        }
        .onDisappear {
            print("Start blocking task")

            performHeavyTask()

            print("Finished blocking task")
            onFinish()
        }
    }

    func performHeavyTask() {
        var total = 0
        for i in 0..<100_000_000 {
            total += i
        }
    }
}

The performHeavyTask causes the view to not disappear until the heavy task completes. To correct this, we can make the following changes:

.onDisappear {
    Task {
        await runHeavyTaskAsync()
        onFinish()
    }
}

Await the heavy task method.

func runHeavyTaskAsync() async {
    await withCheckedContinuation { continuation in
        DispatchQueue.global(qos: .userInitiated).async {
            // Simulate blocking task
            var total = 0
            for i in 0..<100_000_000 {
                total += i
            }
            continuation.resume()
        }
    }
}

Make sure the heavy task method runs asynchronously.

When running this new version of the code, the view will immediately dismiss while the Task does its thing. Because onFinish is also included in the task, this is called on completion and updates the parent view:

BlockingDetailView(onFinish: {
    status = "Heavy task finished"
})

.onAppear and .onDisappear are extremely helpful when needing to do something when a view is getting ready to appear or getting ready to disappear. Just be mindful of longer running tasks and use Task and async/await where needed.

The post Using .onAppear and .onDisappear in your SwiftUI Views appeared first on DevFright.