CODEWITHSUNDEEP
iosobjective-ccocoa-touchuitableview
Greg Maletic
Greg Maletic

Reputation: 6337

How to set the "upper" border color on grouped UITableViewCells?

I've used -[UITableView setSeparatorColor:] to set the red border in the attached image. But how do I set the color of the border showing up as white?

enter image description here

EDIT: I know I can use the UITableViewSeparatorStyleSingleLine style to get rid of the white color entirely. But I don't want to do that: I want to change its color. Thanks!

Upvotes: 3

Views: 2840

Answers (4)

Sulthan
Sulthan

Reputation: 130132

You are trying to change the default iOS user interface but the change is so complex that it can't be done with the default properties.

What is the solution? Just remove the lines drawn by UITableVie (setting the color to [UIColor clearColor]) and customize UITableViewCell background.

Of course, you need 3 types of backgrounds - for the first cell, for the last cell and for the middle ones:


- (UITableViewCell*)tableView:(UITableView*)tableView cellForRowAtIndexPath (NSIndexPath*)indexPath {  
    UITableViewCell* cell = [...];

    UIView* background;

    if (indexPath.row == 0) {
        background = [...]; //background for the first cell
    }
    else if (indexPath.row + 1 == [self tableView:tableView numberOfRowsInSection:indexPath.section]) {
        background = [...]; //background for the last cell
    }
    else {
        background = [...]; //background for the middle cells
    }

    cell.backgroundView = background;
}

The question is how to create the background. Usually I just use an UIImageView or a combination of several UIImageView (rounded corner as one image and the lines as resizible images).

Upvotes: 1

Vinzzz
Vinzzz

Reputation: 11724

You can't.

This built-in drawing is specific to grouped-style tableView, and can't be changed (to my knowledge...)

There's a workaround to this (we've used -> sorry no source code), but i guess you're not going to like it :

1/ have information of each cell's position 2/ to re-implement drawing of EACH cell's background, depending on its position (so you have to save this position : FirstCell, MiddleCell, LastCell,) to reproduce the grouped tableView look.

A way to do this is with CoreGraphics :

From your subclassed CellGroupedBackgroundView (or customGroupedTableViewCell, depending on the design you choose) you create 2 nearly identical CAShapeLayers. Each one for each separator color. And you expose these colors as properties of your CellGroupedBackgroundView.

You set these layer's path depending on the position property you have set (using only CGPathAddLineToPointfor middle cells, and CGPathAddArcToPoint for first and last cell)

2/ use that created custom backgroundView on a plain UITableView, setting each cell's 'position' according to its indexPath...

Good luck :)

Upvotes: 0

Novarg
Novarg

Reputation: 7450

Try making a "line view" for the cells. So in cellForRowAtIndexPath: method just add that to the cell that you need:

UIView *lineView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, cell.contentView.bounds.size.width, 1)] autorelease];
lineView.backgroundColor = [UIColor whiteColor];
lineView.autoresizingMask = 0x3f;
[cell.contentView addSubview:lineView];

that will add that white line to the top of the each cell. If you don't want it for the very first row add an if-statement:

if (indexPath.row != 0)
{
  UIView *lineView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, cell.contentView.bounds.size.width, 1)] autorelease];
  lineView.backgroundColor = [UIColor whiteColor];
  lineView.autoresizingMask = 0x3f;
  [cell.contentView addSubview:lineView];
}

Hope it helps.

Upvotes: 4

hjaltij
hjaltij

Reputation: 885

The white color is because the separator style is set to Single Line Edged. If you change it to Single Line the white lines will disappear. Not sure if that solves your problem but I don't think you change the color without doing a lot more work.

Upvotes: 5

Related Questions