Reputation: 10213
I have an app where the UITableView
's separator inset is set to custom values - Right 0
, Left 0
. This works perfectly in iOS 7.x
, however in iOS 8.0
I see that the separator inset is set to the default of 15
on the right. Even though in the xib files it set to 0
, it still shows up incorrectly.
How do I remove the UITableViewCell
separator margins?
Upvotes: 687
Views: 187999
Reputation: 13620
iOS 8.0 introduces the layoutMargins property on cells AND table views.
This property isn't available on iOS 7.0 so you need to make sure you check before assigning it!
The easy fix is to subclass your cell and override the layout margins property as suggested by @user3570727. However you will lose any system behavior like inheriting margins from the Safe Area so I do not recommend the below solution:
(ObjectiveC)
-(UIEdgeInsets)layoutMargins {
return UIEdgeInsetsZero // override any margins inc. safe area
}
(swift 4.2):
override var layoutMargins: UIEdgeInsets { get { return .zero } set { } }
If you don't want to override the property, or need to set it conditionally, keep reading.
In addition to the layoutMargins
property, Apple has added a property to your cell that will prevent it from inheriting your Table View's margin settings. When this property is set, your cells are allowed to configure their own margins independently of the table view. Think of it as an override.
This property is called preservesSuperviewLayoutMargins
, and setting it to NO
will allow the cell's layoutMargin
setting to override whatever layoutMargin
is set on your TableView. It both saves time (you don't have to modify the Table View's settings), and is more concise. Please refer to Mike Abdullah's answer for a detailed explanation.
NOTE: what follows is a clean implementation for a cell-level margin setting, as expressed in Mike Abdullah's answer. Setting your cell's preservesSuperviewLayoutMargins=NO
will ensure that your Table View does not override the cell settings. If you actually want your entire table view to have consistent margins, please adjust your code accordingly.
Setup your cell margins:
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
// Remove seperator inset
if ([cell respondsToSelector:@selector(setSeparatorInset:)]) {
[cell setSeparatorInset:UIEdgeInsetsZero];
}
// Prevent the cell from inheriting the Table View's margin settings
if ([cell respondsToSelector:@selector(setPreservesSuperviewLayoutMargins:)]) {
[cell setPreservesSuperviewLayoutMargins:NO];
}
// Explictly set your cell's layout margins
if ([cell respondsToSelector:@selector(setLayoutMargins:)]) {
[cell setLayoutMargins:UIEdgeInsetsZero];
}
}
Swift 4:
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
// Remove seperator inset
if cell.responds(to: #selector(setter: UITableViewCell.separatorInset)) {
cell.separatorInset = .zero
}
// Prevent the cell from inheriting the Table View's margin settings
if cell.responds(to: #selector(setter: UITableViewCell.preservesSuperviewLayoutMargins)) {
cell.preservesSuperviewLayoutMargins = false
}
// Explictly set your cell's layout margins
if cell.responds(to: #selector(setter: UITableViewCell.layoutMargins)) {
cell.layoutMargins = .zero
}
}
Setting the preservesSuperviewLayoutMargins
property on your cell to NO should prevent your table view from overriding your cell margins. In some cases, it seems to not function properly.
If all fails, you may brute-force your Table View margins:
-(void)viewDidLayoutSubviews
{
[super viewDidLayoutSubviews];
// Force your tableview margins (this may be a bad idea)
if ([self.tableView respondsToSelector:@selector(setSeparatorInset:)]) {
[self.tableView setSeparatorInset:UIEdgeInsetsZero];
}
if ([self.tableView respondsToSelector:@selector(setLayoutMargins:)]) {
[self.tableView setLayoutMargins:UIEdgeInsetsZero];
}
}
Swift 4:
func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
// Force your tableview margins (this may be a bad idea)
if tableView.responds(to: #selector(setter: UITableView.separatorInset)) {
tableView.separatorInset = .zero
}
if tableView.responds(to: #selector(setter: UITableView.layoutMargins)) {
tableView.layoutMargins = .zero
}
}
...and there you go! This should work on iOS 7 and 8.
EDIT: Mohamed Saleh brought to my attention a possible change in iOS 9. You may need to set the Table View's cellLayoutMarginsFollowReadableWidth
to NO
if you want to customize insets or margins. Your mileage may vary, this is not documented very well.
This property only exists in iOS 9 so be sure to check before setting.
if([myTableView respondsToSelector:@selector(setCellLayoutMarginsFollowReadableWidth:)])
{
myTableView.cellLayoutMarginsFollowReadableWidth = NO;
}
Swift 4:
if myTableView.responds(to: #selector(setter: self.cellLayoutMarginsFollowReadableWidth)) {
myTableView.cellLayoutMarginsFollowReadableWidth = false
}
(above code from iOS 8 UITableView separator inset 0 not working)
EDIT: Here's a pure Interface Builder approach:
NOTE: iOS 11 changes & simplifies much of this behavior, an update will be forthcoming...
Upvotes: 1077
Reputation: 15694
iOS introduces the layoutMargins property on cells AND table views.
This property isn't available in iOS 7.0 so you need to make sure you check before assigning it!
However, Apple has added a property called preservesSuperviewLayoutMargins to your cell that will prevent it from inheriting your Table View's margin settings. This way, your cells can configure their own margins independently of the table view. Think of it as an override.
This property is called preservesSuperviewLayoutMargins, and setting it to NO can allow you to override your Table View's layoutMargin settings with your own cell's layoutMargin setting. It both saves time (you don't have to modify the Table View's settings), and is more concise. Please refer to Mike Abdullah's answer for a detailed explanation.
NOTE: this is the proper, less messy implementation, as expressed in Mike Abdullah's answer; setting your cell's preservesSuperviewLayoutMargins=NO will ensure that your Table View does not override the cell settings.
First step - Setup your cell margins:
/*
Tells the delegate that the table view is about to draw a cell for a particular row.
*/
override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell,
forRowAtIndexPath indexPath: NSIndexPath)
{
// Remove separator inset
if cell.respondsToSelector("setSeparatorInset:") {
cell.separatorInset = UIEdgeInsetsZero
}
// Prevent the cell from inheriting the Table View's margin settings
if cell.respondsToSelector("setPreservesSuperviewLayoutMargins:") {
cell.preservesSuperviewLayoutMargins = false
}
// Explictly set your cell's layout margins
if cell.respondsToSelector("setLayoutMargins:") {
cell.layoutMargins = UIEdgeInsetsZero
}
}
Setting the preservesSuperviewLayoutMargins property on your cell to NO should prevent your table view from overriding your cell margins. In some cases, it seems not to function properly.
Second step - Only if all fails, you may brute-force your Table View margins:
/*
Called to notify the view controller that its view has just laid out its subviews.
*/
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
// Force your tableview margins (this may be a bad idea)
if self.tableView.respondsToSelector("setSeparatorInset:") {
self.tableView.separatorInset = UIEdgeInsetsZero
}
if self.tableView.respondsToSelector("setLayoutMargins:") {
self.tableView.layoutMargins = UIEdgeInsetsZero
}
}
...and there you go! This should work on iOS 8 as well as iOS 7.
Note: tested using iOS 8.1 and 7.1, in my case I only needed to use the first step of this explanation.
The Second Step is only required if you have unpopulated cell beneath the rendered cells, ie. if the table is larger than the number of rows in the table model. Not doing the second step would result in different separator offsets.
Upvotes: 42
Reputation: 140
Just override the "cellForRowAtIndexPath" and set "cell.preservesSuperviewLayoutMargins = false" and "cell.separatorInset = UIEdgeInsets.zero" and "cell.layoutMargins = UIEdgeInsets.zero"
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell: LayoutTableViewCell! = tableView.dequeueReusableCell(withIdentifier: "LayoutCell") as? LayoutTableViewCell
let currentLayout = OrderLayouts()[indexPath.row]
cell.NameLabel?.text = currentLayout.name
cell.DescrLabel?.text = currentLayout.descr
if(GlobalVariables.debug){
cell.DescrLabel?.text = "\(currentLayout.id) \n \(currentLayout.descr)"
}
cell.preservesSuperviewLayoutMargins = false
cell.separatorInset = UIEdgeInsets.zero
cell.layoutMargins = UIEdgeInsets.zero
return cell
}
Upvotes: 0
Reputation: 3607
Here's the only way to fully control this stuff (that I could find)
To fully control both separator insets and layout margins on each cell. Do this in the willDisplayCell
method on your UITableviewDelegate
.
func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
cell.layoutMargins = UIEdgeInsetsZero
cell.contentView.layoutMargins = UIEdgeInsetsMake(0, 10, 0, 10)
cell.separatorInset = UIEdgeInsetsMake(0, 0, 0, 0)
}
The cell object controls the separator, and the contentView
controls everything else. If your separator inset spaces are showing up in an unexpected color this should solve it:
cell.backgroundColor = cell.contentView.backgroundColor
Upvotes: 10
Reputation: 2302
Swift 3.0 example:
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
// removing seperator inset
if cell.responds(to: #selector(setter: UITableViewCell.separatorInset)) {
cell.separatorInset = .zero
}
// prevent the cell from inheriting the tableView's margin settings
if cell.responds(to: #selector(setter: UIView.preservesSuperviewLayoutMargins)) {
cell.preservesSuperviewLayoutMargins = false
}
// explicitly setting cell's layout margins
if cell.responds(to: #selector(setter: UITableViewCell.layoutMargins)) {
cell.layoutMargins = .zero
}
}
Upvotes: 10
Reputation: 101
Just add below code can solve this program.
Good luck to you!
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
if ([cell respondsToSelector:@selector(setSeparatorInset:)]) {
[cell setSeparatorInset:UIEdgeInsetsZero];
}
if ([cell respondsToSelector:@selector(setLayoutMargins:)]) {
[cell setLayoutMargins:UIEdgeInsetsZero];
}
}
Upvotes: 8
Reputation: 845
For me none has worked except this workaround (Swift 3.0):
extension UIColor {
static func colorWith(hex:String, alpha: CGFloat) -> UIColor {
var cString = hex.trimmingCharacters(in: .whitespacesAndNewlines).uppercased()
if cString.hasPrefix("#") {
cString.remove(at: cString.startIndex)
}
if cString.characters.count != 6 {
return UIColor.gray
}
var rgbValue:UInt32 = 0
Scanner(string: cString).scanHexInt32(&rgbValue)
return UIColor(red: CGFloat((rgbValue & 0xFF0000) >> 16) / 255.0,
green: CGFloat((rgbValue & 0x00FF00) >> 8) / 255.0,
blue: CGFloat( rgbValue & 0x0000FF) / 255.0,
alpha: alpha)
}
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: cellReuseIdendifier, for: indexPath)
cell.backgroundColor = UIColor.colorWith(hex: "c8c7cc", alpha: 1) // same color of line separator
return cell
}
Upvotes: 0
Reputation: 1
simply put this two lines in cellForRowAtIndexPath method
if you want to Specific separator line are start from zero suppose here is last line is start from zero
if (indexPath.row == array.count-1)
{
[cell setSeparatorInset:UIEdgeInsetsZero];
[cell setLayoutMargins:UIEdgeInsetsZero];
}
else
tblView.separatorInset=UIEdgeInsetsMake(0, 10, 0, 0);
Upvotes: 0
Reputation: 515
This is the code that's working for me, in Swift:
override func viewDidLoad()
{
super.viewDidLoad()
...
if tableView.respondsToSelector("setSeparatorInset:") {
tableView.separatorInset = UIEdgeInsetsZero
}
}
func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell,forRowAtIndexPath indexPath: NSIndexPath)
{
if cell.respondsToSelector("setSeparatorInset:") {
cell.separatorInset.left = CGFloat(0.0)
}
if tableView.respondsToSelector("setLayoutMargins:") {
tableView.layoutMargins = UIEdgeInsetsZero
}
if cell.respondsToSelector("setLayoutMargins:") {
cell.layoutMargins.left = CGFloat(0.0)
}
}
This seems the cleanest to me (for now), as all the cell/tableView edge/margin adjustments are done in the tableView:willDisplayCell:forRowAtIndexPath:
method, without cramming unneccessary code into tableView:cellForRowAtIndexPath:
.
Btw, I'm only setting the cell's left separatorInset/layoutMargins, because in this case I don't want to screw up my constraints that I have set up in my cell.
Code updated to Swift 2.2 :
override func viewDidLoad() {
super.viewDidLoad()
if tableView.respondsToSelector(Selector("setSeparatorInset:")) {
tableView.separatorInset = UIEdgeInsetsZero
}
}
override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell,forRowAtIndexPath indexPath: NSIndexPath) {
if cell.respondsToSelector(Selector("setSeparatorInset:")) {
cell.separatorInset.left = CGFloat(0.0)
}
if tableView.respondsToSelector(Selector("setLayoutMargins:")) {
tableView.layoutMargins = UIEdgeInsetsZero
}
if cell.respondsToSelector(Selector("setLayoutMargins:")) {
cell.layoutMargins.left = CGFloat(0.0)
}
}
Upvotes: 6
Reputation: 48940
In Swift it's slightly more annoying because layoutMargins
is a property, so you have to override the getter and setter.
override var layoutMargins: UIEdgeInsets {
get { return UIEdgeInsetsZero }
set(newVal) {}
}
This will effectively make layoutMargins
readonly, which in my case is fine.
Upvotes: 39
Reputation: 499
In Swift you can use this
cell.selectionStyle = UITableViewCellSelectionStyle.None
cell.preservesSuperviewLayoutMargins = false
cell.separatorInset = UIEdgeInsetsZero
cell.layoutMargins = UIEdgeInsetsZero
Upvotes: 0
Reputation: 35783
With Swift 2.2
create UITableViewCell extension
import UIKit
extension UITableViewCell {
func removeMargins() {
if self.respondsToSelector(Selector("setSeparatorInset:")) {
self.separatorInset = UIEdgeInsetsZero
}
if self.respondsToSelector(Selector("setPreservesSuperviewLayoutMargins:")) {
self.preservesSuperviewLayoutMargins = false
}
if self.respondsToSelector(Selector("setLayoutMargins:")) {
self.layoutMargins = UIEdgeInsetsZero
}
}
}
Now you can use in your cellForRowAtIndex
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
cell.removeMargins()//To remove seprator inset
}
Upvotes: -1
Reputation: 1233
use storyboard to Change Separator inset Custom left 0 and right 0, if you want to hide separator to None see above image
Upvotes: 0
Reputation: 139
As to what cdstamper suggested instead of the table view, adding below lines in the cell's layoutSubview method works for me.
- (void)layoutSubviews
{
[super layoutSubviews];
if ([self respondsToSelector:@selector(setSeparatorInset:)])
[self setSeparatorInset:UIEdgeInsetsZero];
if ([self respondsToSelector:@selector(setPreservesSuperviewLayoutMargins:)])
{
[self setPreservesSuperviewLayoutMargins:NO];;
}
if ([self respondsToSelector:@selector(setLayoutMargins:)])
{
[self setLayoutMargins:UIEdgeInsetsZero];
}
}
Upvotes: 10
Reputation: 2285
For me the simple line did the job
cell.layoutMargins = UIEdgeInsetsZero
Upvotes: 9
Reputation: 31
This is my solution. This applies to the custom cell subclass, just add them both to the subclass.
- (UIEdgeInsets)layoutMargins {
return UIEdgeInsetsMake(0, 10, 0, 10);
}
2.
self.separatorInset = UIEdgeInsetsMake(0, 10, 0, 10);
And it is convenient that you can customize the position of the separator without asking your designer to draw one for you..........
Upvotes: 3
Reputation: 93
My solution is adding an UIView as a container for the cell subviews. Then set this UIView constraints (top,bottom,trailing,leading) to 0 points. And all the unnecessary mass go away.the image showing the logic
Upvotes: 0
Reputation: 1
XCode 7.1 iOS 7, 8, 9:
just put these two lines in your TabelViewCell:
self.layoutMargins = UIEdgeInsetsZero;
self.preservesSuperviewLayoutMargins = false;
That worked for me
Upvotes: -1
Reputation: 8739
Here's an easy way to globally remove the inset.
In UITableViewCell+Extensions.swift
:
import UIKit
extension UITableViewCell {
override public var layoutMargins: UIEdgeInsets {
get { return UIEdgeInsetsZero }
set { }
}
}
In AppDelegate
application:didFinishLaunchingWithOptions:
:
UITableViewCell.appearance().separatorInset = UIEdgeInsetsZero
You might think to a) also just override separatorInset
in the extension, or b) set the appearance proxy for layoutMargins
, instead. Neither will work. Even though separatorInset
is indicated to be a property, attempting to override it as a property (or method) generates compiler errors. And setting the appearance proxy for UITableViewCell
's layoutMargins
(or, for that matter, also setting the appearance proxies for UITableView
's layoutMargins
and separatorInset
) has no effect.
Upvotes: 4
Reputation: 3498
following answer from @cdstamper, a better place is layoutSubviews of UITableViewCell, in your cell file(I set 1% spacing, you can set to zero), so need only to set code here to handle all situations(rotate and other):
-(void)layoutSubviews
{
[super layoutSubviews];
if ([self respondsToSelector:@selector(setSeparatorInset:)]) {
[self setSeparatorInset:UIEdgeInsetsMake(0,self.bounds.size.width*0.01,0,self.bounds.size.width*0.01)];
}
if ([self respondsToSelector:@selector(setLayoutMargins:)]) {
[self setLayoutMargins:UIEdgeInsetsMake(0,self.bounds.size.width*0.01,0,self.bounds.size.width*0.01)];
}
}
Upvotes: 0
Reputation: 489
This worked perfectly for me in iOS 8 and iOS 9.
For OBJ-C
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
if ([tableView respondsToSelector:@selector(setSeparatorInset:)])
{
[tableView setSeparatorInset:UIEdgeInsetsZero];
}
if ([tableView respondsToSelector:@selector(setLayoutMargins:)])
{
[tableView setLayoutMargins:UIEdgeInsetsZero];
}
if ([cell respondsToSelector:@selector(setLayoutMargins:)])
{
[cell setLayoutMargins:UIEdgeInsetsZero];
}
return cell;
}
Upvotes: 1
Reputation: 9337
For iOS 9 you need to add:
if([myTableView respondsToSelector:@selector(setCellLayoutMarginsFollowReadableWidth:)])
{
myTableView.cellLayoutMarginsFollowReadableWidth = NO;
}
For more details please refer to question.
Upvotes: 24
Reputation: 19954
Swift 2.0 Extension
I just wanted to share an extension I made to remove the margins from the tableview cell separators.
extension UITableViewCell {
func removeMargins() {
if self.respondsToSelector("setSeparatorInset:") {
self.separatorInset = UIEdgeInsetsZero
}
if self.respondsToSelector("setPreservesSuperviewLayoutMargins:") {
self.preservesSuperviewLayoutMargins = false
}
if self.respondsToSelector("setLayoutMargins:") {
self.layoutMargins = UIEdgeInsetsZero
}
}
}
Used in context:
let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! CustomCell
cell.removeMargins()
return cell
Upvotes: 21
Reputation: 505
Adding this snippet, simple elegant in Swift works for me in iOS8 :)
// tableview single line
func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
cell.preservesSuperviewLayoutMargins = false
cell.layoutMargins = UIEdgeInsetsZero
}
Upvotes: 1
Reputation: 101
After having seen the answers at floor 3, I tried to figure out what the relationship of setting up the separator between TableView & TableViewCell and did some test. Here are my conclusions:
we can consider that setting the cell's separator to zero has to move the separator in two steps: first step is to set cell's separatorinset to zero. second step is to set cell's marginlayout to zero.
set the TableView's separatorinset and marginlayout can affect the Cell's separatorinset. However, from the test, I find that the TableView's separatorinset seem to be useless, TableView's marginlayout can actually affect cell's marginlayout.
set Cell's PreservesSuperviewLayoutMargins = false, can cut off TableView's marginlayout effect on Cells.
one of the solutions:
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
var cell = UITableViewCell()
cell.preservesSuperviewLayoutMargins = false
cell.separatorInset = UIEdgeInsetsZero
cell.layoutMargins = UIEdgeInsetsZero
return cell
}
Upvotes: 3
Reputation: 14722
iOS 8 and later. Swift 2.0 and later:
override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
cell.separatorInset = UIEdgeInsetsZero
if #available(iOS 8.0, *) {
cell.layoutMargins = UIEdgeInsetsZero
} else {
// Fallback on earlier versions
}
}
Upvotes: 0
Reputation: 1478
I didn't have any real luck with any of the solutions above. I'm using NIB files for my tables cells. I "fixed" this by adding a label with a height of 1. I changed the background of the label to black, pinned the label to the bottom of the nib, and then pinned the bottom of the rest of my contents to the added label. Now I have a black border running along the bottom of my cells.
To me, this feels like more of a hack, but it does work.
My only other choice was to just eliminate the border completely. I'm still deciding whether I'll just go with that.
Upvotes: 0
Reputation: 861
In iOS8:
Adding this to my UITableViewCell Subclass:
- (UIEdgeInsets)layoutMargins {
return UIEdgeInsetsZero;
}
and this to "tableView:cellForRowAtIndexPath" or "tableView:willDisplayCell":
[editCell setSeparatorInset:UIEdgeInsetsZero];
WORKED for me.
Upvotes: 5
Reputation: 3472
In a more compact way than the most voted answer...
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
if ([cell respondsToSelector:@selector(setSeparatorInset:)] && [cell respondsToSelector:@selector(setPreservesSuperviewLayoutMargins:)] && [cell respondsToSelector:@selector(setLayoutMargins:)]) {
[cell setSeparatorInset:UIEdgeInsetsZero];
[cell setPreservesSuperviewLayoutMargins:NO];
[cell setLayoutMargins:UIEdgeInsetsZero];
}
}
Upvotes: 1
Reputation: 5542
Simple solution in Swift for iOS 8 with a custom UITableViewCell
override func awakeFromNib() {
super.awakeFromNib()
self.layoutMargins = UIEdgeInsetsZero
self.separatorInset = UIEdgeInsetsZero
}
In this way you are setting layoutMargin
and separatorInset
just one time instead of doing it for each willDisplayCell
as most of the above answers suggest.
If you are using a custom UITableViewCell
this is the correct place to do it.
Otherwise you should do it in tableView:cellForRowAtIndexPath
.
Just another hint: you don't need to set preservesSuperviewLayoutMargins = false
because default value is already NO
!
Upvotes: 9