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.

Take your presentation to the next level.

Put your face and name on your screen.

Your to-dos on your menu bar.

Fill forms using your right-click menu.

Ram Patra Published on September 7, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

question swiftui swift September 30, 2023 How to open the Settings view in a SwiftUI app on macOS 14.0 (Sonoma)?

In macOS 14.0 (Sonoma), Apple removed support for NSApp.sendAction to open the Settings view in your SwiftUI app. You now have to use SettingsLink like below:

question swiftui swift August 31, 2024 @StateObject vs @ObservedObject in SwiftUI

In SwiftUI, both @StateObject and @ObservedObject are property wrappers used to manage state in your views, specifically when working with objects that conform to the ObservableObject protocol. However, they serve slightly different purposes and have different use cases. Here’s a breakdown:

question swiftui macOS January 26, 2024 How to hide the title bar in a SwiftUI macOS app?

Let’s say you have a view named ContentView and your main App file looks like this:

Like my work?

Please, feel free to reach out. I would be more than happy to chat.