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.

KeyScreen

Show keypresses on your screen.

ToDoBar

Your to-dos on your menu bar.

SimpleFill

Fill forms using your right-click menu.

IconSim

Preview your Mac app icons.

Ram Patra Published on September 7, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

question swiftui swift September 2, 2024 Combine in SwiftUI and how you can rewrite the same code using async await

Combine is Apple’s declarative framework for handling asynchronous events and data streams in Swift. Introduced in SwiftUI and iOS 13, Combine leverages reactive programming principles, allowing developers to process values over time and manage complex asynchronous workflows with clarity and efficiency.

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 macos September 4, 2024 How to execute some code before app termination in a macOS app using SwiftUI?

To run some code before app termination in a macOS app using SwiftUI, the correct approach would involve placing the termination logic within a view, such as the ContentView. Here’s how you can do it:

Like my work?

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