Animate objects when UIScrollView scrolls - ios

I have a UIScrollView which has two pages and only scroll horizontally.
The scrolling and paging is controlled using a UIPageControl. I have placed a UIImageView on the scrollView which contains an image of an iPhone (shown in red in the image below) that says Hello inside page 1.
I wanted to animate the UIImageView to rotate and change its position as shown in the image when the user scrolls from page-1 to page-2. Also the animation should ideally rotate back when the user is scrolling back from page-2 to page-1.
The animation or movement of the UIImageView is based on how much the user is scrolling horizontally and not based on time.
How can I rotate the UIImageView back and forth based on the scroll position of the UIScrollView?

Set a delegate for your scroll view. Probably you want your view controller to be the delegate. You need to add UIScrollViewDelegate to its list of protocols.
Then, in the delegate, implement scrollViewDidScroll:. In scrollViewDidScroll:, look at the scroll view's contentOffset. Based on the contentOffset, set the image view's transform and center to rotate and move it where you want.

To find by how much the scroll view has scrolled, you can check UIScrollView's contentOffset property:
contentOffset - The point at which the origin of the content view is
offset from the origin of the scroll view.
Then to rotate that image view, you could do this:
self.imageview.transform = CGAffineTransformMakeRotation(M_PI/2);
As far as the animation goes, I personally don't have much experience with it. But you could have a look at Simple Animation Using UIImageView.

Related

UIScrollview subviews not recognizing pan gesture after zooming

I have a scrollview to which I have added an image view as a subview. The contentsize of the scrollview is same as the size of the imageview (width and height). There are two buttons outside the scrollview. When I click on either on them, a small rectangle view is added as a subview to the imageview. This rectangle view can be dragged anywhere on the imageview by the user after it has been added.
This works fine until I pinch to zoom the scrollview. In the viewForZoomingInScrollView: method, I return the imageview and the zooming works fine. But in the zoomed view when I try to drag around the rectangle view, it does not move. It does not recognize the pan gestures any more. Any idea why this is happening?
This Dragable view is too small and I have to change its position so I am zomming scrollview to touchable view.
I think you should do this:
Inform the delegate when the zoom is finished by calling:scrollViewDidEndZooming:withView:atScale:
in this method you update the parent view of the view where the rectangle can move or may be something else.....but you have to update something in this method....please put your specific code where the problem is.

Detect touches under a UIScrollView

I built a project that has a mapView (Google Maps), tableView and a UIScrollView.
The tableView is on the bottom and when the app starts you see a really small part of it and the most of it is out of the screen (on the bottom). When the user scrolls the tableView is revealed and going up from the bottom until it covers all of the screen. It's all working but I have one small problem: I want that the user will be able to touch the map (zoom, move, etc.) but the UIScrollView is on top of the map and when the user tries to interact with the map the scrollView detects a scroll and the map doesn't get a touch event. Is there any way that the UIScrollView wouldn't detect the touch on the area of the map? The scrollView should cover all of the screen for the tableView detection (or maybe not and there is another way?) and I don't want the map to be a subclass of the scrollView because it will go up with the table when the user scrolls (I want the tableView to go on top of the map and not with it).
Thanks!
Going off of my comment. You will need to set the top space to superview constraint on the scroll view. Create an IBOutlet for the constraint and a float variable for the value of the constraint and also connect it to your top space to superview constraint that you will create in interface builder on the scrollview.
in your .h:
IBOutlet NSLayoutConstraint *topSpace;
float topSpaceValue;
Then update that constraint using this:
topSpace.constant = topSpaceValue;
You can detect scrolling in the scrollview with this method and set the topSpace constraint:
-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
topSpace.constant = topSpaceValue;
}
Now, the actual logic of detecting how fast the scrollview is moving and what value to set for topSpaceValue is up to you to figure out. Also you will need to detect what direction the scroll view is moving to increase or decrease the value of topSpaceValue.
This looks like the link you need for detecting the speed: iPhone UIScrollView Speed Check
So according to the speed, set the constraint. And you will probably want to check for a minimum value for the constraint, like 0, so the scrollview doesn't scroll off the top of the screen.

Vertical UIScrollView over horizontal UIScrollView

iOS 8, Swift.
I'm trying to have a vertically scrolling view over a horizontally scrolling view. They're both UIScrollViews. The vertical scroll view is there to allow swiping up a view from the bottom. There is a spacer view on top using auto layout that is 1 pixel wide but the screens height.
This works fine until the underlying view is itself a scrollview to support horizontal scrolling.
I somehow need to pass the left/right pan gesture to the subview which is a UIScrollView.
Currently, the top level vertical scroll view is capturing all the gestures and not letting the underlying horizontal scroll view see the events.
I've tried various combinations of hitTest, gestureRecognizer delegate methods, scrollview subclassing but having come up with a nice clean solution.
I can use hitTest to pass events to the underlying horizontal scroll view when tapping the empty space at the top of the vertical scroll view, but then the vertical scroll view never processes a pan or swipe up to reveal the content that should appear on a swipe up.
Ideally, I'd like the top vertical scroll view to only handle pan up/down, and pass left/right pan to subview when the vertical scroll view is at the top.
Here's a brief method that may help you out:
Obj-C:
create scroll view that is invisible, and then pass the offset of the invisible scroll view or the touch events to the scroll views below depending on the offset of the touch events on the top invisible scroll view that covers the two underlying scroll views:
-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
[_verticalScrollView setContentOffset:CGPointMake(0, _insivibleScrollView.contentOffset.y)];
[_horizontalScrollView setContentOffset:CGPointMake(_insivibleScrollView.contentOffset.x, 0)];
}
You create an invisible scroll view, and by invisible, I mean you may have to keep the alpha value at like 0.01. You don't allow user interaction for the horizontal and vertical scroll views, but instead use the method above so that when the user touches the invisible scroll view you translate those touches to the scroll views below that are locked down to respond to only the offset of the invisible scroll view. As you've stated in your comment, there's probably more to this answer for your individual needs, but this is the basic "foundation" that will give you the effect that you probably want.
Swift:
Same method as above, but here's the function that you'll need:
func scrollViewDidScroll(scrollView: UIScrollView!) {
verticalScrollView.contentOffset = CGPointMake(0, invisibleScrollView.contentOffset.y)
horizontalScrollView.contentOffset = CGPointMake(invisibleScrollView.contentOffset.x, 0)
}

How can I place a non-scrolling UIView underneath the scroll indicators on a UIScrollView?

I have an application where I'm using a zooming scrollView to do image cropping to a rectangle with a fixed aspect ratio. I have a mask where I darken the parts of the image that will be cropped. Currently I add this subview to the UIScrollView's parent, making them siblings, where this mask is 'higher' than the scrollview. Looks great. Except...
This mask is also masking the scrollIndicators and therefore looks a bit dumb. I could turn off the scrollIndicators, or, ideally, I'd like to place this UIView underneath the scrollIndicators, but not get scrolled with other content, which is what would happen if I made it a subview of the scrollview via [scrollView addSubview: myMaskView];
Anyone know if this is possible?
First, subclass UIScrollView so that you can modify the default behavior of scroll view.
Second create an image view with your image, and put both the image view and your mask view to a scroll view, this way your views will be underneath the scroll indicator.
Third, in your scroll view delegate method viewForZoomingInScrollView:, return your image view, so that only the image view zooms. Note that the scroll view will adjust the content size to be the size of the returned view, but it's fine as long as your image view takes up the whole content size.
And last, override layoutSubviews method, move the mask view to visible bounds of scroll view. The layoutSubviews method is said to be called every frame of scrolling, so the position change won't be visible to end user.
For more details you can refer WWDC session video "Advanced ScrollView Techniques".
EDIT: OK, just found that you can avoid overriding layoutSubviews by implementing the delegate method scrollViewDidScroll.

horizontal scrolling of a scrollView in a scrollView - small problem

i have a scrollView that fits the whole screen. In that View i show some UIImages that scroll horizontally. Like in the PageControl Project from Apple.
Then, when the user taps the screen, i fade in a scrollView at the bottom with some other images. Also horizontally scrolling. Like in the ScrollView Project from Apple.
My problem is, that when i come to the end of the scrollView which was faded in, the upper scrollView also starts to drag. How can i stop that during activation of the second scrollView?
Redraw the frame limits on your first scrollView when the second enters the screen. That way, your touches won't respond to both views. This means you need a container-view to keep both views seperated from each other.
Then you just rescale it back whenever your second scrollView disappears.
Edit: or disable scroll in your first scrollview while the second is open.

Resources