UITableView custom divider for empty cells

Question

I want to make sample that should use technic that you can see in Reminders, ibooks, note apps.

As you can see in Reminders app divider is looks like this:

Reminders has dot line divider.
iBook has bookshelf divider.
So the question is how to make custom divider like in example apps? And divider should be drawing even if no data set up to table view.

Answer 1

Why not try using section headers to give you your custom view? In the .m file, try:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView; {
  return [_cellArray count];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section; {
  return 1;
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section; {
  CustomView * customView = [[CustomView alloc] init]; // This view is the custom view you want, like the dotted lines for example.
  return customView;
}

As for always having it show up, you may have to add in blank cells in order to get this appearance. Hope that Helps!!!

Answer 2

Essentially you implement the

- (UITableViewCell *)tableView:(UITableView *)aTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

Inside of that method you implement recognition of your top most, bottom most, and all other cells and set their bag round images appropriately.

In the case of the bookshelf looking tableview I would implement the top most with a shelf at the bottom, and a top of a bookshelf. For all others, I would implement a standard looking middle shelf, and for the bottom most implement a more bottom looking shelf.

So to implement the what Im talking about in the cellForRoatAtIndexPath method some code like this should work

UIImage * rowBackground;
UIImage * selectionBackground;

if( 0 == [indexPath row] ){
    rowBackground       = [UIImage imageNamed:@"listBackingTop.png"];
    selectionBackground = [UIImage imageNamed:@"listBackingTopSelected.png"];
}else if( 217 == [indexPath row] ){
    rowBackground       = [UIImage imageNamed:@"listBackingBottom.png"];
    selectionBackground = [UIImage imageNamed:@"listBackingBottomSelected.png"];
}else{      
    rowBackground       = [UIImage imageNamed:@"listBackingMiddle.png"];
    selectionBackground = [UIImage imageNamed:@"listBackingMiddleSelected.png"];
}

((UIImageView *)cell.backgroundView).image         = rowBackground;
((UIImageView *)cell.selectedBackgroundView).image = selectionBackground;

In my case above, 217 was my max row number.

Remember you control how many rows there are, so you can implement different backing for each row if you wanted. Ive done tableviews where I did a blue for even and orange for odd numbered rows and still had rounded tops bottoms and square in-between looking cells.

Here is some code for an even more complex setup, the one with orange and blue and differing top and bottom cells from the middle cells. Also with a more dynamic about of cells.

UIImage * rowBackground;
UIImage * selectionBackground;
UIImage * accessoryImage;
UIImage * backingImage;

if( 0 == [indexPath row] ){
    rowBackground       = [UIImage imageNamed:@"listTop.png"];
    selectionBackground = [UIImage imageNamed:@"listTopDown.png"];
}else if( (amountRows - 1) == [indexPath row] ){

    if( 0 == ([indexPath row] % 2) ){
        rowBackground       = [UIImage imageNamed:@"listBottomOrange.png"];
        selectionBackground = [UIImage imageNamed:@"listBottomOrangeDown.png"];
    }else{
        rowBackground       = [UIImage imageNamed:@"listBottomBlue.png"];
        selectionBackground = [UIImage imageNamed:@"listBottomBlueDown.png"];
    }

}else{      
    if( 0 == ([indexPath row] % 2) ){
        rowBackground       = [UIImage imageNamed:@"listMiddleOrange.png"];
        selectionBackground = [UIImage imageNamed:@"listMiddleOrangeDown.png"];
    }else{
        rowBackground       = [UIImage imageNamed:@"listMiddleBlue.png"];
        selectionBackground = [UIImage imageNamed:@"listMiddleBlueDown.png"];
    }
}

accessoryImage = [UIImage imageNamed:@"arrow.png"];
accessory.image = accessoryImage;

backingImage = [UIImage imageNamed:@"imageBacking.png"];
imageBack.image = backingImage;

((UIImageView *)cell.backgroundView).image         = rowBackground;
cell.backgroundView.alpha                          = 0.9;
((UIImageView *)cell.selectedBackgroundView).image = selectionBackground;
cell.selectedBackgroundView.alpha                  = 0.5;

I think the major point Im trying to make is don't separate the separator from the cell just let it be part of the cell backing.

Answer 3

Need to add UIView with backgroundColor as patternWithColor:["your image with custom divider"] below UITableView contentSize.

CGSize size = _tableView.contentSize;
UIView *footerImageView = [[UIView alloc] initWithFrame:CGRectMake(0.0f, size.height + 50, 320.0f, 600.0f)];
footerImageView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"Shelf.png"]];
[_tableView addSubview:footerImageView];