Introduction to .focused

The .focused modifier binds the focus state of a view to a Boolean state value. When the bound value is true, the view receives focus; when false, it loses focus. This allows you to programmatically manage the focus state of your views.

Basic Example

Let’s start with a basic example where we manage the focus state of a TextField in a form, including a visual indicator for when the field is focused.

import SwiftUI

struct FocusedExampleView: View {
    @State private var username: String = ""
    @State private var password: String = ""
    @FocusState private var usernameFieldIsFocused: Bool
    @FocusState private var passwordFieldIsFocused: Bool
    @State private var showPasswordHint = false

    var body: some View {
        VStack(spacing: 20) {
            TextField("Username", text: $username)
                .focused($usernameFieldIsFocused)
                .padding()
                .background(usernameFieldIsFocused ? Color.yellow.opacity(0.3) : Color.clear)
                .cornerRadius(10)
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(usernameFieldIsFocused ? Color.blue : Color.gray, lineWidth: 2)
                )

            SecureField("Password", text: $password)
                .focused($passwordFieldIsFocused)
                .padding()
                .background(passwordFieldIsFocused ? Color.yellow.opacity(0.3) : Color.clear)
                .cornerRadius(10)
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(passwordFieldIsFocused ? Color.blue : Color.gray, lineWidth: 2)
                )

            if showPasswordHint {
                Text("Password must be at least 8 characters long.")
                    .foregroundColor(.red)
            }

            Button("Submit") {
                validateForm()
            }
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
        }
        .padding()
    }

    private func validateForm() {
        if username.isEmpty {
            usernameFieldIsFocused = true
        } else if password.count < 8 {
            passwordFieldIsFocused = true
            showPasswordHint = true
        } else {
            showPasswordHint = false
            print("Form submitted")
        }
    }
}

Explanation

1. State Variables: We use @State variables to store the input values for the username and password fields, and to manage the visibility of the password hint.
2. FocusState: We use @FocusState property wrappers to track the focus state of the username and password fields.
3. TextField and SecureField: The TextField for the username and the SecureField for the password are each bound to their respective focus states using the .focused modifier.
4. Visual Indicators: We change the background color and border color of the fields to indicate when they are focused.
5. Form Validation: The validateForm function checks if the username is empty or if the password is less than 8 characters long. It sets the focus to the appropriate field and displays a hint if necessary.
6. Submit Button: The “Submit” button triggers the form validation logic.

Advanced Example: Managing Multiple Focused Fields

In a more complex form, you might need to manage multiple fields and their focus states. Let’s extend our example to include an email field and implement a more sophisticated focus management, with visual indicators for each field.

import SwiftUI

struct AdvancedFocusedExampleView: View {
    @State private var username: String = ""
    @State private var email: String = ""
    @State private var password: String = ""
    @FocusState private var usernameFieldIsFocused: Bool
    @FocusState private var emailFieldIsFocused: Bool
    @FocusState private var passwordFieldIsFocused: Bool
    @State private var showPasswordHint = false

    var body: some View {
        VStack(spacing: 20) {
            TextField("Username", text: $username)
                .focused($usernameFieldIsFocused)
                .padding()
                .background(usernameFieldIsFocused ? Color.yellow.opacity(0.3) : Color.clear)
                .cornerRadius(10)
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(usernameFieldIsFocused ? Color.blue : Color.gray, lineWidth: 2)
                )

            TextField("Email", text: $email)
                .focused($emailFieldIsFocused)
                .padding()
                .background(emailFieldIsFocused ? Color.yellow.opacity(0.3) : Color.clear)
                .cornerRadius(10)
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(emailFieldIsFocused ? Color.blue : Color.gray, lineWidth: 2)
                )
                .keyboardType(.emailAddress)
                .autocapitalization(.none)

            SecureField("Password", text: $password)
                .focused($passwordFieldIsFocused)
                .padding()
                .background(passwordFieldIsFocused ? Color.yellow.opacity(0.3) : Color.clear)
                .cornerRadius(10)
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(passwordFieldIsFocused ? Color.blue : Color.gray, lineWidth: 2)
                )

            if showPasswordHint {
                Text("Password must be at least 8 characters long.")
                    .foregroundColor(.red)
            }

            Button("Submit") {
                validateForm()
            }
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
        }
        .padding()
    }

    private func validateForm() {
        if username.isEmpty {
            usernameFieldIsFocused = true
        } else if !isValidEmail(email) {
            emailFieldIsFocused = true
        } else if password.count < 8 {
            passwordFieldIsFocused = true
            showPasswordHint = true
        } else {
            showPasswordHint = false
            print("Form submitted")
        }
    }

    private func isValidEmail(_ email: String) -> Bool {
        // Simple email validation
        let emailRegEx = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,64}"
        let emailPredicate = NSPredicate(format:"SELF MATCHES %@", emailRegEx)
        return emailPredicate.evaluate(with: email)
    }
}

Explanation

1. Multiple Fields: We apply the same visual indicator logic to the username, email, and password fields.
2. Form Validation: The validation logic ensures the correct field is focused based on the validation outcome.
3. Email Field: The email field has its own focus state and visual indicators.

By adding these visual cues, users can easily identify which field is currently active, enhancing the user experience.

Conclusion

Using the .focused modifier in SwiftUI allows you to control and observe the focus state of your views, enhancing the user experience by managing input fields efficiently. By following these examples, you can implement sophisticated focus management in your SwiftUI applications.

The post Mastering Focus in SwiftUI: Using .focused Modifier appeared first on AppMakers.Dev.

Introduction to Gestures in SwiftUI

SwiftUI provides several built-in gestures such as tap, drag, long press, and rotation. You can attach these gestures to any view using the .gesture modifier. Let’s explore each of these gestures with practical examples.

Tap Gesture

The tap gesture is one of the simplest and most commonly used gestures. It detects a single or multiple taps on a view.

Example: Using Tap Gesture

import SwiftUI

struct TapGestureView: View {
    @State private var message = "Tap on the circle"

    var body: some View {
        VStack {
            Circle()
                .fill(Color.blue)
                .frame(width: 100, height: 100)
                .onTapGesture {
                    message = "Circle tapped!"
                }
            Text(message)
                .padding()
        }
    }
}

In this example, a Circle view changes the message displayed in the Text view when tapped.

Long Press Gesture

The long press gesture recognizes when a user presses and holds on a view for a specified duration.

Example: Using Long Press Gesture

import SwiftUI

struct LongPressGestureView: View {
    @State private var isPressed = false

    var body: some View {
        Circle()
            .fill(isPressed ? Color.red : Color.green)
            .frame(width: 100, height: 100)
            .onLongPressGesture {
                isPressed.toggle()
            }
    }
}

In this example, the color of the Circle view toggles between red and green when long pressed.

Drag Gesture

The drag gesture allows users to drag views across the screen.

Example: Using Drag Gesture

import SwiftUI

struct DragGestureView: View {
    @State private var offset = CGSize.zero
    @State private var startLocation = CGSize.zero

    var body: some View {
        Circle()
            .fill(Color.purple)
            .frame(width: 100, height: 100)
            .offset(x: offset.width + startLocation.width, y: offset.height + startLocation.height)
            .gesture(
                DragGesture()
                    .onChanged { gesture in
                        offset = CGSize(width: gesture.translation.width + startLocation.width,
                                        height: gesture.translation.height + startLocation.height)
                    }
                    .onEnded { gesture in
                        startLocation = CGSize(width: offset.width, height: offset.height)
                        offset = .zero
                    }
            )
    }
}

In this example, a Circle view can be dragged around the screen.

Explanation

1. State Variables: We use offset to track the current drag offset and startLocation to remember the view’s position after each drag.
2. onChanged: During the drag, we update offset by adding the current gesture translation to the start location.
3. onEnded: When the drag ends, we update startLocation to the new position and reset offset to zero for the next drag.

Rotation Gesture

The rotation gesture detects rotation interactions and can be used to rotate views.

Example: Using Rotation Gesture

import SwiftUI

struct RotationGestureView: View {
    @State private var rotation: Angle = .zero
    @State private var lastRotation: Angle = .zero

    var body: some View {
        Rectangle()
            .fill(Color.orange)
            .frame(width: 200, height: 200)
            .rotationEffect(rotation + lastRotation)
            .gesture(
                RotationGesture()
                    .onChanged { angle in
                        rotation = angle
                    }
                    .onEnded { angle in
                        lastRotation += rotation
                        rotation = .zero
                    }
            )
    }
}

Explanation

1. State Variables: We use rotation to track the current rotation during the gesture and lastRotation to remember the accumulated rotation after each gesture.
2. onChanged: During the rotation, we update rotation to the current gesture’s angle.
3. onEnded: When the rotation ends, we add the current rotation to lastRotation and reset rotation to zero for the next gesture.

Combining Gestures

SwiftUI allows you to combine multiple gestures on a single view using the .simultaneousGesture modifier.

Example: Combining Tap and Long Press Gestures

struct CombinedGestureView: View {
    @State private var message = "Tap or Long Press"

    var body: some View {
        VStack {
            Circle()
                .fill(Color.blue)
                .frame(width: 100, height: 100)
                .onTapGesture {
                    message = "Circle tapped!"
                }
                .simultaneousGesture(
                    LongPressGesture()
                        .onEnded { _ in
                            message = "Circle long pressed!"
                        }
                )
            Text(message)
                .padding()
        }
    }
}

Explanation

1. State Variable: We use a @State variable message to display the current gesture action.
2. Circle View: We create a Circle view with a blue fill, setting its frame to 100×100 points.
3. Tap Gesture: We use .onTapGesture to detect tap gestures on the Circle view. When the Circle is tapped, it updates the message to “Circle tapped!”.
4. Long Press Gesture: We use .simultaneousGesture to combine a LongPressGesture with the tap gesture. When the Circle is long-pressed, it updates the message to “Circle long pressed!”.
5. Text View: We display the message in a Text view below the Circle, which updates based on the detected gesture.

How It Works

• Tap Gesture: When you tap on the Circle, the onTapGesture modifier is triggered, updating the message to “Circle tapped!”.
• Long Press Gesture: When you long press on the Circle, the onEnded closure of the LongPressGesture is triggered, updating the message to “Circle long pressed!”.

In this example, the Circle view can detect both tap and long press gestures, updating the message accordingly.

Conclusion

SwiftUI gestures provide a powerful way to create interactive and responsive user interfaces. By understanding and using these gestures, you can enhance the user experience in your apps.

The post Gestures in SwiftUI: Tap, Long Tap, Drag, Rotation appeared first on AppMakers.Dev.

Example 1: Success Feedback on Task Completion

When a user completes a task in an app, providing a success feedback can affirm the action positively.

import SwiftUI

struct TaskCompletionView: View {
    @State private var isDone = false
    
    var body: some View {
        Button("Is Done?") {
            isDone = true
        }.sensoryFeedback(.success, trigger: isDone)
    }
}

This button, when tapped, triggers a success feedback indicating that a task has been successfully completed. This kind of feedback is ideal for to-do lists or goal-tracking apps.

Example 2: Warning Feedback on Potential Issue

struct CriticalValueInputView: View {
    @State private var value: Double = 0.0

    var body: some View {
        VStack {
            Slider(value: $value, in: 0...100, step: 1)
                .padding()
            Text("Current Value: \(value, specifier: "%.0f")")
                .padding()
            if value > 80 {
                Text("Warning: High Value!")
                    .foregroundColor(.red)
                    .padding()
                    .sensoryFeedback(.warning, trigger: value > 80)
            }
        }
        .padding()
    }
}

The .sensoryFeedback modifier in SwiftUI allows developers to incorporate haptic feedback into their apps, providing a tactile response to user interactions. When you use .sensoryFeedback with the .impact type, you can specify the weight and intensity of the feedback:

• Impact Weight: Determines how heavy the feedback feels. The weight can be set to different levels such as .light, .medium, .heavy, etc., each corresponding to the strength of the haptic impact.
• Intensity: Adjusts how strong the feedback is. This value is typically a decimal between 0.0 and 1.0, where higher values produce a more forceful feedback.

The trigger parameter is crucial as it determines when the feedback should occur. This is usually linked to some state in your app, such as a boolean flag or a specific value that changes in response to user actions. When the specified trigger changes in a way that meets the conditions for feedback (which can be as simple as toggling a boolean or more complex conditions based on user input or app state changes), the haptic feedback is activated

struct FeedbackExampleView: View {
    // State variable to trigger feedback
    @State private var feedbackTriggered = false

    var body: some View {
        VStack(spacing: 20) {
            Text("Tap the button below to trigger heavy impact feedback.")
                .padding()

            // Button that toggles the feedbackTriggered state
            Button("Trigger Feedback") {
                // Toggle the state to trigger feedback
                self.feedbackTriggered.toggle()
            }
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .clipShape(Capsule())
            // Attach sensoryFeedback modifier with heavy impact
            .sensoryFeedback(.impact(weight: .heavy), trigger: feedbackTriggered)
        }
    }
}

Conclusion

Integrating SensoryFeedback in SwiftUI apps not only enriches the user interface but also aids in delivering a more intuitive user experience. By providing immediate, relevant feedback, you can guide users’ actions more effectively and ensure they feel more connected and responsive to the app. Experiment with these examples in your own apps to explore the benefits of enhanced sensory feedback.

The post SensoryFeedback in SwiftUI – Providing Haptic Feedback appeared first on AppMakers.Dev.

Understanding Keyboard Types in SwiftUI

SwiftUI allows developers to specify the keyboard type for text views, which tailors the keyboard layout to the expected content type, such as numbers, email addresses, or URLs. This is accomplished using the .keyboardType(_:) modifier, which accepts a parameter from the UIKeyboardType enumeration.

Example: Setting Up Various Text Fields with Specific Keyboard Types

Here’s a practical example demonstrating how to implement different keyboard types for a variety of text input needs in a SwiftUI view.

import SwiftUI

struct KeyboardTypeExampleView: View {
    @State private var emailAddress: String = ""
    @State private var phoneNumber: String = ""
    @State private var url: String = ""
    @State private var quantity: String = ""

    var body: some View {
        Form {
            Section(header: Text("Contact Information")) {
                TextField("Email Address", text: $emailAddress)
                    .keyboardType(.emailAddress)
                    .autocapitalization(.none)
                
                TextField("Phone Number", text: $phoneNumber)
                    .keyboardType(.phonePad)
            }
            
            Section(header: Text("Website")) {
                TextField("Enter URL", text: $url)
                    .keyboardType(.URL)
                    .autocapitalization(.none)
            }
            
            Section(header: Text("Order Quantity")) {
                TextField("Quantity", text: $quantity)
                    .keyboardType(.numberPad)
            }
        }
    }
}

Explanation of Keyboard Types Used

• Email Address: The .emailAddress keyboard is optimized for email entry, making it easier to access symbols commonly used in email addresses.
• Phone Number: The .phonePad keyboard displays a numeric keypad, ideal for entering phone numbers.
• URL: The .URL keyboard is tailored for URL entry, with convenience keys for symbols commonly used in web addresses.
• Quantity: The .numberPad keyboard presents a simple numeric pad, perfect for entering numeric values such as quantities.

Best Practices for Keyboard Types

1. Match the Keyboard to the Input Type: Always choose the keyboard layout that best matches the expected input to minimize user effort and potential input errors.
2. Disable Auto-Capitalization Where Necessary: For fields like email addresses and URLs, disable auto-capitalization to prevent the automatic capitalization of the first letter.
3. Use Appropriate Return Keys: You can also customize the return key on the keyboard to reflect the action the user will take, like “Search” or “Done”, which provides an additional clue about what happens next.

By carefully selecting the appropriate keyboard type for each text input field in your SwiftUI views, you can create a more streamlined, efficient, and user-friendly data entry experience.

The post Keyboard Types in SwiftUI 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.