srakarisk.blogg.se - Apple music song bar

#APPLE MUSIC SONG BAR FULL#
#APPLE MUSIC SONG BAR CODE#
#APPLE MUSIC SONG BAR PLUS#

MaxiSongCardViewController.swift: Displays the card animation from mini player to maxi player.MiniPlayerViewController.swift: Shows the currently selected song.SongViewController.swift: The main view controller.Main.storyboard: Contains all the UI for the project.Instead, you’ll be working with the following files in the View Layer folder: You can explore these files later if you’re curious, but you don’t need to know what’s inside for this tutorial. The file you’ll be using most frequently is Song.swift, which represents a single song from the catalog. The project uses a normal Model-View-Controller pattern to keep data logic outside of the view controllers. Song Play Control View Controller: You’ll use this as part of the animation.Įxpand the project in the project navigator.Along with the storyboard, it’s the class you’ll be working with most. Maxi Song Card View Controller: This view will display the final state of the animation.This is the view you’ll be animating from. Mini Player View Controller: This view controller is embedded as a child of SongViewController.It has a repeating collection of fake songs. Tab Bar Controller with SongViewController: This is the collection view you see when you launch the app.Have a look at the storyboard from left to right:

#APPLE MUSIC SONG BAR PLUS#

Use the iPhone 8 Plus simulator for this tutorial so the starter views make sense.

Open Main.storyboard in the Project navigator to see them.

#APPLE MUSIC SONG BAR FULL#

The starter project includes a full set of semi-complete view controllers so you can spend your time concentrating on creating the animation. The mini player won’t actually play the song, which might be a good thing judging by the playlist! Touch any song in the collection view to load the mini player at the bottom with that song. This app is RazePlayer, which provides a simple music catalog UI.

#APPLE MUSIC SONG BAR CODE#

Experience with connecting IBOutlets in code to Interface Builder entities.ĭownload the starter project for this tutorial here.īuild and run the app.

Experience with creating and modifying UI and Auto Layout constraints within Interface Builder.

To follow along with this tutorial, you’ll need the following: To keep things clean, you’ll use ordinary UIKit APIs. In this tutorial, you are going to reproduce the Music app’s transition from mini-player to full-screen card. Good animations are like good special effects in movies: they should go almost unnoticed. But if you look closer, you’ll see there’s actually many things happening that make up the animation. These animations can seem simple when examined in a casual fashion. The Music app does this as well, where the current song expands from a mini player to a full screen card. You can see this in apps like Reminders, where the lists are represented by a stack of cards that spring up from the bottom. A common visual pattern in many iPhone apps is stacks of cards that slide in from the edge of the screen.