Custom Camera Button

[MannuOnAir]

Hi guys, I’m Alessio.
I was trying to develop an app which includes the element represented in the Image file.

My aim is to create a single placeholder view and then include 6 of it in another view.

I had some problems finding out how to do this and I
have some doubts on how to handle where the image will be stored. I’d like to save them in a Firestore DataBase

[Chris_Parker]

Hi Alessio,

Welcome to the community.

Are you coding this in SwiftUI or are you using UIKit?

Has the image been added to the Assets folder?

Cheers
Chris P

[MannuOnAir]

Hi Chris, I’m coding in swiftUI but if there’s a way in UIKit it’s fine. The image will be taken by the camera on the iPhone/iPad

[Chris_Parker]

@MannuOnAir

What code do you have so far for that particular screen where you are using that image?

[MannuOnAir]

Hi have no code, I’m trying to figure out how to get a single view with a button that behaves in the way I described before.

[Chris_Parker]

OK so the screen you posted above is what you want to create. I thought it was something you had already coded and you were using a placeholder image in each case.

Let me think about the best way to approach it.

[MannuOnAir]

Yes, it’s what I want to create. Did you come up with some ideas?

[Chris_Parker]

@MannuOnAir

Hi Alessio,

My apologies, I completely forgot to get back to you on this exercise. Too many things on my plate at the moment.

I now have a printed copy of the example screenshot so will try my best to come up with some suggestions in the next few days.

[MannuOnAir]

Thanks, looking forward your reply.

[Chris_Parker]

@MannuOnAir

Hi Alessio

I’ve been having a look at your layout you want to achieve. This is my version of the image but it does not include a TabView as is the case in the sample image.

I created a PlaceholderView as follows:

struct PlaceholderView: View {
    
    var body: some View {
        ZStack {
            Color.secondary.opacity(0.5)
            Image(systemName: "photo.fill")
                .resizable()
                .foregroundColor(Color.secondary.opacity(0.5))
                .frame(width: 40, height: 40)
        }
        .frame(width: 120, height: 120)
    }
}

and in ContentView I have the 6 instances of that PlaceholderView arranged like the sample image:

struct ContentView: View {

    var body: some View {

        VStack(spacing: 20) {
            PlaceholderView()

            HStack {

                PlaceholderView()
                Spacer()

                PlaceholderView()
            }

            Spacer()

            HStack {
                PlaceholderView()

                Spacer()

                PlaceholderView()
            }

            PlaceholderView()

        }
        .padding(.horizontal)
    }
}

So it looks like this:

I assume that you want to be able to tap on the placeholder image and select an image either from the camera for from the Photo Library. From then I assume that when you then tap on that image that now occupies that location, you want to be able to navigate to another screen to view more details about that image. Is that something that you are needing to do?

In order to do that, each instance of the placeholder needs to have some underlying method of being able to identify itself so that when you select an image to take the place of the placeholder image, some data is stored to indicate that an image has been selected. The next time you tap on that image, you will navigate to a different View to either simply view that image or add further details about that image.

Does that make sense?

Ideally you would define a struct that describes each instance and create an array of 6 entries corresponding to each location. The problem is that the layout does not lend itself to being to identify each position to the array because they are located in odd positions. If you had a vertical list of images like this:

then the process would be easy.