Nested UIScrollViews and event routing - ios

I have 2 scroll views, both of which are supposed to scroll vertically. The outer scroll view (red) contains a search bar and the inner scroll view (blue). The inner scroll view is supposed to scroll infinitely (it contains images/items and has an endless scrolling implementation).
The way I want this controller to work is as follows:
When I scroll down, the outer scroll view should scroll first and the search bar should disappear (scroll out of the content area). Only after that the inner scroll view should start scrolling.
When scrolling back up, the inner scroll view should scroll all the way to its top. Only then the outer scroll view should take the scroll events and finally scroll up to make the search bar visible again.
If I just nest them in IB without any modifications the inner scroll view catches all the scroll events and it works the other way around.
Please bear in mind that I'm using the inner scroll view as a simplifying metaphor here. In my app I actually have a control here, which has a scroll view with nested table views (scroll view lets me page horizontally, table views let me scroll vertically).

If you are able to, set a common UIScrollViewDelegate on the 2 scroll views, and implement the following:
- (void) scrollViewDidScroll: (UIScrollView*) scrollView
{
if (scrollView == self.mainScrollView)
{
/* Handle instances when the main scroll view is already at the bottom */
if ( scrollView.contentOffset.y
== scrollView.contentSize.height - scrollView.bounds.size.height)
{
/* Stop scrolling the main scroll view and start scrolling the
* inner scroll view
*/
self.innerScrollView.scrollEnabled = YES;
self.mainScrollView.scrollEnabled = NO;
}
else
{
/* Start scrolling the main scroll view and stop scrolling the
* inner scroll view
*/
self.innerScrollView.scrollEnabled = NO;
self.mainScrollView.scrollEnabled = YES;
}
}
else if (scrollView == self.innerScrollView)
{
/* Handle instances when the inner scroll view is already at the top */
if (self.innerScrollView.contentOffset.y == 0)
{
/* Stop scrolling the inner scroll view and start scrolling the
* main scroll view
*/
self.innerScrollView.scrollEnabled = NO;
self.mainScrollView.scrollEnabled = YES;
}
else
{
/* Start scrolling the inner scroll view and stop scrolling the
* main scroll view
*/
self.innerScrollView.scrollEnabled = YES;
self.mainScrollView.scrollEnabled = NO;
}
}
}
Please note that I haven't tested this, but the logic could be somewhat like this (either you set scrolling enabled or you disable user interaction, or something). Most probably this will not be enough of a solution as you would like, but I'm sure a common UIScrollViewDelegate is the solution to your problem.

I given the example for one scrollview, samething you have to create onemore scrollview and add based on dynamic height and content size it will work.
// .h file
#property (nonatomic, strong) UIScrollView *scrlSearch;
// .m File // ViewDidLoad
scrlSearch = [[UIScrollView alloc] init];
// For first scroll screen height was ((total screen height / 100 )* 10% )
// For Second scroll screen height was ((total screen height / 100 )* 90% )
scrlSearch.frame = CGRectMake(0, 0, (YourScreenWidth), (YourScreenHeight));
// YourVIEW = add any view to scrollbar
[scrlSearch addSubview:YourVIEW];
CGSize contentSize = scrlSearch.frame.size;
// YourContentHeight = dynamic content or static content height
contentSize.height = YourContentHeight;
// set the ContentHeight for scrolling
[scrlSearch setContentSize:contentSize];
// add the scrollview into delegate
[scrlSearch setDelegate:self];

Use just one scrollView and set the contentInset/contentOffset for the search bar. Something along this line:
UIEdgeInsets oldEdgeInset = [[self scrollView] contentInset];
CGRect f = [[self searchBar] frame];
UIEdgeInsets newEdgeInset = UIEdgeInsetsMake(CGRectGetMaxY(f), 0, 0, 0);
CGPoint offset = [[self scrollView] contentOffset];
offset.y += oldEdgeInset.top - newEdgeInset.top;
[[self scrollView] setContentOffset:offset];
[[self scrollView] setContentInset:newEdgeInset];
[[self searchBar] setFrame:f];

I am not sure about the structure you have and want to implement..
I have made a test project find here
But the project will definitely help you to manage different scrollviews all together..
The application might not be perfect though, but will give you some idea to achieve the solution.
Hope it helps..
Cheers

You should add inner scrollview on outer scrollview, but inner scrollview 'y' position should be content off set of outer scrollview like...
innerScrollView.frame = CGRectMake(10, outerScrollView.contentSize.height, 300, 440);
After this you can add any view on this innerScrollView, you can set contentOffset etc for innerScrollView.
Finally you should increase the contentSize for outer scrollview.
outerScrollView.contentSize = CGSizeMake(320, innerScrollView.frame.size.height+actualContentSizeOfOuterScroolView);
I think it helps for you!

Create a swipe gesture recognizer to your top-most view (above all the scroll views, on your view controller's view), and make it recognize UISwipeGestureRecognizerDirectionUp.
Then, you need to notify your controller whenever the outer scroll view scrolls.
Once it's scrolled down, add the gesture recognizer. When it hits the top again (outerScrollView.contentOffset == (0,0)), remove the gesture recognizer.
The gesture should 'eat' all the swiping events while it's present, making your inner scroll views to not receive the touch event and therefore will not scroll

Related

how to keep uiview in view

i have a view that is required to be stayed on the view when the user scroll up or down in a scrollview.
i managed to let it stay on top of the view but how can i allow it to stay at the bottom of the view when i scroll down ? EDIT: attached picture to explain better.
the view will alway be visible on the view.
-(void) scrollViewDidScroll:(UIScrollView *)scrollView
{
NSLog (#"Content Offset: %f", self.playlistTableview.contentOffset.y);
if (self.playlistTableview.contentOffset.y > playerPosition) // will keep the view at the top
{
CGRect newFrame = self.playerView.frame;
newFrame.origin.x = 0;
newFrame.origin.y = +self.playlistTableview.contentOffset.y;
[self.playerView setFrame: newFrame];
}
}
you can see how the NZD have a top overlay that stops
Try to add your ScrollView and Always Stay view in a container view. So it will not scroll when you do scroll the scroll view. and anytime you can change your always stay view to different frame to top or bottom as u needed
UIView--->
1st subview--->UIScrollView
2nd subview--->Don't ScrollMeView/Always Stay view
I think you have added your view in contain of UIScrollView.
I mean, main container for your view is UIScrollview, so it'll work as subview of UIScrollview and will follow scrollview properties.
Can you please try to add your view on main view.
[self.view addSubView:yourViewObj];
If that comes behind the scrollView, then please try with
[self.view bringSubviewToFront:yourViewObj];

How can I cause UIScrollView to lock 2 out of 3 UIViews when scrolling?

I have an iPad app (XCode 4.6.3, iOS 6.2, ARC and Storyboards) which has the following structure on the bottom half of one of the scenes (all of the grids are UIViews, as is SubViewData).
The purpose is to have something that looks like a spreadsheet; I need to be able to scroll horizontally and the Left Grid will stay locked and if I scroll vertically, the Top Grid will stay locked.
This what it looks like now, without the scrolling (there is more to the right and also down):
UPDATE: This is the code that defines the UIViews:
I have looked in SO and Google and found no examples of this. Can someone please tell me what I need to change to get this code to work properly, or give me some good docs where I can get detailed information on contentOffset? (I have already read the UIScrollView, and it's no help!)
SOLVED - it's now working... this is how I got it to work, with the help of Fogmeister:
created a separate top row and left row UIView to hold the grid hours and staff names
embedded those new UIViews in UIScrollViews (Editor -> Embedd in scroll view)
followed the instructions from Fogmeister with regard to the code to make it happen.
This is the new structure:
And this is the code to make it happen:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGPoint mainOffset = [scrollView contentOffset];
NSLog(#"\n\nmainOffset.x: %f\nmainOffset.y: %f", mainOffset.x, mainOffset.y);
// set the horizontal offset of the main view onto the column headers
[self.topGridSV setContentOffset:CGPointMake(mainOffset.x, 0)];
if(mainOffset.x < 0) {
[self.topGridSV setContentOffset:CGPointMake(0, 0)];
[self.schedScrollView setContentOffset:CGPointMake(0, 0)];
}
// set the vertical offset onto the row headers
[self.leftGridSV setContentOffset:CGPointMake(0, mainOffset.y)];
if(mainOffset.y < 0) {
[self.leftGridSV setContentOffset:CGPointMake(0, 0)];
[self.schedScrollView setContentOffset:CGPointMake(0, 0)];
}
OK, the way I'd do this is to move the "header" row and column into their own scroll view.
So you'll have a scrollview in the middle with the actual cells in.
Then you'll have a scroll view along the top that ONLY CONTAINS the column headers.
Then have a scroll view down the left that ONLY CONTAINS the row headers.
Now, make the "owning" view controller the delegate of the "main" scrollView with the cells in.
So you'll have...
UIScrollView *cellScrollView;
UIScrollView *columnHeaderScrollView; // along the top
UIScrollView *rowHeaderScrollView; // down the left
You will have to set the content accordingly. Obviously, you don't want the headers in the cellScrollView. etc...
Now, in the delegate method...
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
// scrollView here should always be == self.cellScrollView
// as this is where the delegate method is triggered from.
CGPoint *mainOffset = [scrollView contentOffset];
// set the horizontal offset of the main view onto the column headers
[self.columnHeaderScrollView setContentOffset:CGPointMake(mainOffset.x, 0)];
// set the vertical offset onto the row headers
[self.rowHeaderScrollView setContentOffset:CGPointMake(0, mainOffset.y)];
}
Something like this should easily get the effect you're after.
With one scroll view
You will have three sub views of the scroll view and references to these...
cellView
leftView
topView
These are all subclasses of UIView.
Initially you will have a layout of something like...
leftView frame == [0, 50, 80, some long height]
topView frame == [80, 0, some long width, 50]
cellView frame == [80, 50, some long width, some long height]
i.e. the cell view will be indented by the height of the top view and the width of the left view. (I hope this makes sense).
So in your scrollViewDidScroll...
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
// we will transform the position of the top view and left view using the offset.
// I chose a transform as it always acts from the original position.
// changing the view's frame will make it difficult to set it back again.
CGPoint offset = [scrollView contentOffset];
// move the left view to the left and right depending on the offset
leftView.transform = CGAffineTransformMakeTranslation(offset.x, 0);
// up and down is taken care of by the scroll view correctly.
// move the top view up and down depending on the offset
topView.transform = CGAffineTransformMakeTranslation(0, offset.y);
// left and right is taken care of by the scroll view correctly.
}
I chose to use transform as it make the calculations easier. Instead of trying to calculate the difference in position required each time, you just set the transform amount to the offset and it works.

ios:UITableView wont scroll to bottom

I have a scroll view with 3 UITableViews in it for paging. All of the UITableViews loads more cells of data. The first UITableView loads more cells than the other two. When viewing this first UITableView I am able to scroll to the bottom, but when I scroll to a second UITableView and back to the first UITableView I can no longer scroll all the way down. It seems as though I have to resize my scroll view. Why can't I scroll to the bottom after a view refresh? Any help would be great.
*The first UITableView has a search bar at the top. The other two do not. I tried removing the search bar, but the error still occurs.
//Create a frame for each page and add the page to the scroll view
- (void)frameToScrollView{
if (pages!=NULL) {
for (int i = 0; i < pages.count; i++) {
//Get the current view controller
UITableViewController *controller = [pages objectAtIndex:i];
//Create a frame for the current table view controller
CGRect frame = controller.view.frame;
frame.origin.x = self.scrollView.frame.size.width * i;
frame.origin.y = 0;
frame.size = self.scrollView.frame.size;
controller.view.frame = frame;
//Add the the current table view controller page to the scroll view
[self.scrollView addSubview:controller.view];
}
}
}
Set Other properties:
//Set the properties for the scroll view
- (void)setScrollViewProperties{
self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * pages.count, self.scrollView.frame.size.height);
self.scrollView.contentOffset = CGPointMake(self.scrollView.frame.size.width, 0);
self.scrollView.scrollsToTop = NO;
}
UITableView is a subclass of UIScrollView. So you are basically adding 3 scrollviews to a scrollview. I dont think this is advisable.
I think the problem here is that the device is confused as to which scrollView will handle the touch/drag event.
If you really need the scrollView for paging, I suggest you create the scrollView, but disable touch event for this. You can add buttons to allow page navigation (instead of allowing user to do left/right swipe). This way, you can ensure that only the tableview that is visible is going to get the touch/drag event.
Found similar problem here: UITableView Won't Scroll In Certain Conditions.
My first UITableView has a search bar at top.
In the post above they recommend adding [self.tableView setAlwaysBounceVertical:YES];
I tested this and it does not work. I put it in my view did load for the UITableView.
Got it working:
(1) After "load more" cell is clicked and information is received I remove all subviews
(2) Then I create new frames and add them back to the subview
(3) Last I reload the table data

Make UIView scroll with UITableView but pin to top out of view

I currently have a view controller that is comprised of a Navigation bar, followed by a UIView that has two UIButtons added as subViews. There is then a UITableView underneath that begins at the bottom of the container UIView.
At the moment, when the user scrolls the UITableView it goes behind the UIView and UIButtons. What I actually want to happen is for the UIView and UIButtons to move up with the table view but only by the value of their height which in this case is 58 pixels. The flow would be like this...
1) Table scrolls and the UIView moves with it for the first 58 pixels.
2) The user continues to scroll the table but the UIView "pins" itself just out of view under the navigation bar.
3) When the user scrolls the table back down the UIView is then picked up and dragged back into view. I believe the new Facebook app does something similar in the timeline.
I don't want to set the UIView as the TableHeaderView of the table as I also have a pull-to-refresh which then sits above the buttons and looks terrible. I've tried playing around with the contentOffset properties of the underlying scrollview of the table but have hit a brick wall.
Any advice on where to start would be appreciated.
Thanks
EDIT: I am gotten a little further and using this code to move the frame of the UIView.
-(void) scrollViewDidScroll:(UIScrollView *)scrollView
{
NSLog (#"Content Offset: %f", self.tableView.contentOffset.y);
NSLog (#"Button Frame: %f", self.btnBackground.frame.origin.y);
if (self.tableView.contentOffset.y > 0)
{
CGRect newFrame = self.btnBackground.frame;
newFrame.origin.x = 0;
newFrame.origin.y = -self.tableView.contentOffset.y;
[self.btnBackground setFrame: newFrame];
}
}
The problem now is that the scrollViewDidScroll delegate method doesn't get fired quickly enough if the table view is scrolled fast. The result is that the UIView doesn't quite make all way back to its original position when scroll quickly.
The scroll content offset is a good idea. Also if you tableview has only one section one approach is to do a custom header view representing the top level widgets. If there is more than one sections create an additional empty section which would return your custom header.
You can refer to this stack overflow post.
Customize UITableview Header Section
Well Asked Question (y)
well , for me i would first : use a main UIScrollView that contains both your topView and the tableView under it and that has the same width as your top UIView and UITableView and set its height to be height(tableView) + height(topView).
Second : since UITableView is a subClass of UISCrollView you can use scrollViewDidScroll delegate to know if the tableview is scrolled up or down.
in this cas you will have Two cases :
1) tableview is scrolled up = > you set the content offset of the main scrollView to be
[scrollView setContentOffset:CGPointMake(0, 58) animated:YES];
2) when the table view is scrolled down you can reset the content offset again
[scrollView setContentOffset:CGPointMake(0, 0) animated:YES];

iOS UIView scrolling UI - how to implement?

Forgive me to the obtuse title, as I'm unsure how to describe this question.
Recently many iOS apps utilise a scrolling UI design pattern which helps to maximise screen real-estate, typically hiding the header when the user scrolls downwards.
For example, Instragram's main view has the Instragram header at the top. Scrolling upwards on this view keeps the header fixed at the top, and the view bounces back normally to the top of the content. But scroll down and the header acts as part of the content, making way for an extra 44 points of vertical space.
Its probably that I haven't done much iOS work in a while, but I can't easily figure out how best to impliment this? Apologies for the terrible description.
If the header stays put no matter what, use a separate view on top of the scroll view.
If you use UITableView, you can use section headers.
EDIT Use this code:
- (void)scrollViewDidScroll:(UIScrollView*) scrollView
{
CGPoint offset = scrollView.contentOffset;
CGRect headerFrame = _headerView.frame;
if(offset.y > 0){
headerFrame.origin.y = offset.y;
}
else{
headerFrame.origin.y = 0.0;
}
[_headerView setFrame:headerFrame];
}
(Assumes _headerView is your header, sitting on top of the scroll view, not inside it. Also, both scroll view and header begin at the top of their parent view, y==0. Also, your view controller must be set up as delegate of the scroll view)
I just wrote this code from memory; haven't tested it but at most it should only need tweaking.
I tried ranReloaded's answer above but it seems that calling setFrame: on a UIScrollView stops the view from bouncing when going beyond its bounds.
Instead I set the scroll view to fit inside another UIView called scrollerWrapper. Applying the calculated origin and height to this view gives me effect I'm after plus retains the bounce behaviour.
- (void)scrollViewDidScroll:(UIScrollView*) scrollView
{
CGPoint offset = scrollView.contentOffset;
CGRect headerFrame = header.frame;
CGRect wrapperFrame = scrollerWrapper.frame;
if(offset.y > 0){
headerFrame.origin.y = -offset.y;
wrapperFrame.origin.y = MAX(0, headerFrame.size.height - offset.y);
}
else{
headerFrame.origin.y = 0.0;
wrapperFrame.origin.y = headerFrame.size.height;
}
wrapperFrame.size.height = self.view.frame.size.height - wrapperFrame.origin.y;
[header setFrame:headerFrame];
[scrollerWrapper setFrame:wrapperFrame];
}

Resources