DEV Community: Vaibhav Dwivedi

Spinners in iOS 18 - #30DaysOfSwift

Vaibhav Dwivedi — Tue, 05 Nov 2024 16:43:00 +0000

Day 29: Spinners – Loading Elements in SwiftUI

Let's learn to add loading spinners to your SwiftUI applications.

Spinners provide users with visual feedback while waiting for data to load, enhancing the overall user experience.

Step 1: Using SwiftUI's Built-in ActivityIndicator

SwiftUI provides a built-in ProgressView that you can use as a spinner. Here’s how to implement it in your app.

Basic Spinner Example

import SwiftUI

struct SpinnerExampleView: View {
    @State private var isLoading = false

    var body: some View {
        VStack {
            if isLoading {
                ProgressView("Loading...")
                    .progressViewStyle(CircularProgressViewStyle(tint: .blue)) // Customize color
                    .scaleEffect(1.5) // Adjust size
                    .padding()
            } else {
                Button("Load Data") {
                    loadData()
                }
                .padding()
            }
        }
        .navigationTitle("Spinner Example")
    }

    private func loadData() {
        isLoading = true

        // Simulating a network call
        DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
            isLoading = false // Stop loading after 2 seconds
        }
    }
}

Comments for Customization:

ProgressView("Loading..."): The spinner label that shows while loading. You can customize this text.
.progressViewStyle(CircularProgressViewStyle(tint: .blue)): Sets the color of the spinner.
.scaleEffect(1.5): Adjusts the size of the spinner for better visibility.

How are you going to implement Spinners? Let me know.

Happy coding!

Adding Animations with Lottie in iOS 18 - #30DaysOfSwift

Vaibhav Dwivedi — Mon, 04 Nov 2024 16:30:00 +0000

Day 28: Lottie Animations – Integrating Lottie Animations into Your UI 🎨

Lottie is a powerful library that allows you to use amazing animations that are lightweight and easy to implement.

Let’s get started!

Step 1: Setting Up Lottie

First, you need to add the Lottie framework to your project. You can do this using Swift Package Manager or by manually adding the Lottie files.

Using Swift Package Manager:
- Go to File > Add Packages.
- Search for Lottie or use the URL: https://github.com/airbnb/lottie-ios.
- Add the package to your project.

Step 2: Create a SwiftUI Wrapper for Lottie

Next, you’ll create a SwiftUI wrapper for the Lottie animation view. This allows you to easily use Lottie animations within your SwiftUI views.

import SwiftUI
import Lottie

struct LottieView: UIViewRepresentable {
    var filename: String

    func makeUIView(context: Context) -> UIView {
        let view = UIView(frame: .zero)

        let animationView = LottieAnimationView(name: filename)
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = .loop
        animationView.play()

        animationView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animationView)

        NSLayoutConstraint.activate([
            animationView.widthAnchor.constraint(equalTo: view.widthAnchor),
            animationView.heightAnchor.constraint(equalTo: view.heightAnchor)
        ])

        return view
    }

    func updateUIView(_ uiView: UIView, context: Context) {
        // Update the view if needed
    }
}

Step 3: Using Lottie Animations in Your View

Now that you have your LottieView set up, you can use it in your SwiftUI views.

import SwiftUI

struct AnimationExampleView: View {
    var body: some View {
        VStack {
            Text("Loading...")
                .font(.largeTitle)
                .padding()

            LottieView(filename: "loading_animation", loop: true)
                .frame(width: 200, height: 200)
        }
        .padding()
        .navigationTitle("Lottie Animation Example")
    }
}

Comments for Customization:

LottieView(filename: "loading_animation", loop: true): This instantiates the LottieView with a specific animation file. Replace "loading_animation" with the name of your Lottie animation file (without the .json extension).
frame(width: 200, height: 200): Sets the size of the animation view. Adjust these values to fit your design.

Step 4: Adding Your Animation Files

Make sure to add your Lottie animation files (in JSON format) to your Xcode project. Simply drag and drop the .json files into your project navigator.

That's it. Happy Coding!

Accessibility Features (a11y) in iOS 18 - #30DaysOfSwift

Vaibhav Dwivedi — Sun, 03 Nov 2024 16:30:00 +0000

Day 26: Making Apps Accessible for Users with Disabilities

Today, we’ll explore how to make your SwiftUI applications accessible to users with disabilities.

Ensuring accessibility means that all users can interact with your app effectively and enjoyably.

SwiftUI offers several accessibility modifiers to help improve the usability of your app for all users:

.accessibilityLabel: Provides a descriptive label for UI elements.
.accessibilityValue: Represents the current value of an interactive element.
.accessibilityHint: Offers hints about how to use a UI element.
.accessibilityAction: Allows you to define custom actions for accessibility.

Building an Accessible Form

Let’s create a simple form where users can input their name and age.

import SwiftUI

struct AccessibleFormView: View {
    @State private var name: String = ""
    @State private var age: String = ""

    var body: some View {
        Form {
            Section(header: Text("User Information")
                        .font(.headline)
                        .accessibilityLabel("User Information Section")) {
                TextField("Enter your name", text: $name)
                    .accessibilityLabel("Name")
                    .accessibilityValue(name.isEmpty ? "Empty" : name)
                    .accessibilityHint("Please enter your full name.")

                TextField("Enter your age", text: $age)
                    .keyboardType(.numberPad)
                    .accessibilityLabel("Age")
                    .accessibilityValue(age.isEmpty ? "Empty" : age)
                    .accessibilityHint("Please enter your age as a number.")
            }

            Button(action: submit) {
                Text("Submit")
                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }
            .accessibilityLabel("Submit Button")
            .accessibilityHint("Tap to submit your information.")
        }
        .padding()
        .navigationTitle("Accessibility Form")
    }

    private func submit() {
        // Handle form submission
        print("Name: \(name), Age: \(age)")
    }
}

After implementing accessibility features, it’s essential to test them with VoiceOver on your device.

Navigate through your app and ensure that all elements are announced correctly, and users can interact with them smoothly.

Best Practices for Accessibility

Use Dynamic Type for adjustable text sizes.
Ensure sufficient contrast between text and background colors.
Provide text labels for color-coded information.
Make interactive elements large enough for easy tapping.

Happy Coding!

SplitView in iOS 18 - #30DaysOfSwift

Vaibhav Dwivedi — Sat, 02 Nov 2024 16:32:00 +0000

Day 25: Manifesting a Split View Layout

Welcome to Day 25 of the #30DaysOfSwift series!

Split views allow you to create master-detail interfaces that are perfect for iPad, offering a way to present multiple panes of information side by side.

Step 1: Understanding the Split View Layout

In a split view, you typically have:

A sidebar (or master view) that displays a list of items.
A detail view that shows content based on the selection from the sidebar.

SwiftUI makes it easy to create this kind of layout using NavigationSplitView.

Step 2: Building the Split View

import SwiftUI

struct SplitViewExample: View {
    @State private var selectedItem: String? = "Item 1"
    let items = ["Item 1", "Item 2", "Item 3"]

    var body: some View {
        NavigationSplitView {
            // Sidebar View
            List(items, id: \.self, selection: $selectedItem) { item in
                Text(item)
                    .padding()
                    .frame(maxWidth: .infinity, alignment: .leading)
            }
            .navigationTitle("Sidebar")
        } detail: {
            // Detail View
            if let selectedItem = selectedItem {
                DetailView(selectedItem: selectedItem)
            } else {
                Text("Select an item")
                    .font(.largeTitle)
                    .foregroundColor(.gray)
            }
        }
    }
}

struct DetailView: View {
    let selectedItem: String

    var body: some View {
        VStack {
            Text("Details for \(selectedItem)")
                .font(.largeTitle)
                .padding()

            Spacer()
        }
        .navigationTitle("Detail")
    }
}

How does it works out for you? Share your thoughts below.

Happy Coding!

Forms and Input Handling in iOS 18 - #30DaysOfSwift

Vaibhav Dwivedi — Fri, 01 Nov 2024 16:31:00 +0000

Day 24: Designing Forms and Handling User Input Validation 📋

Let's go to the basics today with by creating forms and handling user input in SwiftUI.

Forms are a core part of many apps for collecting data from users.

Let’s jump in!

Code

SwiftUI provides the Form container, making it easy to create user-friendly input forms.

import SwiftUI

struct UserFormView: View {
    @State private var username = ""
    @State private var email = ""
    @State private var password = ""
    @State private var errorMessage = ""

    var body: some View {
        Form {
            // Username Input
            Section(header: Text("Username")) {
                TextField("Enter your username", text: $username)
                    .autocapitalization(.none)
                    .disableAutocorrection(true)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
            }

            // Email Input
            Section(header: Text("Email")) {
                TextField("Enter your email", text: $email)
                    .autocapitalization(.none)
                    .keyboardType(.emailAddress)
                    .disableAutocorrection(true)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
            }

            // Password Input
            Section(header: Text("Password")) {
                SecureField("Enter your password", text: $password)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
            }

            // Error Message
            if !errorMessage.isEmpty {
                Text(errorMessage)
                    .foregroundColor(.red)
            }

            // Submit Button
            Button(action: {
                validateForm()
            }) {
                Text("Submit")
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }
        }
        .navigationTitle("User Form")
    }

    // Step 3: Validate the form inputs
    func validateForm() {
        if username.isEmpty || email.isEmpty || password.isEmpty {
            errorMessage = "All fields are required!"
        } else if !email.contains("@") {
            errorMessage = "Invalid email address!"
        } else if password.count < 6 {
            errorMessage = "Password must be at least 6 characters!"
        } else {
            errorMessage = ""
            // Handle successful form submission (e.g., save data)
        }
    }
}

The full series is available on my profile and the components can also be found at shipios.app/components.

Happy Coding!

AVKit Integration in iOS 18 - #30DaysOfSwift

Vaibhav Dwivedi — Thu, 31 Oct 2024 16:38:00 +0000

Day 23: AVKit Integration – Playing Videos and Media in SwiftUI 🎬

Today, we’ll explore how to integrate AVKit into your SwiftUI project.

AVKit is the framework that lets you play videos and audio seamlessly with built-in controls.

Comments for Customization:

player.play(): This starts video playback.
cornerRadius(10): This rounds the corners of the video view, making it visually appealing.
frame(height: 300): The video player is confined to a specific height, ensuring a clean layout.

Here's the code for the implementation shown:

import AVKit
import SwiftUI

struct VideoPlayerView: View {
    private var player = AVPlayer(url: URL(string: "https://www.example.com/samplevideo.mp4")!)

    var body: some View {
        VStack {
            VideoPlayer(player: player)
                .frame(height: 300)
                .cornerRadius(10)

            HStack {
                Button("Play Video") {
                    player.play()
                }
                .font(.headline)
                .foregroundColor(.white)
                .padding()
                .background(Color.blue)
                .cornerRadius(8)

                Button("Pause Video") {
                    player.pause()
                }
                .font(.headline)
                .foregroundColor(.white)
                .padding()
                .background(Color.red)
                .cornerRadius(8)
            }
            .padding(.top, 20)
        }
        .padding()
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Welcome to Video Player")
                .font(.largeTitle)
                .padding()

            VideoPlayerView()
        }
    }
}

The full series is available on my profile and the components can also be found at shipios.app/components.

Happy Coding! 🎨

LazyHGrid Grid Layout in iOS 18 - #30DaysOfSwift

Vaibhav Dwivedi — Wed, 30 Oct 2024 16:43:00 +0000

Day 22: Exploring LazyHGrid

Cheers to the Day 22nd of the #30DaysOfSwift series!

Today, we’re diving into SwiftUI's LazyHGrid, an efficient way to display grid-like content in a horizontal scroll view.

Whether you’re building an image gallery, a product list, or a grid-based menu, LazyHGrid helps keep your UI smooth and responsive.

We’ll create a layout with 3 rows and display a series of numbered grid items.

Code Example

import SwiftUI

struct LazyHGridExample: View {
    // Define the grid layout with 3 rows and flexible spacing
    let rows = [GridItem(.fixed(100)), GridItem(.fixed(100)), GridItem(.fixed(100))]

    var body: some View {
        ScrollView(.horizontal) { // Enable horizontal scrolling
            LazyHGrid(rows: rows, spacing: 20) { // Create LazyHGrid with 3 rows
                ForEach(0..<30) { item in
                    // Create grid items with a rounded rectangle
                    RoundedRectangle(cornerRadius: 10)
                        .fill(Color.blue)
                        .frame(width: 100, height: 100) // Fixed size for each grid item
                        .overlay(
                            Text("\(item)")
                                .font(.largeTitle)
                                .foregroundColor(.white) // Display item number on top
                        )
                }
            }
            .padding() // Add padding around the grid
        }
    }
}

struct ContentView: View {
    var body: some View {
        LazyHGridExample() // Show LazyHGrid layout in the main view
    }
}

@main
struct LazyHGridApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView() // Main content view
        }
    }
}

The full series is available on my profile and the components can also be found at shipios.app/components.

Happy Coding! 🎨

Custom Toggle Button in iOS 18 - #30DaysOfSwift

Vaibhav Dwivedi — Wed, 30 Oct 2024 16:42:00 +0000

Day 21: Custom Toggle Button, anyone? ⚙️

Today, we’re going to create a custom toggle button in SwiftUI.

Implementing a Custom Toggle Button

In this example, we’ll create a visually appealing custom toggle button that switches between on and off states.

Code Example

Here’s how you can implement a custom toggle button in SwiftUI:

import SwiftUI

struct CustomToggle: View {
    @Binding var isOn: Bool // Binding variable for toggle state

        var body: some View {
            HStack {
                Text("Toggle Setting")
                    .foregroundColor(.primary) // Text color
                Spacer()
                // Custom square toggle design
                RoundedRectangle(cornerRadius: 5) // Rounded corners
                    .fill(isOn ? Color.blue : Color.gray) // Toggle color based on state
                    .frame(width: 60, height: 30) // Toggle size
                    .overlay(
                        Rectangle() // Square knob design
                            .fill(Color.white)
                            .frame(width: 26, height: 26)
                            .offset(x: isOn ? 15 : -15) // Move the square based on state
                            .animation(.easeInOut(duration: 0.2), value: isOn) // Animation for smooth transition
                    )
                    .onTapGesture {
                        isOn.toggle() // Toggle the state on tap
                    }
            }
            .padding() // Padding for the entire toggle
        }
    }

struct ContentView: View {
    @State private var isToggleOn = false // State to manage toggle status

    var body: some View {
        VStack {
            CustomToggle(isOn: $isToggleOn) // Custom toggle instance
            Text(isToggleOn ? "Setting is ON" : "Setting is OFF") // Display current state
                .padding()
        }
        .padding()
    }
}

@main
struct CustomToggleApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView() // Main content view
        }
    }
}

The full series is available on my profile and the components can also be found at shipios.app/components.

Happy Coding! 🎈

Pull-to-Refresh in iOS 18 - #30DaysOfSwift

Vaibhav Dwivedi — Tue, 29 Oct 2024 16:36:00 +0000

Day 20: Adding a Pull-to-Refresh Feature to Your Lists or Views 🔄

Let's implement the pull-to-refresh feature in SwiftUI, a common gesture that enhances user experience by allowing users to refresh content easily.

Implementing Pull-to-Refresh

To add a pull-to-refresh feature, we can use the .refreshable modifier available in SwiftUI. This modifier simplifies the implementation process and allows us to handle the refresh action with minimal code.

Code Example

import SwiftUI

struct ContentView: View {
    @State private var items = ["Item 1", "Item 2", "Item 3"] // Sample data
    @State private var isLoading = false // State to manage loading state

    var body: some View {
        NavigationView {
            List(items, id: \.self) { item in
                Text(item) // Display items in the list
            }
            .navigationTitle("Pull to Refresh")
            .refreshable {
                await loadData() // Call the async function to load data
            }
        }
    }

    func loadData() async {
        isLoading = true // Set loading state
        // Simulate network delay
        try? await Task.sleep(nanoseconds: 2 * 1_000_000_000) // Wait for 2 seconds
        // Update items with new data
        items.append("Item \(items.count + 1)") // Add a new item for demonstration
        isLoading = false // Reset loading state
    }
}

@main
struct PullToRefreshApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView() // Main content view
        }
    }
}

The full series is available on my profile and the components can also be found at shipios.app/components.

Happy Coding! 🎊

Progress Bars in iOS 18 - #30DaysOfSwift

Vaibhav Dwivedi — Mon, 28 Oct 2024 16:30:00 +0000

Day 19: Tell Your Users About The Progress ⏳

Welcome to Day 19 of the #30DaysOfSwift series!

Learn today about how to implement progress bar in your SwiftUI app.

Why Use Progress Indicators?

User Feedback: They inform users that a task is in progress, improving the overall user experience.
Task Transparency: Users can gauge how long they might need to wait, which can reduce frustration.
Modern UI: Adding progress indicators enhances the aesthetics and functionality of your app.

Example Use Case: Implementing a Progress Bar

In this example, we’ll create a simple progress bar that updates as a task progresses.

import SwiftUI

struct ContentView: View {
    @State private var progress = 0.0 // State variable to track progress

    var body: some View {
        VStack {
            ProgressView("Loading...", value: progress, total: 100) // Progress bar
                .progressViewStyle(LinearProgressViewStyle()) // Style of the progress bar
                .padding()

            Button("Start Loading") {
                startLoading() // Start the loading process
            }
            .padding()
        }
        .padding()
    }

    func startLoading() {
        progress = 0.0 // Reset progress
        for i in 1...100 {
            DispatchQueue.main.asyncAfter(deadline: .now() + Double(i) * 0.1) {
                progress = Double(i) // Update progress
            }
        }
    }
}

@main
struct ProgressIndicatorApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView() // Main content view
        }
    }
}

Now it’s your turn! Try adding progress indicators to your app to keep users informed during loading processes!

P.S. Check out full series at shipios.app/componenets

Happy Coding! 🎉

Dynamic Fonts in iOS 18 - #30DaysOfSwift

Vaibhav Dwivedi — Sun, 27 Oct 2024 16:42:00 +0000

Day 17: Dynamic Font Scaling for Accessibility 🔤

Today, let me share a simple tip on how to implement Dynamic Font Scaling in your SwiftUI app to enhance accessibility.

Why Use Dynamic Font Scaling?

Accessibility: Supports users with visual impairments by allowing them to adjust text sizes according to their preferences.
User Experience: Creates a more comfortable reading experience, improving usability for all users.
Consistency: Maintains a cohesive design as text scales across different devices and settings.

Code Example: Implementing Dynamic Font Scaling

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("Welcome to My App!")
                .font(.largeTitle) // Large title using dynamic type
                .padding()

            Text("This text will scale based on user settings.")
                .font(.body) // Body text using dynamic type
                .padding()

            Text("Adjust the text size in Settings > Accessibility > Display & Text Size.")
                .font(.caption) // Caption text using dynamic type
                .padding()
        }
        .padding()
        .multilineTextAlignment(.center) // Center align the text for a better layout
    }
}

struct DynamicFontScalingApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView() // Main content view
        }
    }
}

By supporting users’ preferences for text size, you create a more inclusive environment for all.

Happy Coding!

P.S. The full series is available on my profile and the components can also be found at shipios.app/components.

Building Alerts in iOS 18 - #30DaysOfSwift

Vaibhav Dwivedi — Sat, 26 Oct 2024 16:30:00 +0000

Day 16: Alerts – Designing Native Alerts in SwiftUI 🚨

Today, we’ll focus on using the native alert options available in SwiftUI.

SwiftUI provides a straightforward way to display alerts like this:

Why Use Native Alerts?

Simplicity: SwiftUI’s native alerts are easy to implement and require minimal code.
System Integration: They provide a familiar look and feel, ensuring consistency across iOS applications.
Accessibility: Native alerts come with built-in accessibility support, making your app more user-friendly.

Code Example: Creating a Native Alert

import SwiftUI

struct ContentView: View {
    @State private var showAlert = false // State variable to control alert visibility

    var body: some View {
        VStack {
            Button("Show Alert") {
                showAlert.toggle() // Toggle alert visibility
            }
            .alert(isPresented: $showAlert) { // Present the alert when showAlert is true
                Alert(
                    title: Text("Alert Title"), // Title of the alert
                    message: Text("This is an alert message."), // Message to display
                    primaryButton: .default(Text("Confirm")) {
                        // Action to perform on Confirm
                        print("Confirmed!")
                    },
                    secondaryButton: .cancel() // Action to perform on Cancel
                )
            }
        }
        .padding()
    }
}

Try implementing native alerts in your app to manage user interactions effectively!

The full series is available on my profile and the components can also be found at shipios.app/components.

Happy Coding! 🎉