Let’s build App Store UI — Games/Apps View

zhu
zhu
Mar 10 · 2 min read

Introduce QKSliderView

It’s been a while since Apple redesigned App Store in 2017.

The beautifully redesigned App Store is packed with original stories and editorial, updated daily in a new Today tab, as well as new Games and Apps tabs.

I am still learning good UI designs from it today. One of the interesting UI comes to my mind is the slider view under Games/Apps tab.

Unlike the old design with full screen width slider, app store reduced the width so that user can see a little bit content of previous and next view, this gives a hit to user that there are content available on previous/next view.

This design literally solved a problem that some user does not know a view can scroll horizontally if a view is full screen width.

However, Apple does not provide any SDK that can generate this UI directly. This is why the QKSliderView comes.



Feature

  • Storyboard friendly: user can simple config all parameters in storyboard.
  • Supporting both Objective-C and Swift.
  • Supporting cocoapods.

The Challenge

  • The calculation: as it calculate cell’s frame by given rows, columns, horizontal gap, vertical gap, how much width of previous/next cell do you like to display on the screen.
  • Paging: Since it’s not full width cell, the default pagingEnabled will NOT work. I need to provide logics in some of the UIScrollView delegate functions, by calculating what is the nearest cell should stop after user release finger from dragging.
  • Delegation forwarding: Since I use some UIScrollView delegate functions, it’s not convenient for users who still want to implement the delegate. Here use a delegation forwarding technic to solve this problem.

What Next

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade