How to make Image Clickable in swiftUI?

Question

import SwiftUI

struct ContentView: View {

@State private var isActive : Bool = false

var body: some View {
    VStack {
        Image("home-img")
        .resizable()
        .aspectRatio(contentMode:.fill)
        .edgesIgnoringSafeArea(.top)
        .edgesIgnoringSafeArea(.bottom)
        .overlay(Image("round")
                 .resizable()
                 .frame(width: 350, height: 350 , alignment: .center)
            .overlay(Image("girl-img")
                .resizable()
                .frame(width: 150, height: 150, alignment: .center)
            )
            .overlay(Image("video")
                .resizable()
                .frame(width: 100, height: 100)
                .offset(y: -200)
                .padding(.bottom, -70)
            ).onTapGesture(count: 1) {
                NavigationView {
                    NavigationLink(destination: SelecteImageView(), isActive: self.$isActive) {
                        Text("")
                    }
                }
            }
        }
      }
    }

What I want to do is when I tap on Image("Video") it should redirect me to a new screen using NavigationView. Normally, with button, it redirects to a new screen, but here the problem is that the image is in overlay. Thank you in advance.

FRIDDAY · Answer 1 · 2020-01-01T05:14:28.943

You need to put your Image Views inside the NavigationLink label. The navigationLink acts like Button and it gets the default button style with blue color. So change the default button style to plain using the bellow modifier:

import SwiftUI

struct ContentView: View {

@State private var isActive : Bool = false

var body: some View {
    NavigationView {
        NavigationLink(destination: SelecteImageView(), isActive: self.$isActive) {
            VStack {
                Image("home-img") //.renderingMode(.original)
                    .resizable()
                    .aspectRatio(contentMode:.fill)
                    .edgesIgnoringSafeArea(.top)
                    .edgesIgnoringSafeArea(.bottom)
                    .clipped() //Here shows your Image only inside the frame
                    .overlay(Image("round") //.renderingMode(.original)
                        .resizable()
                        .frame(width: 350, height: 350 , alignment: .center))
                    .overlay(Image("girl-img") //.renderingMode(.original)
                        .resizable()
                        .frame(width: 150, height: 150, alignment: .center)
                )
                    .overlay(Image("video") //.renderingMode(.original)
                        .resizable()
                        .frame(width: 100, height: 100)
                        .offset(y: -200)
                        .padding(.bottom, -70)
                )
            }
        }.buttonStyle(PlainButtonStyle())
    }
  }
}

Or, you can give your Image views .renderingMode(.original) modifier if you are only using Images, and remove .buttonStyle(PlainButtonStyle()) from above code.

It is working for me but it is working only one time redirection.when I come back home screen and again want to go in redirection screen it didn't work. @FRIDDAY — Sohan Conceptioni, Dec 30 '19 at 07:43
@SohanConceptioni It makes the whole screen clickable because you gave your image `.resizable()` and `aspectRatio(contentMode:.fill)` modifiers. It filled your Image to the given frame but the remain is still there. you need to remove it using `.clipped()`. I update the answer. — FRIDDAY, Jan 01 '20 at 05:12
@SohanConceptioni About your first comment, I don't have this problem on my iPhone. If you still have this problem, its seems like a bug and it is discussing here: https://stackoverflow.com/questions/59279176/navigationlink-works-only-for-once — FRIDDAY, Jan 01 '20 at 05:18
Additionally, If you wanna be able to click on a specific area you need to rewrite your code and use `ZStack` instead of `.overlay`. In this code the whole frame of your `VStack` is clickable. — FRIDDAY, Jan 01 '20 at 05:26

Govind Rakholiya · Answer 2 · 2019-12-27T12:19:46.900

0

Please add tap gesture over here

    struct Contentview: View {
    @State var isNavigate :Bool = false
    var body: some View {
        NavigationView{
            VStack{
                NavigationLink(destination: LoginView()) {
                    Image("Birthday")
                    .resizable()
                    .aspectRatio(contentMode:.fill)
                    .edgesIgnoringSafeArea(.top)
                    .edgesIgnoringSafeArea(.bottom)
                        .frame(width: 200, height: 200 , alignment: .center)
                    .overlay(Image("round")
                             .resizable()
                             .frame(width: 350, height: 350 , alignment: .center)
                        )
                        .overlay(Image("girl-img")
                            .resizable()
                            .frame(width: 150, height: 150, alignment: .center)
                        )
                }
            }
        }
    }
}

edited Dec 27 '19 at 12:19

answered Dec 27 '19 at 11:29

Govind Rakholiya

427
6
24

I edit my code. I put navigationview but it didn't work. – Sohan Conceptioni Dec 27 '19 at 11:53
@SohanConceptioni i just edited my answer please check it. and let me know if you face any issue – Govind Rakholiya Dec 27 '19 at 12:20
@SohanConceptioni have you checked it? – Govind Rakholiya Dec 27 '19 at 12:32
but where i have to put tapgesture? – Sohan Conceptioni Dec 27 '19 at 12:50
You don't need to add tap gesture just add navigation link in vstack – Govind Rakholiya Dec 27 '19 at 12:57
then i am getting blank screen with blue color as home screen – Sohan Conceptioni Dec 27 '19 at 13:03

How to make Image Clickable in swiftUI?

2 Answers2