Clip clickable parts of image as NavigationLink (SwiftUI)

Question

When implementing an image in a NavigationLink closure and clipping that image, the unclipped image is clickable. Because of the clipping, the images are overlapping each other (see attached screenshots). Overlapping Images Clipped Images The first screenshot shows the original size. When clipped (second screenshot) clicking on the red hatched area (shown in the first screenshot), the second NavigationLink is triggered, not the first one.

The following code produces the problem:

var body: some View {
        NavigationView{
            ScrollView{
                VStack (spacing: 20) {
                    NavigationLink(destination: ImageGalleryView1()) {
                        Image(uiImage: downsample(imageAt: URL(string: "imageURL")!, to: CGSize(width: 500, height: 500), scale: 1))
                            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 200, alignment: .center)
                            .clipped()
                    }
                    NavigationLink(destination: ImageGalleryView2()) {
                        Image(uiImage: downsample(imageAt: URL(string: "imageURL")!, to: CGSize(width: 500, height: 500), scale: 1))
                            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 200, alignment: .center)
                            .clipped()
                    }
                    NavigationLink(destination: ImageGalleryView3()) {
                        Image(uiImage: downsample(imageAt: URL(string: "imageURL")!, to: CGSize(width: 500, height: 500), scale: 1))
                            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 200, alignment: .center)
                            .clipped()
                    }
               }
          }
}

I tried to clip the Image, tried to clip the NavigationLink, played around with the .frame()-properties. But with no success.

My aim is to create a VStack with three images where each of them is a NavigationLink. The clipped parts shouldn't be clickable. I want to avoid buttons or shapes in this case, if possible.

score 4 · Answer 1 · answered Apr 21 '20 at 00:01

4

Just add .contentShape(Rectangle()) directly before .clipped(). That solved this issue for me.

answered Apr 21 '20 at 00:01

dragonfire

407
7
16

You literally saved my life! Works flawlessly! – Repose Apr 30 '20 at 16:59

score 1 · Accepted Answer · answered Oct 26 '19 at 17:02

1

I don't know your exact implemetation of downsample(imageAt:), but the implementation below gets rid of the overlapping of images:

NavigationLink(destination: ImageGalleryView1()) {
                    Image("sample-image")
                    .resizable(resizingMode: .tile)
                    .frame(minWidth: 0,
                           maxWidth: .infinity,
                           minHeight: 0,
                           maxHeight: 200,
                           alignment: .center)
                }

answered Oct 26 '19 at 17:02

LuLuGaGa

13,089
6
49
57

1

As an additional question: do you (or anyone else) know, why the 'clipped()'-method doesn't work? Why are the invisible parts of the images still clickable? – marco Oct 27 '19 at 13:24
When you look in the docs for clipped() you will find "Use the clipped() modifier to hide any content that extends beyond these edges". I understand from that the function only affects the visibility of the clipped parts. If you inspect your orignal code in view debugger you will notice that the images are drawn outside the bounds. – LuLuGaGa Oct 27 '19 at 14:11
Makes sense. Thanks. – marco Oct 27 '19 at 15:52

Clip clickable parts of image as NavigationLink (SwiftUI)

2 Answers2