Share
Deze driedelige lessenreeks leert je hoe je een aangepaste muziekspeler kunt bouwen met de iOS SDK. Lees verder!
Welkom bij de eerste van de drie tutorials in een stapsgewijze serie over het bouwen van een aangepaste muziekspeler met het MediaPlayer-framework. In een eerdere tutorial over Mobiletuts + heb ik laten zien hoe je toegang kunt krijgen tot een muziekbibliotheek van iOS-apparaten binnen je eigen applicatie. Deze Tuts + Premium-serie zal zich richten op het bouwen van een veel complexere speler met een aangepaste interface. In dit eerste deel van de serie zullen we het project maken en een lijst met de liedjes en albums van de gebruiker weergeven.
NOTITIE: Om deze app te testen, heb je een fysiek iOS-apparaat nodig. Je moet ook lid zijn van het betaalde iOS-ontwikkelaarsprogramma om de demo-app op je apparaat te zetten voor testen.
Open Xcode en selecteer "Een nieuw Xcode-project maken". Selecteer "Lege toepassing" en klik op "Volgende". Voer een naam in voor uw project (ik heb de mijne 'Muziek' genoemd) en zorg ervoor dat u de iPhone selecteert voor de apparaatfamilie en selecteer alle selectievakjes, behalve het selectievakje 'Kerngegevens gebruiken'. Klik daarna op "Volgende" en kies een plaats om uw project op te slaan en klik vervolgens op "Maken".
We willen onze applicatie alleen in de portretmodus gebruiken, dus ga naar de sectie Ondersteunde interfacorichtlijnen en schakel de landschapsoriëntaties uit.
Ga naar het tabblad "Fasen opbouwen" en gebruik de optie "Binaire bibliotheken koppelen". Klik op de knop "+" om een nieuw Framework toe te voegen. Typ "MediaPlayer" in het zoekvak en selecteer de MediaPlayer.framework optie die in de lijst verschijnt. Klik op "Toevoegen" om dit kader op te nemen in de koppelingsfase van uw project.
Ga naar "Bestand"> "Nieuw"> "Bestand ..." of druk op ⌘N om een nieuw bestand te maken. Ga naar het gedeelte "Interface gebruiken", selecteer "Storyboard en klik op" Volgende ".Zorg ervoor dat de apparaatfamilie is ingesteld op iPhone en klik nogmaals op" Volgende "Geef je storyboard het hoofdstambord en klik op" Maken ".
Nu moeten we het storyboard verbinden met ons project. Selecteer de projectnaam in het navigatiemenu van Xcode en selecteer het huidige doel (in ons geval "Muziek"). Selecteer vervolgens het tabblad "Zomerse" en ga naar het gedeelte "iPhone / iPad-implementatiegegevens". Selecteer daar ons storyboard genaamd "MainStoryboard" voor het main storyboard.
Open het storyboard en sleep een UITabBarController van de objectbibliotheek naar het canvas. Zoals u kunt zien, zitten de schermen al in de iPhone 5-resolutie. Natuurlijk werkt de app ook op oudere iPhones omdat deze automatisch wordt verkleind. Verwijder nu de twee verbonden View Controllers en sleep twee Navigation Controllers vanuit de objectbibliotheek naar het canvas. CTRL slepen van de UITabBarController naar een van de navigatieaanstuurders en selecteer "view controllers" in het pop-upmenu. Doe hetzelfde voor de andere navigatiecontroller.
 Selecteer de UITabBarItem van een van de Navigation Controllers en verander de titel in "Songs". Wijzig ook de titel van de navigatiebalk van die Navigatiecontroller in "Nummers". Nogmaals, doe hetzelfde voor de andere navigatiecontroller, maar verander deze keer de titels in "Albums".
Het laatste wat we moeten doen om onze interface te laten werken, is het veranderen van de application: didFinishLaunchWithOptions: methode, open AppDelegate.m en pas de methode als volgt aan:
- (BOOL) applicatie: (UIApplication *) applicatie didFinishLaunchingWithOptions: (NSDictionary *) launchOptions return YES;
Nu hebben we onze interface gemaakt, laten we de app testen. Klik op Build and Run of druk op ⌘R om de applicatie te testen. De app moet een UITabBarController met twee tabbladen, genaamd Liedjes en Albums.
Ga naar "Bestand"> "Nieuw"> "Bestand ..." om een nieuw bestand te maken. Ga deze keer naar de sectie Cocoa Touch en selecteer "Objective-C-klasse". Klik op "Volgende", typ "SongsViewController" voor de klas en zorg ervoor dat het een subklasse van is UITableViewController en dat beide selectievakjes niet zijn geselecteerd. Klik nogmaals op "Volgende" en klik vervolgens op "Maken".
Open SongsViewController.h en voeg de volgende regel toe #importeren om het MediaPlayer-framework toe te voegen:
#importeren
Open nu SongsViewController.m en wijzig de numberOfSectionsInTableView: en de tableView: numberOfRowsInSection: methode als volgt:
- (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView return 1; - (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) section MPMediaQuery * songsQuery = [MPMediaQuery songsQuery]; NSArray * songs = [songsQuery items]; terug [liedjes tellen];
In de eerste methode vertellen we het UITableView dat we een sectie willen. In de tweede methode vertellen we de tableview dat we willen dat het aantal rijen gelijk is aan het aantal nummers in de iPod-bibliotheek van de gebruiker. Dat doen we met een MPMediaQuery. Een mediaquery specificeert een reeks media-items van de iPod-bibliotheek van gebruikers. Een mediaquery bevat een aantal constructors die elk een groepstype hebben. We hebben de methode songsQuery gebruikt om een query te maken of te maken. Het groeperingstype van die query wordt automatisch ingesteld op MPMediaGroupingTitle, waarbij de tracks natuurlijk worden gegroepeerd op hun titel. De volgende constructors zijn beschikbaar in de klasse MPMediaQuery:
En u kunt ze groeperen met de volgende groeperingstypen:
Nadat we onze query hebben gemaakt, krijgen we de media-items uit die query en slaan deze op in een array genaamd "liedjes".
Ga nu naar de tableView: cellForRowAtIndexPath: en pas de code als volgt aan:
- (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath static NSString * CellIdentifier = @ "Cell"; UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: CellIdentifier forIndexPath: indexPath]; // Configureer de cel ... MPMediaQuery * songsQuery = [MPMediaQuery songsQuery]; NSArray * songs = [songsQuery items]; MPMediaItem * rowItem = [liedjes objectAtIndex: indexPath.row]; cell.textLabel.text = [rowItem valueForProperty: MPMediaItemPropertyTitle]; cell.detailTextLabel.text = [rowItem valueForProperty: MPMediaItemPropertyArtist]; terugkeer cel;
Hier voegen we de liedjes titels en artiest in de cellen. Eerst maken we een zoonsquery en we krijgen items, net als in de tableView: numberOfRowsInSection: methode. Daarna maken we een MPMediaItem van de items zonenQuery it. Eindelijk stellen we de tekst van de cellen textLabel en detailTextLabel in op de titel en artiest van de media-items.
Nu hebben we onze code voor de SongsViewController voltooid, openen we het storyboard, gaan we naar de Songs Navigation Controller en selecteren we de tabelweergavecel. Open de Attributen Inspector, zet de Identifier op Cell en verander de stijl van "Custom" in "Subtitle".
Selecteer ten slotte de TableView-controller, open de Identity Inspector en stel de Class in op de SongsViewController, we hebben zojuist gemaakt.
Nu we de SongsViewController hebben voltooid en de gebruikersnummers in onze app kunnen zien, denk ik dat het een goed moment is om onze app opnieuw te testen. Klik op Build and Run en je zou je liedjes in de tabweergave moeten zien.
Voor het tabblad albums kunnen we hetzelfde beginnen als op het tabblad liedjes, dus ga naar "Bestand"> "Nieuw"> "Bestand ..." om een nieuw bestand te maken. Selecteer "Objective-C klasse" en klik op "Volgende". Deze keer voert u "AlbumsViewController" in voor de klasse en zorgt u ervoor dat het een subklasse van UITableViewController is en dat beide selectievakjes niet zijn geselecteerd. Klik nogmaals op "Volgende" en klik vervolgens op "Maken".
Open AlbumsViewController.h en voeg de volgende regel toe #importeren om het MediaPlayer-framework toe te voegen:
#importeren
Open nu SongsViewController.m en wijzig de numberOfSectionsInTableView: en de tableView: numberOfRowsInSection: methoden als volgt:
- (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView return 1; - (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) sectie MPMediaQuery * albumsQuery = [MPMediaQuery albumsQuery]; NSArray * albums = [albumsQuery-collecties]; return [aantal albums];
De eerste methode is dezelfde als die we hebben gebruikt voor het tabblad liedjes, maar de tweede methode is iets anders. Hier hebben we een albumsquery gemaakt en we hebben de telling van de collecties uit die query gebruikt.
Op het tabblad albums laten we ook de illustraties van de albums zien. Het probleem is dat er niet altijd kunstwerken beschikbaar zijn, dus we moeten een standaardafbeelding voor die situatie leveren. Download de voorbeeldcode die aan dit project is gekoppeld en sleep de No-artwork-albums.png en [email protected] afbeeldingen in uw project. Zorg ervoor dat "Items in de map van de bestemmingsgroep kopiëren (indien nodig)" is aangevinkt en klik op "Finish".
Nu naar de tableView: cellForRowAtIndexPath: en pas de code als volgt aan:
- (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath static NSString * CellIdentifier = @ "Cell"; UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: CellIdentifier forIndexPath: indexPath]; // Configureer de cel ... MPMediaQuery * albumsQuery = [MPMediaQuery albumsQuery]; NSArray * albums = [albumsQuery-collecties]; MPMediaItem * rowItem = [[albums 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"]; return cel;
Het begin van deze methode is bijna hetzelfde als in de SongsViewController. Eerst maken we een albumsquery en we krijgen zijn collecties, net als in de tableView: numberOfRowsInSection: methode. Daarna maken we een MPMediaItem uit de collecties zonenQuery it. Zoals u ziet, moeten we de eigenschap representationiveItem gebruiken om het media-item te ontvangen. Dat komt omdat de array albums een lijst met MPMediaItemCollections bevat in plaats van MPMediaItems. Een MPMediaItemCollection is een gesorteerde reeks mediapunten (MPMediaItems) van de iPod-bibliotheek van gebruikers. Vervolgens stellen we de tekst van de cellen textLabel en detailTextLabel in op de albumnaam en albumartiest van de media-items. Eindelijk krijgen we de artwork van de albums. Als er artwork beschikbaar is, gebruiken we het en anders laten we de afbeelding zien die we zojuist aan het project hebben toegevoegd.
Nu hebben we ook onze code voor de AlbumsViewController afgewerkt, het storyboard geopend, naar de Albums Navigation Controller gegaan en de tabelweergavecel geselecteerd. Open de Attributen Inspector, zet de Identifier op Cell en verander de stijl van "Custom" in "Subtitle".
Selecteer ten slotte de TableView-controller, open de Identity Inspector en stel de Class in op de AlbumsViewController, we hebben zojuist gemaakt.
Nu toont onze app ook de gebruikersalbums op het tabblad Albums van de app, klik op Build & Run om de app te testen.
In dit eerste deel van de tutorial hebben we besproken hoe je vanaf het begin een nieuwe app kunt maken met een storyboard en hoe je de nummers en albums van de iPod-bibliotheek van een gebruiker kunt laden in een aangepaste gebruikersinterface. In het volgende deel gaan we verder met de albumssectie en we zullen leren hoe de nummers moeten worden afgespeeld.
Accentsconagua