Basic Usage: Copying Text to Clipboard

Let’s start with a basic example where we copy a text string to the clipboard when a button is pressed.

Example: Copying Text to Clipboard

import SwiftUI

struct CopyTextView: View {
    @State private var textToCopy = "Hello, SwiftUI!"
    @State private var message = "Tap the button to copy text"

    var body: some View {
        VStack(spacing: 20) {
            Text(message)
                .padding()

            Text(textToCopy)
                .padding()
                .background(Color.gray.opacity(0.2))
                .cornerRadius(10)

            Button(action: {
                UIPasteboard.general.string = textToCopy
                message = "Text copied to clipboard!"
            }) {
                Text("Copy Text")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
        .padding()
    }
}

In this example:

1. We define a @State variable textToCopy that holds the text we want to copy.
2. Another @State variable message is used to display the status message.
3. When the button is pressed, the text is copied to the clipboard using UIPasteboard.general.string.

Combining Copy and Paste Functionality

Let’s combine the copy and paste functionality into a single view.

Example: Copy and Paste Text

import SwiftUI

struct CopyPasteTextView: View {
    @State private var textToCopy = "Hello, SwiftUI!"
    @State private var pastedText = "Tap 'Paste' to see clipboard text"

    var body: some View {
        VStack(spacing: 20) {
            Text("Text to Copy:")
            Text(textToCopy)
                .padding()
                .background(Color.gray.opacity(0.2))
                .cornerRadius(10)

            Button(action: {
                UIPasteboard.general.string = textToCopy
            }) {
                Text("Copy Text")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }

            Divider()

            Text("Pasted Text:")
            Text(pastedText)
                .padding()
                .background(Color.gray.opacity(0.2))
                .cornerRadius(10)

            Button(action: {
                if let text = UIPasteboard.general.string {
                    pastedText = text
                } else {
                    pastedText = "No text found in clipboard"
                }
            }) {
                Text("Paste Text")
                    .padding()
                    .background(Color.green)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
        .padding()
    }
}

In this example:

1. We define two @State variables textToCopy and pastedText.
2. The “Copy Text” button copies textToCopy to the clipboard.
3. The “Paste Text” button retrieves and displays text from the clipboard in the pastedText variable.

Conclusion

Using the clipboard in SwiftUI is straightforward and enhances the interactivity of your app. By understanding how to copy and paste text, you can create more user-friendly interfaces.

The post Clipboard – Copy and Paste in SwiftUI appeared first on AppMakers.Dev.

1. Menu

The Menu view in SwiftUI is used to present a list of actions or options in a contextual popup. It is particularly useful for conserving screen space while offering multiple choices.

Example of Creating a Basic Menu:

struct MenuExampleView: View {
    var body: some View {
        Menu("Options") {
            Button("Print Hello", action: printHello)
            Button("Show Alert", action: showAlert)
        }
    }
    
    func printHello() {
        print("Hello")
    }
    
    func showAlert() {
        print("Alert should be shown here")
    }
}

2. Commands

Commands allow the addition of custom command menus and keyboard shortcuts to your SwiftUI app, enhancing functionality especially for macOS and iPadOS apps.

The .commands modifier is specific to macOS and iPadOS development within SwiftUI. It allows you to customize the menu bar on macOS and the Command menu that appears in the app switcher on iPadOS when a keyboard is connected.

Example of Adding Commands:

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .commands {
            CommandGroup(replacing: .newItem) {
                Button("New Dashboard") {
                    print("Create new dashboard")
                }
            }
        }
    }
}

3. MenuOrder and MenuActionDismissBehavior

MenuOrder determines the order in which menu items appear, helping prioritize the most important actions. MenuActionDismissBehavior specifies whether an action should dismiss the menu when triggered.

You can also use this modifier with Picker to disable dismissal.

Example of Customizing Menu Order and Dismiss Behavior:

struct AdvancedMenuView: View {
    var body: some View {
        Menu("Advanced Options") {
            Button("Refresh", action: refreshContent)
            Button("Load More", action: loadMoreContent)
        }
        .menuStyle(DefaultMenuStyle())
        .menuOrder(.automatic)
        .menuActionDismissBehavior(.dismissReset)
    }
    
    func refreshContent() {
        print("Content refreshed")
    }
    
    func loadMoreContent() {
        print("More content loaded")
    }
}

Conclusion

In this tutorial, we’ve explored how to use Menu, Commands, MenuOrder, and MenuActionDismissBehavior in SwiftUI to enhance app navigation and user interactions. These components provide the tools needed to create detailed and intuitive menus, ensuring a better user experience. By integrating these features into your SwiftUI app, you can significantly improve navigation efficiency and command accessibility, making your app more user-friendly and responsive.

The post SwiftUI Menus and Commands appeared first on AppMakers.Dev.

Using Link in SwiftUI

Link is a fundamental component in SwiftUI that allows you to create clickable text or views that navigate to a URL or handle URL requests within the app.

Example: Creating a Simple Link

import SwiftUI

struct ContentView: View {
    var body: some View {
        Link("Visit Our Website", destination: URL(string: "https://appmakers.dev")!)
    }
}

What’s Happening:

• This Link provides a direct connection to “appmakers.dev“.
• Tapping the link opens the URL in the default web browser.

Using ShareLink for Content Sharing

ShareLink enhances SwiftUI apps by integrating a native sharing interface that users are familiar with from iOS.

Example: Sharing a URL with ShareLink

import SwiftUI

struct ShareContentView: View {
    var body: some View {
        ShareLink("Share this post", item: URL(string: "https://appmakers.dev/learn-swiftui-handbook/)!)
    }
}

What’s Happening:

• A button labeled “Share this post” is displayed.
• Tapping the button brings up the iOS share sheet, allowing the user to share the URL via different apps or services.

Using SharePreview to Enhance Shared Content

SharePreview allows you to define how the shared content appears in the share sheet, providing a more tailored sharing experience.

Example: Customizing Share Preview

import SwiftUI

struct CustomShareView: View {
    var body: some View {
        ShareLink(item: URL(string: "https://appmakers.dev")!) {
            SharePreview("Check out this website!", image: Image(systemName: "globe"))
        }
    }
}

What’s Happening:

• The ShareLink not only shares a URL but also uses SharePreview to add a custom message and an icon to the share sheet.

Implementing HelpLink for User Assistance

HelpLink provides a straightforward way to link to help documentation or perform a help-related action.

Example: Using HelpLink with a URL

import SwiftUI

struct HelpView: View {
    var body: some View {
        HelpLink(destination: URL(string: "https://appmakers.dev")!)
    }
}

What’s Happening:

• The HelpLink directs users to an online help article.
• This is useful for providing direct assistance within the app.

Conclusion

Using Link, ShareLink, SharePreview, and HelpLink in SwiftUI enables you to build rich, interactive, and user-friendly interfaces. These components not only simplify navigation and data sharing but also enhance the overall user experience by making information and assistance more accessible. Experiment with these tools to discover new ways to engage users and improve the functionality of your iOS apps.

The post Link, ShareLink, SharePreview, and HelpLink in SwiftUI appeared first on AppMakers.Dev.

When to Use ContentUnavailableView

ContentUnavailableView should be utilized whenever your app cannot display its usual content. This might occur under various circumstances such as:

• A network connection error.
• An empty list that usually displays data.
• A search operation that returns no results.

Implementing ContentUnavailableView in these situations helps maintain a smooth and informative user experience, preventing user frustration and confusion.

Built-in Unavailable Views

SwiftUI provides a default ContentUnavailableView specifically for search scenarios, which is straightforward to implement.

struct ContentUnavailableViewBasic: View {
    var body: some View {
        ContentUnavailableView.search
    }
}

struct ContentUnavailableViewBasicWithText: View {
    var body: some View {
        ContentUnavailableView.search(text: "Some Text")
    }
}

Custom Unavailable Views

To create a custom ContentUnavailableView for situations other than searches, you can utilize SwiftUI’s flexibility to define specific labels, images, and descriptions. For example, to display a view for a network error:

        ContentUnavailableView(
            "Network Connection Unavailable",
            systemImage: "wifi.exclamationmark",
            description: Text("Just Turn on your Wi-Fi")
        )

Unavailable Views with Actions

Adding actions to ContentUnavailableView allows you to direct users towards potential solutions or alternative actions. Here’s how you can offer a proactive approach in your unavailable view:

Let’s create a custom ContentUnavailableView for a hypothetical gardening app where users can track and manage their plants. In this example, we’ll design an unavailable view for when there are no plants in a user’s garden. The view will encourage users to explore available plants and add them to their garden.

Custom Unavailable View for a Gardening App

This SwiftUI example is tailored for situations where the plant list is empty, perhaps because the user is new to the app or hasn’t added any plants yet.

struct GardenView_CustomContentUnavailable: View {
    
    @State private var plants: [String] = []
    @State private var isLoading = true

    var body: some View {
        NavigationView {
            List(plants, id: \.self) { plant in
                Text(plant)
            }
            .navigationTitle("Your Garden")
            .overlay(emptyGardenOverlay)
            .onAppear {
                loadPlants()
            }
        }
    }
    
    private var emptyGardenOverlay: some View {
        Group {
            if plants.isEmpty && !isLoading {
                ContentUnavailableView {
                    Label("No Plants Found", systemImage: "leaf.arrow.circlepath")
                } description: {
                    Text("Your garden is empty. Start by exploring our plant catalog to find your next green friend.")
                } actions: {
                    Button("Explore Plants") {
                        // Action to navigate to the plant catalog section
                    }
                    .buttonStyle(.borderedProminent)
                }
            }
        }
    }
    
    private func loadPlants() {
        // Simulate loading plants
        DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
            self.plants = [] // Simulate no results
            self.isLoading = false
        }
    }
}

Explanation:

• Navigation View & List: This structure holds a list that attempts to display plants within the user’s garden.
• Loading Simulation: When GardenView appears, loadPlants() mimics fetching plant data. After a delay, it sets the plants array as empty and updates isLoading to false.
• Overlay: When the plant list is empty and not loading, ContentUnavailableView overlays the list with a custom message and actions.
• Custom Unavailable View: The view contains a label with a system image and a description that encourages users to add plants to their empty garden. Additionally, it includes an actionable button labeled “Explore Plants,” which could be hooked up to navigate to a plant catalog.

This example effectively demonstrates how to use ContentUnavailableView to handle empty states in an app, providing users with guidance and actions to improve their experience.

Conclusion

ContentUnavailableView in SwiftUI provides a significant opportunity to enhance user experience during data downtime or when content is otherwise unavailable. By implementing both built-in and custom views, and incorporating actionable solutions, developers can maintain user engagement and minimize potential frustration. Experiment with different configurations to tailor the ContentUnavailableView to fit seamlessly within your app, ensuring it aligns with the overall design and user expectations.

The post ContentUnavailableView in SwiftUI: Enhance UX During Data Downtime appeared first on AppMakers.Dev.

Basic Search Interface

Let’s start with the most straightforward application of the searchable modifier. We’ll add a search bar to a list view, allowing users to filter items based on their search queries.

Example: Simple Search in a List

import SwiftUI

struct SimpleSearchView: View {
   let items = ["Apple", "Banana", "Orange", "Pear"]
    @State private var searchText = ""

    var filteredItems: [String] {
        if searchText.isEmpty {
            return items
        } else {
            return items.filter { $0.contains(searchText) }
        }
    }

    var body: some View {
        NavigationStack {
            List(filteredItems, id: \.self) { item in
                Text(item)
            }
            .searchable(text: $searchText)
            .navigationTitle("Fruits")
        }
    }
}

This example demonstrates adding a search bar to a list of fruits. The list updates based on the user’s search input, showing filtered results.

Advanced Search with Custom Placement

SwiftUI allows for more control over the search interface’s placement, making it possible to tailor the search experience further.

Example: Search with Custom Placement

struct CustomPlacementSearchView: View {
   
    let allItems = ["Apple", "Banana", "Orange", "Pear", "Mango", "Grapes"]
    
    @State private var searchText = ""

    var filteredItems: [String] {
        if searchText.isEmpty {
            return allItems
        } else {
            return allItems.filter { $0.localizedCaseInsensitiveContains(searchText) }
        }
    }

    var body: some View {
        NavigationStack {
            List {
                ForEach(filteredItems, id: \.self) { item in
                    Text(item)
                }
            }
            .searchable(text: $searchText, placement:
                    .navigationBarDrawer(displayMode: .always))
            .navigationTitle("Fruits")
        }
    }
}

Here, the search bar uses a custom placement in the navigation bar drawer, making it always visible and accessible.

Integrating Search in Complex Interfaces

In more complex interfaces, such as those with multiple columns or custom navigation structures, adding search functionality can enhance navigation and accessibility.

Example: Multi-Column Search Interface

struct MultiColumnSearchView: View {
    let departments = ["Marketing", "Sales", "Engineering", "Design", "Customer Support"]
    @State private var searchText = ""

    var filteredDepartments: [String] {
        if searchText.isEmpty {
            return departments
        } else {
            return departments.filter { $0.localizedCaseInsensitiveContains(searchText) }
        }
    }

    var body: some View {
        NavigationSplitView {
            List(filteredDepartments, id: \.self) { department in
                NavigationLink(department, destination: MultiColumnSearchViewDetailView(department: department))
            }
            .searchable(text: $searchText)
            .navigationTitle("Departments")
        } detail: {
            Text("Select a department")
        }
    }
}

struct MultiColumnSearchViewDetailView: View {
    var department: String

    var body: some View {
        Text("\(department) details go here.")
            .navigationTitle(department)
    }
}

This setup illustrates adding a search bar within a NavigationSplitView, allowing users to search through the navigation links in a multi-column layout.

Conclusion

SwiftUI’s searchable modifier provides a flexible and powerful way to add search interfaces to your apps. By understanding and applying different configurations and placements, you can create intuitive and accessible search experiences for your users. Experiment with the examples provided and explore the possibilities to enhance your SwiftUI apps with effective search functionalities.

The post Search in Your SwiftUI App appeared first on AppMakers.Dev.

Toolbar in SwiftUI

Let’s create a simple  app interface in SwiftUI that allows users to change the color and font size

struct ContentView: View {
    
    @State private var selectedColor: Color = .black
    @State private var fontSize: CGFloat = 15.0
    
    var body: some View {
        
        NavigationStack {
            ZStack {
                // Placeholder for drawing canvas
                Color.white
                VStack {
                    Spacer()
                    Text("UIExamples.com")
                        .foregroundColor(selectedColor)
                        .font(.system(size: fontSize))
                    Spacer()
                }
            }
            .toolbar {
                ToolbarItemGroup(placement: .bottomBar) {
                    ColorPicker("Font Color", selection: $selectedColor, supportsOpacity: false)
                        .padding()
                    
                    Slider(value: $fontSize, in: 10...20) {
                        Text("Font Size")
                    }
                    .frame(width: 150)
                }
            }
        }
    }
    
}

ToolbarItem

ToolbarItem is used to place individual items or actions within a toolbar. You can specify the placement of these items and customize their content.

Example: Adding a Button to the Toolbar

struct ToolbarItemExample: View {
    
    @State private var text: String?
    
    var body: some View {
        
        NavigationStack {
            Text(text ?? "")
                .navigationTitle("ToolbarItem Example")
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button(action: {
                            
                            print("Action button tapped!")
                            
                            text = "UIExamples.com"
                            
                        }) {
                            Image(systemName: "plus")
                        }
                    }
                }
        }
    }
}

In this example, a ToolbarItem is added to the navigation bar’s trailing edge, represented by a plus icon.

Grouping Multiple Toolbar Items with ToolbarItemGroup

struct SwiftUIToolbarContentExample: View {
    
    @State private var text: String?
    
    var body: some View {
        NavigationStack {
            Text(text ?? "")
                .navigationTitle("ToolbarContent Example")
                .toolbar {
                    ToolbarItemGroup(placement: .bottomBar) {
                        Button("First") { print("First button tapped")
                            
                            text = "UIExamples.com: First button tapped"
                            
                        }
                        Spacer()
                        Button("Second") { print("Second button tapped")
                            
                            text = "UIExamples.com: Second button tapped"
                            
                        }
                    }
                }
        }
    }
}

ToolbarItemPlacement and ToolbarTitleMenu

ToolbarItemPlacement defines where a toolbar item should be located. ToolbarTitleMenu is not a direct SwiftUI component but can be achieved by using a ToolbarItem with specific placement to create a menu in the toolbar title’s vicinity.

Example: Creating a Menu in the Toolbar

struct ToolbarMenuExample: View {
    
    @State private var text: String?
    
    var body: some View {
        NavigationStack {
            Text(text ?? "")
                .navigationTitle("Title")
                .toolbar {
                    ToolbarItem(placement: .navigationBarLeading) {
                        Menu("Options") {
                            Button("Option 1", action: { print("Option 1 selected")
                                
                                text = "UIExamples.com: First button tapped"
                                
                            })
                            Button("Option 2", action: { print("Option 2 selected")
                                
                                text = "UIExamples.com: Second button tapped"
                                
                            })
                        }
                    }
                }
        }
    }
}

In this example, a Menu is placed in the navigation bar’s leading edge using a ToolbarItem. This creates a dropdown menu with options, mimicking the functionality of a title menu.

The post Toolbar, ToolbarItem, ToolbarItemGroup, and Menu in SwiftUI appeared first on AppMakers.Dev.

SwiftUI Alert Example

In this example, we’ll create a ContentView that includes a button. When the button is tapped, an alert with a title and message will be displayed to the user. The alert will have two actions: “OK” to dismiss the alert and “Cancel” which also dismisses the alert but can be used to execute additional code if necessary.

import SwiftUI

struct ContentView: View {
    @State private var showAlert = false

    var body: some View {
        Button("Show Alert") {
            showAlert = true
        }
        .alert("Attention Needed", isPresented: $showAlert) {
            Button("OK") {
                print("OK tapped")
            }
            Button("Cancel", role: .cancel) {
                print("Cancel tapped")
            }
        } message: {
            Text("This is a simple alert in SwiftUI.")
        }
    }
}

In this ContentView, tapping the “Show Alert” button sets showAlert to true, triggering the presentation of the alert. The alert is configured with a title (“Attention Needed”) and a message (“This is a simple alert in SwiftUI.”). We define two buttons within the alert: “OK” and “Cancel”. The “Cancel” button is assigned the role of .cancel, making it the default cancellation action. When each button is tapped, a print statement is executed for demonstration purposes, but you could replace these print statements with any action you need to perform.

Simplified Alert Presentation in SwiftUI

SwiftUI makes it incredibly easy to present alerts to the user with minimal code. By leveraging the AlertItem struct, you can encapsulate all the details needed for an alert in a single, reusable component. Here’s how to implement a straightforward alert presentation triggered by a button tap:

Step 1: Define the AlertItem Structure

First, ensure you have the AlertItem structure defined. This struct will hold the title, message, and dismiss button for the alert, making it easy to reuse throughout your app:

import SwiftUI

struct AlertItem: Identifiable {
    let id = UUID()
    let title: Text
    let message: Text
    let dismissButton: Alert.Button
}

Step 2: Integrate the Alert with a Button

In this simplified example, we’ll create a ContentView that includes a button. Pressing the button will trigger an alert without any additional user input or state:

struct ContentView: View {
    @State private var alertItem: AlertItem?
    
    var body: some View {
        Button("Tap to Show Alert") {
            // Configure the alert item to display an alert
            alertItem = AlertItem(title: Text("Simple Alert"),
                                  message: Text("This is how you show a simple alert in SwiftUI."),
                                  dismissButton: .default(Text("OK")))
        }
        .alert(item: $alertItem) { item in
            Alert(title: item.title, message: item.message, dismissButton: item.dismissButton)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Understanding the Simplified Example

In this streamlined example, the ContentView contains just a button that, when tapped, initializes the alertItem with the necessary details for the alert presentation. The .alert(item:) modifier listens for changes to the alertItem. Once alertItem is set, the alert is presented to the user with the specified title, message, and a button to dismiss the alert.

This approach is perfect for beginners and offers a clear illustration of the power and simplicity of SwiftUI for managing UI components like alerts. It demonstrates how to present an alert with just a few lines of code, focusing on the essence of alert presentation in SwiftUI.

Selecting a Favorite Book with SwiftUI Alerts

First, we define a simple Book struct that uniquely identifies each book by its title:

struct Book: Identifiable {
    var id: String { title }
    let title: String
}

Next, we implement ContentView, where users can select their favorite book. This view demonstrates how to use the .alert(item:) modifier with the Book model:

struct ContentView: View {
    
    @State private var selectedBook: Book?

    var body: some View {
        VStack() {
            
            Spacer()
            
            Text("\(selectedBook?.title ?? "Select the Book")")
            
            Spacer()
          
            Button(" 1984") {
                selectedBook = Book(title: "1984")
            }

            Button("Select The Great Gatsby") {
                selectedBook = Book(title: "The Great Gatsby")
            }
            
            Spacer()
            
        }
        .alert(item: $selectedBook) { book in
            Alert(title: Text(book.title),
                  message: Text("An excellent selection!"),
                  dismissButton: .default(Text("Close")))
        }
    }
    
}

In this example, the ContentView consists of two buttons, each representing a classic novel. Upon tapping a button, the corresponding Book instance is assigned to selectedBook, triggering an alert that displays the selected book’s title and a custom message.

Notice, that when the alert is dismissed, the binding used in item: ($selectedBook) is set to nil. This is the expected behavior as it signifies the alert has been handled and dismissed.

To keep the selectedBook selection even after the alert is dismissed, let’s introduce a workaround. One approach is to use a separate state to control the alert’s visibility, instead of tying the alert presentation directly to whether selectedBook is nil or not. Let’s adjust the code.

       
struct ContentView: View {
    
        @State private var selectedBook: Book?
        @State private var showAlert = false // A new state variable to control the alert's visibility

        var body: some View {
            VStack() {
                
                Spacer()
                
                Text("\(selectedBook?.title ?? "Select the Book")")
                
                Spacer()
              
                Button("1984") {
                    selectedBook = Book(title: "1984")
                    showAlert = true // Show the alert
                }

                Button("Select The Great Gatsby") {
                    selectedBook = Book(title: "The Great Gatsby")
                    showAlert = true // Show the alert
                }
                
                Spacer()
                
            }
            .alert(isPresented: $showAlert) { // Use `isPresented` instead of `item`
                guard let selectedBook = selectedBook else { return Alert(title: Text("No Book Selected")) }
                return Alert(
                    title: Text(selectedBook.title),
                    message: Text("An excellent selection!"),
                    dismissButton: .default(Text("Close"))
                )
            }
        }
    
}

The post SwiftUI Alert System Explained appeared first on AppMakers.Dev.

Using isPresented for Modal Presentations

The isPresented binding controls the presentation state of a modal. It’s a Boolean value that, when true, presents the modal view and, when false, dismisses it.

Presenting a Modal Sheet

A modal sheet slides up from the bottom of the screen and can be dismissed by the user. It’s ideal for settings, detail information, or input forms.

struct ContentView: View {
   
    @State private var showSheet = false

       var body: some View {
           Button("Show Sheet") {
               showSheet.toggle()
           }
           .sheet(isPresented: $showSheet) {
               // The content of the sheet goes here
               Text("Hello, UIExamples.com Friend!")
           }
       }
    
}

Using Full-Screen Covers

Full-screen covers take up the entire screen, providing a more immersive experience. They’re perfect for welcome screens or completing tasks without distractions.

struct ContentView: View {
    @State private var showFullScreenCover = false

    var body: some View {
        Button("Show Full-Screen Cover") {
            showFullScreenCover.toggle()
        }
        .fullScreenCover(isPresented: $showFullScreenCover) {
            // The content of the full-screen cover goes here
            Text("We are Full Screen\n UIExamples.com\n Friend!")
        }
    }
}

Displaying Popovers

Popovers are small views that appear floating over the current content, typically used on iPad or macOS to present additional information or options.

struct SwiftUIModalNavigation3: View {
    @State private var showPopover = false

    var body: some View {
        Button("Show Popover") {
            showPopover.toggle()
        }
        .popover(isPresented: $showPopover) {
            // The content of the popover goes here
            Text("More Info Here")
                .frame(width: 200, height: 200)
        }
    }
}

Dismissing Modal Presentations

In SwiftUI, you can programmatically dismiss a modal presentation using the dismiss action provided by the environment. This is particularly useful in navigation flows or after performing a task.

struct DetailViewForModalNavigation: View {
    @Environment(\.dismiss) var dismiss

    var body: some View {
        Button("Dismiss") {
            dismiss()
        }
    }
}

Understanding presentationDetents(_:)

When you use presentationDetents(_:), you define a set of PresentationDetent values that your sheet supports. This can significantly enhance the usability of sheets within your app, as it allows for multiple resting heights. For example, a sheet might have a .medium and a .large detent, enabling the user to choose how much of the sheet is visible based on the content’s relevance or their current focus.

struct PlayerView: View {
    @State private var showingLyrics = false

    var body: some View {
        VStack {
            Button("Show Lyrics") {
                showingLyrics = true
            }
        }
        .sheet(isPresented: $showingLyrics) {
            LyricsView()
                .presentationDetents([.medium, .large])
        }
    }
}

struct LyricsView: View {
    var body: some View {
        Text("Here are the lyrics...")
   
    }
}

Conclusion

Modal presentations in SwiftUI are powerful tools for enhancing user interaction within your app. By understanding how to use sheets, full-screen covers, and popovers, along with managing their presentation state through isPresented and programmatically dismissing them with dismiss, you can create intuitive and engaging interfaces.

Remember, the choice between a sheet, full-screen cover, and popover depends on the amount of content you need to display and the context of use. Experiment with these modal types to find what works best for your app’s user experience.

The post SwiftUI Modal Navigation: sheet, fullScreenCover, popover appeared first on AppMakers.Dev.

What is NavigationSplitView?

NavigationSplitView offers a straightforward way to build adaptive, multi-column UIs in SwiftUI applications. It can dynamically adjust its layout based on the device’s screen size and orientation, presenting information in two or three columns. On larger screens, it can display side-by-side columns, while on compact screens, it collapses into a single column, enhancing the app’s usability across different devices.

Tutorial: Implementing a Simple Two-Column Layout using NavigationSplitView

Step 1: Define Your Data Model

First, define a simple data model to represent the subjects. Each subject has a unique identifier (id) and a name.

struct Subject: Identifiable, Hashable {
    var id = UUID()
    var name: String
}

Step 2: Prepare Sample Data

Create an array of subjects to be displayed in the list. This array serves as the data source for our two-column navigation interface.

let subjects = [Subject(name: "Subject 1"), Subject(name: "Subject 2")]

Step 3: Create the List View

Construct a view that lists the subjects. Each subject in the list can be tapped, updating the current selection.

struct SubjectListView: View {
    let subjects: [Subject]
    @Binding var selectedSubject: Subject?

    var body: some View {
        List(subjects) { subject in
            Button(subject.name) {
                self.selectedSubject = subject
            }
        }
    }
}

Step 4: Design the Detail View

The detail view displays information about the selected subject. If no subject is selected, it prompts the user to make a selection.

struct SubjectDetailView: View {
    var subject: Subject?

    var body: some View {
        Text(subject?.name ?? "Select a subject")
    }
}

Step 5: Combine Views with NavigationSplitView

Now, integrate the list and detail views using NavigationSplitView. This setup automatically adapts the UI layout to the device’s screen size and orientation.

struct ContentView: View {
    @State private var selectedSubject: Subject?
    @State private var columnVisibility: NavigationSplitViewVisibility = .all

    var body: some View {
        NavigationSplitView(columnVisibility: $columnVisibility) {
            List(subjects, id: \.id, selection: $selectedSubject) { subject in
                Text(subject.name)
                    .font(.title)
                    .onTapGesture {
                        self.selectedSubject = subject
                    }
            }
        } detail: {
            if let selectedSubject = selectedSubject {
                SubjectDetailView(subject: selectedSubject)
            } else {
                Text("Select a subject")
            }
        }
        .navigationSplitViewStyle(.balanced)
    }
}

Conclusion

By following these steps, you’ve created a responsive, two-column navigation interface using SwiftUI’s NavigationSplitView. This layout adapts seamlessly across different devices, providing an intuitive user experience whether on an iPhone, iPad, or Mac. Experiment with customizing the views, adapting the data model, and exploring additional NavigationSplitView features to further enhance your SwiftUI applications.

The post NavigationSplitView in SwiftUI appeared first on AppMakers.Dev.

import SwiftUI

struct NavigationBarItemSwiftUI: View {
    var body: some View {
        
        NavigationStack {
            Text("Welcome to SwiftUI Navigation")
                .navigationTitle("Home")
            
        }
        
    }
}

#Preview {
    ContentView()
}

  .navigationBarItems(leading:
                    Button(action: {
                        print("Leading item tapped")
                    }) {
                        Image(systemName: "bell")
                    }
                )

 .navigationBarItems(trailing:

                    Button(action: {
                        print("Trailing item tapped")
                    }) {
                        Image(systemName: "gear")
                    }
                    
                )

     .navigationBarItems(trailing:
                  
                    Button(action: {
                        // Action
                        print("Edit Button Tapped")
                    }) {
                        Text("Edit")
                            .foregroundColor(.blue)
                            .font(.headline)
                    }
                                         
                )

The post NavigationBarItem in SwiftUI appeared first on AppMakers.Dev.