Create a Picker on an image

[sefkandev (Sefkan)]

Hello everyone,

I want to create a picker on an image, for example:

I would like us to click on a card then change to another card directly in my app (We choose the card we want). I can't find any tutorial for that, only to go to the gallery App and that's not what I want.

Thank you for helping. (Sorry for my English)

[alanaudi]

Your description "click one (the wanted card) and change (the focus box) to another one (the wanted card)" seems like a wheel/scrolling picker.
Maybe I'm wrong

Here is an example code of button picker, I think you can put your images to background.
And there are some example on YouTube about "XXX Picker", such as "wheel picker effect", maybe those will help you.

In this simple example, ScrollView and LazyHStack are used to create horizontal scrolling effect, and the button action to choose what you want.

Hope this will help you : )

struct ContentView: View {
    @State var current: String = "♠️K"
    var body: some View {
        ScrollViewReader { scrollViewProxy in
            HStack {
                ScrollView(.horizontal, showsIndicators: false) {
                    LazyHStack {
                        HStack {
                            CardView(state: $current, text: "♠️ A")
                            CardView(state: $current, text: "♥️ K")
                            CardView(state: $current, text: "♠️ K")
                            CardView(state: $current, text: "♦️ A")
                            CardView(state: $current, text: "♠️ 1")
                            CardView(state: $current, text: "♠️ 2")
                            CardView(state: $current, text: "♠️ 3")
                            CardView(state: $current, text: "♠️ 4")
                        }
                    }
                    .padding(.horizontal, 5)
                }
            }
            .padding(.horizontal)
        }
    }
}



struct CardView: View {
    @Binding var state: String
    let text: String

    var body: some View {
        Button(action: {
            withAnimation {
                state = text
            }
        }, label: {
            Text(text)
                .frame(width: 100, height: 150)
                .foregroundColor(.black)
                .background(
                    ZStack{
                        if text == state {
                            RoundedRectangle(cornerRadius: 4).fill(Color.yellow)
                        } else {
                            RoundedRectangle(cornerRadius: 4).fill(Color.primary)
                        }
                    }
                )
        })
        .buttonStyle(PlainButtonStyle())
    }
}