The “Now Playing” screen
The only artboard we haven’t used yet is the “Now Playing” screen. It’s another scrollable one because it also contains lyrics and a list of upcoming songs.
scroll_now_playing = new ScrollComponent width: Screen.width height: Screen.height - 33 y: 33 scrollHorizontal: no directionLock: yes
The ScrollComponent is placed
33 points lower because there’s a gap at the top of the screen. The “Now Playing” screen actually begins 13 points below the 20 points of the Status Bar.
And because it’s placed lower we also subtract those same 33 points from
Screen.height when setting its
By the way, this is how it should look in the end:
Direction lock is enabled because we don’t want the screen to scroll when we change the playback volume or scrub to a different point in the song.
Now the artboard.
We bring it over by setting its
0, and we add it to the ScrollComponent’s
content layer. (Because that’s how you do it when not using
$.Now_Playing.x = 0 $.Now_Playing.parent = scroll_now_playing.content
You’ll notice that there’s quite a lot of space at the end of the page.
That’s on purpose. Because by now setting a negative value for the
contentInset (at the
bottom) the user will be able to scroll beyond the end of the page (this is called overdrag) without seeing the screen underneath.
Add these lines to the ScrollComponent’s properties:
contentInset: bottom: -100
Ah, the Tab Bar is still in the way. We’ll move it down.
Add this line, preferably higher up in the code, inside its
The Tab Bar fold:
$.Tabs.y = Screen.height
It places the Tab Bar just below the screen.
Later, when transitioning from the “Now Playing” screen to the mini-player, we’ll animate it back up.