Desarrollar un reproductor de música para iOS: UI Theming

Spanish (Español) translation by CYC (you can also view the original English article)

Esta serie de tutoriales en tres partes le enseñará cómo construir un reproductor de música personalizado con el SDK de iOS. Sigue leyendo

Formato de serie:

Bienvenido a la tercera y última parte de esta serie de tutoriales sobre la creación de un reproductor de música personalizado con el SDK de iOS. En esta última entrega, terminaremos nuestra pantalla de reproducción y le daremos a nuestra aplicación un diseño personalizado con el Protocolo de Apariencia UIA . Una vez que finalice nuestro reproductor de música, se verá como el iPod predeterminado de iOS 6.

Paso 1: Añadiendo las imágenes

Descargue el código fuente adjunto a este proyecto y arrastre todas las imágenes de la carpeta titulada Imágenes Parte 3 al proyecto. Asegúrese de que la opción "Copiar elementos en la carpeta del grupo de destino (si es necesario)" esté marcada y haga clic en "Finalizar".

Paso 2: Diseña la pantalla de reproducción actual

Abra el Guión gráfico y seleccione el Controlador de vista (no la vista). Abra el inspector de atributos y seleccione la casilla de verificación "Ocultar barra inferior en empujar". También cambie la barra inferior en la sección Métricas simuladas de "Inferido" a "Ninguno". Ahora selecciona la vista y dale un fondo negro. Si está listo para eso, arrastre una vista de imagen desde la Biblioteca de objetos en la vista y configure el Modo de "Escala para rellenar" a "Ajuste de aspecto". Con estas opciones configuradas, las ilustraciones del álbum no se estirarán para ajustarse a la vista de la imagen. Ahora abra el inspector de tamaño y cambie su tamaño a 320 por 320 píxeles. También modifique el autoresizing como sigue:

Con esta configuración de tamaño automático, la imagen se mantendrá en la parte superior de la vista y no se estirará en un iPhone con una pantalla Retina de 3.5 ". Ahora arrastre otra vista de imagen a la vista actual y modifique las opciones de tamaño para que luzcan como sigue:

Con estas opciones de tamaño, la vista de la imagen se mantendrá en la parte inferior de la pantalla. Ajustamos esta opción de tamaño automático para que nuestro reproductor de música se vea bien en el nuevo iPhone 5, pero también en un iPhone o iPod touch más antiguo. Ahora abra el inspector de atributos y configure la imagen en "Music-controls-background.png".

Ahora que hemos creado el fondo para los controles, creamos los controles. Primero arrastre un control deslizante desde la Biblioteca de objetos sobre la vista de imagen que acabamos de crear. Cambie la configuración de tamaño automático, para que se vean igual que la vista de imagen de los controles. Después de eso, asigne al control deslizante un tamaño de 228 por 23 píxeles, establezca la X en 46 y establezca la Y en 470. Ahora abra el inspector de Atributos y configure el "Tinte de pista mínimo" a un color muy oscuro, por lo que es casi negro. Puede dejar el "Max Track Tint" por defecto.

Arrastre tres botones desde la Biblioteca de objetos sobre la vista de imagen de los controles, cambie su tipo a "Personalizado", elimine el texto y seleccione la casilla de verificación "Mostrar toque en resaltado". Establezca la imagen del primer botón en Previous-icon.png , la imagen del segundo botón en Play-icon.png y la imagen del tercer botón en Next-icon.png . Ahora abra el inspector de tamaño y cambie la configuración de tamaño automático para que sean iguales a las del control deslizante. Ahora cambie el tamaño y la posición de los botones de la siguiente manera:

Botón 1: ancho: 106 altura: 47 X: 0 Y: 408
Botón 2: ancho: 108 altura: 47 X: 106 Y: 408
Botón 3: ancho: 106 altura: 47 X: 214 Y: 408

Ahora la interfaz de la pantalla que se está reproduciendo debería tener el siguiente aspecto:

Lo último que debemos hacer para diseñar la pantalla que se está reproduciendo ahora es agregar tres etiquetas para la información de la canción. Primero, arrastre una vista desde la Biblioteca de objetos sobre la barra de navegación. Cambie el fondo a "Borrar color", establezca el ancho en 196 píxeles y la altura en 36 píxeles. La X y la Y deberían ajustarse automáticamente. Esta vista contendrá las 3 etiquetas para los nombres de artista, título y álbum de la canción. Ahora arrastre tres etiquetas a la vista que acabamos de agregar. Borre el texto, establezca la alineación en el centro y cambie la fuente a "Sistema 12.0" de todas las etiquetas. Ahora cambie el tamaño y la posición de las etiquetas de la siguiente manera:

Etiqueta 1: ancho: 196 altura: 12 X: 0 Y: 0
Etiqueta 2: ancho: 196 altura: 12 X: 106 Y: 12
Etiqueta 3: ancho: 196 altura: 12 X: 214 Y: 24

Por fin, seleccione la segunda etiqueta y cambie la fuente a "System Bold 12.0". Esta etiqueta será para el título de las canciones, por lo que con una fuente en negrita será más prominente.

Ahora que hemos terminado el diseño estándar de nuestra pantalla de reproducción, creo que es un buen momento para probar nuestra aplicación. Haga clic en Construir y Ejecutar para probar la aplicación. Reproduce una canción para ir a la pantalla de reproducción actual. Deberías poder ver los controles, pero por supuesto no funcionarán.

Paso 3: Haciendo los Outlets y Acciones

Para que nuestra pantalla de reproducción actual funcione, primero debemos crear algunos archivos nuevos. Vaya a "Archivo"> "Nuevo"> "Archivo ..." para crear un nuevo archivo. Seleccione "Clase de Objective-C" y luego haga clic en "Siguiente". Ingrese "NowPlayingViewController" para la clase y asegúrese de que sea una subclase de UIViewController y que las dos casillas de verificación no estén seleccionadas. Haga clic en "Siguiente" de nuevo y luego haga clic en "Crear".

Abra NowPlayingViewController.h y modifique el código para que lea como sigue:

#import <UIKit/UIKit.h>
#import <MediaPlayer/MediaPlayer.h>

@interface NowPlayingViewController : UIViewController
{
    
    MPMusicPlayerController *musiPlayer;
    
    IBOutlet UIImageView *artworkImageView;
    
    IBOutlet UIButton *playPauseButton;
    IBOutlet UISlider *volumeSlider;
    
    IBOutlet UILabel *artistLabel;
    IBOutlet UILabel *titleLabel;
    IBOutlet UILabel *albumLabel;
    
    
}

@property (nonatomic, retain) MPMusicPlayerController *musicPlayer;

- (IBAction)playPause:(id)sender;
- (IBAction)nextSong:(id)sender;
- (IBAction)previousSong:(id)sender;
- (IBAction)volumeSliderChanged:(id)sender;

- (void) registerMediaPlayerNotifications;

@end

Aquí primero importamos el marco de MediaPlayer, luego creamos un objeto MPMusicPlayerController que usaremos para controlar la música. Después de eso, creamos algunos puntos de venta para los elementos de la interfaz y, por último, creamos las acciones.

Ahora abre el Guión gráfico y selecciona el Controlador de vistas. Abra el inspector de identidad y cambie la clase al NowPlayingViewController que acabamos de crear. Luego abra el Inspector de conexiones y conecte los enchufes de la siguiente manera:

Conecte la salida de albumLabel a la primera etiqueta en la barra de navegación.
Conecte la salida artistLabel a la tercera etiqueta en la barra de navegación.
Conecte la salida artworkImageView para ampliar la vista de la imagen.
Conecte la salida playPauseButton al botón con el icono de reproducción.
Conecte la salida titleLabel a la segunda etiqueta en la barra de navegación.
Conecte la salida volumeSlider al control deslizante.

Ahora conecta las acciones de la siguiente manera:

Arrastre desde el siguiente símbolo: acción hasta el botón con el siguiente ícono y seleccione "Retocar el interior" en el menú emergente.
Arrastre desde la acción playPause: al botón con el ícono play y seleccione "Retocar el interior" en el menú emergente.
Arrastre desde la acción anteriorSong: al botón con el ícono anterior y seleccione "Retocar el interior" en el menú emergente.
Arrastre desde la acción volumeSliderChanged: al control deslizante y seleccione "Valor modificado" en el menú emergente.

Paso 4: Actualizar la interfaz de usuario al cargar

Ahora que hemos configurado nuestros puntos de venta y acciones, abra NowPlayingViewController.m y agregue la siguiente línea en @implementation NowPlayingViewController :

1	@synthesize musicPlayer;

A continuación, vaya al método viewDidLoad y modifique el código para que lea como sigue:

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    
    musicPlayer = [MPMusicPlayerController iPodMusicPlayer];
    [self registerMediaPlayerNotifications];
    
    
    UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle:@"Back" style:UIBarButtonItemStyleBordered target:self action:@selector(back)];
    self.navigationItem.leftBarButtonItem = backButton;
    
    
    artistLabel.textColor = [UIColor colorWithRed:0.278 green:0.278 blue:0.278 alpha:1.0];
    artistLabel.shadowColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];
    artistLabel.shadowOffset = CGSizeMake(0, 1);
    
    titleLabel.textColor = [UIColor colorWithRed:0.278 green:0.278 blue:0.278 alpha:1.0];
    titleLabel.shadowColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];
    titleLabel.shadowOffset = CGSizeMake(0, 1);
    
    albumLabel.textColor = [UIColor colorWithRed:0.278 green:0.278 blue:0.278 alpha:1.0];
    albumLabel.shadowColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];
    albumLabel.shadowOffset = CGSizeMake(0, 1);
}

Aquí primero configuramos nuestro controlador de reproductor de música a un iPodMusicPlayer. Básicamente, esto significa que nuestra aplicación comparte el estado del iPod y si abandonamos nuestra aplicación, la música continuará reproduciéndose. Nuestra aplicación también tendrá el modo de reproducción aleatoria y repetición.

El applicationMusicPlayer es el otro tipo. Este reproductor de música reproduce la música localmente dentro de su aplicación. Su reproductor de música puede tener un elemento de reproducción diferente a la aplicación iPod incorporada. Al salir de la aplicación, la música deja de reproducirse. Después de eso, llamamos al método registerForMediaPlayerNotifications , donde registraremos tres observadores para las notificaciones del reproductor multimedia. Vamos a crear ese método más adelante en este tutorial. A continuación, creamos un elemento del botón de la barra con el título "Atrás" y lo convertimos en el elemento del botón de la barra izquierda. Hacemos esto porque un botón de retroceso predeterminado tendrá el título del controlador de vista anterior y puede ser un título largo, que no queremos para la pantalla de reproducción actual. Por fin, cambiamos el color de las etiquetas y le damos una sombra.

A continuación, agregue los siguientes métodos en la sección viewDidLoad :

- (void) back
{
    [self.navigationController popViewControllerAnimated:YES];
}

- (void) viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:YES];
    
    // update control button
  
	if ([musicPlayer playbackState] == MPMusicPlaybackStatePlaying) {
        
        [playPauseButton setImage:[UIImage imageNamed:@"Pause-icon.png"] forState:UIControlStateNormal];
	} else {
        [playPauseButton setImage:[UIImage imageNamed:@"Play-icon.png"] forState:UIControlStateNormal];
    }
    
    
    // Update volume slider
    
    [volumeSlider setValue:[musicPlayer volume]];
    
    
    // Update now playing info
    
    MPMediaItem *currentItem = [musicPlayer nowPlayingItem];
    
    MPMediaItemArtwork *artwork = [currentItem valueForProperty: MPMediaItemPropertyArtwork];
    UIImage *artworkImage = [artwork imageWithSize: CGSizeMake (320, 320)];
    
    if (!artworkImage) {
        artworkImage = [UIImage imageNamed:@"No-artwork.png"];
    }
    
    [artworkImageView setImage:artworkImage];
    
    
    NSString *titleString = [currentItem valueForProperty:MPMediaItemPropertyTitle];
    if (titleString) {
        titleLabel.text = titleString;
    } else {
        titleLabel.text = @"Unknown title";
    }
    
    NSString *artistString = [currentItem valueForProperty:MPMediaItemPropertyArtist];
    if (artistString) {
        artistLabel.text = artistString;
    } else {
        artistLabel.text = @"Unknown artist";
    }
    
    NSString *albumString = [currentItem valueForProperty:MPMediaItemPropertyAlbumTitle];
    if (albumString) {
        albumLabel.text = albumString;
    } else {
        albumLabel.text = @"Unknown album";
    }
    
}

Cuando se presiona el botón Atrás, se llama al primer método y se abrirá el controlador de vista con una animación. El segundo método se llama cada vez que aparece la vista. Utilizamos estos métodos para actualizar nuestra interfaz y la información sobre la pista de reproducción actual. Primero, actualizamos el botón de reproducción / pausa verificando si la música se está reproduciendo. A continuación, establecemos el valor del control deslizante en el volumen actual del reproductor de música. Después de eso actualizamos la vista de imagen de la obra. Si la canción actual no tiene ilustraciones, mostramos una imagen de ilustraciones predeterminada. Finalmente, creamos una NSString para almacenar el título del elemento actual, que es el elemento que se está reproduciendo. Si el elemento currentItem tiene un título, establecemos la etiqueta de título en ese título, pero si no, establecemos el título en "Título desconocido". Hacemos lo mismo para el artista y el álbum.

Paso 5: Notificación de MediaPlayer

Agregue el siguiente método bajo los métodos que acabamos de crear:

- (void) registerMediaPlayerNotifications
{
    NSNotificationCenter *notificationCenter = [NSNotificationCenter defaultCenter];
    
	[notificationCenter addObserver: self
						   selector: @selector (handle_NowPlayingItemChanged:)
							   name: MPMusicPlayerControllerNowPlayingItemDidChangeNotification
							 object: musicPlayer];
	
	[notificationCenter addObserver: self
						   selector: @selector (handle_PlaybackStateChanged:)
							   name: MPMusicPlayerControllerPlaybackStateDidChangeNotification
							 object: musicPlayer];
    
    [notificationCenter addObserver: self
						   selector: @selector (handle_VolumeChanged:)
							   name: MPMusicPlayerControllerVolumeDidChangeNotification
							 object: musicPlayer];
    
	[musicPlayer beginGeneratingPlaybackNotifications];
}

Este es el método que llamamos en el método viewDidLoadque cambiamos antes. Aquí, registramos tres observadores para las notificaciones del reproductor de medios. El primero es para el MPMusicPlayerControllerNowPlayingItemDidChangeNotification. Usaremos este método para actualizar la información actual del elemento multimedia. El segundo es para el MPMusicPlayerControllerPlaybackStateDidChangeNotification. También utilizamos este para actualizar la interfaz de usuario y para abrir el controlador de vista si el reproductor de música se detuvo. El tercero y el último es para el MPMusicPlayerControllerVolumeDidChangeNotification. Usaremos este para actualizar el valor actual del control deslizante.

Siempre que registre un observador, también debe asegurarse de eliminarlo en didReceiveMemoryWarning , así que vaya a ese método y modifíquelo para que lea como sigue:

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    
    [[NSNotificationCenter defaultCenter] removeObserver: self
													name: MPMusicPlayerControllerNowPlayingItemDidChangeNotification
												  object: musicPlayer];
	
	[[NSNotificationCenter defaultCenter] removeObserver: self
													name: MPMusicPlayerControllerPlaybackStateDidChangeNotification
												  object: musicPlayer];
    
    [[NSNotificationCenter defaultCenter] removeObserver: self
													name: MPMusicPlayerControllerVolumeDidChangeNotification
												  object: musicPlayer];
    
	[musicPlayer endGeneratingPlaybackNotifications];
}

A continuación, agregue el siguiente código bajo el método registerMediaPlayerNotifications :

- (void) handle_NowPlayingItemChanged: (id) notification
{
    
    if ([musicPlayer playbackState] != MPMusicPlaybackStateStopped) {
        MPMediaItem *currentItem = [musicPlayer nowPlayingItem];
        
        MPMediaItemArtwork *artwork = [currentItem valueForProperty: MPMediaItemPropertyArtwork];
        UIImage *artworkImage = [artwork imageWithSize: CGSizeMake (320, 320)];
        
        if (!artworkImage) {
            artworkImage = [UIImage imageNamed:@"No-artwork.png"];
        }
        
        [artworkImageView setImage:artworkImage];
        
         NSString *titleString = [currentItem valueForProperty:MPMediaItemPropertyTitle];
         if (titleString) {
             titleLabel.text = titleString;
         } else {
             titleLabel.text = @"Unknown title";
         }
         
         NSString *artistString = [currentItem valueForProperty:MPMediaItemPropertyArtist];
         if (artistString) {
             artistLabel.text = artistString;
         } else {
             artistLabel.text = @"Unknown artist";
         }
         
         NSString *albumString = [currentItem valueForProperty:MPMediaItemPropertyAlbumTitle];
         if (albumString) {
             albumLabel.text = albumString;
         } else {
             albumLabel.text = @"Unknown album";
         }

    }
}

Este método responderá a la notificación MPMusicPlayerControllerNowPlayingItemDidChangeNotification. El código que usamos para este método ya debería estar familiarizado, ya que casi usamos el mismo código para el método viewWillAppear . Lo único que agregamos aquí es la primera sentencia if. En esa declaración if, verificamos si el reproductor de música no está detenido, por lo que el código solo se ejecutará cuando el reproductor de música esté en reproducción o en pausa. Hacemos esto porque cuando el reproductor de música se detiene, el controlador de vista se abrirá con una animación y todavía queremos ver la información sobre la última pista reproducida cuando la animación está ocupada.

Agregue el siguiente código bajo el método handle_NowPlayingItemChanged :

- (void) handle_PlaybackStateChanged: (id) notification
{
    MPMusicPlaybackState playbackState = [musicPlayer playbackState];
	
	if (playbackState == MPMusicPlaybackStatePaused) {
        [playPauseButton setImage:[UIImage imageNamed:@"Play-icon.png"] forState:UIControlStateNormal];
        
        
	} else if (playbackState == MPMusicPlaybackStatePlaying) {
        [playPauseButton setImage:[UIImage imageNamed:@"Pause-icon.png"] forState:UIControlStateNormal];
        
	} else if (playbackState == MPMusicPlaybackStateStopped) {
        
        [playPauseButton setImage:[UIImage imageNamed:@"Play-icon.png"] forState:UIControlStateNormal];
		[musicPlayer stop];
    
        [self.navigationController popViewControllerAnimated:YES];
        
	}
    
}

Este método responderá a la notificación MPMusicPlayerControllerPlaybackStateDidChangeNotification. Aquí comprobamos el estado del reproductor de música y actualizamos la imagen del botón PlayPauseButton. Como puede ver, detenemos el reproductor de música si el estado es MPMusicPlaybackStateStopped . Hacemos esto para asegurarnos de que el reproductor de música reproduzca su cola desde el principio. También abrimos el controlador de vista cuando el reproductor de música se detiene, para que el usuario pueda seleccionar una nueva canción para reproducir.

Por último, agregue el siguiente código bajo el método handle_PlaybackStateChanged :

1	- (void) handle_VolumeChanged: (id) notification
2	{
3	[volumeSlider setValue:[musicPlayer volume]];
4	}

Este método responderá a la notificación MPMusicPlayerControllerVolumeDidChangeNotification. Aquí actualizamos el control deslizante de volumen al volumen del reproductor de música. Hacemos esto porque también podemos ajustar el volumen con los botones de hardware.

Paso 6: Hacer que los controles funcionen

Agregue el siguiente código en la sección didReceiveMemoryWarning :

- (IBAction)playPause:(id)sender
{    
    if ([musicPlayer playbackState] == MPMusicPlaybackStatePlaying) {
        [musicPlayer pause];
        
    } else {
        [musicPlayer play];
    }
}

- (IBAction)nextSong:(id)sender
{
    [musicPlayer skipToNextItem];
}

- (IBAction)previousSong:(id)sender
{
    [musicPlayer skipToPreviousItem];
}

- (IBAction)volumeSliderChanged:(id)sender
{
    [musicPlayer setVolume:volumeSlider.value];
}

En la primera acción, comprobamos si el reproductor de música está reproduciendo. Si se está reproduciendo, haremos una pausa en el reproductor de música. Si no está tocando, empezamos por tocar la música.

En la segunda acción, dejamos que el reproductor de música salte al siguiente elemento y en la tercera acción dejamos que el reproductor de música salte al elemento anterior.

En la cuarta y última acción, configuramos el volumen del reproductor de música al valor del control deslizante.

La pantalla de reproducción actual está completa. A continuación, probemos nuestra aplicación antes de comenzar a darle a nuestro reproductor de música un diseño personalizado. Haga clic en Construir y Ejecutar para probar la aplicación. Ahora todos los controles en la pantalla de reproducción actual deberían funcionar y debería ver la información sobre la pista actual. Las etiquetas ahora son bastante feas, pero se verán muy bien con nuestro diseño personalizado.

Paso 7: Hacer que la barra de estado sea negra

En iOS 6, la barra de estado es por defecto el mismo color que la barra de navegación. Debido a que nuestro reproductor de música tendrá un diseño que se parece al iPod incorporado, cambiaremos la barra de estado a negro.

En el área del navegador, seleccione el nombre del proyecto (en caso de "Música"). A continuación, seleccione el objetivo actual ("Música" aquí nuevamente), y luego seleccione la pestaña "Resumen". Desplácese hasta la "Información de implementación del iPhone / iPod" y luego vaya a las opciones de la "Barra de estado". Cambie el estilo de "Predeterminado" a "Opaco negro" y ahora nuestra barra de estado es negra.

Paso 8: Personalizando la barra de navegación

Desde el lanzamiento de iOS, puede personalizar ciertos aspectos de los componentes UIKit estándar con el Protocolo de Apariencia UIA. Usaremos esto para establecer una imagen de fondo personalizada para nuestra barra de navegación y para cambiar sus propiedades de texto.

Abra AppDelegate.m y agregue el siguiente código debajo de la aplicación: didFinishWithLaunchingOptions:método:

- (void) createCustomUI
{    
    UIImage *navBarImage = [UIImage imageNamed:@"Navigation-bar.png"];
    [[UINavigationBar appearance] setBackgroundImage:navBarImage forBarMetrics:UIBarMetricsDefault];
    
    [[UINavigationBar appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                          [UIColor colorWithRed:0.278 green:0.278 blue:0.278 alpha:1.0],
                                                          UITextAttributeTextColor,
                                                          [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0],
                                                          UITextAttributeTextShadowColor,
                                                          [NSValue valueWithUIOffset:UIOffsetMake(0, 1)],
                                                          UITextAttributeTextShadowOffset,
                                                          nil]];


}

Aquí estamos configurando navBarImage como una imagen de fondo predeterminada para todas las barras de navegación. Después de eso, actualizamos el color del texto, el color de la sombra del texto y el desplazamiento de la sombra del texto para todas las barras de navegación.

Ahora vaya a la aplicación: didFinishWithLaunchingOptions: método y modifíquelo para que lea como sigue:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [self createCustomUI];
    
    return YES;
}

Aquí acabamos de añadir [self createCustomUI]; para llamar al método createCustomUI .

Construye y ejecuta la aplicación. Todas las barras de navegación ahora deben ser grises con un título gris oscuro. Si vas a la sección de álbumes y seleccionas un álbum, verás que el botón Atrás sigue siendo azul. Vamos a arreglar esto en un momento.

Vaya al método createCustomUI y agregue el siguiente código:

    UIImage *backButton = [[UIImage imageNamed:@"Nav-bar-back-button.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 6)];
    [[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButton forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
    
    UIImage *backButtonHighlited = [[UIImage imageNamed:@"Nav-bar-back-button-highlited.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 6)];
    [[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonHighlited forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];
    
    UIImage *navButton = [[UIImage imageNamed:@"Nav-button.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 6, 0, 6)];
    [[UIBarButtonItem appearance] setBackgroundImage:navButton forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
    
    UIImage *navButtonHighlited = [[UIImage imageNamed:@"Nav-button-highlited.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 6, 0, 6)];
    [[UIBarButtonItem appearance] setBackgroundImage:navButtonHighlited forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];
    
    [[UIBarButtonItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                          [UIColor colorWithRed:0.278 green:0.278 blue:0.278 alpha:1.0],
                                                          UITextAttributeTextColor,
                                                          [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0],
                                                          UITextAttributeTextShadowColor,
                                                          [NSValue valueWithUIOffset:UIOffsetMake(0, 1)],
                                                          UITextAttributeTextShadowOffset,
                                                          nil] forState:UIControlStateNormal];
    
    [[UIBarButtonItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                          [UIColor colorWithRed:0.278 green:0.278 blue:0.278 alpha:1.0],
                                                          UITextAttributeTextColor,
                                                          [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0],
                                                          UITextAttributeTextShadowColor,
                                                          [NSValue valueWithUIOffset:UIOffsetMake(0, 1)],
                                                          UITextAttributeTextShadowOffset,
                                                          nil] forState:UIControlStateHighlighted];

Aquí en realidad hacemos lo mismo que hicimos para la barra de navegación, pero hay algunos cambios significativos. Para el botón de la barra de navegación y el botón Atrás podemos establecer una imagen para cada estado diferente. Como puede ver, cambiamos las imágenes para UIControlStateNormal y UIControlStateHighlighted . También hicimos el tamaño de la imagen para que las esquinas siempre se vean bien

Paso 9: Personalizando la barra de pestañas

A continuación, agregue el siguiente código al método createCustomUI :

    [[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"Tab-bar.png"]];
    [[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"Tab-bar-selected.png"]];
    
    [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                       [UIColor colorWithRed:0.278 green:0.278 blue:0.278 alpha:1.0],
                                                       UITextAttributeTextColor,
                                                       [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0],
                                                       UITextAttributeTextShadowColor,
                                                       [NSValue valueWithUIOffset:UIOffsetMake(0, 1)],
                                                       UITextAttributeTextShadowOffset,
                                                       nil] forState:UIControlStateNormal];

Aquí actualizamos la barra de pestañas para su imagen de fondo y la imagen para la pestaña seleccionada. También actualizamos los atributos del texto del título, por lo que serán de color gris oscuro y tendrán una sombra blanca en la parte inferior.

Paso 10: Personalizando la vista de tabla

Finalmente, agregue el siguiente código al método createCustomUI :

1	[[UITableView appearance] setBackgroundColor:[UIColor colorWithRed:0.914 green:0.918 blue:0.925 alpha:1.0]];
2	[[UITableView appearance] setSeparatorStyle:UITableViewCellSeparatorStyleNone];

Aquí le damos a todas las vistas de tabla un fondo gris claro y eliminamos la línea separadora gris.

Haga clic en Construir y Ejecutar para probar la aplicación. El diseño de la aplicación se verá muy diferente, pero todavía hay algunas cosas más que debemos hacer.

Paso 11: Agregar imágenes a la barra de pestañas

Abra SongsViewController.m y modifique el código para que lea como sigue:

- (void)viewDidLoad
{
    [super viewDidLoad];

    UITabBarItem *item1 = [[self.tabBarController.tabBar items] objectAtIndex:0];
    [item1 setFinishedSelectedImage:[UIImage imageNamed:@"Songs-tab-bar-icon.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"Songs-tab-bar-icon.png"]];
    
    UITabBarItem *item2 = [[self.tabBarController.tabBar items] objectAtIndex:1];
    [item2 setFinishedSelectedImage:[UIImage imageNamed:@"Albums-tab-bar-icon.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"Albums-tab-bar-icon.png"]];

}

Aquí primero creamos un elemento de la barra de pestañas a partir de la matriz de todos los elementos del controlador de la barra de pestañas. Como tenemos 2 pestañas, usamos los índices 0 y 1. Después de eso, actualizamos las imágenes seleccionadas y no seleccionadas de los elementos de la barra de pestañas a la misma imagen.

Aquí personalizamos los elementos de la barra de pestañas, porque queremos una imagen diferente para cada elemento de la barra de pestañas y no podemos recibir la matriz de elementos de la barra de pestañas en AppDelegate.

Paso 12: Personaliza las celdas de la vista de tabla

A continuación, vaya al método tableView: cellForRowAtIndexPath: y agregue el siguiente código sobre la celda de retorno:

    cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Table-view-background.png"]];

    cell.textLabel.textColor = [UIColor colorWithRed:0.278 green:0.278 blue:0.278 alpha:1.0];
    
    cell.selectedBackgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Table-view-selected-background.png"]];
    
    cell.textLabel.backgroundColor = [UIColor clearColor];
    cell.detailTextLabel.backgroundColor = [UIColor clearColor];

Aquí primero actualizamos la vista de fondo de la celda a una imagen personalizada. Luego cambiamos el color del texto de la etiqueta del texto a un color gris oscuro. Después de eso, actualizamos la vista de fondo para cuando se selecciona la celda a una imagen personalizada y, por último, configuramos el color de fondo de las etiquetas para borrar el color, porque el color de fondo predeterminado es blanco.

Haga lo mismo para el método tableView: cellForRowAtIndexPath: en el archivo AlbumsViewController.m y para las celdas de la canción en el archivo AlbumViewController.m. Ahora agregue el siguiente código a la celda de información del álbum en el archivo AlbumViewController.m:

1	albumArtistLabel.textColor = [UIColor colorWithRed:0.2 green:0.2 blue:0.2 alpha:1.0];
2	albumInfoLabel.textColor = [UIColor colorWithRed:0.35 green:0.35 blue:0.35 alpha:1.0];
3
4	cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Table-view-album-background.png"]];

Aquí le damos a las etiquetas un color gris y la celda una imagen personalizada como vista de fondo.

A continuación, abra el guión gráfico y seleccione la celda en el controlador de vista de tabla de canciones. Abra el inspector de atributos y cambie el tipo de accesorio de "Indicador de divulgación" a "Ninguno". Haga lo mismo para la celda en el controlador de vista de álbum.

Ahora que hemos terminado el diseño y nuestro reproductor de música parece el iPod incorporado, creo que es un buen momento para probar nuestra aplicación. Haga clic en Construir y Ejecutar para probar la aplicación.

Nuestro reproductor de música está casi terminado, pero hay una última cosa que hacer. Todavía no podemos ir a la pantalla que se está reproduciendo sin seleccionar una nueva canción. Agregaremos un botón en la barra de navegación para ir a la pantalla que se está reproduciendo. Este botón solo será visible cuando el reproductor de música no esté parado.

Paso 13: Crea el botón Reproduciendo ahora

Abra el Guión gráfico y seleccione el segmento de la celda en el controlador de vista de tabla de canciones al controlador de vista que se está reproduciendo. Abra el inspector de atributos y configure el identificador en "NewSong". El siguiente CTRL arrastra desde el Controlador de vista de canciones (no la celda o la vista de tabla) al controlador de vista que se está reproduciendo y seleccionó "pulsar en el menú emergente". Cambie el identificador de este segmento a "Reproducción en curso".

Ahora abra SongsViewController.h y modifique el código para que lea como sigue:

#import <UIKit/UIKit.h>
#import <MediaPlayer/MediaPlayer.h>

@interface SongsViewController : UITableViewController
{
    UIBarButtonItem *nowPlayingButton;
}

@end

A continuación, abra SongsViewController.m y agregue el siguiente código al método viewDidLoad :

nowPlayingButton = [[UIBarButtonItem alloc] initWithTitle:@"NP" style:UIBarButtonItemStyleBordered target:self action:@selector(goToNowPlaying)];
    
    if ([[MPMusicPlayerController iPodMusicPlayer] playbackState] == MPMusicPlaybackStateStopped) {
        self.navigationItem.rightBarButtonItem = nil;
    } else {
        self.navigationItem.rightBarButtonItem = nowPlayingButton;
    }
    
    NSNotificationCenter *notificationCenter = [NSNotificationCenter defaultCenter];
    
	[notificationCenter addObserver: self
						   selector: @selector (handle_PlaybackStateChanged:)
							   name: MPMusicPlayerControllerPlaybackStateDidChangeNotification
							 object: [MPMusicPlayerController iPodMusicPlayer]];
    
    [[MPMusicPlayerController iPodMusicPlayer] beginGeneratingPlaybackNotifications];

Este código ya debería estar familiarizado, porque lo usamos todo antes. Primero creamos un elemento del botón de la barra con el título "NP" (Reproduciendo ahora), luego actualizamos el elemento del botón de la barra derecha de la barra de navegación al botón de reproducción actual si el reproductor de música no se detiene. Por último, registramos un observador para una notificación del reproductor multimedia, por lo que podemos ocultar o mostrar el botón de reproducción actual cuando cambia el estado de reproducción del reproductor de música.

Ahora agregue los siguientes métodos bajo el método viewDidLoad :

- (void) goToNowPlaying
{
    [self performSegueWithIdentifier:@"NowPlaying" sender:self];
}

- (void) handle_PlaybackStateChanged: (id) notification
{
	if ([[MPMusicPlayerController iPodMusicPlayer] playbackState] == MPMusicPlaybackStateStopped) {
        self.navigationItem.rightBarButtonItem = nil;
    } else {
        self.navigationItem.rightBarButtonItem = nowPlayingButton;
    }
    
}

Se llama al primer método cuando presionas el botón de reproducción actual y ejecutamos el segmento que acabamos de crear en nuestro guión gráfico. El segundo método ocultará o mostrará el botón de reproducción actual.

También debemos eliminar el observador que creamos anteriormente, así que vaya al método didReceiveMemoryWarning y cambie el código para que lea como sigue:

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    
    
    [[NSNotificationCenter defaultCenter] removeObserver: self
													name: MPMusicPlayerControllerPlaybackStateDidChangeNotification
												  object: [MPMusicPlayerController iPodMusicPlayer]];
    
	[[MPMusicPlayerController iPodMusicPlayer] endGeneratingPlaybackNotifications];
}

Lo último que debemos hacer es actualizar el método prepareForSegue: sender: porque no queremos reproducir una nueva canción cuando el usuario presiona el botón de reproducción actual. Vaya a ese método y modifique el código de la siguiente manera:

- (void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    if ([[segue identifier] isEqualToString:@"NewSong"])
    {
        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];
    }
}

Ahora primero verificamos si el identificador del segmento es "NewSong" por razones obvias.

Haga lo mismo con el AbumsViewController y el AlbumViewConroller, para que también pueda ir desde allí a la pantalla de reproducción actual.

Conclusión

Gracias por leer este tutorial sobre cómo crear un reproductor de música personalizado con el SDK de iOS. En esta tercera y última parte, explicamos cómo controlar el reproductor de música y obtener información sobre la canción que se está reproduciendo actualmente. También aprendimos cómo crear un diseño personalizado con el Protocolo de Apariencia UIA. Espero que te haya gustado esta serie de tutoriales y si tienes preguntas o comentarios sobre este tutorial, ¡déjalos en la sección de comentarios a continuación!