This is not strictly a programming question but more "how to accomplish this" question.
I am curious (and working on an app that will probably require this) how is left-right parallax scrolling implemented. To know exactly what I mean check the Yahoo Weather app (it's free - no worries there).
Are they using just one view controller or a separate controller for each view that is shown there?
What is the easiest way to implement this? I have found this topic here which kinda explains it a bit but when are they getting information from their servers? Is it when the views are changed or at the startup of the app?
Any information how to implement such scrolling would be much appreciated.
It's really simple actually:
Subclass UIScrollView
Add a UIView *parallaxView; as #property
Add a CGFloat parallaxFactor as #property
Override layoutSubviews
Call super, and then use self.scrollOffset*parallaxFactor to position the parallaxView
That's it!
I've made a multifunctional UIScrollView subclass myself that's really simple to use, perfect for this case! Get it on GitHub: https://github.com/LeonardPauli/LPParallaxScrollView
Good Luck!
I implemented a small prototype based on a standard UIPageViewController subclass, and autolayout constraints for the parallax effect.
It's quite fully documented, if you want to have a look : TestParallax
In a nutshell, the heart of the parallax is done in the scrollViewDidScroll delegate method:
extension PageViewController: UIScrollViewDelegate {
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let screenWidth = scrollView.bounds.width
/*
In a UIPageViewController, the initial contentOffset.x is not 0, but equal to the screen width
(so that the offset goes between (1 * screenWidth) and 0 when going to the previous view controller,
and from (1 * screenWidth) to (2 * screenWidth) when going to the next view controller).
Also, it's reset to the screenWidth when the scroll to a previous or next view controller is complete.
Therefore, we calculate a new 'horizontalOffset' starting at 0, and going:
- negative from 0 to (-screenWidth/2) when scrolling to the next view controller,
- and from 0 to (screenWidth/2) when scrolling to the previous view controller.
*/
let horizontalOffset = (scrollView.contentOffset.x - screenWidth)/2
// Special case: initial situation, or when the horizontalOffset is reset to 0 by the UIPageViewController.
guard horizontalOffset != 0 else {
previousPageController?.offsetBackgroundImage(by: screenWidth/2)
currentPageController?.offsetBackgroundImage(by: 0)
nextPageController?.offsetBackgroundImage(by: -screenWidth/2)
return
}
// The background image of the current page controller should always be offset by the horizontalOffset (which may be positive or negative)
guard let currentPageController = currentPageController else { return }
currentPageController.offsetBackgroundImage(by: horizontalOffset)
if horizontalOffset > 0 { // swiping left, to the next page controller
// The background image of the next page controller starts with an initial offset of (-screenWidth/2), then we apply the (positive) horizontalOffset
if let nextPageController = nextPageController {
let nextOffset = -screenWidth/2 + horizontalOffset
nextPageController.offsetBackgroundImage(by: nextOffset)
}
} else { // swiping right, to the previous page controller
// The background image of the previous page controller starts with an initial offset of (+screenWidth/2), then we apply the (negative) horizontalOffset
if let previousPageController = previousPageController {
let previousOffset = screenWidth/2 + horizontalOffset
previousPageController.offsetBackgroundImage(by: previousOffset)
}
}
}
}
You are not supposed to change the delegate of the page view controller's scroll view. It can break its normal behaviour.
Instead, you can:
Add a pan gesture to the page view controller's view:
let panGesture = UIPanGestureRecognizer(target: self, action: #selector(panRecognized(gesture:)))
view.addGestureRecognizer(panGesture)
panGesture.delegate = self
Add the new function in order to know how the view is being scrolled.
#objc func panRecognized(gesture: UIPanGestureRecognizer) {
// Do whatever you need with the gesture.translation(in: view)
}
Declare your ViewController as UIGestureRecognizerDelegate.
Implement this function:
func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
return true
}
Related
The Problem
I have a UIScrollView containing a UIView that I wish to allow the user to pan using a UIPanGestureRecognizer.
In order for this to work as desired, users should be able to pan the view with one finger, but also be able to pan the scroll view with another finger - doing both at the same time (using one finger for each).
However, the scroll view ceases to work when the user is panning a view contained within it. It cannot be panned until the view's pan gesture ends.
Attempted Workaround
I tried to work around this by enabling simultaneous scrolling of both the pan view and the UIScrollView that contains it by overriding the following UIGestureRecognizerDelegate method:
func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
return true
}
However, this makes it so that panning the view also moves the scroll view. Each element's panning gesture should be independent of the other, not linked.
Demo Project
I have created a simple demo project that should demonstrate this, here:
https://github.com/jeffc-dev/ScrollViewPannerTest
This project contains a scroll view with a square view that should be able to be panned independently of its containing scroll view, but can not.
Why I'm Doing This
The point of this is to make it easier/quicker for a user to find a destination to pan the view to. The is somewhat analogous to rearranging icons in Springboard: You can use one finger to pan an app icon while simultaneously panning between pages with another finger, quickly finding a place to drop it. I'm not using a paged scroll view - just a normal one - and I want it to be a seamless panning gesture (I don't need/want the user to have to enter a 'wiggle mode') but the basic principle is the same.
UPDATE: DonMag helpfully came up with the idea of using a UILongPressGestureRecognizer to move the view out of the scroll view for panning, which does seem promising. However, if I went that route I think I'd need to seamlessly transition to using a UIPanGestureRecognizer after doing so (as I do use some pan gesture recognizer-specific functionality).
I'm sure there are different ways to do this, but here is one approach...
Instead of using a UIPanGesture I used a UILongPressGesture.
When the gesture begins, we move the view from the scrollView to its superview. While we continue to press the view and drag it around, it is now independent of the scrollView. When we end the gesture (lift the finger), we add the view back to the scrollView.
While dragging, we can use a second finger to scroll the content of the scroll view.
The main portion of the code looks like this:
#objc func handleLongPress(_ g: UILongPressGestureRecognizer) -> Void {
switch g.state {
case .began:
// get our superview and its superview
guard let sv = superview as? UIScrollView,
let ssv = sv.superview
else {
return
}
theScrollView = sv
theRootView = ssv
// convert center coords
let cvtCenter = theScrollView.convert(self.center, to: theRootView)
self.center = cvtCenter
curCenter = self.center
// add self to ssv (removes self from sv)
ssv.addSubview(self)
// start wiggling anim
startAnim()
// inform the controller
startCallback?(self)
case .changed:
guard let thisView = g.view else {
return
}
// get the gesture point
let point = g.location(in: thisView.superview)
// Calculate new center position
var newCenter = thisView.center;
newCenter.x += point.x - curCenter.x;
newCenter.y += point.y - curCenter.y;
// Update view center
thisView.center = newCenter
curCenter = newCenter
// inform the controller
movedCallback?(self)
default:
// stop wiggle anim
stopAnim()
// convert center to scroll view (original superview) coords
let cvtCenter = theRootView.convert(curCenter, to: theScrollView)
// update center
self.center = cvtCenter
// add self back to scroll view
theScrollView.addSubview(self)
// inform the controller
endedCallback?(self)
}
}
I forked your GitHub repo and added a new controller to demonstrate: https://github.com/DonMag/ScrollViewPannerTest
You'll see that it is just a Starting Point for this approach. The view being dragged (actually, in this demo, you can use two fingers to drag two views at the same time) uses closures to inform the controller about the dragging...
Currently, "drag/drop" does not affect any other subviews in the scrollView. The only closure that does anything is the "ended" closure, at which point the controller re-calcs the scrollView's contentSize. The "moved" closure could be used to re-position views -- but that's another task.
I am using THIS LIB for button, Now I have a viewcontroller, which has a container view, and this container view embeds(segue) a PageViewController, the 2nd page (which is another ViewController) in this PageViewController has the BFPaperButton (which has the ripple animations when onTap gesture). The animations don't work in this setup, but if were to make the 2nd Page's ViewController as the Is Initial View Controller then the animations works perfectly, what is going on here??
EDIT
I further isolated the issue, it seems this only happens when using a PageViewController and returning the ViewController containing the button in one of the data source delegate methods of PageViewController,
and it would seem the cause is most definitely the PageViewController, it seems its blocking some gesturerecognizers or delaying them for its child views, need to find out how to fix it.
The effect that you describe is quite common when dealing with certain types of parent views that delay the content touches of their child views. The solution is usually as simple as setting the parent view's property: delaysContentTouches.
I would remember this because 9 times out of 10, this is the culprit.
However, in the case of UIPageViewController, what you are seeing is the default behaviour of a UIQueuingScrollView which does not expose that property. An ugly but effective way to get around this is to dig through the subviews of your UIPageViewController until you get to one that has some UIGestureRecognizers, and setting delaysTouchesBegan = NO.
You could do this by simply running this code after you initialize your UIPageViewController
NSArray *subviews = self.pageViewController.view.subviews;
NSArray *viewHierarchy = [#[self.pageViewController.view] arrayByAddingObjectsFromArray:subviews];
int i = 0;
for (UIView *viewToCheck in viewHierarchy) {
for (UIGestureRecognizer *gestureRecognizer in viewToCheck.gestureRecognizers) {
NSLog(#"%d gestureRecognizer: %#", i++, gestureRecognizer);
gestureRecognizer.delaysTouchesBegan = NO;
}
}
here is a quickly slapped together Swift version if you prefer:
let subViews: [UIView] = pageViewController.view.subviews
var viewHierarchy: [UIView] = [pageViewController.view]
viewHierarchy.appendContentsOf(subViews)
var i = 0
for viewToCheck in viewHierarchy {
viewToCheck.gestureRecognizers?.forEach { (recognizer) in
print("viewToCheck isa \'\(viewToCheck.self)\'")
for gestureRecognizer in viewToCheck.gestureRecognizers! {
print("\(i) gestureRecognizer: \(gestureRecognizer)")
i += 1
gestureRecognizer.delaysTouchesBegan = false
}
}
}
Answered by github user bfeher , for this issue
I have a custom subclass of UITabBarController which adapts a delegate that has a function to shift the tabBar's frame (specifically frame.origin.y). When the offset is equal to the height of the screen (that is, it is hidden off-screen) I have a UIScrollView extending to the bottom of the screen. Within that UIScrollView, I cannot receive touches in the initial frame of the tabBar view.
I have seen recommendations to add intractable subviews to the UITabBar or the controller's view. This is far from elegant, and creates a multitude of design issues when working with views that possibly take up the whole screen. I have checked out the little public implementation code of UITabBarController and UITabBar but nothing I saw there shows how they are blocking those touches.
I'm aware of the recursive nature of hit tests, but short of overriding the hit test and rerouting the touch in the UITabBarController subclass, which seems rather unclean, I can't think of a generic way to handle this. This question dives into Apple's UITabBarController / UITabBar implementation, but I have included some relevant code for clarity:
class tab_bar_controller: UITabBarController, UITabBarControllerDelegate, tab_bar_setter //has included function
{
//.... irrelevant implementation
func shift(visibility_percent: CGFloat) -> CGFloat //returns origin
{
self.tabBar.frame.origin.y = screen_size().height - (visibility_percent * self.tabBar.frame.size.height)
self.tabBar.userInteractionEnabled = visibility_percent != 0 //no effect
//self.view.userInteractionEnabled = visibility_percent != 0 //blocks all touches within screen.bounds
return self.tabBar.frame.origin.y
}
}
I'm creating a kind of grid view where you can add some widgets inside of it and organise them as you want by drag and drop to rearrange them.
My grid view for now is a UIscroll view and the widgets are subclass of UIview.
Here is an example of grid you can have with that
When I drag a widget I wanna be able to make the scroll view go down if the widget is near the bottom of the screen.
For now, my widgets have a UIPanGestureRecognizer
And the following code :
func enterDragMode(recognizer:UIPanGestureRecognizer) {
if (recognizer.state == UIGestureRecognizerState.Ended) || (recognizer.state == UIGestureRecognizerState.Cancelled) {
gridNotificationCenter.postNotificationName("WidgetDragEnded", object: self)
// Notify the grid and drop the widget here
} else {
var translation = recognizer.translationInView(self.superview!)
var newPoint = self.center
newPoint.x += translation.x
newPoint.y += translation.y
if (CGRectContainsRect(moveDownRect, self.frame)) {
var scrollview = self.superview as? UIScrollView
if (scrollview != nil) {
// need to find correct visible rect here
res!.scrollRectToVisible(visibleRect, animated: true)
}
}
recognizer.setTranslation(CGPointZero, inView: self.superview)
}
}
But i feel like I'm not using the right class to handle this properly since the callback is not triggered when I'm simply holding the view and not moving it. Is there a better way ?
Try to set a virtual area near the bottom of your view.
Trigger when the pan gesture is moved. If it enters the area, starts scrolling down as long as the pan gesture does not leave the area and does not end.
And use a timer (NSTimer not CADisplayLink because you can't apply a scroll on the view while you refresh it) to increase the size of your scrollview as long as you are in the specified area.
I have a navigation controller that pushes a view-controller (PARENT) that contains an UIPageViewController (PAGES). Now I used pan/swipe gestures to switch between the children of the page-view-controller. However, I can no longer pop the PARENT-view controller using the swipe gesture from the left border of the screen, because it is interpreted as a gesture in PAGES.
Is it possible to accomplish that swipe-to-pop when the left-most view-controller is shown?
Two ideas:
Return nil in pageViewController:viewControllerBeforeViewController -> doesn't work.
Restrict the touch area, as described here.
Or is there a more straightforward way?
I had the same situation as #smallwisdom, but handled it differently.
I have a view controller A that I push on top of my navigation controller's stack.
This view controller A contains a horizontal scroll view that stretches all the way from left side of the screen to the right.
In this scenario, when I wanted to swipe the screen to pop view controller A from navigation controller's stack, all I ended up doing was scrolling this horizontal scroll view.
The solution is pretty simple.
Inside my view controller A, I have code like this:
_contentScrollView = [[UIScrollView alloc] init];
[self.view addSubview:_contentScrollView];
for (UIGestureRecognizer *gestureRecognizer in _contentScrollView.gestureRecognizers) {
[gestureRecognizer requireGestureRecognizerToFail:self.navigationController.interactivePopGestureRecognizer];
}
It works great. What this does?
It is telling the scrollView's gesture recognizers that they have to wait to see if some other gesture recognizer will recognize the current gesture.
If that other fails to recognize, then they will no longer have to wait and they can try to recognize the current gesture.
If that other recognizer succeeds and recognizes the current gesture, then all of the gesture recognizers that have been waiting will automatically fail.
This other gesture recognizer they have to wait is set to be the navigation controller's interactivePopGestureRecognizer. He is in charge for the swipe-to-go-back gestures.
I mostly agree with #ancajic's answer. I would like to provide an extra-case when you set UIPageViewController's transitionStyle to 'Scroll', in which you'll not get gestureRecognizers to be set, the workaround is:
if (self.navigationController?.interactivePopGestureRecognizer != nil)
{
for view in self.pageViewController!.view.subviews
{
if let scrollView = view as? UIScrollView
{
scrollView.panGestureRecognizer.requireGestureRecognizerToFail(self.navigationController!.interactivePopGestureRecognizer!);
}
}
}
I had a similar issue in one of my projects and used the following method. In my case, it was one of those left-side menus that were really popular before iOS 7.
My solution was to set the UINavigationControllerDelegate and then implemented the following:
- (void)navigationController:(UINavigationController *)navigationController
didShowViewController:(UIViewController *)viewController
animated:(BOOL)animated {
// enable the interactive menu gesture only if at root, otherwise enable the pop gesture
BOOL isRoot = (navigationController.viewControllers.firstObject == viewController);
self.panGestureRecognizer.enabled = isRoot;
navigationController.interactivePopGestureRecognizer.enabled = !self.panGestureRecognizer.enabled;
}
EDIT:
Additionally, you need a hook into the UIPageViewController's gesture recognizers. (They aren't returned by the gestureRecognizers property for a scroll view style page view controller.) It's annoying, but the only way I've found to access this is to iterate through the scrollview's gesture recognizers and look for the pan gesture. Then set a pointer to it and enable/disable based on whether or not you are currently displaying the left-most view controller.
If you want to keep the right swipe enabled, then replace the pan gesture with a subclassed pan gesture recognizer of your own that can conditionally recognize based on the direction of the pan gesture.
First, find UIPageViewController's scrollView
extension UIPageViewController {
var bk_scrollView: UIScrollView? {
if let v = view as? UIScrollView {
return v
}
// view.subviews 只有一个元素，其类型是 _UIQueuingScrollView，是 UIScrollView 的子类
// view.subviews have only one item of which the type is _UIQueuingScrollView, which is kind of UIScrollView's subclass.
for v in view.subviews where v is UIScrollView {
return v as? UIScrollView
}
return nil
}
}
Second, set gestureRecognizer's dependence.
override func viewDidLoad() {
super.viewDidLoad()
if let ges = navigationController?.interactivePopGestureRecognizer {
pageViewController.bk_scrollView?.panGestureRecognizer.require(toFail: ges)
}
}
Swift version of #Lcsky's answer:
if let interactivePopGesture = self.navigationController?.interactivePopGestureRecognizer, let pageViewController = self.swipeVC?.pageViewController {
let subView = pageViewController.view.subviews
for view in subView {
if let scrollView = view as? UIScrollView{
scrollView.panGestureRecognizer.require(toFail: interactivePopGesture)
}
}
}