Loading...

How to apply mirroring to any SwiftUI view?

question swiftui swift
Ram Patra Published on September 7, 2024

You can apply mirroring to a SwiftUI view by using the scaleEffect(x:y:anchor:) modifier to flip the view horizontally or vertically. Specifically, you can set the x or y scale to -1.0 to mirror the view along that axis.

Example of Horizontal Mirroring:

To mirror a view horizontally, you can set the x scale to -1.0.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Original View")
                .font(.title)
                .padding()
            
            Image(systemName: "arrow.right")
                .resizable()
                .frame(width: 100, height: 100)
                .padding()

            Text("Mirrored View")
                .font(.title)
                .padding()

            Image(systemName: "arrow.right")
                .resizable()
                .frame(width: 100, height: 100)
                .padding()
                .scaleEffect(x: -1, y: 1) // Horizontally mirrored
        }
    }
}

@main
struct MirroredApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Example of Vertical Mirroring:

Similarly, if you want to mirror the view vertically, you can set the y scale to -1.0.

.scaleEffect(x: 1, y: -1) // Vertically mirrored

Example of both Vertical and Horizontal Mirroring:

If you want to apply both horizontal and vertical mirroring (flip both axes), you can set both x and y scales to -1.0.

.scaleEffect(x: -1, y: -1) // Both horizontally and vertically mirrored

Summary:

  • Horizontal Mirroring: Use .scaleEffect(x: -1, y: 1)
  • Vertical Mirroring: Use .scaleEffect(x: 1, y: -1)
  • Both Axes Mirroring: Use .scaleEffect(x: -1, y: -1)
  • No Mirroring: Use .scaleEffect(x: 1, y: 1)

You can apply these transformations to any view, such as text, images, buttons, or even custom shapes.

Presentify

Take your presentation to the next level.

FaceScreen

Put your face and name on your screen.

ToDoBar

Your to-dos on your menu bar.

Ram Patra Published on September 7, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

question swiftui swift October 30, 2023 How to convert Color type to hex and vice-versa while retaining alpha information?

The below should work both on macOS and iOS with one minor change. That is, use UIColor instead of NSColor if you’re planning to use it for iOS.

question swiftui March 29, 2024 How to group different style modifiers and reuse them across multiple SwiftUI views?

In SwiftUI, you can create custom view modifiers to encapsulate common styling configurations and reuse them across different views. Here’s how you can create and reuse a custom view modifier:

question swiftui swift September 13, 2024 How to add a character limit to a TextField in SwiftUI?

To add a character length limit to a TextField in SwiftUI, you can use a combination of Swift’s .onChange, .onPasteCommand modifier, and string manipulation to limit the number of characters the user can enter.