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 height
.
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 x
to 0
, and we add it to the ScrollComponent’s content
layer. (Because that’s how you do it when not using wrap()
.)
$.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.