In my UITableView I want a 'centered' separator effect in which the separator is shrunk by 30pt from left and 30 from right.
I've managed to accomplish that from Interface Builder setting the 'Custom Insets' property of the TableView itself, but I cannot reproduce this behaviour by code (and I have to do that this way).
In particular, with this piece of code:
self.tableView.separatorColor = .green
self.tableView.separatorStyle = .singleLine
self.tableView.separatorInset = UIEdgeInsets(top: 0, left: 30, bottom: 0, right: 30)
And also this one:
#objc(tableView:cellForRowAtIndexPath:) func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "recent_cell") as! TPExpandableTableViewCell
//setting cell insets
cell.separatorInset = separatorInset
cell.item = items[indexPath.row]
return cell
}
I obtained the following output on the iPhone 6S Simulator:
Seems like that the separator content view get shrunk, but the separator background view gets not. I also tried to remove the line that sets the separatorInset of the cell, and the result was an inset equal to UIEdgeInset.zero
I can confirm that the white line under the green on is a separator-related view, because if I change the separatorStyle to .none, it disappears
Any helps?
Basically, that first piece of code is correct for setting the separator inset, color and style which is:
self.tableView.separatorColor = .green
self.tableView.separatorStyle = .singleLine
self.tableView.separatorInset = UIEdgeInsets(top: 0, left: 30, bottom: 0, right: 30)
And the one at cell's separatorInset is for the cell's content. So I'm confused of what you actually want to achieve here. From your last phrase, your content was shrunk and that was caused by 'cell.separatorInset = separatorInset' and you somehow don't want that.
So I suggest that you remove this line of code:
cell.separatorInset = separatorInset
The best approach to make custom separator is to disable UITableView separator and create a view inside the cell with the height you want such as 1px and then add the constraints to the view to be at center bottom of the cell.
Problem:
The whitespace behind the separator actually belongs to the cell's backgroundColor, not the cell's contentView.
Solution
So when creating a custom cell setting the contentView.backgroundColor will not change that whitespace, but setting the cell.backgroundColor will.
Example:
Add this in your custom cell's initialisers.
cell.backgroundColor = UIColor.red
Related
I am working on a UITableView with customized cells from a .xib. I have added a blue border to the top and bottom of the .xib to give a customized spacing between the cells. I don't want a separator between the cells so I set the Separator to None in the storyboard. This is the look that it gives me.
This works great until I select a cell, at which point I am seeing this (notice the white separators above and below the selected cell):
I am using this code in the cellForRowAt function to set the color of the selected cell to white, but this also seems to force the separator to be white:
let selectedView = UIView()
selectedView.backgroundColor = .white
cell.selectedBackgroundView = selectedView
I am trying to figure out how to remove the separator lines when the cell is selected. I have tried several things on the storyboard and in code, but haven't found anything that works.For example:
I can't use cell.selectionStyle = .none because I want the cell background to turn white when selected.
This doesn't change anything when called from viewDidAppear: tableView.separatorColor = UIColor.clear
I tried the answer here Hide separator line on one UITableViewCell by Avinash but it didn't do anything.
Any ideas?
I found that this solution worked for me.
I changed my code in the cellForRowAt function to the clear color:
let selectedView = UIView()
selectedView.backgroundColor = .clear
cell.selectedBackgroundView = selectedView
try change the tableView.separatorColor = tableView.backgroundColor
and set you table style to grouped
Separator line not showing full width in iPad but it was set full width for iPhone devices after using these lines.
cell.preservesSuperviewLayoutMargins = false
cell.separatorInset = UIEdgeInsets.zero
cell.layoutMargins = UIEdgeInsets.zero
I've done all this via programmatically. Here is my code
you can directly changed in your Attribute Inspector change separator Inset --> custom and set left --> 0
and in your cell class also change the layout margin
Update
if want to remove the separator inset from all cells, you need to do two things. First, add these two lines of code to your table view controller's viewDidLoad() method:
override func viewDidLoad() {
super.viewDidLoad()
tableView.layoutMargins = .zero
tableView.separatorInset = .zero
}
Now look for you cellForRowAt method and add this:
cell.layoutMargins = .zero
The placeholder cells were not extending full width when I was programatically creating the UITableView. After trawling through all the possible methods, I discovered this.
tableview.cellLayoutMarginsFollowReadableWidth = false
I set this after setting the contentInset = .zero and the layoutMargins = .zero
Hopefully this helps other people in the same position.
Try using Attribute Inspector to set the separator inset.
Change the Left value from 15 to 0.
Try by adding custom separator insets in tableview from the storyboard or the xib shown in the below image.
This will definitely work.
I am trying to get UITbaleView section index same as in screenshot, the section index is without any background and is laying over the UITableView cells, or in other words there is no UITableView margin on right:
But my UITableView have some about 15-20px contentView margin on right.
I tried self.tableView.layoutMargins = .zero, self.tableView.separatorInset = .zero but it didn't help.
That was actually easy done with following 2 lines:
tableView.sectionIndexTrackingBackgroundColor = .clear
tableView.sectionIndexBackgroundColor = .clear
i'm using tableview in iOS 9, Swift 2
I don't understand why , when i create a table view with simple cells, i get a wrong width of the contentview, even if i set container view to 1000.
The cell width is exactly 1000, but the textLabel inside is less than 1000. Also separators are centered and with wrong width.
How can i get my cells displayed correctly , and covering the entire container view?
Everything is created programmatically.
Here is my code:
if tableView == nil {
tableView = UITableView(frame: CGRect(x: 0, y: 44/*88*/, width: self.view.bounds.size.width, height: self.view.bounds.size.height - 44/*88*/), style: UITableViewStyle.Plain)
tableView!.delegate = self
tableView!.backgroundColor = .clearColor()
tableView!.dataSource = self
tableView!.rowHeight = 40.0
tableView!.allowsSelection = false
tableView!.registerClass(UITableViewCell.self, forCellReuseIdentifier: "cell")
view.addSubview(tableView!)
tableView!.reloadData()
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
var MyIdentifier: String = "MyReuseIdentifier"
var cell: UITableViewCell? = tableView.dequeueReusableCellWithIdentifier(MyIdentifier)
if cell == nil {
cell = UITableViewCell(style: .Default, reuseIdentifier: MyIdentifier)
}
cell!.textLabel!.text = "Test"
cell!.backgroundColor = .clearColor()
cell!.textLabel!.textColor = .blackColor()
return cell!
}
tableView!.cellLayoutMarginsFollowReadableWidth = false
This is the solution!
It is not necessary to set contentInsets.
While the cells's width is the width of the entire view, it's content view is inset on all sides by (I think) 8 points, so it makes sense for the label not to be across the whole screen
To have a label that goes across the entire width of the screen create a custom cell class and add constraints to its label to account for this. (Label's leading to content view leading = -8.0)
You can check
tableView.contentInset
And then update left inset. Also, check that you have not given any constraint, like leadingSpace. Or margin to the UITableView itself. Similarly you have
cell.separatorInset
By default there is left padding of 5, so make this 0.
I tried to change the background and separator style in a UITableView, but nothing happens. In the snippet below, everything besides those changes works.
This tableView is located in a #IBDesignable UIView. Best part is, that everything shows as it should in the interface builder. The colors change, the separators dissapear.
func getTableViewToDisplayRecords() -> UITableView {
let tableView:UITableView = UITableView(frame: CGRect(origin: CGPoint.zero, size: CGSize(width: self.frame.size.width, height: (self.frame.size.height * 3) / 4)), style: UITableViewStyle.Plain)
tableView.dataSource = self
tableView.delegate = self
tableView.tableFooterView = UIView(frame:CGRectZero)
tableView.backgroundColor = UIColor.clearColor()
tableView.separatorStyle = .None
return tableView
}
What could be causing this behavior?
----- EDIT -----
I have managed to do a workaround:
UITableView.appearance().backgroundColor = UIColor.clearColor()
UITableView.appearance().separatorStyle = .None
Now everything works fine, although this is not really a solution of the problem. Any new ideas anyone?
Try the code snippet below to change the background colour of UITableview along with no separator between the table cell's.
{
tableView.backgroundColor = UIColor.clearColor()
tableView.separatorStyle = UITableViewCellSeparatorStyle.None
}
Also, you need to change the background color of UITableViewCells
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell{
let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as UITableViewCell
// change the background color of cell, which is by-default white
cell.backgroundColor = UIColor.clearColor()
return cell
}
Here is the screenshot with the table background color being red (for demonstration purpose) and no seperator between cell.
And here is another image with table background being red and single line seperator between cell.
Hope this helps!!
I think this is a Bug in UITableView.
When your tableView move to superview, sometimes the 'separatorStyle' property will reset to UITableViewCellSeparatorStyleSingleLine(the default style).
So you must set this property again when you finish frame change. Like this:
[self.view addSubview:_searchContentView];
_searchContentView.separatorStyle = UITableViewCellSeparatorStyleNone;