Share
Questa serie di tutorial in tre parti ti insegnerà come creare un lettore musicale personalizzato con l'SDK di iOS. Continuare a leggere!
Benvenuti al primo di tre tutorial in una serie passo-passo sulla costruzione di un lettore musicale personalizzato con il framework MediaPlayer. In un precedente tutorial su Mobiletuts +, ho dimostrato come accedere a una libreria musicale di dispositivi iOS all'interno della propria applicazione. Questa serie Tuts + Premium si concentrerà sulla creazione di un player molto più complesso con un'interfaccia personalizzata. In questa prima serie di serie, creeremo il progetto e visualizzeremo un elenco di canzoni e album dell'utente.
NOTA: Per testare questa app è necessario un dispositivo iOS fisico. Dovrai anche essere un membro del programma per sviluppatori iOS a pagamento per poter distribuire l'app dimostrativa sul tuo dispositivo per il test.
Apri Xcode e seleziona "Crea un nuovo progetto Xcode". Seleziona "Applicazione vuota" e fai clic su "Avanti". Inserisci un nome per il tuo progetto (ho chiamato il mio "Musica") e assicurati di selezionare iPhone per famiglia di dispositivi e seleziona tutte le caselle di controllo, ad eccezione della casella di controllo "Usa dati di base". Successivamente, fai clic su "Avanti" e scegli un luogo in cui salvare il progetto, quindi fai clic su "Crea".
Vogliamo solo utilizzare la nostra applicazione in modalità verticale, quindi vai alla sezione Orientamenti dell'interfaccia supportata e deseleziona gli orientamenti orizzontali.
Vai alla scheda "Fasi di costruzione" e utilizza l'opzione "Collega binari con le librerie". Fai clic sul pulsante "+" per aggiungere un nuovo framework. Digita "MediaPlayer" nella casella di ricerca e seleziona il MediaPlayer.framework opzione che appare nell'elenco. Fai clic su "Aggiungi" per includere questo framework nella fase di collegamento del tuo progetto.
Vai su "File"> "Nuovo"> "File ..." o premi ⌘N per creare un nuovo file. Vai alla sezione "Usa interfaccia", seleziona "Storyboard e fai clic su" Avanti ". Assicurati che la famiglia di dispositivi sia impostata su iPhone e fai nuovamente clic su" Avanti ". Assegna un nome allo storyboard MainStoryboard e fai clic su" Crea ".
 Ora dobbiamo collegare lo storyboard al nostro progetto. Seleziona il nome del progetto nel menu di navigazione di Xcode e seleziona il target corrente (nel nostro caso "Musica"). Quindi seleziona la scheda "Summery" e vai alla sezione "Informazioni sulla distribuzione di iPhone / iPad". Una volta lì, seleziona lo storyboard chiamato "MainStoryboard" per lo storyboard principale.
Apri lo storyboard e trascina a UITabBarController dalla libreria degli oggetti alla tela. Come puoi vedere, gli schermi sono già in risoluzione iPhone 5. Ovviamente, l'app funzionerà anche sugli iPhone meno recenti perché ridimensionerà automaticamente. Ora elimina i due controller di visualizzazione collegati e trascina due controller di navigazione dalla libreria di oggetti nell'area di disegno. CTRL trascina da UITabBarController a uno dei controller di navigazione e seleziona "Visualizza controller" dal menu a comparsa. Fai lo stesso per l'altro controller di navigazione.
Seleziona il UITabBarItem da uno dei controller di navigazione e cambia titolo in "Canzoni". Modificare anche il titolo della barra di navigazione di quel Navigation Controller su "Songs". Anche in questo caso, fare lo stesso per l'altro controller di navigazione, ma questa volta cambiare i titoli in "Album".
L'ultima cosa che dobbiamo fare, per far funzionare la nostra interfaccia, è cambiare il application: didFinishLaunchWithOptions: metodo, quindi apri AppDelegate.m e modifica il metodo come segue:
- Applicazione (BOOL): l'applicazione (UIApplication *) ha fattoFinishLaunchingWithOptions: (NSDictionary *) launchOptions return YES;
Ora abbiamo creato la nostra interfaccia, testiamo l'app. Fai clic su Crea ed esegui o premi ⌘R per testare l'applicazione. L'app dovrebbe mostrare a UITabBarController con due schede, chiamate Songs e Album.
Vai su "File"> "Nuovo"> "File ..." per creare un nuovo file. Questa volta vai nella sezione Cocoa Touch e seleziona "Objective-C class". Fai clic su "Avanti", inserisci "SongsViewController" per la classe e assicurati che sia una sottoclasse di UITableViewController e che entrambe le caselle di controllo non sono selezionate. Fai nuovamente clic su "Avanti" e poi su "Crea".
Apri SongsViewController.h e aggiungi la seguente riga sotto #importare per aggiungere il framework MediaPlayer:
#importare
Ora apri SongsViewController.m e modifica il file numberOfSectionsInTableView: e il tableView: numberOfRowsInSection: metodo come segue:
- (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView return 1; - (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) section MPMediaQuery * songsQuery = [MPMediaQuery songsQuery]; NSArray * songs = [songsQuery items]; ritorno [numero di canzoni];
Nel primo metodo, diciamo al UITableView che vogliamo una sezione. Nel secondo metodo, diciamo al tableview che vogliamo che il numero di righe sia uguale al numero di brani nella libreria iPod dell'utente. Lo realizziamo con una MPMediaQuery. Una query multimediale specifica un set di elementi multimediali dalla libreria iPod dell'utente. Una query multimediale include un numero di costruttori che hanno ciascuno un tipo di raggruppamento. Abbiamo usato il metodo songsQuery per creare o interrogare. Il tipo di raggruppamento di quella query viene automaticamente impostato su MPMediaGroupingTitle, che ovviamente raggruppa le tracce in base al loro titolo. I seguenti costruttori sono disponibili nella classe MPMediaQuery:
E puoi raggrupparli con i seguenti tipi di raggruppamento:
Dopo aver creato la nostra query otteniamo gli elementi multimediali da quella query e li memorizziamo in un array chiamato "songs".
Ora vai al tableView: cellForRowAtIndexPath: e modificare il codice da leggere come segue:
- (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath static NSString * CellIdentifier = @ "Cell"; UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: CellIdentifier forIndexPath: indexPath]; // Configura la cella ... MPMediaQuery * songsQuery = [MPMediaQuery songsQuery]; NSArray * songs = [songsQuery items]; MPMediaItem * rowItem = [songs objectAtIndex: indexPath.row]; cell.textLabel.text = [rowItem valueForProperty: MPMediaItemPropertyTitle]; cell.detailTextLabel.text = [rowItem valueForProperty: MPMediaItemPropertyArtist]; cella di ritorno;
Qui inseriamo i titoli delle canzoni e l'artista nelle celle. Per prima cosa creiamo i figliQuery e otteniamo gli oggetti, proprio come nel tableView: numberOfRowsInSection: metodo. Dopodiché creiamo un MPMediaItem dai figliQuery è articoli. Finalmente abbiamo impostato il testo delle celle textLabel e detailTextLabel per il titolo e l'artista degli oggetti multimediali.
Ora abbiamo completato il nostro codice per SongsViewController, apriamo lo storyboard, andiamo a Songs Navigation Controller e selezioniamo la cella di visualizzazione tabella. Apri l'ispettore Attributi, imposta l'identificatore su Cell e cambia lo stile da "Personalizzato" a "Sottotitolo".
Alla fine seleziona il controller TableView, apri Identity Inspector e imposta la classe su SongsViewController, abbiamo appena creato.
Ora abbiamo finito SongsViewController e possiamo vedere i brani degli utenti nella nostra app, penso che sia un buon momento per testare di nuovo la nostra app. Fai clic su Crea ed esegui e dovresti vedere i tuoi brani nella tabella.
Per la scheda degli album possiamo iniziare come abbiamo fatto con la scheda delle canzoni, quindi andare su "File"> "Nuovo"> "File ..." per creare un nuovo file. Selezionare "Classe Objective-C" e fare clic su "Avanti". Questa volta inserisci "AlbumsViewController" per la classe e assicurati che sia una sottoclasse di UITableViewController e che entrambe le caselle di controllo non siano selezionate. Fai nuovamente clic su "Avanti" e poi su "Crea".
Apri AlbumViewController.h e aggiungi la seguente riga sotto #importare per aggiungere il framework MediaPlayer:
#importare
Ora apri SongsViewController.m e modifica il file numberOfSectionsInTableView: e il tableView: numberOfRowsInSection: metodi come segue:
- (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView return 1; - (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) section MPMediaQuery * albumsQuery = [MPMediaQuery albumsQuery]; Album NSArray * = [albumsQuery collections]; ritorno [album count];
Il primo metodo è lo stesso utilizzato per la scheda delle canzoni, ma il secondo metodo è leggermente diverso. Qui abbiamo creato una query di album e abbiamo utilizzato il conteggio delle raccolte da quella query.
Nella scheda degli album mostreremo anche le illustrazioni degli album. Il problema è che non è sempre disponibile la grafica, quindi dobbiamo fornire un disegno di default per quella situazione. Scarica il codice di esempio allegato a questo progetto e trascina il No-artwork-albums.png e [email protected] immagini nel tuo progetto. Assicurati che "Copia gli elementi nella cartella del gruppo di destinazione (se necessario)" sia selezionato e fai clic su "Fine".
 Adesso vai al tableView: cellForRowAtIndexPath: e modificare il codice da leggere come segue:
- (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath static NSString * CellIdentifier = @ "Cell"; UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: CellIdentifier forIndexPath: indexPath]; // Configura la cella ... MPMediaQuery * albumsQuery = [MPMediaQuery albumsQuery]; Album NSArray * = [albumsQuery collections]; MPMediaItem * rowItem = [[album objectAtIndex: indexPath.row] representativeItem]; cell.textLabel.text = [rowItem valueForProperty: MPMediaItemPropertyAlbumTitle]; cell.detailTextLabel.text = [rowItem valueForProperty: MPMediaItemPropertyAlbumArtist]; MPMediaItemArtwork * artwork = [rowItem valueForProperty: MPMediaItemPropertyArtwork]; UIImage * artworkImage = [artwork imageWithSize: CGSizeMake (44, 44)]; if (artworkImage) cell.imageView.image = artworkImage; else cell.imageView.image = [UIImage imageNamed: @ "No-artwork-albums.png"]; restituisci cella;
L'inizio di questo metodo è quasi lo stesso di SongsViewController. Per prima cosa creiamo un albumQuery e otteniamo le sue collezioni, proprio come nel tableView: numberOfRowsInSection: metodo. Dopo di che creiamo un MPMediaItem dai figliQuery è collezioni. Come puoi vedere, dobbiamo usare la proprietà representiveItem per ricevere l'elemento multimediale. Questo perché l'array degli album contiene un elenco di MPMediaItemCollections invece di MPMediaItems. Un MPMediaItemCollection è un insieme ordinato di elementi multimediali (MPMediaItems) dalla libreria iPod dell'utente. Quindi impostiamo il testo delle celle textLabel e detailTextLabel sul nome dell'album degli elementi multimediali e dell'artista dell'album. Finalmente otteniamo l'artwork degli album. C'è materiale disponibile che usiamo e noi mostriamo l'immagine che abbiamo appena aggiunto al progetto.
Ora abbiamo anche terminato il nostro codice per AlbumsViewController, aperto lo storyboard, vai al controller di navigazione Album e seleziona la cella di visualizzazione tabella. Apri l'ispettore Attributi, imposta l'identificatore su Cell e cambia lo stile da "Personalizzato" a "Sottotitolo".
Alla fine seleziona il controller TableView, apri Identity Inspector e imposta la classe su AlbumsViewController, abbiamo appena creato.
Ora la nostra app mostra anche gli album degli utenti nella scheda degli album dell'app, fai clic su Crea ed esegui per testare l'app.
In questa prima parte del tutorial abbiamo spiegato come creare una nuova app da zero con uno storyboard e come caricare i brani e gli album da una libreria iPod dell'utente in un'interfaccia utente personalizzata. Nella prossima parte continueremo con la sezione degli album e impareremo come suonare i brani.
Accentsconagua