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 March 6, 2023 How to render the icon on a menu bar as a template in SwiftUI?

Setting your app’s icon on the menu bar as a template makes it to adapt to light and dark modes automatically without you doing anything. To do this, you have to use this constructor of MenuBarExtra class.

question swiftui swift August 31, 2024 @Published in SwiftUI

In SwiftUI, the @Published property wrapper is used in combination with the ObservableObject protocol to automatically announce changes to properties of a class. This allows SwiftUI views that depend on these properties to update automatically when the data changes.

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.

Like my work?

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