I created the UIScrollView with content insets.
scrollView.frame = CGRectMake(-80, 180, 480, 190)
self.scrollView.contentInset = UIEdgeInsetsMake(0, 160, 0, 160);
self.scrollView.pagingEnabled = YES;
[self.scrollView setContentSize:CGSizeMake(480, 190)];
// Add three Views
[self.scrollView addSubview:view1];
[self.scrollView addSubview:view2];
[self.scrollView addSubview:view3];
[view1 setFrame:CGRectMake(0, 0, 160, 190)];
[view2 setFrame:CGRectMake(160, 0, 160, 190)];
[view3 setFrame:CGRectMake(320, 0, 160, 190)];
At first time, scrollView.contentOffset.x was -160.0
But the weird problem is when I tap on scrollView(Yellow Area), content offset x value is resetting to 0 and shown like this.
I tried several times, but tapping on Scroll View resets the content offset to 0.
How can I prevent this?
UIScrollView paging works by scrolling pages with the same width of the scrollView (in your case pages of 480 width). This means that you have 1 single page (you'd still be able to scroll left and right due to the 160 content inset).
One way to make this work would be:
self.scrollView.frame = CGRectMake(80, 180, 160, 190);
self.scrollView.clipsToBounds = NO;
self.scrollView.contentInset = UIEdgeInsetsZero;
self.scrollView.pagingEnabled = YES;
[self.scrollView setContentSize:CGSizeMake(480, 190)];
This will draw and scroll correctly, however, the sides of the screen will not be interactive (80 pixels on each side, since the control starts at frame.origin.x=80 and ends at 80+160=240).
Second option would be to handle paging yourself, by using methods provided by UIScrollViewDelegate.
- (void)viewDidLoad
{
[super viewDidLoad];
// pageIndex must be declared as a class member - this is used to prevent skipping pages during scroll
pageIndex = 0;
self.scrollView.frame = CGRectMake(0, 180, 320, 190);
self.scrollView.contentInset = UIEdgeInsetsMake(0, 80, 0, 80);
self.scrollView.pagingEnabled = NO;
self.scrollView.clipsToBounds = YES;
[self.scrollView setContentSize:CGSizeMake(480, 190)];
self.scrollView.delegate = self;
}
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{
int pageWidth = 160;
int pageX = pageIndex*pageWidth-scrollView.contentInset.left;
if (targetContentOffset->x<pageX) {
if (pageIndex>0) {
pageIndex--;
}
}
else if(targetContentOffset->x>pageX){
if (pageIndex<3) {
pageIndex++;
}
}
targetContentOffset->x = pageIndex*pageWidth-scrollView.contentInset.left;
NSLog(#"%d %d", pageIndex, (int)targetContentOffset->x);
}
In addition to alex's first approach with setting clipsToBounds to NO, I need to react to the scroll outside of the scroll view bounds. So I created ScrollForwarderView class which is subclass of UIView.
ScrollForwarderView.h
#import <UIKit/UIKit.h>
#interface ScrollForwarderView : UIView
#property (nonatomic, weak) UIScrollView *scrollView;
#end
ScrollForwarderView.m
...
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
if ([self pointInside:point withEvent:event]) {
return _scrollView;
}
return nil;
}
Then place UIView with custom class ScrollForwarderView above the scroll view, link scrollView property to my scroll view and it nicely forwarded the user events to scrollview.
Related
This is how I am adding UIScrollView in my viewDidLoad
UIScrollView* scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height)];
scrollView.backgroundColor = [UIColor redColor];
scrollView.scrollEnabled = YES;
scrollView.pagingEnabled = YES;
scrollView.showsVerticalScrollIndicator = YES;
scrollView.showsHorizontalScrollIndicator = YES;
scrollView.contentSize = CGSizeMake(self.view.bounds.size.width , self.view.bounds.size.height * 2);
[self.view addSubview:scrollView];
scrollView.delegate = self;
When the scrollView is loaded for the first time it's coordinates are : {(0,0), (widthOfiPhone, 0), (0, heightOfiPhone), (widthOfiPhone, heightOfiPhone)}
Whenever the scroll finishes, I want to get the co-ordinates of viewport in scrollview. How to do this? Thanks
Edit:
Image Credits: https://oleb.net/blog/2014/04/understanding-uiscrollview/
First, observe scrollview agent, and then implement its proxy method
(void) scrollViewDidEndDecelerating: (UIScrollView *) scrollView {
NSLog (# "% f,% f,% f,% f", scrollView.frame.origin.x,
scrollView.frame.origin.y,
scrollView.frame.size.width,
scrollView.frame.size.height);
}
This should be possible
You can implement UIScrollView delegate method to detect when scroll is end : scrollViewDidEndDecelerating and in this method you can get coordinates of your scrollview and it's content. Btw content's cooridinate will be same with respect scrollview!!!
You can get visible rect from scrollview like,
CGRect visibleRect = [subViewOfScrollView convertRect:subViewOfScrollView.bounds toView:self.view];
I have a UIScrollView in my storyboard that scrolls vertically. Inside of this scrollView, I have programmatically created a horizontal UIScrollView.
The vertical scrollView is called scroller. The horizontal UIScrollView is called scrollInfo. For some reason i am unable to register when the horizontal scrollInfo is being used. Any ideas on why this isn't working?
This is in my viewDidLoad:
scrollInfo = [[UIScrollView alloc] initWithFrame:CGRectMake(0,
155,self.view.frame.size.width, self.view.frame.size.height/4)];
//This will create a scrollview of device screen frame
scrollInfo.scrollEnabled = YES;
NSInteger numberOfViews = 3;
for (int i = 0; i < numberOfViews; i++) {
CGFloat xOrigin = i * self.view.frame.size.width;
UIView *awesomeView = [[UIView alloc] initWithFrame:CGRectMake(xOrigin, 0,
self.view.frame.size.width, self.view.frame.size.height/4)];
awesomeView.backgroundColor = [UIColor colorWithRed:0.5/i green:0.5 blue:0.5
alpha:1];
[scrollInfo addSubview:awesomeView];
}
// 3 views added horizontally to the UIScrollView by using xOrigin.
scrollInfo.contentSize = CGSizeMake(self.view.frame.size.width * numberOfViews,
self.view.frame.size.height/4);
[scroller addSubview:scrollInfo];
//Add scrollview to viewcontroller
scrollInfo.pagingEnabled = YES;
pageControl = [[UIPageControl alloc] init]; //SET a property of UIPageControl
pageControl.frame = CGRectMake(0,200,self.view.frame.size.width,
self.view.frame.size.height/8);
pageControl.numberOfPages = 3; //as we added 3 diff views
pageControl.currentPage = 0;
[scroller addSubview:pageControl];
Here is my scrollViewDidScroll method:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
if ([mainTableView isEqual: scrollView]) {
if (mainTableView.contentOffset.y > 0) {
// yourTableView is not on top.
NSLog(#"not top");
}
else {
// yourTableView is already on top.
NSLog(#"is top");
[UIView animateWithDuration:0.5f delay:0
options:UIViewAnimationOptionCurveLinear animations:^{
scroller.contentOffset = CGPointMake(0, 0);
} completion:NULL];
}
}
else {
CGFloat pageWidth = self.view.frame.size.width;
int page = floor((scrollInfo.contentOffset.x - pageWidth / 2 ) / pageWidth) +
1; //this provide you the page number
pageControl.currentPage = page;// this displays the white dot as current page
NSLog(#"page");
}
}
Looks like you forget to connect UIScrollViewDelegate to your scrollviews. After doing this you better operate with scrollview.tag to recognize which scrollview calling delegate
I have two scrollViews i.e one inside other,
-OuterScroll
----InnerScroll
Need Outer scrollView to stop automatically and inner starts in a single scroll when outer ScrollView reaches contentOffSet value of greater than 300.
So far..
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
[self.view endEditing:YES];
if (scrollView ==scrollSuperView)
{
if (scrollView.contentOffset.y>300) {
[scrollContentView setScrollEnabled:YES];
}else if (scrollView.contentOffset.y<10){
[scrollContentView setScrollEnabled:NO];
}
}
}
By the way scrollSuperView is outerScroll and scrollContentView is inner.
Any help appreciated.
1.scrollSuperView (Outer)
frame = CGRect(0, 0, 320, 468)
contentSize = CGSizeMake(320, 600)
2.scrollContentView (Inner)
frame = CGRect(0, 300, 320, 468)
contentSize = CGSizeMake(320, 600)
So i have above two scrollViews as mentioned outer and inner
Once outer scrollView reaches content offset of >300 then scrollEvent much be passed to inner ScrollView if user is scrolling by putting finger on inner ScrollView..
Hope its more clear now.
Setting outer scrollView's delaysContentTouches to NO will pass touch events from outer scrollView to inner scrollView... "in a single move"
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
if (scrollView == scrollSuperView) {
//outer scrollView
if (scrollView.contentOffset.y >= 300) {
//NSLog(#"Outer scrollView ContentOffset has reached 300");
[scrollSuperView setDelaysContentTouches:NO];
[scrollContentView setScrollEnabled:YES];
}
}
else if (scrollView == scrollContentView) {
//inner scrollView
if (scrollView.contentOffset.y == 0) {
//NSLog(#"Inner scrollView ContentOffset has reached 0");
[scrollSuperView setDelaysContentTouches:YES];
[scrollContentView setScrollEnabled:NO];
}
}
}
Assumptions:
scrollSuperView (Outer)
frame = CGRect(0, 0, 320, 300)
contentSize = CGSizeMake(320, 600)
delaysContentTouches = YES
scrollEnabled = YES
scrollContentView (Inner)
frame = CGRect(0, 400, 320, 200)
contentSize = CGSizeMake(320, 400)
delaysContentTouches = YES
scrollEnabled = NO
-(void)viewDidLoad{
//write your code here
innerScrollView.scrollEnabled =NO;
outerScrollView.scrollEnabled =YES;
//above two lines makes touch(scroll) events given to outer and not inner.
}
And your modified method,
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
[self.view endEditing:YES];
if (scrollView ==scrollSuperView)
{
if (scrollView.contentOffset.y>300) {
outerScrollView.scrollEnabled =NO;
innerScrollView.scrollEnabled =YES;
[outerScrollView setContentOffset:CGPointMake(0, 200)];
}
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
[self.view endEditing:YES];
if (scrollView ==scrollSuperView && decelerate==NO)
{
if (scrollView.contentOffset.y>300) {
outerScrollView.scrollEnabled =NO;
innerScrollView.scrollEnabled =YES;
[outerScrollView setContentOffset:CGPointMake(0, 200) animated:YES];
}
}
}
I have a UIScrollView with a UIView inside it, in side the UIView I made a button to add textLabels to it.
and ideally I would want a really big canvas and be able to put text on it and pan and zoom around. however with the UIScrollView it does zoom, but does not pan at all
It seems that when I remove the UIView that i add inside the UIScrollView it works fine.
heres viewDidLoad:
[super viewDidLoad];
CGFloat mainViewWidth = 700;
CGFloat mainViewHeight = 500;
//scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * kNumberOfPages, scrollView.frame.size.height * kNumberOfPages);
//self.mainScrollView.bounds = CGRectMake(0., 0., 3000, 3000);
self.mainScrollView.scrollsToTop = NO;
self.mainScrollView.delegate = self;
self.mainScrollView.maximumZoomScale = 50.;
self.mainScrollView.minimumZoomScale = .1;
self.mainScrollView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
self.mainView = [[UIView alloc] initWithFrame: CGRectMake(0, 0, mainViewWidth, mainViewHeight)];
[self.mainView setUserInteractionEnabled:NO];
self.mainView.backgroundColor = [[UIColor alloc] initWithRed:0.82110049709463495
green:1
blue:0.95704295882687884
alpha:1];
[self.mainScrollView setContentSize:CGSizeMake(5000, 5000)];
[self.mainScrollView insertSubview:self.mainView atIndex:0];
Edit:
Heres the all I have for UIScrollViewDelegate
#pragma mark - Scroll View Delegate
- (void)scrollViewDidScroll:(UIScrollView *)sender {
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
//
return self.mainView;
}
- (void)scrollViewDidEndZooming:(UIScrollView *)zoomedScrollView withView:(UIView *)view atScale:(float)scale
{
}
I just went through this exact same dilemma.
My UIScrollView exists within the storyboard, and if I add a UIView (containerView) within that storyboard to the UIScrollView, the image fails to pan. And all sorts of other centering weirdness occurs too.
But if I do it through code:
// Set up the image we want to scroll & zoom
UIImage *image = [UIImage imageNamed:#"plan-150ppi.jpg"];
self.imageView = [[UIImageView alloc] initWithImage:image];
self.containerView = [[UIView alloc] initWithFrame:self.imageView.frame];
[self.containerView addSubview:self.imageView];
[self.scrollView addSubview:self.containerView];
// Tell the scroll view the size of the contents
self.scrollView.contentSize = self.containerView.frame.size;
... then it works just fine.
In my app, I have a split screen in which the detail view is a scrollview. I have 5 tables which are subviews of my scrollview in which 3 table views are side by side on top and 2 table views are side by side on bottom
I have already implemented a way in which when I click any of the rows of any of the table in the scrollview, that view disappears and another view zooms into its position.
I write the following code in the didSelectRowAtIndexPath in the middle table subview,
CGFloat xpos = self.view.frame.origin.x;
CGFloat ypos = self.view.frame.origin.y;
self.view.frame = CGRectMake(xpos+100,ypos+150,5,5);
[UIView beginAnimations:#"Zoom" context:NULL];
[UIView setAnimationDuration:2];
self.view.frame = CGRectMake(xpos,ypos,220,310);
[UIView commitAnimations];
[self.view addSubview:popContents.view];
popContents is the view I need to zoom into to the view previously occupied by that particular table view and that happens correctly.
However the problem that I am facing is that since there is another table subview in the side, if I increase the frame size to say 250 or so, the part of the zoomed in view gets hidden by the tableview on the side ( as its as if a part of the zoomed in view goes under the tableview on the side).
Is there anyway to correct this so that my zoomed in view would not get hidden by the tableviews on its sides?
I hope I have explained my problem correctly...
UPDATE:
Here is the code I am using for adding the subviews for the scrollview
// Scroll view
scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 30, 1000, 740)];
scrollView.contentSize = CGSizeMake(1000, 700);
scrollView.delegate = self;
scrollView.scrollEnabled = YES;
scrollView.showsHorizontalScrollIndicator = YES;
scrollView.backgroundColor = [UIColor scrollViewTexturedBackgroundColor];
[self.view addSubview:scrollView];
aView = [[aViewController alloc] initWithNibName:#"aViewController" bundle:nil];
aView.view.frame = CGRectMake(10, 25, 220, 310);
[aView loadList:objPatients];
[scrollView addSubview:aView.view];
bView = [[bViewController alloc] initWithNibName:#"bViewController" bundle:nil];
bView.view.frame = CGRectMake(10, 350, 220, 310);
[bView loadList:objPatients];
[scrollView addSubview:bView.view];
cView = [[cViewController alloc] initWithNibName:#"cViewController" bundle:nil];
cView.view.frame = CGRectMake(240, 25, 220, 310);
[cView loadList:objPatients];
[scrollView addSubview:cView.view];
dView = [[dViewController alloc] initWithNibName:#"dViewController" bundle:nil];
enView.view.frame = CGRectMake(240, 350, 220, 310);
[enView loadList:objPatients];
[scrollView addSubview:dView.view];
eView = [[eViewController alloc] initWithNibName:#"eViewController" bundle:nil];
eView.view.frame = CGRectMake(470, 25, 220, 310);
[eView loadList:objPatients];
[scrollView addSubview:eView.view];
say for example, I add the code for didSelectRowAtIndexPath in cViewController subview...
This is a guess since I would need to know how your table views are added to the scroll view, but the middle table view was probably added before the one on the side. Views are "stacked" in the order they're added with the last one on top. You'll need to get the scroll view to move the middle view to the front with this method
- (void)bringSubviewToFront:(UIView *)view
The best way to do that would be to create a protocol for the table views and make the scroll view the delegate. The method would be something like this
- (void) moveAViewToFront: (MyTableView *) aTableView
{
[self.view bringSubviewToFront: aTableView.view];
}
You would then call the delegate method before setting up the animation.
Edited
After a little more thought I realized that the subviews have a reference to their superview so this bit of code should provide an idea on how to solve the problem. I created a test app which has a view controller which adds two sub views. The view controller header file is MoveSubviewViewController.h
#import <UIKit/UIKit.h>
#interface MoveSubviewViewController : UIViewController
{
}
#end
and it's implementation is
#import "MoveSubviewViewController.h"
#import "MoveableSubview.h"
#implementation MoveSubviewViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// Create two overlapping subviews. The blue subview will start at the top of
// the frame and extend down two thirds of the frame.
CGRect superviewFrame = self.view.frame;
CGRect view1Frame = CGRectMake( superviewFrame.origin.x, superviewFrame.origin.y,
superviewFrame.size.width, superviewFrame.size.height * 2 / 3);
MoveableSubview *view1 = [[MoveableSubview alloc] initWithFrame: view1Frame];
view1.backgroundColor = [UIColor blueColor];
[self.view addSubview: view1];
[view1 release];
// The green subview will start one third of the way down the frame and
// extend all the to the bottom.
CGRect view2Frame = CGRectMake( superviewFrame.origin.x,
superviewFrame.origin.y + superviewFrame.size.height / 3,
superviewFrame.size.width, superviewFrame.size.height * 2 / 3);
MoveableSubview *view2 = [[MoveableSubview alloc] initWithFrame: view2Frame];
view2.backgroundColor = [UIColor greenColor];
[self.view addSubview: view2];
[view2 release];
}
#end
The subview class is MoveableSubview with another simple header
#import <UIKit/UIKit.h>
#interface MoveableSubview : UIView
{
}
#end
and implementation
#import "MoveableSubview.h"
#implementation MoveableSubview
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
// Move this view to the front in the superview.
[self.superview bringSubviewToFront: self];
}
#end
The thing to do is to add the
[self.superview bringSubviewToFront: self];
line before setting up the animation.