I am trying to implement a header view in my application and have the following code to create the header view:
(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *view = [[[NSBundle mainBundle] loadNibNamed:#"FutureAppointmentsHeaderView" owner:self options:nil] lastObject];
return view;
}
I have also set the height of the headerView as follows:
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return 70;
}
When the page loads, the header view is in the correct position (see first image). However when I scroll the header covers the other cells (see second picture.)
I can't what I am doing wrong to get this behaviour. Any help much appreciated.
This doesn't sound like a wrong behavior. This is how the header should act. Take, for example, the Contacts app on your iPhone - when you scroll, the header with the current letter always snaps to the top. When you continue scrolling, it is replaced by the next header in line.
What you should do is add a background color to the header instead of leaving it transparent. I think everything will look better and easier to understand once you do that.
Looks like you're header view is see through. Have you tried to put a background color ?
UIView *view = [[[NSBundle mainBundle] loadNibNamed:#"FutureAppointmentsHeaderView" owner:self options:nil] lastObject];
view.backgroundColor = [UIColor whiteColor];
try to change your tableViewType.
UITableViewStyleGroup can let your header scroll when you scroll the tableView
This is the default feature of tableview, and is not the bug. Just verify the background color of headerview in xib. It seems to have clear color, set it to any other color and you could find the difference. Code seems fine.
You are adding a header for the section with
- tableView:viewForHeaderInSection:
. Section headers stay on top of the table view and will cover the cell(s) underneath it. If you would add another section to your table view there would be two identical header views for each section, because you are returning the view without checking the section index.
If you want a floating header use tableHeaderView.
You can assign a view to UITableView's property in viewDidLoad or by dragging a view to the table view in interface builder. See Table Header Views in StoryBoards.
Related
This question should not be mixed up with this here.. These are two different things.
There is a good example how to use a UITableView Header on SO.
This all works fine and the main header is fixed on top as long as the style is set to plain.
But if I use sections, the main header no longer sticks to top and moves away while scrolling to the bottom.
In this method, I am returning the header for each section.
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
In this method I am setting the height for the header section above:
- (CGFloat) tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
In this method, I am setting the real table header.
- (void)viewWillAppear:(BOOL)animated {
...
self.recordTableView.tableHeaderView = headerView;
}
Is it even possible having a fixed table header, while using sections?
What is an alternative solution to this please?
If you want a UITableViewController (static cells/keyboard handling) and have a fixed header then you should use Containment. You can do this from a Storyboard by setting up a UIViewController with your fixed header and then using a Container View to embed the UITableViewController.
Once you have your containing view setup, you right-click drag from the Container View to the View Controller you want to embed - the UITableViewController in this case.
You can access and get a reference to the contained View Controller (the UITableViewController) from the Container View Controller by implementing the prepareForSegue:sender: method.
There’s no way to maintain the header of a tableView fixed, but
an useful approach when you need a unique header, is to use a UIViewController rather than a UITableViewController, and set the header (UIView) out from the tableView.
Something like this:
If you want to keep the class as a UITableViewController you can add your header as a subview to the tableview's superview. You will have to also push the tableview top inset down so your headerview doesnt hide the table.
Here is a sample code to put inside your tableViewController subclass (This example assumes your tableview controller is inside a navigation controller, so it pushes the view to below the navigation bar):
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
self.automaticallyAdjustsScrollViewInsets = NO;
}
-(void)addHeaderView{
CGFloat yPosition = self.navigationController.navigationBar.frame.origin.y + self.navigationController.navigationBar.frame.size.height;
mainHeaderView = [[UIView alloc] init];
const CGFloat mainHeaderHeight = 44;
[mainHeaderView setFrame:CGRectMake(0, yPosition, self.view.frame.size.width, mainHeaderHeight)];
mainHeaderView.backgroundColor = [UIColor redColor];
[self.tableView.superview addSubview:mainHeaderView];
[self.tableView setContentInset:UIEdgeInsetsMake(yPosition + mainHeaderHeight, self.tableView.contentInset.left, self.tableView.contentInset.bottom, self.tableView.contentInset.right)];
}
I haven't done this, but the first thing I would think to try is to place my tableview in a UIView and make my own header there in that UIView. Seems a trivial matter to make that view appear to be the header of the table and it would certainly stay put.
In interface builder I have a header view above my UITableView, however in the simulator it is missing, and the Table View seems to be over it since it takes up most of the screen. Any reason for this? Work around?
Interface Builder
Simulator
In your case:
From your interface builder image I can see that table view is subview of view and you header view is also subview of tableview. It happening because tableview is hiding the header view. if you add the header view as subview of tableview then it would appear. But adding subview will not solve your problem because when you will scroll the tableview the subview will be gone.
For solving your problem as I can see that you have a navigation bar in your table view you can add the header view as subview of UINavigationBar.
[self.navigationController.view addSubview:headerView];
Good Practise:
Set the header view for section. Then you don't need to set any custom view at the top of your tableview. Try this:
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
UIView *aView = [[UIView alloc] init];
//Customize the view according to our requirment
return aView;
}
Also implement this:
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
return 44.f; // Make this height as you need. Or else you may not see the full view.
}
Btw you can create a subclass of UITableViewController instead of UIViewController.
Hope this helps.. :)
Deselect Extend Edges / Under Top Bars
I have checked all these
UITableView, make footer stay at bottom of screen?
tableFooterView property doesn't fix the footer at the bottom of the table view
iOS - viewForFooterInSection sticking to bottom of UITableView
Proper way to implement a footer in UITableView
similar questions but unfortunately my problem hasn't resolved.
I have to implement a custom header and footer views with buttons inside. I have created separate UIView's subclasses with .nib files. In my view controller, I'm calling these methods to register nibs for header and footer view.
- (UIView*)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
CustomTableHeaderView *view = [CustomTableHeaderView header];
view.delegate = self; //setting delegate to receive callbacks as the buttons inside the view are pressed
return view;
}
- (UIView*)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
{
CustomTableFooterView *view = [CustomTableFooterView footer];
view.delegate = self;
return view;
}
Where as the class method in the custom views registers a .nib file and returns the view. However the implementation is;
+ (CustomTableHeaderView*)header
{
return [[[NSBundle mainBundle]loadNibNamed:#"CustomTableHeaderView" owner:nil options:nil]objectAtIndex:0];
}
Similar implementation for footer.
The problem is that the footer view doesn't lock at the bottom when the table view scrolls. i-e, when there are more rows to fit inside the view, the footer view hides and is revealed when all the rows are scrolled down till the end. I want to lock the footer view at the bottom of the view no matter how much rows are there to scroll.
The header view has been implemented perfectly by this implementation as it is locked at the top while the rows are being scrolled, however the footer view is scrolled with the rows.
I have also tried self.tableview.tablefooterview property but it didn't help either.
Unfortunately thats not how table section footers work. In order to accomplish an anchored view at the bottom you will need to add it as a subview to your UIView manually.
If you add it as a subview to your UITableView you will need to keep it anchored by changing its frame in scrollViewDidSroll:. If you add it as a subview to the UIView containing your UITableView you can just place it statically at the bottom. In either case you probably want to adjust the contentInset of the table view with an inset at the bottom so that you can scroll your content up above the anchored footer.
I have a UITableViewController that is in a storyboard. I want to add a header to it so I followed the instructions in the following post. I dragged a UIView up on top, and on top of that i dragged a couple of images.
Table Header Views in StoryBoards
Now that seemed to work fine, but the header scrolls along with the entries in table cells when i scroll up. Also, they seem to scroll underneath the time and battery indicator...not sure why that is.
So in the comments of that post i saw that you need to implement the following function to return the UiView to get it to "stick". The only way I saw how to get the UiView from the storyboard was to set the tag and then look it up, also shown below.
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section.
{
int tagNumber = 2;
UIView *headerView = (UIView *)[self.view viewWithTag:tagNumber];
return headerView;
}
The issue with all of this is the header still scrolls. How can i get the header view to just stay on top?
Thanks!
I have a UITableView set up on my app, which runs on iOS 7. I has one section and it loads images into custom cells and it scrolls under the navigation bar as well, which is translucent. So initially, the content is below the navbar and it scrolls under the navbar as we scroll down to view more images. For this I have set an initial contentInset of UIEdgeInsetsMake(40, 0, 0, 0). Now sometimes, I need a small header view on my table to indicate types of images on my table. So I have used the following code:
-(CGFloat) tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
return 30.0;
}
-(UIView*) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
TableSectionHeader *header=[[[NSBundle mainBundle] loadNibNamed:#"TableSectionHeader" owner:self options:nil] objectAtIndex:0];
[header.title setText:[NSString stringWithFormat:#"Type: %#", self.imageType]];
return head;
}
Where TableSectionHeader is custom view I have created for this purpose. Now ideally, the header must float or "stick" either just below the navbar or at the top of the table (which is under the navbar). But in this case, it just rolls off screen. I want the header to stick right under the navbar. Does anyone know how I can achieve this?
Change the table view's style from Grouped to Plain.
From the official documentation, regarding the Plain table view style:
A plain table view can have one or more sections, sections can have
one or more rows, and each section can have its own header or footer
title. (A header or footer may also have a custom view, for instance
one containing an image). When the user scrolls through a section with
many rows, the header of the section floats to the top of the table
view and the footer of the section floats to the bottom.