CODEWITHSUNDEEP
iosswiftswiftui
Sohan Conceptioni
Sohan Conceptioni

Reputation: 29

How to make Image Clickable in swiftUI?

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.

Upvotes: 2

Views: 8675

Answers (2)

FRIDDAY
FRIDDAY

Reputation: 4159

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.

Upvotes: 2

Govind Rakholiya
Govind Rakholiya

Reputation: 467

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)
                        )
                }
            }
        }
    }
}

Upvotes: 0

Related Questions