Mastering SwiftUI Conditional View For Better UI Design

How often do you need your app's design to adapt seamlessly to a user's actions or preferences?

In SwiftUI, conditional views make this incredibly intuitive. Have you ever wondered how to tailor your app's UI based on a boolean condition or given condition? You can create responsive layouts effortlessly by combining the power of view modifiers and conditional view modifiers.

This blog takes you through practical examples, from basic implementations to advanced techniques like extensions and enums.

Ready to explore how to transform your views dynamically and make your SwiftUI apps truly interactive?

Let’s dive in!

Understanding Conditional Views in SwiftUI

In SwiftUI, conditional views are created when you display different content based on certain logic. For instance, you might want to conditionally apply modifiers or show two different views based on a boolean condition. The if statement, ternary operator, and view modifiers are core tools in this process.

Why Conditional Views Matter

• Performance: SwiftUI optimizes rendering by only recalculating the view for the active condition.

• Dynamic UI: Simplifies creating user-specific layouts.

• Code Readability: Keeps your struct ContentView clean and modular.

A Basic Example of Conditional Views

Let’s start with a basic example of an if statement in SwiftUI:

1struct ContentView: View {
2    @State private var isBlue = true
3
4    var body: some View {
5        if isBlue {
6            Text("The background is blue!")
7                .padding()
8                .background(Color.blue)
9        } else {
10            Text("The background is not blue!")
11                .padding()
12                .background(Color.gray)
13        }
14    }
15}

​

Analysis of the Code

In the above code, the @State variable isBlue controls the boolean condition, toggling between two different views. The return statements are implicitly managed, ensuring seamless rendering without extra overhead.

Exploring Conditional Modifiers

Conditional modifiers allow you to conditionally apply styling or attributes without entirely swapping the view. Here’s an example that uses the ternary operator:

1struct ContentView: View {
2    @State private var isHighlighted = false
3
4    var body: some View {
5        Text("SwiftUI Conditional View")
6            .padding()
7            .background(isHighlighted ? Color.yellow : Color.clear)
8            .cornerRadius(10)
9    }
10}

​

Key Takeaways

• Conditional modifiers are lightweight and efficient for styling without changing the underlying type.

• The function declares the body with a single output, simplifying return anyview scenarios.

Leveraging Conditional View Modifiers with Extensions

Using an extension view to encapsulate conditional view modifier logic can improve readability and reusability:

1extension View {
2    func applyHighlight(_ condition: Bool) -> some View {
3        self.modifier(HighlightModifier(condition: condition))
4    }
5}
6
7struct HighlightModifier: ViewModifier {
8    let condition: Bool
9
10    func body(content: Content) -> some View {
11        content
12            .padding()
13            .background(condition ? Color.green : Color.clear)
14            .cornerRadius(8)
15    }
16}

​

Example Usage

1struct ContentView: View {
2    var body: some View {
3        Text("Hello, World!")
4            .applyHighlight(true)
5    }
6}

​

Here, extension methods encapsulate reusable styling logic, making your struct ContentView more manageable.

Conditional View Switching with Enum-Based Logic

SwiftUI’s result view and opaque return type simplify conditional views when you need to render different modifiers. For example:

1struct TestView: View {
2    enum ViewType {
3        case success, failure
4    }
5
6    let type: ViewType
7
8    var body: some View {
9        Group {
10            switch type {
11            case .success:
12                Text("Operation Successful").padding().background(Color.green)
13            case .failure:
14                Text("Operation Failed").padding().background(Color.red)
15            }
16        }
17    }
18}

​

This pattern ensures type safety and leverages SwiftUI’s functionality to handle different views efficiently.

Advanced Usage: Structuring with Extensions

By combining extension view and reusable components, developers can create modular views:

1extension View {
2    func applyModifiers(condition: Bool) -> some View {
3        self
4            .padding(condition ? 20 : 10)
5            .background(condition ? Color.blue : Color.gray)
6            .cornerRadius(condition ? 15 : 5)
7    }
8}
9
10struct ContentView: View {
11    var body: some View {
12        VStack {
13            Text("Dynamic Styling")
14                .applyModifiers(condition: true)
15
16            Text("Static Styling")
17                .padding(10)
18                .background(Color.gray)
19        }
20    }
21}

​

Performance Considerations with Conditional Views

When working with SwiftUI Conditional View, it's important to evaluate the logic for efficiency:

• Minimize State Changes: Overuse of state updates can degrade performance.

• Optimize Modifiers: Combine multiple modifiers where possible to reduce layout recalculations.

• Conditionally Apply Modifiers: Use extensions or enums to transform complex conditions into readable methods.

Final Thoughts!

SwiftUI's conditional views provide a powerful framework for building dynamic, view-based applications. By understanding the structure, leveraging conditional modifiers, and using extensions, developers can efficiently create adaptable UIs that enhance the user experience.

Master the art of SwiftUI Conditional View rendering, and let your designs adapt to every given condition and boolean input. For additional learning, explore how view modifiers streamline logic and enrich your world of SwiftUI development.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.