Eliminate extra separators below UITableView
Asked Answered
R

34

771

When I set up a table view with 4 rows, there are still extra separators lines (or extra blank cells) below the filled rows.

How would I remove these cells?

image for extra separator lines in UITableView

Robbie answered 2/9, 2009 at 20:5 Comment(0)
W
1566

Interface builder (iOS 9+)

Just drag a UIView to the table. In storyboard, it will sit at the top below your custom cells. You may prefer to name it "footer".

Here it is shown in green for clarity, you'd probably want clear color.

Note that by adjusting the height, you can affect how the "bottom bounce" of the table is handled, as you prefer. (Height zero is usually fine).

enter image description here


To do it programmatically:

Swift

override func viewDidLoad() {
    super.viewDidLoad()
    self.tableView.tableFooterView = UIView()
}

Objective-C

iOS 6.1+

- (void)viewDidLoad 
{
    [super viewDidLoad];

    // This will remove extra separators from tableview
    self.tableView.tableFooterView = [UIView new];
}

or if you prefer,

    self.tableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero];

Historically in iOS:

Add to the table view controller...

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
     // This will create a "invisible" footer
     return CGFLOAT_MIN;
 }

and if necessary...

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
{        
    return [UIView new];

    // If you are not using ARC:
    // return [[UIView new] autorelease];
}
Wish answered 2/9, 2009 at 20:5 Comment(9)
I think your descriptions and your code are reversed. Anyway, this worked great for me. I only use "real" footers with grouped tables, so I added if (tableView.style != UITableViewStyleGrouped) { } around your code. Now all my non-grouped tables lose their extra cells, while my grouped tables are unaffected.Campman
Following my note above, I'll add a warning that if you put any conditions into the the viewForFooterInSection method, be sure that the method returns either a UIView or nil. If you accidentally return void, your app will crash!Campman
@Mathieu This will works because if the table has a custom footer it will not create "fantom" rows to fill the tableview. So in you will create an empty view to be used as footer and set the height to near 0 (it could not be zero or the iOS will not render it). With this simple trick you will change the default behaviour.Wish
@j.Costa: Your Solution will work only once while uitableview created. after click on last cell your solution is not more good. please improve your answer.Oaken
@HappyCoding just tested on iOS7 and iOS6.1 and all the solutions worked. I've used 1 UINavigationController and 1 UITableViewController and on cell selection one new UITableViewController was pushed to the UINavigationController. Are you doing something "special" on cell selection method?Wish
Using tableFooterView leaves a separator on the last cell in the row, as the table still anticipates content below that cell. Using the historical way will eliminate that last separator and looks better overall.Cultivator
@JamesKuang set a frame with height = 1 to eliminate the last cell separator to the tableFooterViewButterscotch
The storyboard one works for me, the Swift ways causes premature loading of the contents, and contents will show behind Large Title for a brief moment before bouncing to the bottom of the Large Title.Lillylillywhite
HEight has to be zero (can't be 1) to show the very bottom line below the last cell.Pimento
C
130

Here's another way to do that w/out the grouped table style, and one you'd probably not guess. Adding a header and footer to the table (perhaps one or the other suffices, haven't checked) causes the separators to disappear from the filler/blank rows.

I stumbled onto this because I wanted a little space at the top and bottom of tables to decrease the risk of hitting buttons instead of a table cell with meaty fingers. Here's a method to stick a blank view in as header and footer. Use whatever height you like, you still eliminate the extra separator lines.

- (void) addHeaderAndFooter
{
    UIView *v = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 10)];
    v.backgroundColor = [UIColor clearColor];
    [self.myTableView setTableHeaderView:v];
    [self.myTableView setTableFooterView:v];
    [v release];
}

In response to @Casebash, I went back to the code in my app ("AcmeLists" List Manager in iTunes store...) and short-circuited the addHeaderAndFooter method to verify. Without it, I have the extra row separators; with the code, I have what you see in this window snap: no table row separators picture. So I'm not sure why it wouldn't have worked for you. Moreover, it makes sense to me that having any custom footer on a table view would necessarily have to stop drawing row separators for blank rows below it. That would be hideous. For reference, I looked at tables where there were more rows than could be viewed on screen, and then for a table with two rows. In both cases, no extraneous separators.

Perhaps your custom views were not actually added. To check that, set the background color to something other than clearColor, e.g., [UIColor redColor]. If you don't see some red bars at the bottom of the table, your footer wasn't set.

Czechoslovak answered 24/11, 2009 at 12:17 Comment(1)
You can do this in IB, too. Just drag a UIView at the bottom of the TableView and set the height to 1.Nuptial
S
76

Removing extra separator lines for empty rows in UITableView in Swift

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    self.yourTableview.tableFooterView = UIView()
}
Sr answered 29/10, 2014 at 5:44 Comment(0)
T
35

I would like to extend wkw answer:

Simply adding only footer with height 0 will do the trick. (tested on sdk 4.2, 4.4.1)

- (void) addFooter
{
    UIView *v = [[UIView alloc] initWithFrame:CGRectZero];

    [self.myTableView setTableFooterView:v];
}

or even simpler - where you set up your tableview, add this line:

//change height value if extra space is needed at the bottom.
[_tableView setTableFooterView:[[UIView alloc] initWithFrame:CGRectMake(0,0,0,0)]];

or even simplier - to simply remove any separators:

[_tableView setTableFooterView:[UIView new]];

Thanks to wkw again :)

Tercel answered 24/3, 2012 at 16:21 Comment(1)
This is the right answer , coz in other methods last row remain with no line separatorJustajustemilieu
B
23

For iOS 7+ using Storyboards

Simply drag a UIView into your UITableView as the footer. Set the footer view's height to 0.

Breastplate answered 18/3, 2014 at 1:27 Comment(0)
C
18

Try this. It worked for me:

- (void) viewDidLoad
{
  [super viewDidLoad];

  // Without ARC
  //self.tableView.tableFooterView = [[[UIView alloc] init] autorelease];

  // With ARC, tried on Xcode 5
  self.tableView.tableFooterView = [UIView new];
}
Chinoiserie answered 16/11, 2012 at 11:35 Comment(0)
C
15

If you are using Swift, add the following code to viewDidLoad of the controller that manages the tableview:

override func viewDidLoad() {
    super.viewDidLoad()

    //...

    // Remove extra separators
    tableView.tableFooterView = UIView()
}
Cockiness answered 12/4, 2015 at 15:16 Comment(0)
S
14

For Swift:

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.tableFooterView = UIView()
    }
Smoothshaven answered 25/7, 2015 at 11:36 Comment(0)
L
8

You can just add an empty footer at the end then it will hide the empty cells but it will also look quite ugly:

tableView.tableFooterView = UIView()

enter image description here

There is a better approach: add a 1 point line at the end of the table view as the footer and the empty cells will also not been shown anymore.

let footerView = UIView()
footerView.frame = CGRect(x: 0, y: 0, width: tableView.frame.size.width, height: 1)
footerView.backgroundColor = tableView.separatorColor
tableView.tableFooterView = footerView

enter image description here

Lobel answered 16/3, 2017 at 9:47 Comment(2)
Very nice input, however no need to make your last cell with a thick separator color at the bottom, instead just make it the same background color of the cell and it also goes away.Rosettarosette
However you prefer. But I think the kinda "not-completed" separator looks quite ugly.Lobel
S
7

Advancing J. Costa's solution: You can make a global change to the table by putting this line of code:

[[UITableView appearance] setTableFooterView:[[UIView alloc] initWithFrame:CGRectZero]];

inside the first possible method (usually in AppDelegate, in: application:didFinishLaunchingWithOptions: method).

Seeger answered 6/11, 2014 at 11:41 Comment(1)
Be careful with this one, there are cases where your intended footer can be overridden and you'll spend a day or two questioning your sanity. Also, tableFooterView isn't marked with UI_APPEARANCE_SELECTOR so the actual behavior could change at any time.Sven
W
7

Swift works great with:

tableView.tableFooterView = UIView()
Whipping answered 22/12, 2016 at 23:51 Comment(0)
C
7

just add this code (Swift) . .

tableView.tableFooterView = UIView()
Circumscissile answered 1/5, 2017 at 20:36 Comment(1)
Duplicate of many answers, including the top wiki answer and Sebastian answerBlakeney
I
6

I know this Question has be accepted answer but i put here different ways for how to hide Extra separator line of UITableView.

You can hide tableView's standard separator line, and add your custom line at the top of each cell.

Update:

The easiest way to add custom separator is to add simple UIView of 1px height:

UIView* separatorLineView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 1)];
separatorLineView.backgroundColor = [UIColor grayColor]; /// may be here is clearColor;
[cell.contentView addSubview:separatorLineView];

OR

    self.tblView=[[UITableView alloc] initWithFrame:CGRectMake(0,0,320,370) style:UITableViewStylePlain];
    self.tblView.delegate=self;
    self.tblView.dataSource=self;
    [self.view addSubview:self.tblView];

    UIView *v = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 10)];
    v.backgroundColor = [UIColor clearColor];
    [self.tblView setTableHeaderView:v];
    [self.tblView setTableFooterView:v];
    [v release];

OR

- (float)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
    // This will create a "invisible" footer
    return 0.01f;
}

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
{
    // To "clear" the footer view
    return [[UIView new] autorelease];
}

OR The best and simple way i like ever is

self.tableView.tableFooterView = [[UIView alloc] init];

Try any of one;

Interstellar answered 12/9, 2013 at 3:55 Comment(0)
E
6

You may find lots of answers to this question. Most of them around manipulation with UITableView's tableFooterView attribute and this is proper way to hide empty rows. For the conveniency I've created simple extension which allows to turn on/off empty rows from Interface Builder. You can check it out from this gist file. I hope it could save a little of your time.

extension UITableView {

  @IBInspectable
  var isEmptyRowsHidden: Bool {
        get {
          return tableFooterView != nil
        }
        set {
          if newValue {
              tableFooterView = UIView(frame: .zero)
          } else {
              tableFooterView = nil
          }
       }
    }
}

Usage:

tableView.isEmptyRowsHidden = true

enter image description here

Eddy answered 12/11, 2018 at 6:36 Comment(2)
@Yaman I have checked my snippet @ Xcode 12.2, Swift 5 and can confirm that it still works. You can also share part of your code, so it can be easier to determine what you're doing wrong.Eddy
12.2, see my previous messageEddy
B
5

uitableview extra separator line hide extra separators lines hide in swift 3.0

 self.tbltableView.tableFooterView = UIView(frame: .zero)
Badillo answered 12/10, 2016 at 5:59 Comment(0)
H
5

If you don't want any separator after the last cell, then you need a close to zero but non-zero height for your footer.

In your UITableViewDelegate:

func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    return .leastNormalMagnitude
}
Hutner answered 14/3, 2017 at 7:38 Comment(1)
superb! Worked for me!!Constrain
E
3

I was using a table view to show a fixed number of fixed height rows, so I simply resized it and made it non-scrollable.

Eady answered 14/1, 2010 at 5:9 Comment(0)
M
3

Just add an view with the desired separator color as background color, 100% width, 1px height at the position x0 y-1 to your tableViewCell. Make sure the tableViewCell doesn't clip subviews, instead the tableView should.

So you get a absolut simple and working separator only between existing cells without any hack per code or IB.

Note: On a vertical top bounce the 1st separator shows up, but that shouldn't be a problem cause it's the default iOS behavior.

Mental answered 25/4, 2012 at 17:16 Comment(0)
B
3

To eliminate extra separator lines from bottom of UItableview programmatically, just write down following two lines of code and it will remove extra separator from it.

tableView.sectionFooterHeight = 0.f;
tableView.sectionHeaderHeight = 0.f;

This trick working for me all the time, try yourself.

Brogle answered 17/4, 2017 at 10:44 Comment(0)
F
2

I had some luck implementing a single piece of the accepted answer (iOS 9+, Swift 2.2). I had tried implementing:

self.tableView.tableFooterView = UIView(frame: .zero)

However, there was no effect on my tableView - I believe it may have something to do with the fact that I was using UITableViewController.

Instead, I only had to override the viewForFooterInSection method (I did not set the tableFooterView elsewhere):

override func tableView(tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    return UIView(frame: .zero)
}

This worked fine for a tableView with a single section (if you have multiple sections, you need to specify the last one).

Falsity answered 29/3, 2016 at 20:37 Comment(0)
A
2

If you have only one section, then the quickest and easiest way is to just set the Table View Style from "Plain" to "Grouped". (see image)

TableView Grouped

If you have more sections, you might need to set the header height to zero (depending on your/your customer's/your project manager's taste)

If you have more sections, and don't want to mess with the headers (even if it is just one line in the simplest case), then you need to set a UIView as a footer, as it was explained in the previous answers)

Applique answered 31/10, 2017 at 15:51 Comment(0)
B
2

Swift 4.0 Extension

Just a little extension for the storyboard:

enter image description here

extension UITableView {
    @IBInspectable
    var hideSeparatorForEmptyCells: Bool {
        set {
            tableFooterView = newValue ? UIView() : nil
        }
        get {
            return tableFooterView == nil
        }
    }
}
Bachelorism answered 19/2, 2018 at 14:20 Comment(0)
A
2

Quick and easy Swift 4 way.

override func viewDidLoad() {
     tableView.tableFooterView = UIView(frame: .zero)
}

If you are having static cells. You can also turn off the separator from Inspector window. (this won't be desirable if you need the separator. In that case use method shown above) inspector window

Araujo answered 19/3, 2018 at 23:39 Comment(1)
Setting a new UIView to tableFooterView was already answered 10 times, with better explanations regarding why, better code (you're missing super.viewDidLoad()) and is included in the wiki answer on top. As for removing all separators, that's really not what this question is about, so better rollback your last edit and/or delete your answer entirely.Blakeney
C
2

Try with this

for Objective C

- (void)viewDidLoad 
 {
  [super viewDidLoad];
  // This will remove extra separators from tableview
  self.yourTableView.tableFooterView = [UIView new];
}

for Swift

override func viewDidLoad() {
 super.viewDidLoad()
 self.yourTableView.tableFooterView = UIView()
}
Clause answered 16/1, 2019 at 11:30 Comment(0)
C
1

If you want to remove unwanted space in UITableview you can use below two methods

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
    return 0.1;
}
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
    return 0.1;
}
Caliber answered 15/4, 2017 at 11:13 Comment(0)
P
1

Swift 3 /Swift 4 /Swift 5 +, Very Easy and simple way

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
      //MARK:- For Hiding the extra lines in table view.
    tableView?.tableFooterView = UIView()
}

OR

override func viewDidLoad(_ animated: Bool) {
    super.viewDidLoad(animated)
      //MARK:- For Hiding the extra lines in table view.
    tableView?.tableFooterView = UIView()
}
Precentor answered 11/4, 2018 at 6:51 Comment(1)
viewDidLoad(_ animated: Bool) doesn't exist, and setting the footer each time view will appear is useless. Sorry but your answer is plain wrong and doesn't add any value to the existing ones.Blakeney
U
1

I have added this small tableview extension that helps throughout

extension UITableView {
     func removeExtraCells() {
         tableFooterView = UIView(frame: .zero)
     }
}
Unabridged answered 26/9, 2018 at 18:10 Comment(0)
S
0

Try this

self.tables.tableFooterView = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 320.0f, 10.0f)];
Scoliosis answered 5/3, 2015 at 9:11 Comment(0)
J
0

In case you have a searchbar in your view (to limit the number of results for example), you have to also add the following in shouldReloadTableForSearchString and shouldReloadTableForSearchScope:

controller.searchResultsTable.footerView = [ [ UIView alloc ] initWithFrame:CGRectZero ];
Jacintha answered 23/6, 2016 at 20:25 Comment(0)
C
0

UIKit does not create empty cell when the tableView has a tableFooterView. So we can make a trick and assign a zero height UIView object as footer of the tableView.

tableView.tableFooterView = UIView()
Consistory answered 19/3, 2018 at 12:2 Comment(0)
F
0

In Swift (I'm using 4.0), you can accomplish this by creating a custom UITableViewCell class, and overriding the setSelected method. Then the separator insets all to 0. (my main class with the table view has a clear background) color.

override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)

    // eliminate extra separators below UITableView
    self.separatorInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
}
From answered 4/5, 2018 at 14:12 Comment(0)
S
0

You can remove separator of empty rows by just adding minor height of footer

func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    return 0.01
}
Shrievalty answered 4/6, 2020 at 13:47 Comment(0)
A
-1

if you are sub-classing the UITableView you need to do this...

-(void)didMoveToSuperview {
    [super didMoveToSuperview];
    self.tableFooterView = [UIView new];
}
Author answered 27/3, 2016 at 19:41 Comment(1)
It is a bad practice to recreate the footer each time it is moved to a different superview. Better do the same in init(frame:style:)+init?(coder:) to guarantee it's done only once.Blakeney
M
-1

I just add this line at the ViewDidLoad function and problem fixed.

tableView.tableFooterView = [[UIView alloc] init]; 
Munroe answered 28/2, 2017 at 8:5 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.