This question already has answers here:
Limiting the scrollable area in UIScrollView
(4 answers)
Closed 9 years ago.
What is the best way to set limits on the left/right scrolling of a UIScrollView. I would have thought this would be easy but all my attempts have been unsuccessful.
So, to be clear, I need a solution that will allow me to programmatically limit the scrolling extent whenever I need to during the use of my app. This will most often be in response to changes in the data being displayed.
Thanks,
Doug
You can control the size of contents using contentSize property of scroll view. If that is not sufficient for you (e.g. you need to limit scroll area to some arbitrary region in the middle of your contents) you can force contentOffset to be in required limit in the delegate method of your scroll view.
Basically code may look like:
- (void) scrollViewDidScroll:(UIScrollView*)scroll{
CGPoint offset = scroll.contentOffset;
// Check if current offset is within limit and adjust if it is not
if (offset.x < minOffsetX) offset.x = minOffsetX;
if (offset.y < minOffsetY) offset.y = minOffsetY;
if (offset.x > maxOffsetX) offset.x = maxOffsetX;
if (offset.y > maxOffsetY) offset.y = maxOffsetY;
// Set offset to adjusted value
scroll.contentOffset = offset;
}
All you would need to do is change the content size for the scroll view with the following code.
[scrollView setContentSize:CGSizeMake(width, height)];
I went with my approach of placing pan constraints in my overloaded layoutSubviews method.
Pseudo-code:
Calculate criteria for constraining pan
if (pan-constraint-is-met) {
Calculate pan-limit
[self setContentOffset:limitedContentOffset];
}
Related
As you can see in the attached image if I keep scrolling past the last object in my scrollview I can keep scrolling and then see the background. Is there a way to limit this in xcode so you can't scroll past the last object in the scroll view?
I'm new to xcode and did try researching this issue though I believe my terminology is impacting this.
Thanks
you will need to set the scrollView.contentSize size so that it fits around all your objects in the scroll view. if you have a way to determine which object is the lowest then you can use its origin + height to determine the height of the content size.
float maxHeight = 0;
for(UIView *v in [scrollView subviews]){
if(v.frame.origin.x + v.frame.size.height > maxHeight)
maxHeight = v.frame.origin.x + v.frame.size.height;
}
self.scrollView.contentSize = CGSizeMake(scrollView.frame.size.width, maxHeight+5);
So i got an imageView inside a ScrollView that should resize, which works the way i want (see a small video here: https://dl.dropbox.com/u/80699/scroll.m4v)
what i did is setting up a UIScrollViewDelegate and using the scrollViewDidScroll method to resize my image based on the scrolling offset
- (void)scrollViewDidScroll:(UIScrollView *)aScrollView
{
CGFloat scrollViewOffset = aScrollView.contentOffset.y;
if(scrollViewOffset < 0.0f) {
// postition top
CGRect imageViewRect = self.imageView.frame;
imageViewRect.origin.y = scrollViewOffset;
if(scrollViewOffset < 0.0f && scrollViewOffset >= -50.0f) {
CGFloat newBackdropHeight = kImageHeight - scrollViewOffset;
imageViewRect.size.height = newBackdropHeight;
}
self.imageView.frame = imageViewRect;
}
}
whats basically happening here is, that if the user is scrolling upwards when he is on the top (bounces enabled) the imageView expands with the scroll until a certain amount of offset(here 60px).
the problem with this is, that if i scroll very fast, the image stops resizing, but the rest of the scrollview scrolls fast down like it would normally do. then, when the scrollview snaps back, the image expands immediately and then scales down like it should (see video here: https://dl.dropbox.com/u/80699/scroll2.m4v).
with this behavior, the user-expierience is not very nice and the user sees a jumping image.
does anybody know how i could fix this?
here is a small sample project if you want to see the behavior yourself: https://dl.dropbox.com/u/80699/scroll.zip
thanks for your help!
if anything is unclear, PLEASE leave a comment
I had a quick look at your test project, and I believe the issue is that when you scroll quickly, by the time the callback is called the Y offset is greater than -50, so the image view is not resized.
I solved this by removing the inner if condition and giving the backdrop a maximum height:
if(scrollViewOffset < 0.0f) {
// postition top
CGRect imageViewRect = self.imageView.frame;
imageViewRect.origin.y = scrollViewOffset;
CGFloat newBackdropHeight = kImageHeight - MAX(scrollViewOffset,-50.0);
imageViewRect.size.height = newBackdropHeight;
self.imageView.frame = imageViewRect;
}
Hope that helps
I add few labels in UIScrollView and I want when I scroll, the the middle label font size can become bigger. And the previous middle label font size shrinks to smaller. And the change happens gradually. Like below. Label 1 move to left shrink smaller and label 2 move to middle becomes bigger. All labels in a UIScroll view.
I tried some, like when scroll I tried zoom scroll page, seems complex than I thought...
Anyone has good idea? Thanks!
Pretty simple really. Just stick a UIScrollViewDelegate to the scrollview and do something like this..
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
for (int i = 0; i < [scrollView.subviews count]; i++) {
UIView *v = [scrollView.subviews objectAtIndex:i];
float position = v.center.x - scrollView.contentOffset.x;
float offset = 2.0 - (abs(scrollView.center.x - position) * 1.0) / scrollView.center.x;
v.transform = CGAffineTransformIdentity;
v.transform = CGAffineTransformScale(v.transform, offset, offset);
}
}
But, if you aren't impressed by the affine transform, you could still scale the rect using the offset factor and set the UILabel to adjustsFontSizeToFitWidth... and you are done!
Just make sure there is enough space! Else it could get out of hand very easily.
Assumptions :
There are no other views in the scrollview apart from these labels.
Its required to work just horizontally.
It could be done with CoreAnimation. You have to keep the index of the main label (that one in the center), and after scrolling is done or when scrolling starts (use some proper for you method in UIScrollViewDelegate) and simply shrink side labels by animation.
Just make the size of the font bigger (with an animation block) when it is the middle one, and smaller when it is not.
You can add a category to UILabel with -(BOOL)isMiddle and set it to true/false.
I am new to iOS development. Can anyone give me a working sample project/ tutorial of paging based scrollview? I need to load more data in my table view from a webservice as user scrolls down.
I have spent a lot of time, but could not find anything that suits my need. Any help will be greatly appreciated.
I was able to figure out the solution of my problem. Now I am trying to detect scroll up and down based on the y offset difference. The problem is it always reads the drag to be downwards even if it is upward. This is how I am trying to detect the scroll direction:
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
CGPoint scrollOffSet = scrollView.contentOffset;
NSLog(#"Current Content offset: , y = %f", scrollOffSet.y);
NSLog(#"Previous offset , y = %f", self.previousYOffset);
if(scrollOffSet.y > self.previousYOffset)
{
self.previousYOffset = scrollOffSet.y;
NSLog(#"Scrolled Down");
self.nextPageNumber++;
//Here I send the request to fetch data for next page number
}
else {
NSLog(#"Scrolled up");
self.previousYOffset = scrollOffSet.y;
}
}
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
CGPoint scrollOffSet = scrollView.contentOffset;
NSLog(#"Current Content offset: y = %f", scrollOffSet.y);
}
The problem is: either i scroll up or down, it will always display "scrolled down", thus it goes to fetch data for next page number even if it was not intended to request. Plus, the y offset positions it returns on up/down scroll are also very confusing. Please guide me how to accurately detect an upside scroll?
Do you mean a "swipable" UIScrollView?
Paging a UIScrollView is quite easy. First make sure you have the pagingEnabled property set to YES. The UIScrollView will use it's own frame as the size of a page (like a viewport).
Use the contentSize property to determine the scrollable area.
Example:
//scrollView is a UIScrollView instance
int pageCount = 3;
scrollView.pagingEnabled = YES;
scrollView.contentSize = CGSizeMake(scrollView.frame.width*pageCount, scrollView.frame.height);
I'm currently implementing an expanding timeline. When I pinch zoom into the timeline, I need my drawn text to stay at the same relative locations on the UIView they're drawn on inside the UIScrollView that handles the zooming. (Essentially like pins on GoogleMaps) However, I don't want to zoom vertically, so I apply a transform by overriding:
- (void)setTransform:(CGAffineTransform)newValue;
{
newValue.d = 1.0;
[super setTransform:newValue];
}
This works great in keeping the timeline fixed vertically and allowing it to expand horizontally. However, I am drawing my text labels as such in a method called during setNeedsDisplay:
for (int i = 1; i < 11; i++)
{
CGRect newFrame = CGRectMake(i * (512.0/11.0) - (512.0/11.0/2.0), self.frame.size.height - 16.0, 512.0/11.0, 32.0);
NSString *label = [NSString stringWithFormat:#"%d", i+1];
[label drawInRect:newFrame withFont:[UIFont systemFontOfSize:14.0]];
}
This draws my text at the correct position in the scrollview, and nearly works perfectly. However, because of my transform to keep the zooming view static vertically, the text expands horizontally and not vertically, and so stretches out horribly. I can't seem to get the text to redraw at the correct aspect ratio. Using UILabels works, however I am going to be rendering and manipulating upwards of 1,000 such labels, so I'd preferably like to draw static images in drawRect or something similar.
I've tried changing the CGRect I'm drawing the text in (was worth a shot), and applying CGAffineTransformIdentity isn't possible because I'm already transforming the view to keep it from zooming vertically. I've also tried drawing the text in various Views to no avail, and again, I'd rather not populate an obscene amount of objects if I can avoid it.
Thanks for any help!
Instead of applying a transform inside the 'setTransform:' method, I intercepts the scale at which it is being transformed, and resize the frame of the view being transformed. The code (roughly) follows:
- (void)setTransform:(CGAffineTransform)newValue;
{
// The 'a' value of the transform is the transform's new scale of the view, which is reset after the zooming action completes
// newZoomScale should therefore be kept while zooming, and then zoomScale should be updated upon completion
_newZoomScale = _zoomScale * newValue.a;
if (_newZoomScale < 1.0)
_newZoomScale = 1.0;
// Resize self
self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, _originalFrame.size.width * _newZoomScale, self.frame.size.height);
}
As mentioned in the comments, the transform value of the CGAffineTransform is reset each time a new zooming action occurs (however, it is kept for the duration of the zooming action). So, I keep two instance variables in my UIView subclass (not sure if it's incredibly elegant, but it's not insanely terrible): the original frame the the view was instantiated with, and the "current" zoom scale of the view (prior to the current zooming action).
The _originalFrame is what is referenced in order to determine the proper sizing of the now zoomed frame, and the _zoomScale(the scale of the view prior to the current zooming action) is set to the value of _newZoomScale when the didFinishZooming callback is called in the UIScrollView containing this UIView.
All of this allows for the coordinate system of the UIView to not be transformed during zooming, so text, etc. may be drawn on the view without any distortion. Looking back at this solution, I'd wager a guess that you could also account for the transform and draw based on a stretched coordinate system. Not sure which is more effective. I had a slight concern by not calling super in setTransform:, but I haven't noticed any ill effects after about 6 months of use and development.