White Separator Above Table Section Headers - ios

I'm having a really weird issue with table view separators. I have set the separator color to a dark gray which works great below the cells, but for some reason, there is a white separator before my section header (see the screenshot, above November). When I set the separator style to none, the line disappears which indicates that it is a separator. How can I remove this white separator line?

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 1)];
UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(0, -1, 320, 2)];
view2.backgroundColor = [UIColor blackColor]; // Your color
view1.backgroundColor = [UIColor blackColor]; // Your color
[view1 addSubview:view2];
return view1;
}
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
return 0.01;
}

For me, this fixed it:
cell.backgroundColor = .clear
I was setting the cell’s backgroundView, but apparently the cell’s default color was shining through in some cases.

Related

Footer view's color always darker than UITableView separator's color

In my UITableView, I set the separator color like this:
- (void)viewDidLoad {
...
self.tableView.separatorColor = [UIColor lightGrayColor];
...
}
And I set the color of the footer like this:
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
UITableViewHeaderFooterView *footerView = [[UITableViewHeaderFooterView alloc]
initWithFrame:(CGRect){0, 0, 320, 1}];
footerView.contentView.backgroundColor = [UIColor lightGrayColor];
return footerView;
}
However, the footer view's color is always darker than the separator's color, like this:
How do I get them to be the exact same color? Thanks.
From iOS 6.0 onwards, you can use the below mentioned UITableView's delegate method to change the color of the footer view's background-
- (void)tableView:(UITableView *)tableView willDisplayFooterView:(UIView *)view forSection:(NSInteger)section
{
//Set the background color of the View
view.tintColor = [UIColor blueColor];
}
None of the above worked for me. The only thing that worked was the solution from this thread:
White Separator Above Table Section Headers
Basically you need to manually add in the footer separator 1 px above your custom footer view.
-(UIView*)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
{
UITableViewHeaderFooterView *versionView = [[UITableViewHeaderFooterView alloc] initWithFrame:CGRectMake(0, 0, maxScreenWidth, 50)];
UIView *footerSeparator = [[UIView alloc] initWithFrame:CGRectMake(0, -1, maxScreenWidth, 1)];
versionView.backgroundColor = [UIColor blackColor];
footerSeparator.backgroundColor = [UIColor darkGrayColor];//Your color
[versionView addSubview:footerSeparator];
return versionView;
}
The only problem I have with this is that the footer separator seems to disappear if you scroll away from it and then back to it in the table view.

UITableView section header inset missing

How do I fix the problem illustrated in the image?
The section header for the tableview is missing an inset.
You probably set the separator insets to 0, either in code or in the Interface Builder (can be found in the Attributes inspector:
This also causes the titles to have no inset. The default values are 15 for left and 0 for right.
[Could you post your code of UITableViewDelegate?
In UITableView, there is no API for you to set this insets in section header, so you could return a custom UIView in tableView:viewForHeaderInSection: then set the layout you want.
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
UIView *headerView = [UIView alloc] init];
UILabel *headerLabel = [UILabel alloc] init];
headerLabel.text = #"xxx";
[headerLabel sizeToFit];
headerLabel.frame = CGRectMake(20, 0, CGRectGetWidth(headerLabel.frame), CGRectGetHeight(headerLabel.frame));
[headerView addSubview:headerLabel];
headerView.frame = CGRectMake(0, 0, CGRectGetWidth(tableView.bounds), CGRectGetHeight(headerLabel.frame));
return headerView;
}

Making a TableViewCell Section Footer Transparent

I am trying to make a section footer of a UITableViewCell transparent and this is what I am doing right now:
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
{
UIColor *background = [UIColor clearColor];
UIImageView *imageView = [[UIImageView alloc] initWithImage:(UIImage *)background];
imageView.frame = CGRectMake(10,10,1,30);
return imageView;
}
But I am getting a problem from casting background to a UIImage. Is this possible in this way, is there a better way to cast it or am I simply going about this wrong? I am basically using the footer as a way to create a clear spacer between cells. Need some guidance on this.
This code will add clear footer to your section, where you can set the desired height to whatever you need. Below it has been set to 30, to match your code in the question.
-(UIView*)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section{
UIView *footerView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, tableView.frame.size.width, 30)];
footerView.backgroundColor = [UIColor clearColor];
return footerView;
}
Instead of type casting the colour into the UIImage, use the backgroundColor property :
Try this :
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10,10,1,30)];
imageView.backgroundColor = [UIColor clearColor];

How to dynamically set background color for UITableView section headers?

I'm working on implementing UITableView section headers similar to the Photos app on iPhone. The top header view should have a grey background and the other header views should have a white background. Based on that I have a couple of questions I need help with:
How do I find out which section header is on top (e.g. adjacent to the nav bar)? Note, that the navigation bar is translucent (meaning it displays cells below itself), so I can't go by finding visible cells and then retrieving section based on that.
What should be the approach to change background color of the top section header to a different color and then back to the original color when it's no longer a top one?
Make the property NSUInteger sectionPath and initialize it with 0 in viewDidLoad.
Create a headerView and for specific section change backgroundColor of that view.
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.frame.size.width, 30)];
UILabel *headerLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, headerView.frame.size.width, headerView.frame.size.height)];
headerLabel.textAlignment = NSTextAlignmentCenter;
headerLabel.text = [titleArray objectAtIndex:section];
if(section == sectionPath) {
headerLabel.backgroundColor = [UIColor grayColor];
}
else {
headerLabel.backgroundColor = [UIColor whiteColor];
}
[headerView addSubview:headerLabel];
return headerView;
}
To dynamically find the top-most header in UITableView during scrolling
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
for (NSIndexPath* i in [yourTableViewName indexPathsForVisibleRows]) {
sectionPath = [i indexAtPosition:0];
}
}

UITableView extend different background color below cells

I have a UITableView that I have given a headerView that has a green background. I have also given the UITableView that same green background color so that when the tableView is pulled down it feels like a seemless color above the tableView. Works perfectly.
The problem is my tableView only has 4 rows, and below that it shows the green color again.
How can I show white below the rows instead so that I only see the green background color when pulling down the tableView?
You can add an extra top view, same as in this answer to UIRefreshControl Background Color:
CGRect frame = self.tableView.bounds;
frame.origin.y = -frame.size.height;
UIView *bgView = [[UIView alloc] initWithFrame:frame];
bgView.backgroundColor = [UIColor greenColor];
[self.tableView insertSubview:bgView atIndex:0];
You could add a fifth cell with no content, and make it, say 400 points high, and limit the size of the table's contentView so that you can't scroll to the bottom of that cell.
-(void)viewWillLayoutSubviews {
self.tableView.contentSize = CGSizeMake(self.tableView.frame.size.width, 500);
}
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
CGFloat h = (indexPath.row == 4)? 400:44;
return h;
}
Putting the contentSize setting in viewWillLayoutSubviews ensures that it will be reset to that value if you rotate your device.
as I said in these comments, in this way the headerView will be under the navigationBar and if you pull down the tableview you will see the headerView green. So you can set white color for tableView:
(i tested it and work)
-(void) viewDidLoad {
self.tableView.backgroundColor = [UIColor whiteColor];
headerView = [[UIView alloc] init];
headerView.backgroundColor = [UIColor greenColor];
UILabel *lab = [[UILabel alloc] initWithFrame:CGRectMake(0, -50, 320, 120)];
lab.backgroundColor = [UIColor greenColor];
[headerView addSubview:lab];
self.tableView.tableHeaderView = headerView;
}
#pragma mark - Table view data source
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
return 80;
}
-(UIView*)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
return headerView;
}
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
// Return the number of sections.
return 1;
}
Same as the accepted answer - in Swift 5:
var frame : CGRect = self.tableView.bounds
frame.origin.y = -frame.size.height
let bgView : UIView = UIView.init(frame: frame)
bgView.backgroundColor = UIColor.green
self.tableView.insertSubview(bgView, at: 0)
Also add the following code (right after the above code) to make sure it works for other sized devices:
bgView.translatesAutoresizingMaskIntoConstraints = true
bgView.autoresizingMask = [UIView.AutoresizingMask.flexibleWidth]

Resources