Share
Cette série de didacticiels en trois parties vous apprendra comment créer un lecteur de musique personnalisé avec le SDK iOS. Continuer à lire!
Bienvenue dans la deuxième partie de cette série de didacticiels sur la création d’un lecteur de musique personnalisé avec le SDK iOS. Dans cette partie, nous allons continuer avec la section albums que nous avons commencée dans le premier volet et apprendre à jouer les pistes individuelles..
Ouvrez le storyboard et faites glisser un contrôleur de vue tabulaire de la bibliothèque d'objets vers la zone de dessin. Nous allons utiliser ce contrôleur de vue de table pour afficher un seul album. Faites glisser CTRL de la cellule du contrôleur de vue de tableau Albums vers le nouveau contrôleur de vue de table que nous venons d'ajouter et sélectionnez "push" dans la section "Sélection" du menu contextuel..
Nous allons maintenant créer nos cellules.La première cellule de la vue tableau contiendra des informations sur l'album, telles que les illustrations, l'artiste, la durée de l'album et le nombre de chansons de l'album. L'autre cellule contiendra les chansons de l'album. Sélectionnez la cellule et ouvrez l'inspecteur d'attributs. Définissez l'identifiant sur "Cellule" et changez le style de "Personnalisé" en "Sous-titre"..
Maintenant que nous avons créé la cellule pour les morceaux, faites glisser une nouvelle cellule de vue tableau de la bibliothèque d'objets au-dessus de la cellule que vous venez de modifier. Changez son style de sélection de "Bleu" à "Aucun" et définissez l'identifiant sur "InfoCell". Après cela, ouvrez l’Inspecteur de taille et modifiez la Hauteur de ligne à 120..
Dans cette cellule, nous aurons besoin d’une vue d’image pour l’œuvre et de deux étiquettes pour l’information. Commencez par faire glisser une vue d'image dans la cellule et modifiez sa taille en 100x100. Modifiez également les propriétés X et Y en 10. Après cela, faites glisser les deux étiquettes dans la cellule et alignez-les comme sur l'image ci-dessous:
Sélectionnez la première étiquette, ouvrez l'inspecteur d'attributs, puis remplacez la police par "System Bold 17.0". Ensuite, supprimez le texte des étiquettes et remplacez l’étiquette de la première étiquette par 101 et l’étiquette de la deuxième étiquette par 102. Enfin, sélectionnez la vue image et remplacez son étiquette par 100. Nous allons utiliser ces étiquettes pour ajuster les étiquettes et la vue de l'image dans le tableView: cellForRowAtIndexPath: méthode.
Allez dans "Fichier"> "Nouveau"> "Fichier…" pour créer un nouveau fichier. Sélectionnez "Classe Objective-C" puis cliquez sur "Suivant". Entrez "AlbumViewController" pour la classe et assurez-vous qu'il s'agit d'une sous-classe de UITableViewController et que les deux cases à cocher ne sont pas cochées. Cliquez à nouveau sur "Suivant" puis sur "Créer".
Ouvrez AlbumViewController.h et modifiez le code comme suit:
#importation#importation @interface AlbumViewController: UITableViewController NSString * albumTitle; @property NSString * albumTitle; @fin
Ici, nous ajoutons simplement la structure MediaPlayer à notre contrôleur de vue table et nous créons une chaîne NSString qui contiendra le titre de l’album. Nous mettrons à jour cette chaîne lorsque l'utilisateur sélectionnera un album.
Maintenant, ouvrez AlbumsViewController.m et ajoutez la ligne suivante sous #import "AlbumsViewController.h":
#import "AlbumViewController.h"
Après cela, ajoutez la méthode suivante:
- (void) prepareForSegue: (UIStoryboardSegue *) sender sender: (id) sender AlbumViewController * detailViewController = [segue destinationViewController]; MPMediaQuery * albumsQuery = [MPMediaQuery albumsQuery]; NSArray * albums = [albumsQuery collections]; int selectedIndex = [[self.tableView indexPathForSelectedRow] row]; MPMediaItem * selectedItem = [[albums objectAtIndex: selectedIndex] representativeItem]; NSString * albumTitle = [selectedItem valueForProperty: MPMediaItemPropertyAlbumTitle]; [detailViewController setAlbumTitle: albumTitle];
Nous passons ici le titre de l’album sélectionné au detailViewController, qui est l'AlbumViewController. Le storyboard appelle cette méthode au moment de l'exécution lorsque vous déclenchez une séquence dans la scène actuelle (c'est-à-dire lorsque l'utilisateur sélectionne un album)..
Ouvrez maintenant AlbumViewController.m et ajoutez la ligne suivante sous @implementation:
@synthesize albumTitle;
Après cela, allez au viewDidLoad méthode et la modifier comme suit:
- (void) viewDidLoad [super viewDidLoad]; self.title = albumTitle;
Ici, nous plaçons simplement le titre de la barre de navigation sur le titre de l'album sélectionné.
Maintenant que nous avons créé un nouvel écran pour l'album sélectionné, je pense que c'est une bonne idée de tester l'application. Cliquez sur Construire et exécuter pour tester l'application. Si vous accédez à l'onglet Albums et sélectionnez un album, vous accédez à un nouvel écran avec une vue de tableau vide, mais le titre de la barre de navigation doit être identique à celui de l'album sélectionné..
Aller au numberOfSectionsInTableView: et le tableView: numberOfRowsInSection: méthodes dans AlbumViewController.m et modifiez-les comme suit:
- (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView return 1; - (NSInteger) tableView: (UITableView *) table numéroViewOfRowsInSection: section (NSInteger) MPMediaQuery * albumQuery = [MPMediaQuery albumsQuery]; MPMediaPropertyPredicate * albumPredicate = [MPMediaPropertyPredicate predicateWithValue: albumTitre pourProperty: MPMediaItemPropertyAlbumTitle]; [albumQuery addFilterPredicate: albumPredicate]; NSArray * albumTracks = [éléments de albumQuery]; return [albumTracks count] +1;
Ces méthodes devraient déjà être familières, mais comme vous pouvez le constater, nous avons fait quelque chose de nouveau dans la deuxième méthode. Nous avons utilisé un MPMediaPropertyPredicte. Avec un objet MPMediaPropertyPredicte, vous pouvez filtrer une requête. Nous avons utilisé le titre de l'album sélectionné pour la valeur de filtre et MPMediaPropertyAlbumTitle en tant que propriété. Notre requête ne contiendra que l'album avec le titre de l'album sélectionné par l'utilisateur..
Vous pouvez utiliser beaucoup de propriétés différentes pour un MPMediaPropertyPredicate. Vous pouvez les voir tous dans la documentation iOS Developer Library..
Nous retournons le nombre de chansons, plus 1. La cellule supplémentaire sera pour la cellule avec les informations de l'album.
Étant donné que nous avons deux types de cellules différents, avec deux hauteurs différentes, nous devons indiquer à notre vue tableau la hauteur à utiliser pour chaque cellule. Pour ce faire, ajoutez la méthode suivante sous le numberOfRowsInSection: méthode:
- (CGFloat) tableView: (UITableView *) tableView heightForRowAtIndexPath: (NSIndexPath *) indexPath if ([indexPath row] == 0) return 120; else retour 44;
Nous disons ici à notre table que notre première cellule contenant les informations sur l’album a une hauteur de 120 pixels et que toutes les autres cellules contenant les chansons de l’album ont une hauteur de 44 pixels..
Nous allons maintenant créer quatre méthodes différentes pour obtenir des informations sur l’album. Dans la première méthode, nous allons obtenir les illustrations de l'album sélectionné. Dans la deuxième méthode, nous aurons l'artiste de l'album. Dans la troisième méthode, nous aurons la durée de l'album et le nombre de chansons de l'album. Et dans la dernière méthode, nous vérifierons si les artistes des chansons de l'album sont les mêmes. Parfois, les chansons d'un album ont les mêmes artistes, mais pas toujours. Si les chansons ont des artistes différents, nous les montrons dans la table, mais si tous les artistes sont identiques, nous ne les montrerons pas car vous pouvez déjà les voir dans la première cellule..
Nous allons commencer par créer la première méthode, ajoutez donc le code suivant sous le viewDidLoad méthode:
- (UIImage *) getAlbumArtworkWithSize: (CGSize) albumSize MPMediaQuery * albumQuery = [MPMediaQuery albumsQuery]; MPMediaPropertyPredicate * albumPredicate = [MPMediaPropertyPredicate predicateWithValue: albumTitre pourProperty: MPMediaItemPropertyAlbumTitle]; [albumQuery addFilterPredicate: albumPredicate]; NSArray * albumTracks = [éléments de albumQuery]; pour (int i = 0; i < [albumTracks count]; i++) MPMediaItem *mediaItem = [albumTracks objectAtIndex:i]; UIImage *artworkImage; MPMediaItemArtwork *artwork = [mediaItem valueForProperty: MPMediaItemPropertyArtwork]; artworkImage = [artwork imageWithSize: CGSizeMake (1, 1)]; if (artworkImage) artworkImage = [artwork imageWithSize:albumSize]; return artworkImage; return [UIImage imageNamed:@"No-artwork-album.png"];
Cette méthode renverra l'image d'illustration de l'album avec une taille spécifique. Premièrement, nous vérifions chaque chanson pour voir si elle a une image d’œuvre. Nous faisons cela avec une petite taille, donc notre application sera rapide. Dès que nous trouvons une image, nous la récupérons avec la taille correcte et la renvoyons. Après cela, les méthodes s’arrêtent. Ainsi, si la première chanson contient une image d’illustration, elle renvoie cette image et s’arrête avec la méthode. Nous avons ajouté cette méthode car il arrive que toutes les chansons d'un album ne contiennent pas une image de maquette. Si la méthode n'a pas trouvé d'image, nous retournons une image par défaut..
Nous n'avons pas encore ajouté cette image par défaut. Faisons-le d'abord. Téléchargez le code source attaché à ce projet et faites glisser le [email protected] et No-artwork-album.png images dans le projet. Assurez-vous que l'option "Copier les éléments dans le dossier du groupe de destination (si nécessaire)" est cochée, puis cliquez sur "Terminer"..
Maintenant, ajoutez le code suivant pour la deuxième méthode:
- (NSString *) getAlbumArtist MPMediaQuery * albumQuery = [MPMediaQuery albumsQuery]; MPMediaPropertyPredicate * albumPredicate = [MPMediaPropertyPredicate predicateWithValue: albumTitre pourProperty: MPMediaItemPropertyAlbumTitle]; [albumQuery addFilterPredicate: albumPredicate]; NSArray * albumTracks = [éléments de albumQuery]; pour (int i = 0; i < [albumTracks count]; i++) NSString *albumArtist = [[[albumTracks objectAtIndex:0] representativeItem] valueForProperty:MPMediaItemPropertyAlbumArtist]; if (albumArtist) return albumArtist; return @"Unknown artist";
Ici, nous faisons la même chose que dans la méthode précédente, mais cette fois-ci pour l'artiste de l'album. Nous vérifions si chaque chanson a déjà un artiste d'album. S'il en a un, nous le retournons et la méthode s'arrête. Si la méthode ne trouve pas d'artiste de l'album, elle renvoie la chaîne "Artiste inconnu"..
Maintenant, ajoutez le code suivant pour notre troisième méthode:
- (NSString *) getAlbumInfo MPMediaQuery * albumQuery = [MPMediaQuery albumsQuery]; MPMediaPropertyPredicate * albumPredicate = [MPMediaPropertyPredicate predicateWithValue: albumTitre pourProperty: MPMediaItemPropertyAlbumTitle]; [albumQuery addFilterPredicate: albumPredicate]; NSArray * albumTracks = [éléments de albumQuery]; NSString * trackCount; if ([albumTracks count]> 1) trackCount = [NSString stringWithFormat: @ "% i Songs", [albumTracks count]]; else trackCount = [NSString stringWithFormat: @ "1 morceau"]; long playbackDuration = 0; for (piste MPMediaItem * dans albumTracks) playbackDuration + = [[valeur de la pisteForProperty: MPMediaItemPropertyPlaybackDuration] longValue]; int albumMimutes = (playbackDuration / 60); NSString * albumDuration; if (albumMimutes> 1) albumDuration = [NSString stringWithFormat: @ "% i Mins.", albumMimutes]; else albumDuration = [NSString stringWithFormat: @ "1 Min."]; return [chaîneNSS stringWithFormat: @ "% @,% @", trackCount, albumDuration];
Dans cette méthode, nous créons une chaîne contenant des informations sur le nombre de chansons de l'album sélectionné et sur la durée de celui-ci. Tout d'abord, nous créons notre requête et ajoutons le filtre pour le titre de l'album. Ensuite, nous créons un tableau avec les éléments de la requête. Ensuite, nous vérifions si l’album contient une ou plusieurs chansons. S'il y a une chanson, nous définissons la chaîne trackCount sur "1 Song", sinon nous fixons cette chaîne au nombre de chansons. Après cela, nous créons une variable pour la durée de l'album. Nous obtenons la durée en secondes, mais comme nous voulons les afficher en minutes, nous divisons la variable playbackDuration par 60. Une fois que cela est fait, nous vérifions si la durée de l'album est supérieure à 1 minute. Si la valeur est true, la chaîne de durée de l'album est définie sur le nombre de minutes ou sinon, elle est égale à 1 minute. Enfin, nous retournons une chaîne avec le nombre de pistes et la durée de l'album.
Maintenant que nous avons créé nos trois premières méthodes, ajoutez le code suivant pour la dernière méthode:
- (BOOL) sameArtists MPMediaQuery * albumQuery = [MPMediaQuery albumsQuery]; MPMediaPropertyPredicate * albumPredicate = [MPMediaPropertyPredicate predicateWithValue: albumTitre pourProperty: MPMediaItemPropertyAlbumTitle]; [albumQuery addFilterPredicate: albumPredicate]; NSArray * albumTracks = [éléments de albumQuery]; pour (int i = 0; i < [albumTracks count]; i++) if ([[[[albumTracks objectAtIndex:0] representativeItem] valueForProperty:MPMediaItemPropertyArtist] isEqualToString:[[[albumTracks objectAtIndex:i] representativeItem] valueForProperty:MPMediaItemPropertyArtist]]) else return NO; return YES;
Dans cette méthode, nous vérifions si l’artiste des chansons est identique ou non. Il utilise une boucle for pour vérifier si l’artiste de la première chanson est identique à l’artiste du numéro de boucle actuel. Si les valeurs de l'artiste ne sont pas égales, la méthode renvoie le booléen NON, mais si la boucle est terminée et qu'aucun des artistes n'est identique, la méthode renvoie le booléen OUI.
C'était beaucoup de code, mais cela donnerait une meilleure expérience à notre application, donc ça en vaut la peine. Pour afficher les informations de l’album et les chansons, nous devons modifier la tableView: cellForRowAtIndexPath: méthode. Allez à cette méthode et modifiez le code pour qu'il se lise comme suit:
- (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath if ([indexPath row] == 0) statique NSString * CellIdentifier = @ "InfoCell"; UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: CellIdentifier pourIndexPath: indexPath]; UIImageView * albumArtworkImageView = (UIImageView *) [cellule viewWithTag: 100]; albumArtworkImageView.image = [self getAlbumArtworkWithSize: albumArtworkImageView.frame.size]; UILabel * albumArtistLabel = (UILabel *) [cell viewWithTag: 101]; albumArtistLabel.text = [self getAlbumArtist]; UILabel * albumInfoLabel = (UILabel *) [cell viewWithTag: 102]; albumInfoLabel.text = [self getAlbumInfo]; cellule de retour; else static NSString * CellIdentifier = @ "Cell"; UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: CellIdentifier pourIndexPath: indexPath]; MPMediaQuery * albumQuery = [MPMediaQuery albumsQuery]; MPMediaPropertyPredicate * albumPredicate = [MPMediaPropertyPredicate predicateWithValue: albumTitre pourProperty: MPMediaItemPropertyAlbumTitle]; [albumQuery addFilterPredicate: albumPredicate]; NSArray * albumTracks = [éléments de albumQuery]; NSUInteger trackNumber = [[[albumTracks objectAtIndex: (indexPath.row-1)] valueForProperty: MPMediaItemPropertyAlbumTrackNumber] unsignedIntegerValue]; if (trackNumber) cell.textLabel.text = [NSString stringWithFormat: @ "% i.% @", numéro de piste, [[[albumTracks objectAtIndex: (indexPath.row-1)] représentantItem] valeurForProperty: MPMediaItemPropertyTitle]; else cell.textLabel.text = [[[albumTracks objectAtIndex: (indexPath.row-1)] representativeItem] valueForProperty: MPMediaItemPropertyTitle]; if ([self sameArtists]) cell.detailTextLabel.text = @ ""; else if [[[[[albumTracks objectAtIndex: (indexPath.row-1)]] représentantItem]] valueForProperty: MPMediaItemPropertyArtist]) cell.detailTextLabel.text = [[[albumTracks objectAtIndex: (indexPath.row-1)] : MPMediaItemPropertyArtist]; else cell.detailTextLabel.text = @ ""; return cell;
C'est une très grande méthode, mais le code n'est pas vraiment difficile. Commençons par le début.
Commencez par vérifier quelle ligne nous utilisons. Si nous utilisons la première ligne, nous voulons montrer la première cellule que nous avons créée dans notre storyboard. Comme vous pouvez le constater, nous utilisons le même CellIdentifier que celui utilisé pour la cellule de notre storyboard. Nous avons créé UIImageView et l'avons affecté à l'imageview dans la cellule avec la balise 100, ce qui est bien entendu identique à celui que nous utilisions précédemment. Après cela, nous appelons le getAlbumArtworkWithSize: méthode que nous avons créée précédemment pour obtenir la maquette d’album et mettre à jour la vue image de cette maquette. Nous avons utilisé la taille de la vue d'image pour la taille de nos œuvres. Après cela, nous faisons la même chose pour les deux labels. Pour le texte de la première étiquette, nous appelons le getAlbumArtist méthode et pour la deuxième étiquette, nous appelons la getAlbumInfo méthode.
Lorsque nous n'utilisons pas la première ligne, mais une autre, nous souhaitons afficher les chansons de l'album. Ici, nous créons d'abord une requête et ajoutons un filtre à cette requête, puis nous stockons les éléments de cette requête dans un tableau. Après cela, nous obtenons le numéro de piste dans l'album et vérifions s'il y en a un. Si un numéro de piste est disponible, nous l'ajoutons devant le titre de la chanson, sinon nous affichons simplement le titre de la chanson. Comme vous pouvez le voir, nous avons utilisé (indexpath.row-1) pour l'index des pistes. Nous faisons cela parce que la première cellule de la vue tableau est utilisée pour les informations sur l'album.
Après cela, nous vérifions si les chansons ont les mêmes artistes en appelant le mêmes artistes méthode que nous avons créée plus tôt. Si les artistes sont identiques, nous supprimons le texte de detailTextLabel de la cellule, mais si les artistes sont différents et que la piste contient un artiste, nous définissons le texte de detailTextLabel sur l'artiste de cette piste..
Enfin, nous devons mettre à jour la classe de notre contrôleur de vue de table. Ouvrez le storyboard, sélectionnez le contrôleur de vue de table créé dans ce tutoriel, ouvrez l'inspecteur d'identité et remplacez la classe par "AlbumViewController"..
Maintenant que nous avons rempli nos cellules d'informations et de chansons, je pense que le moment est venu de tester notre application. Cliquez sur Construire et exécuter pour tester l'application. Si vous accédez à l'onglet Albums et sélectionnez un album, vous devriez voir une vue sous forme de tableau avec une image d'album, des informations sur l'album et, bien sûr, sur les chansons de cet album..
Maintenant que nous avons créé une application géniale qui affiche nos chansons et nos albums, il serait bien que notre lecteur de musique puisse réellement lire ces chansons et ces albums. Ouvrez le storyboard et faites glisser un contrôleur de vue de la bibliothèque d'objets vers la zone de dessin. Nous allons utiliser ce contrôleur de vue dans le prochain tutoriel pour montrer la chanson en cours de lecture, mais nous avons déjà besoin des légendes pour jouer les pistes. Faites glisser CTRL depuis la deuxième cellule du contrôleur de vue de table créé dans ce didacticiel et sélectionnez "Pousser" dans la section "Sélection" du menu contextuel. Faites maintenant la même chose pour la cellule du contrôleur d'affichage de la table Songs..
Ouvrez SongsViewController.m et ajoutez la méthode suivante:
- (void) prepareForSegue: (UIStoryboardSegue *) identifie l'expéditeur: (id) l'expéditeur MPMediaQuery * songsQuery = [MPMediaQuery songsQuery]; NSArray * songs = [songsQuery items]; int selectedIndex = [[self.tableView indexPathForSelectedRow] row]; MPMediaItem * selectedItem = [[songs objectAtIndex: selectedIndex] representativeItem]; MPMusicPlayerController * musicPlayer = [MPMusicPlayerController iPodMusicPlayer]; [musicPlayer setQueueWithItemCollection: [MPMediaItemCollection collectionWithItems: [songsQuery items]]]; [musicPlayer setNowPlayingItem: selectedItem]; [musicPlayer play];
Nous avons déjà utilisé cette méthode dans ce tutoriel, mais cette fois-ci, nous l’utilisons pour lire une piste sélectionnée. Premièrement, nous créons une requête pour nos chansons et mettons les éléments dans un tableau. Ensuite, nous obtenons un MPMediaItem à partir du tableau que nous avons créé. Nous avons utilisé le même index que la ligne sélectionnée, nous pouvons donc utiliser ce MPMediaItem plus tard dans cette méthode pour mettre à jour l'élément en cours de lecture. Après cela, nous créons un objet MPMusicPlayerController et le définissons sur un iPodMusicPlayer. Cela signifie que notre application partage l'état de l'iPod et que si nous la quittons, la musique continue de jouer. Ensuite, nous mettons à jour la file d'attente du lecteur de musique avec les éléments de la requête et définissons l'élément en cours de lecture sur MPMediaItem que nous avons créé précédemment dans cette méthode. Enfin, nous commençons à jouer de la musique.
Ouvrez maintenant AlbumViewController.m et ajoutez la méthode suivante:
- (void) prepareForSegue: (UIStoryboardSegue *) identifie l'expéditeur: (id) l'expéditeur MPMediaQuery * albumQuery = [MPMediaQuery albumsQuery]; MPMediaPropertyPredicate * albumPredicate = [MPMediaPropertyPredicate predicateWithValue: albumTitre pourProperty: MPMediaItemPropertyAlbumTitle]; [albumQuery addFilterPredicate: albumPredicate]; NSArray * albumTracks = [éléments de albumQuery]; int selectedIndex = [[self.tableView indexPathForSelectedRow] row]; MPMediaItem * selectedItem = [[albumTracks objectAtIndex: selectedIndex-1] representativeItem]; MPMusicPlayerController * musicPlayer = [MPMusicPlayerController iPodMusicPlayer]; [musicPlayer setQueueWithItemCollection: [MPMediaItemCollection collectionWithItems: [éléments albumQuery]]]; [musicPlayer setNowPlayingItem: selectedItem]; [musicPlayer play];
Ici, nous faisons la même chose que dans la méthode que nous avons créée dans SongsViewController.m, mais nous définissons la file d'attente du lecteur de musique sur l'album sélectionné..
Maintenant, notre application peut jouer les chansons, cliquez sur Build & Run pour tester cette application!
Dans cette deuxième partie de la série sur la création d'un lecteur de musique, nous avons expliqué comment créer une cellule personnalisée pour une table avec un story-board, comment utiliser MPMediaPropertyPredicate et comment lire les chansons et les albums que nous affichons dans notre application. Dans la prochaine et dernière partie de la série, nous allons créer l'écran en cours de lecture et créer une interface personnalisée pour notre application..
Accentsconagua