Horizontal Parallax Effect - Relative motions between views - ios

I need a parallax scrolling effect. Something like Make My Trip app home page screen.
Any suggestion please. Demos or examples.

You can create two collectionviews with different item sizes and minimumInteritemSpacing.
Keep user interaction enabled for the collectionview at front but disable it for the other collection view.
On horizontal scroll of front collectionview, scroll the rear collectionview as well.
You can use scrollViewDidScroll method for this and scroll the rear collectionview accordingly.

Related

Swift: Did Tumblr add a UICollectionView in a UIScrollView?

I've been trying to replicate this effect for a couple days which was inspired by Tumblr.
I've previously asked questions on here with different approaches of the same problem but to no avail. I'm just curious as to how the engineers at Tumblr created a horizontal collection view, with two vertical collection views, and is able to scroll down without affecting the view above (without resetting the position of the view when you scroll vertically in a different tab).
Header Views
I tried this, but the header view was isolated and I had to scroll to the right to see the collectionView cells. This did not work.
Changing the topLayoutConstraint constant of my UIView (not cv header) with respect to the contentOffSet of the vertical collectionView.
This almost got the effect I wanted, except that when I scrolled horizontally, there was a huge gap between my collection view and if I scrolled in that new tab, the UIView would appear again because, again, topLayoutConstraint gets scrolled up depending on the contentOffSet of my vertical collectionView contentOffset.
Changing the position of the UICollectionView frame, and scrolling the super view up simultaneously with NSNotificationCenter.
Alas, this method did the same as method #2, except that the vertical collection view cells scrolled faster than the super view.
I ran out of options to make this work so I will show you in detail what's attempted to be replicated (also note the scroll bar on the right):
Note when I scroll down the first tab. I switch, and then scroll down further. Originally, as I've said, there would be a gap between the second main CV, and when I scrolled, the view would reposition as if were scrolling up again. On here, the view on top keeps going up. So I'm curious as to what method Tumblr engineers used to do this. UICollectionView inside UIScrollView? Other suggestions?
I believe there is no UICollectionView involved. It looks like UIPageViewController and each its page is a UITableView.
Perhaps the UIPageViewController sits in a UITableView as well - the header also moves up when you scroll. This main table has only one cell (and a header) which is occupied by the UIPageViewController.
Hope it helps.

How to enlarge individual cells while scrolling in UICollectionView?

I have a UICollectionView which has scrolling direction of horizontal. What I want to achieve is that when the UICollectionView is scrolled I want individual cells to enlarge there size. For example like the album Art work view in old iOS music app.
If you want something similar to "OLD IOS music app" art work view, then the easiest way I think would be to implement "scrollViewDidScroll" delegate method, then inside of "scrollViewDidScroll" get all visible cells of your collection view, and depending on their offset set CGAffineTransformScale.

Mixing UIScrollViews and UITableViews

If you look at the Featured tab of the Apple App Store app on an iPhone 6, there is a unique UI layout that I can't figure out how to replicate.
At the very top there is a navigationBar. Below this there is a UIScrollView that animates through a number of featured items. Below this is what appears to be a UITableView with a number of custom programmed cells.
My first guess was that the UIScrollView at the top was added to a custom cell at the top of a UITableView. If you swipe up the UIScrollView moves with the objects below like it is a cell. You can see that the vertical scroll indicator starts at the top of the UIScrollView.
The part that is unique is that if you swipe down, the objects below the UIScrollView move down like a UITableView and the UIScrollView stays in place. This means that the UIScrollView is not a custom cell at the top of a UITableView.
I tried making this work a number of different ways but I can replicate this. Does anyone know how this can be done?
You can use a tableview header,the header is a scrollview
If you scroll tableview up,just use tableview default behavior,the header will scroll up.
If you scroll down,use UIScrollViewDelegate to calculate the tableview header new frame,and adjust it.So it remain at top
Not sure if I got you correctly, you may use UICollectionView as vertical scroll. Then, you create a custom UICollectionViewCell, each with horizontal scroll.
I haven't tried it though but done something similar to this. Hope you find a way!

How to enable UIPageViewController's page scroll while scrolling its content vertically (a collection view)?

I'm making an app like SmartNews, with a UIPageViewController that contains many UICollectionView pages.
The structure:
A UIPageViewController, with pages scrolling horizontally. (Transition style is UIPageViewControllerTransitionStyleScroll)
Each page in it contains a UICollectionView scrolling a set of cells vertically.
Both view have the same size and touch areas on the screen are common.
The problem:
While the collection view is scrolling down by itself (i.e. the user is no longer touching the screen but the collection view is still scrolling by decelerating), the user can't swipe pages.
It seems if another pan gesture occurs at this moment, it is tracked by the collection view to stop the current scroll and it doesn't allow the user to swipe the page view controller.
Is there a way to allow the user to scroll pages (horizontally), while the collection view is still scrolling (vertically)?
(Instagram's search view realizes this feature.)
Thanks!
Found what I wanted to do here:
Cross Directional UIScrollViews - Can I Modify the Scrolling Behaviour?
I guess it's unsafe to do the same with UIPageController as the scroll view inside it is undocumented.
I will try to replace the UIPageController with a UISCrollView with paging enabled.

How does Piictu implement both vertical and horizontal scrolling?

The main view of the iOS app "Piictu" is a vertical scrolling list of photo albums. The thumbnails of each album are displayed inline and scroll horizontally.
If you swipe down or up from any point the parent view scrolls vertically, even when the starting point of the gesture on an album thumbnail.
What's your best understanding of how this is done? A vertical swipe gesture recognizer on the parent view and a horizontal swipe gesture recognizer on the album child/sub views?
Or, is this perhaps a UIWebView?
Thanks!
It's a lot simpler than that, or at least it can be done a lot simpler: just nest scroll views. The outer one covers the whole screen and only allowing vertical scrolling. Each series of thumbnails is contained in another, smaller scroll view which only allows horizontal scrolling. I've used this technique myself for an app I was contracted to develop.

Resources