Not sure it's possible, but I have a scrollview with a bunch of subviews for content. When a particular subview is scrolled to and begins getting scrolled up off screen, I'd like to create the 'rubberband' effect, where the scrolling off screen becomes incrementally less as the scrolling continues (eventually after some threshold, the rubberband would 'snap', and the user would get past that particular subview. For now just focusing on the first part.)
My current attempt is to reset the contentOffset when the view's top goes above top of the scrollview, with a smaller distance between the scrollview top and subview:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
if (scrollView.contentOffset.y > _myview.frame.origin.y) {
[scrollView setContentOffset:CGPointMake(0, _myview.frame.origin.y + ((scrollView.contentOffset.y - _myview.frame.origin.y) * .7))];
}
}
When running it, the subview 'sticks' to the top of the scrollview, never going past, and not having the rubberband effect. Any thoughts or suggestions? Is this even possible? Thanks.
Related
I'm trying to scroll an NSScrollView to the bottom of the view using this code:
NSPoint newScrollOrigin;
if ([[self.chatScreen documentView] isFlipped]) {
newScrollOrigin=NSMakePoint(0.0,NSMaxY([[self.chatScreen documentView] frame])-NSHeight([[self.chatScreen contentView] bounds]));
} else {
newScrollOrigin=NSMakePoint(0.0,0.0);
}
self.chatScreen.backgroundColor=[NSColor redColor];
[[self.chatScreen documentView] scrollPoint:newScrollOrigin];
which came from here: Apple doucmentation on scrolling
When I run my program, it partially scrolls to the bottom of the view, where the screen shows the top of the view (default starting position) but when I attempt to scroll, it jumps to the bottom of the page, where I can then scroll normally.
If I scroll around to any part of the view, the next time it receives an update (which triggers it to jump back to the bottom) it looks like nothing happened, until you try to scroll, which again causes it to jump back to the bottom of the page.
Thanks in advance.
You need to scroll the clip view and not the document view.
The document view fills out the entire scroll view and the clip view is kind of an overlay which scrolls around deciding which parts are visible.
[[self.chatScreen contentView] scrollToPoint:newScrollOrigin];
Notice the scrollToPoint instead of NSView's layer backed scrollPoint
After you scroll a NSClipView its always good practice to reflectScrolledClipView so that the scrollers update.
- (void)reflectScrolledClipView:(NSClipView *)aClipView;
I have the following layout (see below), which for most circumstances works just fine. The user is able to scroll within the blue UIScrollView (which for all intents and purposes is a UITableView, but this question generalises this), and then when they've reached the end of this scroll view, they can start scrolling again (they have to take their finger off, and on again, because the inner scroll view rubberbands otherwise), and the 'super' scroll view starts scrolling, revealing the rest of the image.
It's the whole (they have to take their finger off, and on again, because the inner scroll view rubberbands otherwise) that I don't want. Ideally, once the contained UIScrollView reaches the end of its content, I want the superview to take over scrolling straight away, so that the inner scroll view doesn't rubberband.
The same goes when the user is scrolling back up; when the red scrollview reaches the top of it's content, I want the inner blue scroll view to start scrolling up straight away, instead of the red scroll view rubberbanding at the top.
Any idea how? I am able to determine when the scroll views have reached the ends of their content, but I'm not sure how to apply this knowledge to achieve the effect I'm after. Thanks.
// Inner (blue) scroll view bounds checking
if (scrollView.contentOffset.y + scrollView.frame.size.height > scrollView.contentSize.height) { ... }
// Outer (red) scroll view bounds checking
if (scrollView.contentOffset.y < 0) { ... }
Yeah. Ive got a nifty trick for you.
Instead of having your red outlined view a scrollview make it a normal UIView that fills the screen. In that view lay out your scroll view (table view) and image view as they are in your illustration.
Place a scrollview that fills the bounds of the root view (i.e. also fills the screen) above all the other scrollview and image views. Set the content size of this view to be the total content height of all the views you want to scroll through. In otherwords there is an invisible scrollview sitting on top of all your other views and its content size height is inner scrollview (tableview) content size height + image view size height.
The heierarchy should look like this:
Then this scrollview on top that you have made with the really tall content size make its delegate be your view controller. Implement scrollViewDidScroll and we'll work some magic.
Scrollviews basically scroll by adjusting the bounds origin with funky formulas for momentum and stuff. So in our scrollviewDidScroll method we will simply adjust the bounds of the underlying views:
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
//the scroll view underneath (in the container view) will have a max content offset equal to the content height
//but minus the bounds height
CGFloat maxYOffsetForUnderScrollView = self.underScrollView.contentSize.height - self.underScrollView.bounds.size.height;
CGRect scrolledBoundsForContainerView = self.view.bounds;
if (scrollView.contentOffset.y <= maxYOffsetForUnderScrollView) {
//in this scenario we are still within the content for the underScrollView
//so we make sure the container view is scrolled to the top and set the offset for the contained scrollview
self.containerView.bounds = scrolledBoundsForContainerView;
self.underScrollview.contentOffset = scrollView.contentOffset;
return;
}
//in this scenario we have scrolled throug the entirety of the contained scrollview
//set its offset to the max and change the bounds of the container view to scroll everything else.
self.underScrollView.contentOffset = CGPointMake(0, maxYOffsetForUnderScrollView);
scrolledBoundsForContainerView.origin.y = scrollView.contentOffset.y - maxYOffsetForUnderScrollView;
self.containerView.bounds = scrolledBoundsForContainerView;
}
You will find that as scrollViewDidScroll is called every frame of animation that this faux scrolling of the contained views looks really natural.
But wait! I hear you say. That scroll view on top now intercepts ALL touches, and the views underneath it need to be touched as well. I have an interesting solution for that as well.
Set the scrollview on top to be off screen somewhere (i.e. set its frame off screen, but still the same size.) and then in your viewDidLoad method you add the scrollview's panGestureRecogniser to the main view. This will mean that you get all the iOS natural scrolling momentum and stuff without actually having the view on the screen. The contained scroll view will now probably go juddery as its pan gesture recognizer will get called as well (they work differently to UIEvent handling) so you will need to remove it.
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self.view addGestureRecognizer:self.scrollview.panGestureRecognizer];
[self.underScrollview removeGestureRecognizer:self.underScrollView.panGestureRecognizer];
//further code to set up content sizes and stuff
}
I had fun making this so heres a link to the sample project on github:
https://github.com/joelparsons/multipleScrollers
EDIT:
To show the scrollbar for the top scrollview when its off the screen no matter where you put it you can set the scrollIndicatorInsets to an inset created like this:
CGPoint scrollviewOrigin = self.scrollview.frame.origin;
self.scrollview.scrollIndicatorInsets = UIEdgeInsetsMake(-scrollviewOrigin.y,0,scrollviewOrigin.y,scrollviewOrigin.x);
*caveat that the scrollview still has to be the right height but I'm sure you get the idea.
And then to make the bar draw outside the scrollview's visible bounds you have to turn off clips to bounds
self.scrollview.clipsToBounds = NO;
OMG. jackslash, you saved my life.
In my case, I need to use three depth of scroll views.
Parent Scroll View
that has a scroll view as one of the children
Child Scroll View: shown as 'Explanation Scroll View / Review Table View / Information Scroll View' in the below image)
Hidden Scroll View
which is distribute own content offset to 'Parent Scroll View' and 'Child Scroll View'
which has content size of whole flatten contents
Screenshot of view hierarchy
After setting view hierarchy, I just need to sync whole flatten content size and distribute content offset properly.
Observable.combineLatest(
overviewStackView.rx.observe(CGRect.self, #keyPath(UIStackView.frame)).unwrap(),
explanationScrollView.rx.observe(CGSize.self, #keyPath(UIScrollView.contentSize)).unwrap()
)
.subscribe(onNext: { [weak self] overviewStackViewFrame, explanationScrollViewContentSize in
guard let self = self else { return }
let totalContentHeight = overviewStackViewFrame.height + self.segmentedControl.frame.height + explanationScrollViewContentSize.height
self.hiddenScrollView.contentSize.height = totalContentHeight
})
.disposed(by: disposeBag)
hiddenScrollView.rx.didScroll
.subscribe(onNext: { [weak self] _ in
guard let self = self else { return }
let currentHiddenScrollViewOffsetY = self.hiddenScrollView.contentOffset.y
let parentScrollViewMaxOffsetY = self.overviewStackView.frame.height
let expectedChildScrollViewOffsetY = max(currentHiddenScrollViewOffsetY - parentScrollViewMaxOffsetY, 0)
self.parentScrollView.contentOffset.y = min(parentScrollViewMaxOffsetY, currentHiddenScrollViewOffsetY)
self.explanationScrollView.contentOffset.y = expectedChildScrollViewOffsetY
})
.disposed(by: disposeBag)
I need to have my UISCrollView only accept scrolls in one direction, not only one dimension. The ScrollView contains album art for songs in a playlist on a horizontal direction. It is paged, so each cover has its own page. When the user swipes or drags the cover to the left, the next cover slides in place and the next song is played.
It should not be possible to go back to a previous song, or cover. How can i prevent this behavior?
I tried the following:
- (void)scrollViewDidScroll:(UIScrollView *)scrolledView
{
if(scrollView.contentOffset.x < (pageIndex * 320) - 320)
[scrollView setContentOffset:CGPointMake((pageIndex * 320) - 320, 0)];
}
But if i do a quick slide to the "previous" direction, the cover will slide about 150px to the "next" direction, strange.
I have also tried removing the previous covers with removeFromSuperview, but this only leaves a black space, dragging can still be done.
Lastly, i tried to move the covers:
-(void) reloadCoverScrollView{
for(int i = 1; i < [scrollView.subviews count]; i++){
[scrollView exchangeSubviewAtIndex:i withSubviewAtIndex:i - 1];
}
[scrollView setNeedsDisplay];
}
How can i accomplish what i want? The ScrollView should behave as if it was always at the first page. Thanks.
You have two options:
you build your own custom view
you change the scrollview behaviour by moving the current page at offset 0
I explain both solutions:
** CUSTOM VIEW (NO SCROLL VIEW) *
What you need here is a scroll view where most of the useful scroll view features are removed: no continuous scrolling (but pagination), no zoom, limited content size (so you are limited to one page).
In my opinion you should make a view controller where you instantiate two views: one is the current view, the other is the next view; the current view is visible, the next view is placed just outside the window. Then you add a single finger pan gesture and by tracking its status (it is a continuous gesture) you can slide the second view on top of the first; when you consider the swipe complete then you will finish the animation. At the end of the animation you set the new page as "first" and render the hidden second page with the next view, and so on...
** KEEP USING SCROLL VIEW **
In such case your view controller that behaves as UIScrollView delegate must behave in such way that the visible page is placed at content offset zero. So let's say you start at page 0 and you have a list of pages in the scroll view: page 1, page 2, ...
As soon as you swipe to page1 and the animation is finished, you immediately translate all view from page 1 by one page on the left (so if your page is 320px wide you will translate all subviews by 320px on the left) and you will remove the subview at page 0. Then you will reset your scroll view content offset to the origin (0,0). So at the end you will have your new page 1 set at position 0, page 2 moved to position 1 and so on. It will be impossible to scroll left but only right.
When you used "removeFromSuperview" you did the right thing but you forgot to translate the subview and reset the content offset.
In my iphone application I want to use 2 scrollviews and they have some images inside. Well, my question is when I scroll vertically on my first scrollview I want to explore the content of it however when I scroll horizontally I want to move to my second scrollview. I hope I explained clearly.
Well, I tried to use 3 scrollviews first of them located on the background, others are located on the first scrollview but I can only control the background scrollview or the others at once.
Is there a way to control first one horizontally and the others vertically.sorry for my english, hope it makes sense.
I have two recommendations.
1) Scrollviews can scroll horizontally and vertically - so you dont need two of them if you have content in a vertical direction and content in a horizontal direction. You can use one.
2) If for some reason you really do need 2, then you can detect a horizontal swipe by subclassing UIScrollView and switch to the other.
Remember that a UIScrollView will scroll in any direction that exceeds its contentSize. So all you need to do in the first case (1) is take the view that is inside say scrollview 2 (the horizontal scrollview) and put that view in the scroll view to the left or the right outside of the scrollviews viewport when the user scrolls they will see that view and can of course scroll vertically there as well.
If you use method 2 - make sure that the content size of scrollview one is at leat a few pixels more wide than the content size so that you can detect a horizontal swipe then invoke the coe to switch to your other scroll view. If you dont subclass UIScrollview to get the swipe you probably wont get the event. So do that add a little to the width of that view and then look for a value less than the left edge of the scroll view and switch to the other scroll view. You can do the same in reverse to go back to the previous scrollview.
I hope this helps - sorry no code at the moment, but I do have code working on iOS and OSX that does this.
You can distinguish both UIScrollView via if statement
Set delegate of both UIScrollView
Then compare your scrollView in its delegate method. You can change your delegate method according to your requirement -
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
if(firstScrollView == scrollView)
{
//Do your work for firstScrollView
}
if(secondScrollView == scrollView)
{
//Do your work for secondScrollView
}
}
try to do in delegates methords
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
set some conditions like
if(myScroll1)
{
//scroll vatical.
}
if(myScroll2)
{
//scroll horizontal.
}
this is not complete code this is an idea Best of luck..
I have a UIScrollView which is scrollable both vertically and horizontally. This view is filled with lots of buttons, each of them with its own width (but all with the same height).
When one of these buttons gets tapped, a slider-like interface is brought to life. If this interface goes over the selected button, the whole scroll view must be scrolled so that the button becomes visible once again.
My app behaves as expected when the Y coordinate of the scroll view's content offset is set to a limit (this limit can be 0 or the view's height). But if the content offset is located in an intermediate vertical position, the scrolling just doesn't seem to happen.
At first, I tried the following approach:
CGPoint newOffset = CGPointMake(self.scrollView.contentOffset.x + horizontalVar,
self.scrollView.contentOffset.y);
[self.scrollView setContentOffset: newOffset animated: YES];
Which didn't work, as I mentioned.
Then, I tried to manually animate the view, using its property setter:
[UIView animateWithDuration: 0.3 animations: ^{
CGPoint newOffset = CGPointMake(self.scrollView.contentOffset.x + horizontalVar, self.scrollView.contentOffset.y);
self.scrollView.contentOffset = newOffset;
}];
That approach produced the following result: if the scroll view is in an intermediate vertical position when one of its buttons gets tapped, the content offset update causes a visual change, but the view almost immediately returns to its original state.
I have no other clues on the subject. Could you please help me?
Maybe it's because you didn't set the ContentSize of your scrollView.