Compatibile con Xcode 8

How To: Riprodurre i suoni con AVAudioPlayer. Creiamo una semplice app

ENTRA NEL NOSTRO GRUPPO FACEBOOK

Sviluppare un’applicazione, anche se semplice, è il miglior modo per mettere in pratica quanto imparato, dato che ti da modo di avere un riscontro diretto e pratico delle nozioni che hai appreso nei vari tutorial.

Una volta acquisite le varie competenze, si tratta solo di incastonare tra di loro le varie funzionalità necessarie alla tua applicazione. Esattamente come se fossero pezzi di un puzzle.

Io parto sempre da una domanda. La domanda che mi pongo quando ho in mente di creare un’applicazione è: Che cosa mi serve a livello tecnico? (ne esistono migliaia di domande, alcune le puoi trovare in questo tutorial).

Comincio con l’individuare tutte le varie feature e quindi a ridurre l’applicazione nelle sue tre-quattro principali caratteristiche. Lì mi chiedo se sono in grado di realizzarle.

Vediamolo con un esempio pratico.

Voglio creare un’app con una griglia di animali, e quando l’utente preme su uno di questi, far sentire il suo verso. Una sorta di gioco per bambini.

Una volta che ho trovato l’idea, ho capito quali sono le caratteristiche principali (nel mio caso: versi degli animali e le sue foto), passo ad abbozzare una sorta di interfaccia dell’applicazione (ti basta un foglio ed una matita, Giuseppe ne ha parlato ampiamente nel suo corso di sviluppo app).

app-suoni-animali-swift-ios

Cosa mi serve?

  1. Sicuramente una Collection View per mostrare gli animali in maniera semplice ed intuitiva (una griglia dove ad ogni cella visualizzo la foto dell’animale).
  2. La riproduzione di un file audio che rappresenta il verso.
  3. Una qualche sorta di grafica e animazioni varie per rendere il tutto più appetibile.

Collection View

Iniziamo definendo l’oggetto da rappresentare con la collection. Puoi aggiungere la seguente classe nel file ViewController.swift dove metterai la tua collection view:

Ho infatti bisogno solo di pochi dati, dunque mi bastano il nome dell’animale, l’audio del suo verso (sarà il path del file audio vero e proprio) da eseguire, e l’immagine dell’animale rappresentato.

Poi spostati nel ViewController in cui inserirai la Collection e scrivi la funzione di inizializzazione per la lista dei vari animali:

Sviluppare una Collection View è molto semplice, ma se non l’hai mai vista, puoi leggere prima l’ottimo tutorial del mio collega Emanuele Beffa: Dai un occhiata al suo tutorial.

Dovresti creare una collection view simile alla seguente:

schermata-2016-11-29-alle-11-18-23

Una volta definito questo array con alcuni oggetti di esempio, puoi inserire nel ViewController la CollectionView (ricordati di impostare delegate e dataSource alla collection), ed implementare le funzioni ad essa associate:

 

Immagini e Suoni animali

Puoi scaricare le Immagini ed i Suoni degli animali da questo Link. Una volta scaricati, includili nella tua App (carica le immagini come imageset!):

immagini-e-suoni-app-animali

Adesso avviando l’app dovresti vedere anche l’immagine nella ImageView di ogni cella.

 

AVAudioPlayer

Il punto più importante è quello di eseguire un audio alla pressione di uno degli animali.

Le funzionalità per poter riprodurre un audio sono contenute all’interno del modulo AVFoundation. Quindi aggiungi l’omonimo import all’interno nel tuo file ViewController.swift, ed inizializza il player, subito sotto all’array audio:

E’ sufficiente creare questo oggetto ed istruirlo, al momento del play dell’audio, per fargli eseguire un file audio a nostro piacimento.

Dato che vogliamo avviare l’audio al tap dell’utente su una cella della collection, aggiungi il metodo didSelectItemAt ed aggiungi il seguente codice:

Questa funzione è quella che viene invocata quando l’utente clicca sulla cella della collectionView. Nel codice che ho scritto, cerco l’mp3 dell’animale selezionato e istruisco l’audioPlayer  per eseguirlo.

Prova ad avviare nuovamente l’app. Bene..! Hai visto? Abbiamo praticamente completato la nostra app, perché tutte le funzioni “base” sono state realizzate.

Animazioni e framework Spring

Ora manca la terza fase, cioè l’ottimizzazione grafica, gli abbellimenti, e tutte quelle cose che differenzieranno la nostra app dalle altre presenti nello store.

Questa fase è per me la più creativa e personale, perchè dipende completamente dal nostro gusto: proseguendo nel tutorial ti mostrerò come l’ho impostata io, ma sbizzarisciti, libera il “Jony Ive” che c’è in te e divertiti a creare la tua UI :)

Cominciamo impostando una top bar sopra alla CollectionView, ed un titolo per la nostra app. Io ho scelto “Animal Sounds“, ed un azzurrino tenue.

Poi, ho impostato lo sfondo della collection di un grigio leggero, mentre la cella sarà bianca. In questo modo, daremo un po’ di dinamica alla nostra interfaccia.

E poi?

Che ne dici se aggiungessimo un’animazione alla pressione di ciascun animale? L’utente cliccherà l’animale, e questo si muoverà!

Come facciamo? In un mio precedente tutorial, ti ho mostrato l’utilizzo dei CocoaPods: clicca qui per rileggerlo.

Utilizzeremo un framework chiamato Spring (qui il Link), che con pochi semplici passi ti permetterà di animare le tue view. Importalo con il podcast, e riapri il progetto (segui il tutorial che ti ho linkato su CocoaPods, se non sai come fare).

Modifica la tua AudioCollectionViewCell cosi come segue:

Non cambia molto, ma vediamolo nel dettaglio. Abbiamo importato il modulo Spring, e modificato la classe della nostra immagine da UIImageView a SpringImageView. Ricordati di farlo anche da Storyboard, come mostrato qui sotto.

Torna ora alla tua funzione didSelectItemAt:

Considerazioni e Download

E’ stato semplice, vero?

Ora puoi continuare lo sviluppo inserendo altri suoni, e magari altre animazioni divertenti! Se hai qualche dubbio, non esitare a commentare, sarò felice di aiutarti :)

Puoi anche scaricare il progetto completo, per vedere direttamente l’applicazione completa.

[sociallocker]Download Progetto[/sociallocker]

PS: Mostrami anche come hai sviluppato tu questa semplice app. Fa sempre piacere vedere e condividere nuove idee di design!

  • Marcos

    Io non ho capito questa parte di codice:
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: IndexPath) -> CGSize {
    //imposto 3 celle per riga
    let collectionViewWidth = self.collectionView.bounds.size.width * (100/3.018)/100
    return CGSize(width: collectionViewWidth, height: collectionViewWidth)
    }

    • Mauro

      Ciao Marcos,

      questa funzione ti permette di indicare le dimensioni (size) di ciascuna item della collectionView.
      In questo caso, ne volevo 3 per riga, e quindi

      let collectionViewWidth = self.collectionView.bounds.size.width * (100/3.018)/100

      dove self.collectionView.bounds.size.width = larghezza della collectionView

      che divido per 3 (e qualcosina in piu, per approssimare lo spazio “vuoto” tra le celle)

      Fammi sapere se hai capito :)
      Ciao e buono studio

  • Daniel

    Ciao, ho scaricato la vostra app ma mi dà un errore —-> no such module spring, come mai?
    Grazie :-)

    • Ciao Daniel,

      Non avrai importato il framework Spring all’interno dell’app (nel tutorial c’è scritto di inserire un framework con cocoapods)
      Fammi sapere se era questo il problema!

      Alla prossima e buona programmazione,
      Giuseppe

Start typing and press Enter to search

come-creare-un-framework-con-xcodeadmob-con-firebase