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.
Set the separatorStyle of the tableview to UITableViewCellSeparatorStyleNone. Add your separator image as subview to each cell and set the frame properly.
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")!)
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;
}
}
Set the color of the separator to be patterned with your image.
in viewDidLoad:
self.tableView.separatorColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"mySeparatorImage"]];
My project is based on iOS 7
This helps me
[self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];
Then put a subview into cell as separator!
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.
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.
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.
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];
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
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.
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];
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
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;
}
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];
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
Related
I have UITableView and am displaying data in it using custom UITableViewCell. My problem is - I need to remove separation line between navigation bar and first cell of plain table view as i have mentioned in my attached image.
here is my code :
UIView* separatorLineView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 1)];
separatorLineView.backgroundColor = [UIColor colorWithRed:229/255.0 green:229/255.0 blue:229/255.0 alpha:1.0];
[cell.contentView addSubview:separatorLineView];
Can you give me any idea how to remove this line? Thanks
In your - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath add this line :
if (indexPath.row == 0) {
cell.separatorInset = UIEdgeInsetsMake(0.f, 0.f, 0.f, cell.bounds.size.width);
}
I am loading custom separator image in uitableview cell.
Here is my code :
- (UITableViewCell *)tableView:(UITableView *)aTableView cellForRowAtIndexPath: (NSIndexPath *)indexPath
{
static NSString *CellID=#"Cell"
MyTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID];
if (cell == nil)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:SwitchCellIdentifier];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
UIImageview *aSwitch = [[UIImageview alloc] initWithImage:[UIImage imageNamed:#"divider.png"]];
separator.frame = CGRectMake(0,50,320,1);
[cell.contentView addSubview:seperator];
}
if(cell.height == 22)
{
/// here i am setting frame for uiimageview
}
but i am getting seperator image disappears for only one row out of 20 while scrolling.
Can you please help why it is loading like this.
If you've put your separator UIImage out of the bounds of the cell, and set cell.clipsToBounds = NO; to have the separator image displayed, the separator image might get hidden by drawing the next cell.
You can't control the z-index of the cells as they're being drawn on screen, it depends from where you're scrolling (bottom to top, or top to bottom).
If that's indeed you're issue, you can either put the divider inside the cell's frame, or if your separator is thin enough use:
[TableView setSeparatorColor:[UIColor colorWithPatternImage:[UIImage imageNamed:...]]];
self.tblView=[[UITableView alloc] initWithFrame:CGRectMake(0,0,320,370) //set as u need
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)];//set as u ne
v.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"divider.png"]];
[self.tblView setTableHeaderView:v];
[self.tblView setTableFooterView:v];
[v release];
I'm trying to set the size of my background to be a little shorter than the default, creating some space between the cells. This has proven to be difficult. Setting the frame of the background view seems to do nothing:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSString *reuseIdentifier = #"cell";
UITableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:reuseIdentifier];
if (!cell)
cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:reuseIdentifier] autorelease];
// Set up the cell...
cell.contentView.backgroundColor = [UIColor clearColor];
cell.backgroundView = [[[UIView alloc] initWithFrame:CGRectMake(0, 4, 320, 42)] autorelease];
cell.backgroundView.backgroundColor = [UIColor blackColor];
cell.backgroundView.alpha = .2;
cell.selectedBackgroundView = [[[UIView alloc] initWithFrame:CGRectMake(0, 4, 320, 42)] autorelease];
cell.selectedBackgroundView.backgroundColor = [UIColor whiteColor];
cell.selectedBackgroundView.alpha = .2;
cell.font = [UIFont fontWithName:#"MarkerFelt-Thin" size:22.0f];
cell.selectedTextColor = [UIColor blackColor];
cell.textColor = [UIColor whiteColor];
NSDictionary *dict = [files objectAtIndex:indexPath.row];
cell.text = [dict objectForKey:#"name"];
return cell;
}
Any help?
Also, setting the selected background view doesn't do anything. When a cell is selected, the background is completely blank. Why is this?
I'm using iPhone OS 2.2.1.
I also do this:
- (void)viewDidLoad
{
[super viewDidLoad];
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
self.tableView.backgroundColor = [UIColor clearColor];
self.tableView.rowHeight = 50.0f;
}
You can download the code here (made a small project for this issue only):
http://dl.dropbox.com/u/608462/tabletest2.zip
The backgroundView is not a normal view, there's something going on behind the scenes. Check this link out:
Difference between background view and content view in uitableviewcell
Specifically, from the documentation:
backgroundView:
The default is nil for cells in plain-style tables (UITableViewStylePlain) and non-nil for grouped-style tables UITableViewStyleGrouped). UITableViewCell adds the background view as a subview behind all other views and uses its current frame location.
Hence: it doesn't really have a frame location, it uses the cell's frame location.
This code worked:
UIImageView *bgView = [[UIImageView alloc] init]; // Creating a view for the background...this seems to be required.
bgView.backgroundColor = [UIColor redColor];
cell.backgroundView = bgView;
UIImageView *bgImageView = [[UIImageView alloc] init]; // Creating a subview for the background...
bgImageView.backgroundColor = [UIColor colorWithWhite:1 alpha:1];
[bgImageView setFrame:CGRectInset(cell.bounds, 1, 1)];
[cell.backgroundView addSubview:bgImageView]; // Assigning the subview, and cleanup.
[bgImageView release];
[bgView release];
Spent about an hour trying to figure this out...but it works. This is code in the cellForRowAtIndexPath delegate method--I won't cover the whole thing here obviously.
morgancodes' solution led me into the right direction.
I added a sublayer to the background view and styled it. When setting the background color of the background view to clearColor, the sublayer is the only thing showing.
UIView *backgroundView = [[UIView alloc] init];
backgroundView.backgroundColor = [UIColor clearColor];
CALayer *sublayer = [CALayer layer];
sublayer.backgroundColor = [UIColor colorWithWhite:1 alpha:0.8].CGColor;
sublayer.frame = CGRectMake(15, 3, tableView.frame.size.width - 45, 38);
sublayer.cornerRadius = 5;
[backgroundView.layer addSublayer:sublayer];
cell.selectedBackgroundView = backgroundView;
Here's a completely different method from what you're trying.
One thing I like to do is use a custom image for the backgroundView and selectedBackgroundView, rather than let the iPhone handle the coloring tasks. This gives me a lot more flexibility on how the cell is rendered. All it takes is adding something like this:
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"normal.png"]];
cell.selectedBackgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"selected.png"]];
To:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;
Yet another approach: add a sublayer to your background. I added the following to the initialization of a UITableViewCell subclass and it seems to work great.
UIView* backgroundView = [[UIView alloc] initWithFrame: self.contentView.frame ];
backgroundView.layer.frame = CGRectInset(backgroundView.layer.frame, 20, 20);
CALayer *sublayer = [CALayer layer];
sublayer.backgroundColor = [UIColor colorWithWhite:0.69 alpha:1].CGColor;
sublayer.frame = CGRectMake(INDENT, 0, width - (INDENT * 2), [ChuckWagonTableViewCellCell cellHeight]) ;
[backgroundView.layer addSublayer:sublayer];
self.selectedBackgroundView = backgroundView;
Try this:
UIView *bg = [[UIView alloc] initWithFrame: CGRectInset(cell.frame, 0.0, 2.0)];
bg.backgroundColor = [UIColor whiteColor];
cell.backgroundView = bg;
Also don't forget to set background color and separator color to clear in viewDidLoad():
- (void)viewDidLoad {
[super viewDidLoad];
self.tableView.separatorColor = [UIColor clearColor];
self.tableView.backgroundColor = [UIColor clearColor];
}
When messing with the background view, I would do it in:
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
rather than in:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
Try using:
cell.backgroundView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 4.0, 320.0, 40.0)]];
For the second question, did you implement:
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;
What i think is happening, is that when you select a row, internally the selectedbackgroundview's alpha value is se to 1, thus showing it completely white.
I had a similar problem, and none of the answers seemed to fit in my case.
All my rows have the same height in this case, but with some math this could be adapted to accomodate rows with different heights.
I had set the height in my controller, by using the UITableViewDelegate method. I have an instance variable called cellBackgroundImage on my controller that is the UIImage that will be used for the UITableViewCell background. The UITableView background is set to [UIColor clearColor].
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return cellBackgroundImage.size.height + SPACING_HEIGHT;
}
Where SPACING_HEIGHT is a #define constant for the gap height.
Then, the trick was to use an UIView that would wrap the UIImageView that will be the cell's background. I accomplished this by doing:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:#"ContentCell"];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:#"ContentCell"] autorelease];
CGFloat height = [self tableView:tableView heightForRowAtIndexPath:indexPath];
cell.frame = CGRectMake(0, 0, [UIScreen mainScreen].applicationFrame.size.width, height);
cell.selectionStyle = UITableViewCellSelectionStyleNone;
UIView *backView = [[UIView alloc] initWithFrame:CGRectInset(cell.frame, 0, 0)];
UIImageView *imageView = [[UIImageView alloc] initWithImage:cellBackgroundImage];
[backView insertSubview:imageView atIndex:0];
cell.backgroundView = backView;
[backView release];
[imageView release];
}
return cell;
}
Then, by setting cell.backgroundView = backView to the UIView with the UIImageView that contains my background, i managed to achieve the gap effect between rows.
I hope this helps.
A possible solution could be to subclass UIView and add color and height arguments (if you only want to change the height, otherwise you can pass a size/rect). Note that a background color needs to be set, otherwise you'll see a blank area.
- (id)initWithColor:(UIColor *)color height:(CGFloat)height backgroundColor:(UIColor *)backgroundColor;
{
self = [super init];
if (self != nil)
{
_color = color;
_height = height;
_backgroundColor = backgroundColor;
}
return self;
}
Add the appropriate properties:
#interface CellSelectedBackgroundView ()
#property (strong, nonatomic) UIColor *color;
#property (strong, nonatomic) UIColor *backgroundColor;
#property (assign, nonatomic) CGFloat height;
#end
And in drawRect: you can fill the area:
- (void)drawRect:(CGRect)rect
{
[self.backgroundColor setFill];
UIRectFill(rect);
[self.color setFill];
CGRect frame = CGRectMake(0, 0, self.bounds.size.width, self.height);
UIRectFill(frame);
}
Simply initialize you custom UIView subclass and set it as the selectedBackgroundView property of your UITableViewCell.
Try adding a subview into your backgroundViews instead of modifying them directly:
UIView *selectedView = [[UIView alloc] initWithFrame:UIEdgeInsetsInsetRect(cell.frame, UIEdgeInsetsMake(8, 8, 8, 8))];
selectedView.backgroundColor = [UIColor redColor];
cell.selectedBackgroundView = [UIView new];
cell.selectedBackgroundView.backgroundColor = [UIColor clearColor];
[cell.selectedBackgroundView addSubview:selectedView];
I had the same problem as yours with the selectedBackgroundView and this worked for me ;)
I've got an annoying problem in my tableview. I was able to achive color-changing cells (blue/white/blue/...), but now I'm in trouble with my text, which has a white background on the blue cells.
I've tried for testing to set a background color to red:
// try to set the backgroundcolor of the text ???
cell.textLabel.text.backgroundColor = [UIColor redColor];
which doesn't work; hmph.
Please have a look at my code below; can anybody tell me what's wrong and how I can solve my problem by giving the text a transparent background?
// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];
}
// Set up the cell
cell.textLabel.text=[RssFeedNodes objectAtIndex:indexPath.row];
// try to set the backgroundcolor of the text ???
cell.textLabel.text.backgroundColor = [UIColor redColor];
// show image in cell
NSString *imageName=#"rss.png";
cell.imageView.image=[UIImage imageNamed:imageName];
// changing colors in cells
NSInteger row = [indexPath row];
if (row % 2){
cell.contentView.backgroundColor = [UIColor whiteColor];
}
else {
cell.contentView.backgroundColor = [UIColor colorWithRed:0.90f green:0.95f blue:1.0f alpha:1.0f];
}
return cell;
}
Your answer is found (and described very well) here: http://undefinedvalue.com/2009/11/02/easy-gradient-backgrounds-uitextviewcells
My brief summary of the solution: Subclass the UITableViewCell, and then use your subclass when creating instances in cellForRowAtIndexPath.
You then need to override just one method (setSelected) in your subclass UITableViewCell:
(void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
// Configure the view for the selected state
for (UIView *view in self.contentView.subviews) {
view.backgroundColor = [UIColor clearColor];
}
}
The reason appears to be that the built-in UITableViewCell class will set the label background to white (or selected color) when being displayed based on the selection state in the table in the setSelected method. Substitute your own, call the base class implementation, then set your subview backgrounds to clear in order to let your contentView background shine through.
text has no background, but textLabel has. so
[[cell textLabel] setBackground:[UIColor redColor]];
You'll need to add your own UILabel label onto the cell, and set the background colour of that to transparent. For some reason the label that a table cell has does not have a settable background colour.
Something like:
UILabel* label = [[UILabel alloc] init];
label.frame = CGRectMake( 20, 10, 200, 22 );
label.backgroundColor = [UIColor clearColor];
label.opaque = NO;
label.text = #"your text here:";
[cell addSubview:label];
[label release];
In this example I've set the frame for the label fairly arbitrarily (well not, actually, this was modified from some of my own real code). You may need to be more dynamic with the sizing, in which case you'll probably need to subclass the cell and override setFrame to keep the label's frame in sync. But hardcoded values should get you going for now.
#define LABEL_TAG 99
// whatever your label rect size should be... change as appropriate
UIlabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 300.0, 30.0)];
label.tag = LABEL_TAG;
// set up alignment, font, autoresizemask, etc.
label.backgroundColor = [UIColor clearColor];
label.opaque = NO;
[cell.contentView addSubview:label];
[label release];
Something to watch out for is that you're not adding your own label to a reuseable table cell more than once. By setting a known view.tag property you can get at (or discover existence of) the UILabel view. [cell viewWithTag:LABEL_TAG]
Whenever you dequeue a reuseable cell, first get the reference to your label view, then do what you would normally do if you were using the UITableCell's textLabel.
For an iPhone, I've got a UITableView that is grouped, has one section, and in which I've set up a section header that's a UILabel object from the nib. When the table view displays, the header shows up as a stripe of solid black -- no text.
In heightForHeaderInSection I've set the height to be the frame.size.height of the UILabel object. When I change the height in IB, the black stripe's height changes. So I know that the .m file has latched on to the right UILabel object.
In the debugger, in viewForHeaderInSection, it seems that the width of the UILabel object is zero, and the height is 1079574528, and the text is null.
Any thoughts on what I'm doing wrong?
Not sure what you're doing wrong, but here is some example code that might help (from a post on my blog):
#define SectionHeaderHeight 40
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
if ([self tableView:tableView titleForHeaderInSection:section] != nil) {
return SectionHeaderHeight;
}
else {
// If no section header title, no section header needed
return 0;
}
}
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
NSString *sectionTitle = [self tableView:tableView titleForHeaderInSection:section];
if (sectionTitle == nil) {
return nil;
}
// Create label with section title
UILabel *label = [[[UILabel alloc] init] autorelease];
label.frame = CGRectMake(20, 6, 300, 30);
label.backgroundColor = [UIColor clearColor];
label.textColor = [UIColor colorWithHue:(136.0/360.0) // Slightly bluish green
saturation:1.0
brightness:0.60
alpha:1.0];
label.shadowColor = [UIColor whiteColor];
label.shadowOffset = CGSizeMake(0.0, 1.0);
label.font = [UIFont boldSystemFontOfSize:16];
label.text = sectionTitle;
// Create header view and add label as a subview
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, SectionHeaderHeight)];
[view autorelease];
[view addSubview:label];
return view;
}
I had the same issue and haven't quite figured why the black bar..
BUT, instead of providing the header and footer views in delegate methods,
if i set values for tableView.tableHeaderView and tableView.tableFooterView, its all fine !
Can you post the code for your heightForHeaderInSection and your viewForHeaderInSection functions? The theory behind what you're doing sounds correct, but without seeing the code, it would be nearly impossible to figure out the issue...
It sounds like you place a label on the view in IB and are trying to use that as your header view - which is not the proper way of doing things. If you aren't using viewForHeaderInSection, then give that a try.. like this:
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UILabel *lbl;
lbl.text = #"Header for The Only Section";
//define other properties for the label - font, shadow, highlight, etc...
return lbl;
}
3.1.3 doesnt like [UIColor clearColor]; try using the same background color as your tableview
I observed same behavior when refreshing after datasource is loaded.
I noticed this was due to the way i was refreshing table view.
//[self loadView]; this caused the section header to go black.
[self.tableView reloadData]; // this works!