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.
Related
I have an Imageview covering half of the screen height and a tableview below it. Both are wrapped inside a UIScrollView. I want to scroll the whole view. Means inner scroll of tableview won't work and when I scroll, outer scroll will scroll image view up and then showing cells of tableview. At the end, Imageview will hide behind scroll and tableview content will take entire space. Can anybody tell me how to achieve this. ?
Thanks
I don't think you need the outer scroll view(UIScrollView). Why don't you add only the inner table view and image view to where your outer scrollview is added. The image view can be added either above or below the table view. Let say your image view is below the table view then your image view will be covered by table view. In order to make it fully visible, set the talbview's content inset top to imageview's height and its background to clear color. then you can see both image and table view contents without one covering the other. The last thing you need to do is you have to handle the image view's y position when you scroll the table view so it looks like they are in the same scroll view. Use the scroll view delegate that is already available to you and play with scroll view's content offset and image view's y position.
I answered some similar question here with some sample code. Hand off parent container's pan gesture to nested UICollectionView
It does with collection view but the main idea is same.
I want to have a background image that does not move and have a scrollview over it that allows users to scroll through content while the back image remaining static.
I have tried adding an image to my view and then after a scroll view over it but I'm unable to scroll.
I'm trying to achieve an effect similar to this:
Am I on the right path to achieving this?
You have to set contentSize for UIScrollView. ContentSize has to greater than frame size.
Imagine a composition like this ->
UIViewController with root view containing these subviews :
- header view pinned to top,
- footer view pinned to bottom,
- scrollview matching the screen bounds with uiimageview as content where the image of the image view is a landscape image and the imageview size is aspect fitting the scrollview, zommscale is 1.
If I rotate this controller, thanks to proper layout(doesnt matter if manual or autolayout) the resulting animation to new landscape screen bounds is flawless.
If I put this controller as a member of UIPageViewController multiple times (effectively creating a gallery) the rotation of any particular page, containing a controller from above is also flawless.
In both cases above, none of the layers dissapear, the resizing animation nicely comforms to layout rules. The animation as a whole makes complete sense.
Now let's create a Collection controller with a horizontal flow layout. Zero insets, zero interitem size, and the cell size matching one screen. We ended up with horizontal gallery right?
So why, when I rotate the device, is the final animation composition so messy?
I slowed down the animation and what I see is views from neighbouring controllers temporarily "leaking in"
the central image view is deformed while animated and eventually thrown away, and finaly it calms down and a new! cell content is shown with proper layout that comforms the landscape device orientation. It's like those views are not sure what they want and behave like drunk.
Why cant the collection view rotate in such a way that only the cell will resize alongside the animation coordinator and firmly keep it's center in the center of screen?
How to force collection view to resize it's current and only visible cell in same manner as if it was a root view?
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.
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.