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 le premier des trois didacticiels d'une série pas à pas sur la création d'un lecteur de musique personnalisé avec le cadre MediaPlayer. Dans un précédent tutoriel sur Mobiletuts +, j'ai montré comment accéder à une bibliothèque de musique de périphérique iOS au sein de votre propre application. Cette série Tuts + Premium se concentrera sur la création d’un lecteur beaucoup plus complexe doté d’une interface personnalisée. Dans cette première série, nous allons créer le projet et afficher une liste des chansons et des albums de l'utilisateur..
REMARQUE: Afin de tester cette application, vous aurez besoin d'un appareil iOS physique. Vous devez également être membre du programme de développeur iOS payant pour déployer l'application de démonstration sur votre appareil à des fins de test..
Ouvrez Xcode et sélectionnez "Créer un nouveau projet Xcode". Sélectionnez "Application vide" et cliquez sur "Suivant". Entrez un nom pour votre projet (j'ai appelé le mien "Musique") et assurez-vous de bien sélectionner l'iPhone pour la famille d'appareils et de cocher toutes les cases à cocher, à l'exception de la case à cocher "Utiliser les données de base". Après cela, cliquez sur "Suivant" et choisissez un emplacement pour enregistrer votre projet, puis cliquez sur "Créer".
Nous souhaitons uniquement utiliser notre application en mode portrait. Pour ce faire, accédez à la section Orientations de l'interface prise en charge et désélectionnez les orientations Paysage..
Allez dans l'onglet "Build Phases" et utilisez l'option "Link Binary With Libraries". Cliquez sur le bouton "+" pour ajouter un nouveau cadre. Tapez "MediaPlayer" dans le champ de recherche et sélectionnez le MediaPlayer.framework option qui apparaît dans la liste. Cliquez sur "Ajouter" pour inclure ce cadre dans la phase de liaison de votre projet..
Allez dans "Fichier"> "Nouveau"> "Fichier ..." ou appuyez sur N pour créer un nouveau fichier. Allez dans la section "Utiliser l'interface", sélectionnez "Scénarimage et cliquez sur" Suivant. Assurez-vous que la famille de périphériques est définie sur iPhone, puis cliquez à nouveau sur "Suivant". Nommez votre scénariste MainStoryboard et cliquez sur "Créer"..
«Nous devons maintenant relier le storyboard à notre projet. Sélectionnez le nom du projet dans le menu du navigateur de Xcode et sélectionnez la cible actuelle (dans notre cas, "Musique"). Ensuite, sélectionnez l'onglet "Summery" et allez à la section "iPhone / iPad Deployment Info". Une fois là-bas, sélectionnez notre scénario appelé "MainStoryboard" pour le scénario principal..
Ouvrez le storyboard et faites glisser un UITabBarController de la bibliothèque d'objets à la toile. Comme vous pouvez le constater, les écrans sont déjà dans la résolution de l’iPhone 5. Bien entendu, l'application fonctionnera également sur les anciens iPhone, car elle sera automatiquement réduite. Supprimez maintenant les deux contrôleurs de vue connectés et faites glisser deux contrôleurs de navigation de la bibliothèque d'objets vers la zone de dessin. CTRL glisser de la UITabBarController l’un des contrôleurs de navigation et sélectionnez "Afficher les contrôleurs" dans le menu contextuel. Faites de même pour l'autre contrôleur de navigation.
Sélectionnez le UITabBarItem de l’un des contrôleurs de navigation et remplacez son titre par "Songs". Changez également le titre de la barre de navigation de ce contrôleur de navigation en "Morceaux". Encore une fois, faites la même chose pour l'autre contrôleur de navigation, mais cette fois, changez les titres en "Albums"..
La dernière chose à faire, pour que notre interface fonctionne, est de changer la Application: didFinishLaunchWithOptions: méthode, ouvrez AppDelegate.m et modifiez la méthode comme suit:
- (BOOL) application: (UIApplication *) application didFinishLaunchingWithOptions: (NSDictionary *) launchOptions return YES;
Maintenant que nous avons créé notre interface, testons l'application. Cliquez sur Construire et exécuter ou appuyez sur ⌘R pour tester l'application. L'application devrait montrer un UITabBarController avec deux onglets, appelés chansons et albums.
Allez dans "Fichier"> "Nouveau"> "Fichier…" pour créer un nouveau fichier. Cette fois, allez dans la section Cocoa Touch et sélectionnez "Classe Objective-C". Cliquez sur "Suivant", entrez "SongsViewController" 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 sélectionnées. Cliquez à nouveau sur "Suivant" puis sur "Créer".
Ouvrez SongsViewController.h et ajoutez la ligne suivante sous #importation pour ajouter le framework MediaPlayer:
#importation
Maintenant, ouvrez SongsViewController.m et modifiez le numberOfSectionsInTableView: et le tableView: numberOfRowsInSection: méthode comme suit:
- (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView return 1; - (NSInteger) tableView: (UITableView *) numéro de la tableViewViewOfRowsInSection: (NSInteger) section MPMediaQuery * songsQuery = [MPMediaQuery songsQuery]; NSArray * songs = [songsQuery items]; retourner [nombre de chansons];
Dans la première méthode, on dit aux UITableView que nous voulons une section. Dans la deuxième méthode, nous indiquons à la vue table que nous voulons que le nombre de lignes soit identique au nombre de chansons de la bibliothèque iPod des utilisateurs. Nous y parvenons avec un MPMediaQuery. Une requête multimédia spécifie un ensemble d’éléments multimédias de la bibliothèque iPod de l’utilisateur. Une requête multimédia comprend un certain nombre de constructeurs ayant chacun un type de regroupement. Nous avons utilisé la méthode songsQuery pour créer ou interroger. Le type de regroupement de cette requête est automatiquement défini sur MPMediaGroupingTitle, ce qui bien sûr regroupe les pistes en fonction de leur titre. Les constructeurs suivants sont disponibles dans la classe MPMediaQuery:
Et vous pouvez les regrouper avec les types de regroupement suivants:
Après avoir créé notre requête, nous obtenons les éléments multimédias de cette requête et les stockons dans un tableau appelé "chansons"..
Allez maintenant au tableView: cellForRowAtIndexPath: et modifiez le code pour lire comme suit:
- (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath statique NSString * CellIdentifier = @ "Cell"; UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: CellIdentifier pourIndexPath: indexPath]; // Configurez la cellule… 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]; cellule de retour;
Ici, nous insérons les titres des chansons et l'artiste dans les cellules. Tout d’abord, nous créons un sonSquery et nous obtenons des éléments, comme dans le tableView: numberOfRowsInSection: méthode. Après cela, nous créons un MPMediaItem à partir des éléments sonsQuery. Enfin, nous définissons le texte des cellules textLabel et detailTextLabel sur le titre et l'artiste de l'élément multimédia..
Maintenant que nous avons terminé notre code pour SongsViewController, ouvrez le story-board, accédez au contrôleur de navigation Songs et sélectionnez la cellule d'affichage de la table. Ouvrez l'inspecteur d'attributs, définissez l'identifiant sur Cell et modifiez le style de "Personnalisé" à "Sous-titre"..
Enfin, sélectionnez le contrôleur TableView, ouvrez l'inspecteur d'identité et définissez la classe sur SongsViewController, nous venons de créer.
Maintenant que nous avons terminé SongsViewController et que nous pouvons voir les chansons des utilisateurs dans notre application, je pense que le moment est venu de tester à nouveau notre application. Cliquez sur Build and Run et vous devriez voir vos chansons dans la table.
Pour l'onglet Albums, nous pouvons démarrer de la même manière que pour l'onglet Chansons. Allez dans "Fichier"> "Nouveau"> "Fichier ..." pour créer un nouveau fichier. Sélectionnez "Classe Objective-C" et cliquez sur "Suivant". Cette fois, entrez "AlbumsViewController" 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 AlbumsViewController.h et ajoutez la ligne suivante sous #importation pour ajouter le framework MediaPlayer:
#importation
Maintenant, ouvrez SongsViewController.m et modifiez le numberOfSectionsInTableView: et le tableView: numberOfRowsInSection: méthodes comme suit:
- (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView return 1; - (NSInteger) tableView: (UITableView *) table numéroViewOfRowsInSection: section (NSInteger) MPMediaQuery * albumsQuery = [MPMediaQuery albumsQuery]; NSArray * albums = [albumsQuery collections]; return [albums count];
La première méthode est la même que celle utilisée pour l'onglet Chansons, mais la deuxième méthode est légèrement différente. Ici, nous avons créé une requête d'albums et nous avons utilisé le nombre de collections de cette requête..
Dans l'onglet des albums, nous allons également montrer les illustrations des albums. Le problème est qu’il n’ya pas toujours des illustrations disponibles, nous devons donc fournir une illustration par défaut pour cette situation. Téléchargez le code exemple attaché à ce projet et faites glisser le No-artwork-albums.png et [email protected] images dans votre 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"..
«Allez maintenant au tableView: cellForRowAtIndexPath: et modifiez le code pour lire comme suit:
- (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath statique NSString * CellIdentifier = @ "Cell"; UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: CellIdentifier pourIndexPath: indexPath]; // Configurez la cellule… MPMediaQuery * albumsQuery = [MPMediaQuery albumsQuery]; NSArray * albums = [albumsQuery collections]; 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 = [oeuvre imageWithSize: CGSizeMake (44, 44)]; if (artworkImage) cell.imageView.image = artworkImage; else cell.imageView.image = [UIImage imageNamed: @ "No-artwork-albums.png"]; cellule de retour;
Le début de cette méthode est presque identique à celui de SongsViewController. Nous créons d’abord un albumQuery et nous obtenons ses collections, comme dans le tableView: numberOfRowsInSection: méthode. Ensuite, nous créons un MPMediaItem à partir de la collection sonsQuery. Comme vous pouvez le constater, nous devons utiliser la propriété representiveItem pour recevoir le média. En effet, le tableau d'albums contient une liste de MPMediaItemCollections au lieu de MPMediaItems. MPMediaItemCollection est un ensemble trié d'éléments multimédias (MPMediaItems) de la bibliothèque iPod de l'utilisateur. Ensuite, nous définissons le texte des cellules textLabel et detailTextLabel sur le nom d'album et l'élément d'artiste des éléments multimédias. Nous obtenons enfin les illustrations des albums. Si des illustrations sont disponibles, nous les utilisons et sinon, nous montrons l'image que nous venons d'ajouter au projet..
Nous avons également terminé notre code pour AlbumsViewController, ouvrez le storyboard, accédez au contrôleur de navigation Albums et sélectionnez la cellule d'affichage du tableau. Ouvrez l'inspecteur d'attributs, définissez l'identifiant sur Cell et modifiez le style de "Personnalisé" à "Sous-titre"..
Enfin, sélectionnez le contrôleur TableView, ouvrez l'inspecteur d'identité et définissez la classe sur AlbumsViewController, nous venons de créer.
Maintenant, notre application affiche également les albums des utilisateurs dans l'onglet Albums de l'application, cliquez sur Construire et exécuter pour tester l'application..
Dans cette première partie du didacticiel, nous avons expliqué comment créer une nouvelle application à partir de zéro avec un storyboard et comment charger les chansons et les albums de la bibliothèque iPod d'un utilisateur dans une interface utilisateur personnalisée. Dans la partie suivante, nous allons continuer avec la section albums et apprendre à jouer les pistes..
Accentsconagua