Scrollable UITableView slide up to top of screen in Swift

Question

I am trying to create a very simplified layout, something like Stripe's iOS app has which you can see here: https://stripe.com/img/dashboard_iphone/screencast.mp4

At around 0:06s the table view is swiped up and it moves up to the top of the window.

Are there any simple instructions in Swift that show this design pattern I see it everywhere but no idea how to create it

score 1 · Accepted Answer · answered May 02 '16 at 23:25

Add a UIView
Subclass that UIView with a custom class

In you custom UIView, you'll need a couple of variables and a few overrides. Make sure that user interaction is enabled on the UIView in your storyboard, then in your custom class add:

var startPosition: CGPoint?
var originalHeight: CGFloat?

After that, add the following:

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
    let touch = touches.first
    startPosition = touch?.locationInView(self)
    originalHeight = self.frame.height
}

override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {
    let touch = touches.first
    let endPosition = touch?.locationInView(self)
    let difference = endPosition!.y - startPosition!.y
    let newFrame = CGRectMake(self.frame.origin.x, self.frame.origin.y + difference, self.frame.width, self.frame.height - difference)
    self.frame = newFrame
}

override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) {

}

score 0 · Answer 2 · answered Aug 25 '15 at 20:07

0

In UIScrollView.h:

// When the user taps the status bar, the scroll view beneath the touch which is closest to the status bar will be scrolled to top, but only if its `scrollsToTop` property is YES, its delegate does not return NO from `shouldScrollViewScrollToTop`, and it is not already at the top.
// On iPhone, we execute this gesture only if there's one on-screen scroll view with `scrollsToTop` == YES. If more than one is found, none will be scrolled.
var scrollsToTop: Bool // default is YES.

Initialize your scroll view delegate (unless you already have, probably in your viewDidLoad), and then set this to true.

Like this:

myScrollView.scrollsToTop = true

If you want to be sure your scroll view delegate allows this, check this method from UIScrollViewDelegate's protocol:

optional func scrollViewShouldScrollToTop(scrollView: UIScrollView) -> Bool // return a yes if you want to scroll to the top. if not defined, assumes YES

Please comment any concerns.

answered Aug 25 '15 at 20:07

Evo Sae

73
1
10

Thats great, but its less to do with tapping the status bar to scroll it up and more how to overlay the two views (the one with the graph and the table view below it) and then when scrolling allowing the table view to move up and overlap the graph view – Sam Mason Aug 25 '15 at 20:09
When the scroll reaches the top? If you check the UIScrollView.h, there's another method beneath the last one I mentioned, called scrollViewDidScrollToTop. Are you using that? – Evo Sae Aug 25 '15 at 20:12
So in storybaord should this scroll view be overlapping everything? – Sam Mason Aug 25 '15 at 20:13
I think you could use a bit more explanation in your question, since I'm having trouble understanding what exactly you want. But if you want a table view overlapping a table view, you can set view.bringSubviewToFront(tableView2) within the mentioned delegate method. – Evo Sae Aug 25 '15 at 20:16
If you watch the video at the url you will see that at 6 seconds the user swipes the table view up to see more of the cells and as this happens the table view instead of just scrolling, instead moves up to the top of the phones screen by doing this the graph view that was visible is now covered by said table view. The graph view contents never scrolls is instead covered by the table view below. Does that make more sense? – Sam Mason Aug 25 '15 at 20:19
Another example of this type of UI can be found in the weather app preinstalled on your iOS device, you can swipe up and the 7 day forecast reveals the rest of itself but the current temperature and place moves up slightly and then fades out. – Sam Mason Aug 25 '15 at 20:21
1

So what you're asking for is more about animation and storyboard placement. In that case, I would put one table view in a UIView and set that to the front. Implement the gesture recognizing method from the delegate class, and use a UIView animating method to transition the table's current position to the desired end position. If you need help finding documentation on animation, try raywenderlich's iOS tutorials – Evo Sae Aug 25 '15 at 20:26

Scrollable UITableView slide up to top of screen in Swift

2 Answers2