HomeiOS Developmentios - SwiftUI Click on picture in grid and show adjoining body...

ios – SwiftUI Click on picture in grid and show adjoining body (First App for Autistic Son)


So that is litterally my first try at utilizing swift and it’s a studying expertise for myself. I hope to ultimately use this quite simple app for my autistic son. The purpose is to have a protracted checklist of objects he lights to pick out from on the left hand facet of his iPad. If he clicks on an merchandise, I would like it to seem on the precise hand facet and to let him click on on the picture and for a sound taking part in naming it.

Up to now that is what I’ve

App Preview Right now

I want to determine how one can flip the motion of the button on the choose into displaying it on the precise.

Secondly, white I’ve found out how one can playsound from the grid, I want to be certain it may be performed from the merchandise displayed on the precise.

Right here is the code for the grid, and the precise hand facet is only a placeholder picture in the intervening time.

Grid Code

If there’s a useful resource that I shoulfd have a look at that I am lacking, please simply level me in that course. I respect and suggestions/assist. Thanks a lot.

I’m so new I do not even know how one can describe my drawback effectively, not to mention determine potential options but.

import SwiftUI
import AVKit

class SoundManager{
    static let occasion = SoundManager()
    var participant: AVAudioPlayer?
    
    enum SoundOption: String {
        case cheetah
        case canine
        case elephant
        case fox
        case frog
        case goldfish
        case gorilla
        case hippo
        case panda
        case parrot
        case pollarbear
        case tiger
        case wolf
        case zebra
    }
    
    func playsound(sound: SoundOption){
        guard let url = Bundle.fundamental.url(forResource: sound.rawValue, withExtension: ".m4a") else {return}
       
        do {
            participant = attempt AVAudioPlayer(contentsOf: url)
            participant?.play()
        } catch let error {
            print("Error taking part in sound. (error.localizedDescription)")
        }
    }
}


struct SoundBootcamp: View {
    
    var physique: some View {
        VStack{
            Textual content("First Check Utility")
                .lineLimit(1)
                .padding(10)
                .font(.system(dimension: 500))
                .minimumScaleFactor(0.01)
            HStack{
                ScrollView{
                    VStack{
                        Textual content("Plane")
                            .font(.system(dimension: 48))
                            .minimumScaleFactor(0.01)
                        Grid{
                            GridRow{
                                Button(motion: {SoundManager.occasion.playsound(sound: .cheetah)}, label: {
                                    Picture("airliner")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                                Button(motion: {SoundManager.occasion.playsound(sound: .cheetah)}, label: {
                                    Picture("biplane")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                                Button(motion: {SoundManager.occasion.playsound(sound: .cheetah)}, label: {
                                    Picture("cargoplane")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                                Button(motion: {SoundManager.occasion.playsound(sound: .cheetah)}, label: {
                                    Picture("gliderplane")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                                
                            }
                            GridRow{
                                Button(motion: {SoundManager.occasion.playsound(sound: .cheetah)}, label: {
                                    Picture("hangglider")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                                Button(motion: {SoundManager.occasion.playsound(sound: .cheetah)}, label: {
                                    Picture("helicopter")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                                Button(motion: {SoundManager.occasion.playsound(sound: .cheetah)}, label: {
                                    Picture("hotairballoon")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                                Button(motion: {SoundManager.occasion.playsound(sound: .cheetah)}, label: {
                                    Picture("rocket")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                                
                            }
                            GridRow{
                                Button(motion: {SoundManager.occasion.playsound(sound: .cheetah)}, label: {
                                    Picture("seaplane")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                                Button(motion: {SoundManager.occasion.playsound(sound: .cheetah)}, label: {
                                    Picture("spaceshuttle")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                                Button(motion: {SoundManager.occasion.playsound(sound: .cheetah)}, label: {
                                    Picture("zeppelin")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                                
                            }
                        }
                        .padding()
                        Textual content("Instance Class")
                            .font(.system(dimension: 48))
                            .minimumScaleFactor(0.01)
                        Grid{
                            GridRow{
                                Button(motion: {SoundManager.occasion.playsound(sound: .cheetah)}, label: {
                                    Picture("cheetah")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                                Button(motion: {SoundManager.occasion.playsound(sound: .canine)}, label: {
                                    Picture("canine")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                                Button(motion: {SoundManager.occasion.playsound(sound: .elephant)}, label: {
                                    Picture("elephant")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                                Button(motion: {SoundManager.occasion.playsound(sound: .fox)}, label: {
                                    Picture("fox")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                            }
                            GridRow{
                                Button(motion: {SoundManager.occasion.playsound(sound: .frog)}, label: {
                                    Picture("frog")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                                Button(motion: {SoundManager.occasion.playsound(sound: .goldfish)}, label: {
                                    Picture("goldfish")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                                Button(motion: {SoundManager.occasion.playsound(sound: .gorilla)}, label: {
                                    Picture("gorilla")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                                Button(motion: {SoundManager.occasion.playsound(sound: .hippo)}, label: {
                                    Picture("hippo")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                            }
                            GridRow{
                                Button(motion: {SoundManager.occasion.playsound(sound: .panda)}, label: {
                                    Picture("panda")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                                Button(motion: {SoundManager.occasion.playsound(sound: .parrot)}, label: {
                                    Picture("parrot")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                                Button(motion: {SoundManager.occasion.playsound(sound: .pollarbear)}, label: {
                                    Picture("polarbear")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                                Button(motion: {SoundManager.occasion.playsound(sound: .tiger)}, label: {
                                    Picture("tiger")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                            }
                            GridRow{
                                Button(motion: {SoundManager.occasion.playsound(sound: .wolf)}, label: {
                                    Picture("wolf")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                                Button(motion: {SoundManager.occasion.playsound(sound: .zebra)}, label: {
                                    Picture("zebra")
                                        .resizable()
                                        .aspectRatio(contentMode: .match)
                                        .cornerRadius(15)
                                })
                            }
                            
                        }
                        .padding()
                        Textual content("Letters")
                            .font(.system(dimension: 48))
                            .minimumScaleFactor(0.01)
                        Grid{
                        }
                        .padding()
                        Textual content("Numbers")
                            .font(.system(dimension: 48))
                            .minimumScaleFactor(0.01)
                        Grid{
                        }
                        .padding()
                        Textual content("Shapes")
                            .font(.system(dimension: 48))
                            .minimumScaleFactor(0.01)
                        Grid{
                        }
                        .padding()
                        Textual content("Colours")
                            .font(.system(dimension: 48))
                            .minimumScaleFactor(0.01)
                        Grid{
                        }
                        .padding()
                    }
                }
                VStack{
                    Picture("zebra")
                        .scaledToFit()
                    Textual content("Instance")
                }
                .body(maxWidth: .infinity)
            }
        }
    }
}

#Preview {
    SoundBootcamp()
}

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments