What's new in SwiftUI 4

swiftanytime

Swift Anytime

Posted on January 9, 2023

What's new in SwiftUI 4

Now that you have explored about new color gradients, SF symbol rendering modes, variable colors and more in the Part 1, let's talk about native half sheet presentation, share sheet links and new modifiers in TextField. So without further ado, let's dive in.

Presentation Detents

Before SwiftUI 4, for implementing half sheet presentation, one would usually have to go some hack and implement UIViewRepresentable since there was no native way to do it in SwiftUI. But this year they introduced presentationDetents modifier which lets you select possible size - may it be giving a specific height or selecting small, medium or large size. Let's give it a try.

struct ContentView: View {
    @State var presentHalfSheet = false // 1 
    var body: some View {

            Button {
                self.presentHalfSheet = true // 2 
            } label : {
                Label("Show Info", systemImage: "info.circle.fill") // 3 
            }.sheet(isPresented: $presentHalfSheet) {
            AnotherView() 
                .presentationDetents([.medium]) // 4 
                .presentationDragIndicator(.visible) // 5 
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

Code Explanation:

  1. Declaring a state variable presentHalfScreen which we are going to toggle for showing the presentation.

  2. Toggling the present half screen on the button click.

  3. Using a label with info circle SF Symbol for the button.

  4. Giving the medium property to the presentation detents.

  5. Making the draggable grey line visible at the top of the view.

This time let's try giving more sizes in the presentation detents.

AnotherView()
         .presentationDetents([.medium, .large])
         .presentationDragIndicator(.visible)
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

You can see how the same view presents the medium view and on dragging the gray line, it can expand to the larger view.

You can also hard-code the presentation view to a certain height.

  AnotherView()
                .presentationDetents([.height(200)])
                .presentationDragIndicator(.visible)
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

You can observe that on the drag, the view didn't expand more than hard-coded height (200px in this case).

Apart from that, you can also give a custom height or give a fraction of the screen as the presentation.

Sharing - ShareLinks

In previous versions, there was no native way to show share sheets. Thus, one had to use a UIActivityController via UIViewRepresentable. SwiftUI 4 introduces a native way of showing a share sheet. Let's give it a try.

ShareLink(item: URL(string:“https://www.swiftanytime.com”)!) // 1 
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

Code Explanation:

  1. Here, the ShareLink is initialized with an URL item. You can use any Data type for that init.

You can see how giving no label to the ShareLink defaulted in a share button and label icon. Let's try using a share link with a label now.

ShareLink(item: URL(string:"https://www.swiftanytime.com")!) {
    Text("Share link")
}
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

ShareLinks have a tendency to adapt to according to the context, i.e. if its used in context menus or a toolbar, the share link will adapt to it. Let's see it in action.

Text("Share link in navigation bar")
    .toolbar { // 1 
        ToolbarItem(placement: .navigation) { // 2 
            ShareLink(item: URL(string:"https://www.swiftanytime.com")!) 
        }
    }
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

Code Explanation:

  1. A toolbar was added to some text.

  2. A toolbar item was added with the placement of a navigation bar.

TextField

The line limit and the automatic height control was quite restricted in previously in SwiftUI since there was not a lot of control over the line limit. With SwiftUI 4, you can use a range as the line limit so the text field would expand based on the text given.

TextField("Textfield", text: $textfield, axis: .vertical) // 1 
    .lineLimit(3...10) // 2 
Enter fullscreen mode Exit fullscreen mode

Code Explanation:

  1. TextField with axis initializer was used. The axis modifier decides in on which axis the text field will expand when more text is added.

  2. Assigning the line limit as the range 3-10.

You can see how the initial line limit is 3 and later when more text was added, the text field expanded accordingly.

Congratulations! You deserve to celebrate this moment. Today you learned about presentation detents, its size options, share links, its different initializers and the new text field line limits and axis. We encourage you to read more related articles like Geometry Reader and Colors and Gradient till then,

Eat. Sleep. Swift Anytime. Repeat.

💖 💪 🙅 🚩
swiftanytime
Swift Anytime

Posted on January 9, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related