Share
Această serie de tutori din trei părți vă va învăța cum să construiți un player de muzică personalizat cu SDK-ul iOS. Citește mai departe!
Bine ați venit la primul din cele trei tutoriale într-o serie pas cu pas despre construirea unui player muzical personalizat cu cadrul MediaPlayer. Într-un tutorial anterior pe Mobiletuts +, am demonstrat cum să accesați o bibliotecă muzicală pentru dispozitive iOS în aplicația proprie. Această serie Tuts + Premium se va concentra pe construirea unui player mult mai complex, cu o interfață personalizată. În această primă serie de serii, vom crea proiectul și vom afișa o listă de melodii și albume ale utilizatorului.
NOTĂ: Pentru a testa această aplicație, veți avea nevoie de un dispozitiv fizic iOS. De asemenea, va trebui să fii membru al programului dezvoltator plătit pentru iOS pentru a implementa aplicația demo pe dispozitivul tău pentru testare.
Deschideți Xcode și selectați "Creați un nou proiect Xcode". Selectați "Empty Application" și faceți clic pe "Next". Introduceți un nume pentru proiectul dvs. (am sunat-o pe "Muzică") și asigurați-vă că selectați iPhone pentru familia de dispozitive și selectați toate casetele de selectare, cu excepția căsuței "Utilizați datele de bază". După aceasta, dați clic pe "Următorul" și alegeți un loc pentru salvarea proiectului și apoi faceți clic pe "Creați".
Vrem doar să folosim aplicația noastră în modul portret, deci mergeți la secțiunea Orientări interfață suportată și deselectați orientările peisajului.
Accesați fila "Construiți fazele" și extindeți opțiunea "Link Binary With Libraries". Faceți clic pe butonul "+" pentru a adăuga un nou Cadru. Introduceți "MediaPlayer" în caseta de căutare și selectați MediaPlayer.framework care apare în listă. Faceți clic pe "Adăugați" pentru a include acest cadru în faza de conectare a proiectului dvs..
Accesați "Fișier"> "Nou"> "Fișier ..." sau apăsați ⌘N pentru a crea un fișier nou. Mergeți la secțiunea "Utilizați interfața", selectați "Storyboard și faceți clic pe" Următorul "Asigurați-vă că Familia de dispozitive este setată pe iPhone și faceți din nou clic pe" Next ".
Acum trebuie să conectăm tabloul de bord la proiectul nostru. Selectați numele proiectului din meniul Navigator al Xcode și selectați țintă curentă (în cazul nostru "Muzică"). Apoi, selectați fila "Summery" și accesați secțiunea "Info despre implementarea iPhone / iPad". Odată ce ați selectat panoul nostru de storyboard numit "MainStoryboard" pentru Main Storyboard.
Deschideți tabloul de bord și trageți a UITabBarController de la Biblioteca de obiecte la pânză. După cum puteți vedea, ecranele sunt deja în rezoluția iPhone 5. Desigur, aplicația va funcționa și pe iPhone-uri mai vechi, deoarece va scade automat în jos. Acum, ștergeți cei doi controale de vizualizare conectate și trageți două panouri de control din biblioteca de obiecte pe pânză. Trageți CTRL din UITabBarController la unul dintre Controlerele de Navigare și selectați "controale de vizualizare" din meniul pop-up. Faceți același lucru pentru celălalt controler de navigare.
Selectați UITabBarItem de la unul dintre Controlerele de Navigație și să-i schimbe titlul în "Cântece". Modificați, de asemenea, titlul barei de navigare a acelui controler de navigare în "Songs". Din nou, faceți același lucru pentru celălalt controler de navigație, dar de această dată schimbați titlurile în "Albume".
Ultimul lucru pe care trebuie să-l facem, pentru a face ca interfața noastră să funcționeze, este de a schimba application: didFinishLaunchWithOptions: , deschideți astfel AppDelegate.m și modificați metoda după cum urmează:
- (BOOL): aplicație (UIApplication *) didFinishLaunchingWithOptions: (NSDictionary *) launchOptions return YES;
Acum am creat interfața noastră, să testați aplicația. Faceți clic pe Construiți și executați sau apăsați ⌘R pentru a testa aplicația. Aplicația ar trebui să afișeze a UITabBarController cu două file, numite Cântece și Albume.
Accesați "Fișier"> "Nou"> "Fișier ..." pentru a crea un fișier nou. De data aceasta mergeți la secțiunea Touch Cocoa și selectați "Class Objective-C". Faceți clic pe "Următorul", introduceți "SongsViewController" pentru clasă și asigurați-vă că este o subclasă de UITableViewController și că ambele casete de selectare nu sunt selectate. Dați clic din nou pe "Următorul" și apoi faceți clic pe "Creați".
Deschideți SongsViewController.h și adăugați următoarea linie sub #import pentru a adăuga cadrul MediaPlayer:
#import
Acum, deschideți SongsViewController.m și modificați numberOfSectionsInTableView: si tableView: numberOfRowsInSection: după cum urmează:
- (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView retur 1; - (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) secțiunea MPMediaQuery * songsQuery = [MPMediaQuery songsQuery]; NSArray * melodii = [elemente de cânteceQuery]; returnează [numărul melodiilor];
În prima metodă, îi spunem UITableView că vrem o secțiune. În cea de-a doua metodă, spunem tabelului că dorim ca numărul de rânduri să fie același cu numărul de cântece din biblioteca utilizatorilor iPod. Îl realizăm cu un MPMediaQuery. O interogare media specifică un set de elemente media din biblioteca utilizatorilor iPod. O interogare media include un număr de constructori care au fiecare un tip de grupare. Am folosit metoda songQuery pentru a crea sau interoga. Tipul de grupare al acelei interogări este setat automat la MPMediaGroupingTitle, care, desigur, grupează piesele după titlul lor. Următorii constructori sunt disponibili în clasa MPMediaQuery:
Și le puteți grupa cu următoarele tipuri de grupări:
După ce am creat interogarea, obținem articolele media din acea interogare și le păstrăm într-un tabel denumit "melodii".
Acum du-te la tableView: cellForRowAtIndexPath: și modificați codul după cum urmează:
- (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath NSString static * CellIdentifier = @ "Cell"; UITableViewCell * celula = [tableView dequeueReusableCellWithIdentifier: CellIdentifier pentruIndexPath: indexPath]; // Configurați celula ... MPMediaQuery * songsQuery = [MPMediaQuery songsQuery]; NSArray * melodii = [elemente de cânteceQuery]; MPMediaItem * rowItem = [melodii objectAtIndex: indexPath.row]; cell.textLabel.text = [valoare pentru rowItemForProperty: MPMediaItemPropertyTitle]; cell.detailTextLabel.text = [valoarea lui rowItemForProperty: MPMediaItemPropertyArtist]; celule retur;
Aici inserăm titlurile de melodii și artiști în celule. Mai intai vom crea o sonsQuery si vom obtine elementele, la fel ca in tableView: numberOfRowsInSection: metodă. După aceea, creăm un MPMediaItem din elementele sonsQuery. În cele din urmă, am setat textul celulelor textLabel și detailTextLabel la titlul elementelor media și la artist.
Acum, am terminat codul nostru pentru SongsViewController, deschidem storyboard-ul, du-te la Controller de navigare Songs și selectați celula de vizualizare a tabelului. Deschideți Inspectorul atributelor, setați identificatorul la celulă și schimbați stilul de la "Personalizat" la "Subtitrări".
În cele din urmă, selectați controlerul TableView, deschideți Inspectorul de identitate și setați Clasa la SongsViewController, pe care tocmai am creat-o.
Acum am terminat SongsViewController și putem vedea melodiile utilizatorilor din aplicația noastră, cred că este un moment bun pentru a testa din nou aplicația noastră. Faceți clic pe Construiți și executați și ar trebui să vedeți cântecele dvs. în tabel.
Pentru fila de albume putem începe la fel ca în fila melodiilor, așa că du-te la "File"> "New"> "File ..." pentru a crea un fișier nou. Selectați "Class-Objective-C" și faceți clic pe "Next". De data aceasta introduceți "AlbumsViewController" pentru clasă și asigurați-vă că este o subclasă de UITableViewController și că ambele casete de selectare nu sunt selectate. Dați clic din nou pe "Următorul" și apoi faceți clic pe "Creați".
Deschideți AlbumsViewController.h și adăugați următoarea linie sub #import pentru a adăuga cadrul MediaPlayer:
#import
Acum, deschideți SongsViewController.m și modificați numberOfSectionsInTableView: si tableView: numberOfRowsInSection: după cum urmează:
- (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView retur 1; - (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) secțiunea MPMediaQuery * albumsQuery = [MPMediaQuery albumsQuery]; NSArray * albums = [albumsQuery collections]; întoarceți [numărul de albume];
Prima metodă este aceeași cu cea folosită pentru fila melodiilor, dar a doua metodă este puțin diferită. Aici am creat o interogare a albumelor și am folosit numărul colecțiilor din acea interogare.
În tab-ul albumelor vom arăta, de asemenea, opera de artă a albumelor. Problema este că nu există întotdeauna o lucrare de artă disponibilă, așa că trebuie să furnizăm o ilustrație prestabilită pentru această situație. Descărcați exemplul de cod atașat la acest proiect și trageți Nu-opera de arta-albums.png și [email protected] imagini în proiectul dvs. Asigurați-vă că este bifată opțiunea "Copiați articolele în dosarul grupului de destinație (dacă este necesar)" și faceți clic pe "Terminare".
Acum du-te la tableView: cellForRowAtIndexPath: și modificați codul după cum urmează:
- (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath NSString static * CellIdentifier = @ "Cell"; UITableViewCell * celula = [tableView dequeueReusableCellWithIdentifier: CellIdentifier pentruIndexPath: indexPath]; // Configurați celula ... MPMediaQuery * albumsQuery = [MPMediaQuery albumsQuery]; NSArray * albums = [albumsQuery collections]; MPMediaItem * rowItem = [[albums objectAtIndex: indexPath.row] representativeItem]; cell.textLabel.text = [valoarea lui rowItemForProperty: MPMediaItemPropertyAlbumTitle]; cell.detailTextLabel.text = [valoarea lui rowItemForProperty: MPMediaItemPropertyAlbumArtist]; MPMediaItemArtwork * opera de artă = [valueItemăRădămidăForProperty: MPMediaItemPropertyArtwork]; UIImage * artworkImage = [lucrare imagineWithSize: CGSizeMake (44, 44)]; dacă (artworkImage) cell.imageView.image = artworkImage; altceva cell.imageView.image = [UIImage imageNamed: @ "No-artwork-albums.png"]; retur;
Începutul acestei metode este aproape la fel ca în SongsViewController. Mai intai creem un albumsQuery si primim colectiile sale, la fel ca in tableView: numberOfRowsInSection: metodă. După aceea, creăm un MPMediaItem din colecțiile sonsQuery. După cum puteți vedea, trebuie să folosim proprietatea representiveItem pentru a primi elementul media. Aceasta deoarece matricea albumelor conține o listă de MPMediaItemCollections în loc de MPMediaItems. Un MPMediaItemCollection este un set sortat de elemente media (MPMediaItems) din biblioteca utilizatorilor iPod. Apoi am setat textul celulelor textLabel și detailTextLabel la numele albumului de elemente media și al artistului albumului. În sfârșit, obținem opere de artă ale albumelor. Există opere de artă disponibile pe care le folosim și altfel vom arăta imaginea pe care tocmai am adăugat-o la proiect.
Acum, de asemenea, am finalizat codul nostru pentru AlbumsViewController, deschidem tabloul de bord, mergeți la Controller de navigare al albumelor și selectați celula de vizualizare a tabelului. Deschideți Inspectorul atributelor, setați identificatorul la celulă și schimbați stilul de la "Personalizat" la "Subtitrări".
În sfârșit, selectați controlerul TableView, deschideți Inspectorul de identitate și setați Clasa la AlbumsViewController, pe care tocmai am creat-o.
Acum, aplicația noastră arată, de asemenea, albumele utilizatorilor din fila albe a aplicației, dați clic pe Construiți și executați pentru a testa aplicația.
În această primă parte a tutorialului ne-am referit cum să creăm o aplicație nouă de la zero cu un storyboard și cum să încărcăm melodiile și albumele dintr-o bibliotecă de utilizatori iPod într-o interfață utilizator particularizată. În partea următoare vom continua cu secțiunea de albume și vom învăța cum să jucăm piese.
Accentsconagua