I'm facing a problem with UITableView and it's property tableHeaderView.
I want to have the tableHeaderView to behave like UISearchBar, i.e. the content offset should be the of tableHeaderView.
Setting contentOffset, etc. didn't help when the table view wouldn't fill the view's frame.
Here's a screenshot of the current behavior:
(source: tubtub.de)
And how I'd like it to have:
(source: tubtub.de)
I'm inserting the headerView in viewDidLoad as follows:
- (void)viewDidLoad
{
[super viewDidLoad];
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
headerView.backgroundColor = [UIColor redColor];
self.tableView.tableHeaderView = headerView;
}
Any help or hint is highly appreciated. Thanks!
EDIT: I made it working by utilizing UIScrollViewDelegate and subclassing UITableView. Check it out on the github repo provided.
You can use setContentOffset: by headerView height.
This contentOffset will only happen when you have enough number of data to be off by your headerView height. i.e) If tableView is not scrollable because you have only few data like one in your screenshot, the headerView is still visible. However if you have lots of number of data that can't not be displayed in the screen it will have contentOffset.
Try this with 20 rows. You will see what I mean.
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
headerView.backgroundColor = [UIColor redColor];
self.tableView.tableHeaderView = headerView;
[self.tableView setContentOffset:CGPointMake(0, 44)];
With only 3 rows, this contentOffset won't work and it might be desired behavior in your case because you don't want to hide the searchBar when you have extra space to display.
I came up with implementing my own solution.
I utilize UIScrollViewDelegate and came up with a subclass of UITableView for calculating the contentSize dynamically.
Take a look at the github repo here.
I would double check the frame for the table itself. By setting the headerView's frame to start at 0,0, you are specifying that it should have its origin in the top left of the the view that is designated for the table.
Related
Don't know why but I am having this issue when using with storyboard and autolayout.
Below is the screen shot of simulator...gray is the tableview background to understand the table frame, but my cell is not placed at the top side of table, causing some top space.
I don't want it.
It works well with ios6.
Place this code :
self.edgesForExtendedLayout = UIRectEdgeNone;
If not works than use this :
self.tableView.contentInset = UIEdgeInsetsMake(-35, 0, 0, 0);
Set the TableView's header like this
self.tableView.tableHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, self.tableView.bounds.size.width, 0.01f)]
or set the tableview's header to nil like this
self.tableView.header = nil;
I don't know exactly what is causing this issue.
There may be a chance that you have set the height for header in section, but no view for header defined.
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
return ;
}
Other than this I don't think any autolayout explicitly causing your cell to move down.
Cause your autolayout will either within your cell or table and its superview.
How do I make the background for a tableHeaderView clear, but keep the rest of the UITableView background opaque?
I'm using a transparent tableHeaderView for a paralax effect. The object behind the tableView is a longer than the clear tableHeaderView "window" so I can center the visible data. This works well for longer lists as I can use the tableView as a mask, but when I don't have enough cells in the table the background object displays below the cells.
Relevant code:
self.tableView.backgroundView = nil;
self.tableView.backgroundColor = [UIColor whiteColor];
UIView *tableHeaderView = [[UIView alloc] initWithFrame: CGRectMake(0.0, 0.0, 320.0, 250.0)];
tableHeaderView.backgroundColor = [UIColor clearColor];
self.tableView.tableHeaderView = tableHeaderView;
I've tried setting a background color for the tableView, but that makes the whole UITableView opaque (including the tableHeaderView), removing the "window" I have at the top.
Any ideas on how I can keep my transparent tableHeaderView while setting the body of the UITableView opaque?
Thanks!
After a couple days I was able to figure it out. The premise of the solution is to add a subview to the backgroundView of your table and change the subview's frame as you scroll.
The relevant code in viewDidLoad:
...
// Create the UIView that will become the tableView backgroundView
UIView *tableViewBackground = [[UIView alloc] initWithFrame:self.tableView.frame];
tableViewBackground.backgroundColor = [UIColor clearColor];
// Create the opaque backgroundView and set the frame so that it starts below the headerView
partialBackgroundView = [[UIView alloc] initWithFrame:CGRectMake(0, 250, 320.0, self.view.frame.size.height)];
partialBackgroundView.backgroundColor = [UIColor redColor];
// Add the partial background to the main background view and apply it to the tableView
[tableViewBackground addSubview:solidTableBodyBackgroundView];
self.tableView.backgroundView = tableViewBackground;
...
And then as you scroll, you can update the "visible window" in scrollViewDidScroll:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat scrollOffset = scrollView.contentOffset.y;
partialBackgroundView.frame = CGRectMake(0, 250 - scrollOffset, 320, self.view.frame.size.height);
// Other parallax code for scrolling
}
There may be better ways of doing this, but I found this to be pretty simple and it worked well.
A simpler way of doing the accepted answer for multiple sections
// Set the view for each cell with a clear color
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, SectionHeaderHeight)]; //
view.backgroundColor = [UIColor clearColor];
return view;
}
// Set the height of your desired header
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
return 10;
}
Here's a super late but quick and simple answer to this if like me you're returning a subclass of UITableViewHeaderFooterView as header view in your viewForHeaderInSection delegate method.
Setting myHeaderView.backgroundColor = UIColor.clear not helping you?
Try setting myHeaderView.layer.backgroundColor = UIColor.clear.cgColor instead.
Unless I'm misunderstanding something, you should be able to do this in two steps:
You will need to make the cells in your table opaque. Leave the tableView's background color set to [UIColor clearColor], and same goes for the views for your table header (and section headers if that applies).
Then take your table footer view (tableFooterView property of the UITableView), make it opaque, and make it very tall. When you only have a few cells in the table, the table footer will take up the rest of the screen.
Again, I might be misunderstanding something, but give that a go and see what you get. Good luck!
Swift-5, Transparent Section Header
Add a view and set its background as transparent
then return this view in ViewForSectionHeader method in tableView
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
return viewForSection
}
I am doing a slide menu using a UITableView and I have 2 options on the menu and I want to put a button at the bottom like in this image:
I try to do that add a tableFooterView like that.
UIView *footerView = [[UIView alloc] initWithFrame:CGRectMake(0, 500, 320, 70)];
footerView.backgroundColor = [UIColor blackColor];
self.tableView.tableFooterView = footerView;
However, the view appears just after the second cell, but I want it at the bottom.
Thanks for help.
No you shouldn't add any empty cells, that's just hacky. If you really need the button to be at the bottom, you should use layoutSubviews to control the frame of the tableView and the footerView.
- (void)layoutSubviews
{
[super layoutSubviews];
self.tableView.frame = // top 80% of the screen
self.footerView.frame = // bottom 20% of the screen
}
You should know that every UITableViewCell has its height and footer is part of a UITableView and will appear at the bottom of a UITableView. If you want to make your UITableView look like what that image shows, you should make sure that your cells are high enough to make sure that your UITableView are high enough so that footer will appear at the bottom of UITableView
My suggestion is to add extra "empty" cell(I mean a cell with no content but has a height).
Add a Container View with View Controller from storyboard. You can use autoresizing to set the buttons on right place.
My UITableView has a subview with a fixed position. But when I scroll, the scrollbar is hidden by the subview. How can I avoid this?
## EDIT ##
self.menuViewRelative = [[UIView alloc] init];
self.menuViewRelative.backgroundColor = [UIColor whiteColor];
self.menuViewRelative.opaque = YES;
self.menuViewRelative.frame = CGRectMake(0.0, -1.0, 320.0, 50.0);
[self.view insertSubview:self.menuViewRelative atIndex:11];
This subview is now above 10 other subviews and exactly 1 layer under the scrollView (so it displays the scroll indicator perfectly).
Adding as an answer as per Jesse Rusak's comment.
Set scrollIndicatorInsets for the table view in such a way that the scroller will be moved in a place where subview wont overlap.
For eg:-
self.tableView.scrollIndicatorInsets = UIEdgeInsetsMake(0, 0, 0, 7.0);
Are you using addSubview: for this? That will make it the top-most subview, which will cover the scroll bars. If you instead use insertSubview:atIndex: and ensure it's just above the other content in your table view, it will be below the scroll bars.
You might need to override layoutSubviews of the UITableView (like I describe in this related question) and look through the contents of the table view in order to keep your floating view just above the table view cells.
Hi i want to add a line in my UITableView just like the reminder apps red line. I tried adding it to my custom cell but then it only display in the cell which are used and not in all cell. I want a red image like below
Thanks in advance
You could use a UIView that has the size of the red stripe and place it over your UITableView where you want the red line to appear. Set it's backgroundColor to the color of the red line and make sure that userInteractionEnabled is set to NO to avoid interfering with the scolling of the UITableView.
Try To add UIView on tableView and set it`s Background Color with pattern Image whatever you want,then add such view on tableview. like below.
lineView = [[UIView alloc] initWithFrame:CGRectMake(100, 0, 1,
tblView.frame.size.height)];
[lineView setBackgroundColor:[UIColor blackColor]]; //Change as per your req.
lineView.userInteractionEnabled = NO;
[tblView addSubview:lineView];
But you face problem with this when you scroll up then at vertical bounce you have to manage height of this UIView. So you can implement this by ScrollViewDidScroll Delegate method, This method call cause UITableView is extends from UIScrollView.
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
lineView.frame = CGRectMake(100, 0, 1, tblView.frame.size.height+scrollView.contentOffset.y);
}