How to Make Image Clickable in iOS SwiftUI

In this blog post, we’ll explore a critical aspect of creating engaging and interactive user interfaces with SwiftUI – making images clickable. From navigating to new views, triggering actions to simply enhancing user interaction, clickable images are a popular design feature in many modern applications.

Basics: Add a Tap Gesture to an Image

In SwiftUI, you can make any image clickable by adding a tap gesture to it. Here’s a basic example:

Image("myImage")
    .resizable()
    .frame(width: 100, height: 100)
    .onTapGesture {
        print("Image tapped!")
    }

In this code snippet, onTapGesture is used to add a tap gesture recognizer to the image. When the image is tapped, “Image tapped!” will be printed in the console.

Add Feedback on Tap

To enhance user experience, you can provide feedback when an image is tapped. For example, you can change the image or modify its appearance when it’s tapped:

@State private var isTapped = false

var body: some View {
    Image(isTapped ? "tappedImage" : "myImage")
        .resizable()
        .frame(width: 100, height: 100)
        .onTapGesture {
            isTapped.toggle()
        }
}

In this code, isTapped is a state variable that tracks whether the image has been tapped. When the image is tapped, isTapped is toggled, and the image changes from “myImage” to “tappedImage”.

Making images clickable in SwiftUI is a straightforward yet effective way to enhance interactivity in your apps. Whether it’s for navigation, triggering actions, or just for improving user engagement, clickable images can significantly improve your app’s usability and user experience.

SwiftUI’s declarative nature makes creating interactive images a breeze, so try experimenting with clickable images in your next SwiftUI project!