UITableView Separator line

Question

How can I change the separator line that appears at the end of each cell in UITableView? I want to have an image that is a thin separator type line image.

Answer 1

Set the separatorStyle of the tableview to UITableViewCellSeparatorStyleNone. Add your separator image as subview to each cell and set the frame properly.

Answer 2

Try this

Objective C

  [TableView setSeparatorStyle:UITableViewCellSeparatorStyleSingleLine];

  [TableView setSeparatorColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"Divider_line@2x.png"]]];

Swift

    tableView.separatorStyle = UITableViewCellSeparatorStyle.SingleLine
    tableView.separatorColor = UIColor(patternImage: UIImage(named: "YOUR_IMAGE_NAME")!)

Answer 3

First you can write the code:

{    [self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];}

after that

{    #define cellHeight 80 // You can change according to your req.<br>
     #define cellWidth 320 // You can change according to your req.<br>

    -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath  *)indexPath
    {
         UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"seprater_line.png"]];
        imgView.frame = CGRectMake(0, cellHeight, cellWidth, 1);
        [customCell.contentView addSubview:imgView];
         return  customCell;

     }
}

Answer 4

Set the color of the separator to be patterned with your image.

in viewDidLoad:

self.tableView.separatorColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"mySeparatorImage"]];

Answer 5

My project is based on iOS 7 This helps me

[self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];

Then put a subview into cell as separator!

Answer 6

Try this:

UIImageView *separator = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"separator.png"]];
[cell.contentView addSubview: separator];

That's an example of how I got it to work pretty well.

Remember to set the separator style for the table view to none.

Answer 7

You can add a UIImageView that is, for example, 1 point high and as wide as the cell's frame, and then set its origin to the bottom left corner of the cell.

Answer 8

Here's the way to do this via storyboard in XCode 10.2.1. Separator defaults to default which is the line. Set it to none to remove the line.

Answer 9

This is definitely help. Working. but set separator "none" from attribute inspector. Write following code in cellForRowAtIndexPath method

 UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0,           
 cell.contentView.frame.size.height - 1.0,      
 cell.contentView.frame.size.width, 1)];

    lineView.backgroundColor = [UIColor blackColor];
    [cell.contentView addSubview:lineView];

Answer 10

Swift 3/4

Custom separator line, put this code in a custom cell that's a subclass of UITableViewCell(or in CellForRow or WillDisplay TableViewDelegates for non custom cell):

let separatorLine = UIView.init(frame: CGRect(x: 8, y: 64, width: cell.frame.width - 16, height: 2))
separatorLine.backgroundColor = .blue
addSubview(separatorLine)

in viewDidLoad method:

tableView.separatorStyle = .none

Answer 11

Here is an alternate way to add a custom separator line to a UITableView by making a CALayer for the image and using that as the separator line.

// make a CALayer for the image for the separator line

CALayer *separator = [CALayer layer];
separator.contents = (id)[UIImage imageNamed:@"myImage.png"].CGImage;
separator.frame = CGRectMake(0, 54, self.view.frame.size.width, 2);
[cell.layer addSublayer:separator];

Answer 12

you can try below:

UIView *separator = [[UIView alloc] initWithFrame:CGRectMake(0, cell.contentView.frame.size.height - 1.0, cell.contentView.frame.size.width, 1)];
separator.backgroundColor = myColor;
[cell.contentView addSubview:separator];

or

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
   UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"separator.png"]];
   imageView.frame = CGRectMake(0, 100, 320, 1);
   [customCell.contentView addSubview:imageView];

   return customCell;
}

Answer 13

Simplest way to add a separator line under each tableview cell can be done in the storyboard itself. First select the tableview, then in the attribute inspector select the separator line property to be single line. After this, select the separator inset to be custom and update the left inset to be 0 from the left.

Example

Answer 14

You have 2 options to change the separator style of a uitableview if you want to change the default options which are no separators, solid line or etched line.

1. The easiest consist in including a separator line background image to each cell view. You may check then where is located your cell in the tableview to apply the right background image that will give you either a separator line on top of the cell or at the bottom of the cell.

   Set the separator style to none in the viewDidLoad of your tableview:

   [self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];

   Set your background image in the (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath function

    UIImage* yourBgImg = [[UIImage imageNamed:@"bgImage.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(5, 5, 5, 5)];
   

   cell.backgroundView = [[UIImageView alloc] initWithImage:yourBgImg];

   check the position of your cell in the section with the following:

   NSInteger sectionRows = [tableView numberOfRowsInSection:[indexPathsection]]; NSInteger row = [indexPath row];

2. Add the separator line as a cell. I find a post recently for this here: http://www.dimzzy.com/blog/2012/01/separator-cells-for-uitableview/#disqus_thread