Add a hidden view above a UITableView that is only displayed when TableView is scrolled up

Question

Goal/Situation:
I currently have a UIView in the TableView header. I am trying to add another UIView (which contains two Buttons and a few TextFields) that will sit above the TableView header. I would like the view to be displayed when the user scrolls up past the header (a la "pull to refresh"), and go away when the user presses a "done" button on the view.

My three questions:

1. How do I add a view above the tableview header?
2. How do I display said view when a user has scrolled up past the header?
3. How do I dismiss said view when the user has pressed a button on said view?

EDIT:
I'm going with @kimpoy's suggestion to add my custom view to the third party PullToRefresh TableViewController.

Answer 1

If I understand it correctly, you want to make the pulling action by a user triggering albe to trigger two different method call depends on how much the user pull.

I assume the the UiView that u want to add to be "2nd Header". It should be something similar to "pull to refresh header".

I think the magic is also making use of the UIScrollView delegate. In many examples, you can see "Pull to ..." is something simply check the scrollView.contentOffset.y

So, you may so something like this:

// code for checking pull to refresh function (simplified)

- (void) scrollViewDidScroll:(UIScrollView *)scrollView {
      if (self.scrollView.contentOffset.y <= - 65.0f) {}
  }

- (void) scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
      if (self.scrollView.contentOffset.y <= - 65.0f) {}
  }

change it to something like:

- (void) scrollViewDidScroll:(UIScrollView *)scrollView {
     if ( -65.0f <= self.scrollView.contentOffset.y <= - 55.0f  ) {
         // give a area for checking the origin pull to refresh action
     }

     if (self.scrollView.contentOffset.y <= - 65.0f) {
        // checking for ur function
     }
 }

 - (void) scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
     if ( -65.0f <= self.scrollView.contentOffset.y <= - 55.0f ) {
        // give a area for checking the origin pull to refresh action
     }

     if (self.scrollView.contentOffset.y <= - 65.0f) {
        // checking for ur function

        // add ur view the UIScrollView / TableView
        // set ur scrollview offset to show ur whole form
        [scrollView setContentOffset:CGPointMake(0, y)];
     }

  }

And finally add a method call to ur form button to do what u want(remove the form and set back the scrollView content offset to (0,0))

(Sorry I am juz talking about not concept, I am not sure if it works)

Answer 2

http://three20.info/ this framework will help u a lot. it has table exactly work like u want. and "pull to refresh" zone is customable

Answer 3

You should implement it like this. Use a third party like EGORefreshTableHeaderView or PullToRefresh.

1. These two can help you create a "pull to refresh" view above your tableview.
2. Declare an instance of the third party class in your .h file
3. Instantiate either of these two to the class where you want to implement it. Then, to have a custom appearance inside your "pull to refresh" view, just add your custom view.

For example: // Instance in your .h file EGoRefreshTableHeaderView *refresh;

// In your .m file

// Set up your custom view with the added buttons and textfields.
UIView *customView...

// Instantiate pull to refresh third party class and add to table
EGoRefreshTableHeaderView *tempRefresh = [[EGORefreshTableHeaderView alloc] initWithFrame:CGRectMake(0.0f, 0.0f - self.tableViewCompanyContacts.bounds.size.height, self.view.frame.size.width, self.tableViewCompanyContacts.bounds.size.height)];
[tempRefresh setDelegate:self];

// Add your custom view
[tempRefresh addSubView:customView];

// Set your instance
[self setRefresh:tempRefresh];

// Release temp instance
[tempRefresh release];

// Add your third party to the table
[self.tableView addSubView:refresh];

// Implement delegate method (to refresh)

Normally, this view will disappear or will be hidden once it's done refreshing. Just add a few tweaks to the code to let the user handle when the view is hidden (eg. clicking a button).

The methods for "pull to refresh" actions are provided. Tell me, if you find something troubling. Good luck!

Answer 4

Write this code in viewDidLoad

tempView = [[UIView alloc] initWithFrame:CGRectMake(7,81,305,40)];  
lbl = [[UILabel alloc] initWithFrame:CGRectMake(40,125,250,20)];  
lbl.text = @"";  
lbl.font = [UIFont fontWithName:@"Haveltica" size:14];  
lbl.textAlignment = UITextAlignmentCenter;  
lbl.textColor = [UIColor whiteColor];  
lbl.backgroundColor = [UIColor clearColor];  
[tempView setBackgroundColor:[UIColor colorWithRed:204/255.0 green:204/255.0 blue:204/255.0 alpha:0]];  
[tempView addSubview:lbl];  
[self.view addSubview:tempView];  
isReload=YES;    


-(void)viewWillAppear:(BOOL)animated  
{

     [super viewWillAppear:animated]; 

    if(isReload==YES)
    {
        // your code;  
    }
    isReload=NO;

}   

-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate  
{ 

    NSLog(@"table view height is %f",self.tblview.frame.size.height);  
    NSLog(@"scrollview oringin %f",scrollView.frame.size.height);  
    NSLog(@"Top10VC: ScrollView did end dragging");  
    if (!decelerate)   
    {  
        //[self loadImagesForOnscreenRows];  
    }  
    if(scrollView.contentOffset.y<-60)  
    {  
    [self.spinner startAnimating];  
    [self performSelector:@selector(getdata1)withObject:nil afterDelay:0.2];  

    }  

}  

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView  
{

    NSLog(@"scrollview oringin %f",scrollView.frame.size.height);  
    NSLog(@"Top10VC: ScrollView did end decelerating");  
    //[self loadImagesForOnscreenRows];  
}  

-(void) scrollViewDidScroll:(UIScrollView *)scrollView  
{ 

    tempView.frame = CGRectMake(0,-80 - scrollView.contentOffset.y , 320,80);   
    if(scrollView.contentOffset.y < -60)  
    {         
        lbl.text = @"Updating...";  
                [scrollView setContentOffset:CGPointMake(0, -100)];
    }  
    else  
    {  
        lbl.text = @"";  
    }   
}