Re-building the New App Store App — Today View
If you didn’t already know, Apple announced an entirely redesigned iOS App Store experience this month at the WWDC conference. It has an increased focus on rich, in-depth, long form content over the previous interface which often tended to cram as many app icons as possible onto the screen at any one time. I recently wrote about the significance of the redesign, and admittedly my first impressions had me in love.
Skip forward to this weekend, I decided to spend some spare time diving a little deeper into the User Interface of the new App Store itself in order to gain a deeper understanding of how it works and in some ways how I might put my own subtle, unique improvements on it if I’d had the chance. What was initially just a late Friday night, nothing-better-to-do project recreating the Today view cards, ended up snowballing into an incredibly fun weekend-long passion project that I really enjoyed spending time on. This will likely be part one of some sort of multi-part series where I pick an aspect of the new App Store interface and rebuild it from scratch.
It’s worth noting that I have no access to the internals of the App Store app’s real implementation, and all of this was done completely by eyeballing the interface from screenshots and the iOS 11 beta running on an iPod Touch/iPad Mini sitting on my desk. Fonts might be slightly off, and I don’t have access to most of the image assets so I tried to find assets that come as close as possible to the real thing. I also focused on building out the UI as opposed to wasting a bunch of time building out a networking layer, so content that you see is static and placeholder.
Cards Collection View
One of the most drastic and obvious changes in the new App Store app is the Today view. Designed to be a news feed-like timeline of the latest editorial content, the Today view presents a list of Cards each showcasing a unique story categorized by a group of new Editorial Content categories such as World Premiere, How To, Lists, App of the Day, From The Editors and Get Started. Each of these cards has some very uniform features, such as rounded corners, a soft shadow, a full bleed background image and some labels.
Today View is actually quite a simple interface, it’s obviously just a UICollectionView, and each card is a UICollectionViewCell. In order to duplicate these cards, I created a base UICollectionViewCell subclass called BaseRoundedCardCell that all card cells inherit to gain all of the underlying features that each card has, including the shadow.
Shadow
Each Card in the App Store app has a soft shadow, with a slight vertical offset which gives it a sense of depth and suggests to the user that they can tap on a card, to open its detailed story view. In the current App Store app this shadow seems to be just a static shadow. I decided not just to clone this shadow, but go even further using Core Motion to move the shadow based on the Pitch (Horizontal tilt) and Roll (Vertical tilt) of the device. In a subtle way this would make the interface feel more lively and rich, similar to the way that it does on the tvOS interface.
Long Press Gesture
On the current App Store app each Card view itself is also fixed and not overly interactive. You can tap on a card to transition into the Story detail view but you can’t interact with a card in any other way. Just like I can with the tvOS interface, as a user I’m compelled to touch and manipulate cards a bit more than just a tap. I went ahead and improved on this by implementing a long press gesture that shrinks the card slightly when it is held down. This extends the depth metaphor that the shadow creates but is also not too excessive so as to make cards feel too flexible and unrealistic.
iPad Grid Layout
Depending on if you’re viewing the new App Store app on an iPad or an iPhone, the cards will layout differently. On an iPhone you’ll see one vertical column of cards all of the exact same width and height, while on an iPad you’ll see two columns of cells and each cell will alternate between compressed width and expanded width, to provide more of a grid layout that makes better of use of the iPads larger screen real estate.
One approach to achieving this could be a custom UICollectionViewLayout that handles dynamically alternating the widths based on the screen size, although UICollectionView’s Flow layout is already a very powerful layout that has everything you need to achieve this with very minimal work.
Based on the UIDevice.current.userInterfaceIdiom I was able to determine if the device was an iPhone, and in my UICollectionViewDelegateFlowLayout’s sizeForItemAt:indexPath: method was able to use the collectionView’s own width as the width of each cell. Thus causing the UICollectionView to layout vertically with only one cell per row. On an iPad, things had to be slightly more different. In the new App Store app on iPad, there are two cells per row, and the cell sizes follow a common pattern (expanded, compressed, compressed, expanded, compressed, expanded, expanded, compressed, compressed, expanded).
I used a bit of simple math to calculate based on the number of items per row, the current row number, if the current row number was even, and if the current item was the first item in this row. Based on that, I would return either a compressed or expanded width that corresponds to the pattern.
Section Headers
Since the Today view is a timeline style interface, cards need to be separated out into daily sections and marked by their dates. This allows the user to scroll down, through cards and catch up on the editorial content from previous days that they may have missed. While using the new App Store app I noticed that these headers are not sticky, but infact scroll along with the rest of the UICollectionViewCells, therefore they must be UICollectionReusableView’s used as Section Headers for representing each day.
I duplicated these headers simply by creating aUICollectionReusableView called TodaySectionHeader that contains some labels and a small rounded Image View that can be hidden if the section header is not the topmost header.
I returned the header height and dequeued the header in the UICollectionViewDelegateFlowLayout delegate methods and the headers appeared exactly as expected for each section in my Collection View.
Conclusion
Everything that you’ve seen above is made up of very standard UIKit controls and patterns. Apple’s new iOS App Store Today view is quite a simple interface and there is very little complexity involved in duplicating the core card style UI. I have already progressed further on duplicating the transition from the Today View to the Story Detail view using custom UIViewController Transitions and will look to publish a follow up post soon. If you’d like to look at the code for this I’ve pushed it to Github, and will continue working on it from there.
Thanks for reading! Follow me on twitter @phillfarrugia for more updates, writings and rants.
This post was originally published here http://www.phillfarrugia.com/2017/06/19/rebuilding-the-new-app-store-app-today-view/
