UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

SOLVED: Update Styling Of "URL" DataType AKA Gif Images When Tapped

Forums > SwiftUI

I'm pulling down a list of Gif images from Firebase and displaying them using a WebView. I loop through my Set<URL> of Gif images and throw them into the WebView sitting inside a Scroller. Here's the function:

    private func gifGallery() -> some View {

        ScrollView(.horizontal, showsIndicators: false) {

            //LazyHGrid(rows: [GridItem(.flexible())], spacing: 4) {
            HStack(spacing: 6) {

                ForEach(Array(gifImages.gifListUrls)) { gifImageUrl in
                    Button(action: {
//                        Button Action

                    }){
                        WebView(url: gifImageUrl)
                    }
                }
                .frame(width: 300, height: 165)
            }
        }
    }

I'm stuck with the "Button" functionality I'd like to incoporate. While each Gif is now tappable as a button, When the user taps an image, I'd like to update that image's border color and background color to be green or something, indicating it has been selected.

Given that these images are URL data types, I'm having trouble comparing them and thus updating the border and background coloring. If they were strings, it would be cake.

How can I get them to add border coloring when tapped?

3      

The URL type has an == operator to compare two URLs. What trouble are you having comparing your two URLs?

3      

I've made a bit of progress now. Here's the updated function. The problem now is clicking one item sets the border across each image. I think I'm missing something related to the IDs of each item in the loop?

The ternary updates on the bordercolor do work, but it just gets applied across all images.

    private func gifGallery() -> some View {

        ScrollView(.horizontal, showsIndicators: false) {

            //LazyHGrid(rows: [GridItem(.flexible())], spacing: 4) {
            HStack(spacing: 6) {

                ForEach(Array(gifImages.gifListUrls), id: \.self) { gifImageUrl in
                    Button(action: {
//                        Button Action
                        selectedGifName = gifImageUrl
                        chosenImage = selectedGifName == gifImageUrl
                    }){
                        WebView(url: gifImageUrl)
                            .border(Color(#colorLiteral(red: 0.3411764801, green: 0.6235294342, blue: 0.1686274558, alpha: 1)), width: chosenImage ? 4 : 0)
                    }
                }
                .frame(width: 300, height: 165)
            }
        }
    }

Result

3      

Right, because chosenImage isn't associated with a particular gifImageUrl so once it is set it will apply to all of them.

I would put the selectedGifName == gifImageUrl comparison as the conditional instead off using chosenImage. That way the border would only apply to that one image.

3      

Didn't realize you can do that!

Thank you!

3      

Hacking with Swift is sponsored by Superwall

SPONSORED Superwall lets you build & test paywalls without shipping updates. Run experiments, offer sales, segment users, update locked features and more at the click of button. Best part? It's FREE for up to 250 conversions / mo and the Superwall team builds out 100% custom paywalls – free of charge.

Learn More

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.