I'm looking to create an uitableview with overlapping cells like in the image below. The problem is that even if I set clipsToBounds = NO for the cell's content view, the cell fake header(e.g Spanish which will overlap the previous cell) is not displayed.
Does anyone know how to fix this issue?
Here is my code:
- (UITableViewCell *)tableviewCellTournamentWithReuseIdentifier:(NSString *)identifier andPosition:(NSInteger)pos {
UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
if (pos == 0) {
cell.clipsToBounds = NO;
cell.contentView.clipsToBounds = NO;
cell.frame = CGRectMake(0, 0, tournamentsTableView.frame.size.width, CELL_HEIGHT);
UIView* row = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tournamentsTableView.frame.size.width, CELL_HEIGHT)];
row.clipsToBounds = NO;
row.backgroundColor = [UIColor clearColor];
UIView* topRow = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 10)];
topRow.backgroundColor= [UIColor colorWithRed:210/255.0 green:131/255.0 blue:62/255.0 alpha:1.0];
[row addSubview:topRow];
UILabel* label = [[UILabel alloc] initWithFrame:CGRectMake(0, 10, row.frame.size.width, CELL_HEIGHT-10)];
label.backgroundColor = [UIColor colorWithRed:63*pos/255.0 green:71*pos/255.0 blue:113/255.0 alpha:1.0];
label.font = [UIFont fontWithName:#"HelveticaNeue" size:14];
label.tag = TOURNAMENT_NAME;
label.layer.cornerRadius = 5;
[row addSubview:label];
[cell.contentView addSubview:row];
} else {
cell.clipsToBounds = NO;
cell.contentView.clipsToBounds = NO;
cell.frame = CGRectMake(0, -10, tournamentsTableView.frame.size.width, CELL_HEIGHT);
UIView* row = [[UIView alloc] initWithFrame:CGRectMake(0, -10, tournamentsTableView.frame.size.width, CELL_HEIGHT)];
row.clipsToBounds = NO;
row.backgroundColor = [UIColor clearColor];
UIView* topRow = [[UIView alloc] initWithFrame:CGRectMake(0, -10, 100, 10)];
topRow.backgroundColor= [UIColor colorWithRed:210/255.0 green:131/255.0 blue:62/255.0 alpha:1.0];
[row addSubview:topRow];
[cell bringSubviewToFront:tournamentsTableView];
UILabel* label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, row.frame.size.width, CELL_HEIGHT-10)];
label.backgroundColor = [UIColor colorWithRed:63*pos/255.0 green:71*pos/255.0 blue:113/255.0 alpha:1.0];
label.font = [UIFont fontWithName:#"HelveticaNeue" size:14];
label.tag = TOURNAMENT_NAME;
label.layer.cornerRadius = 5;
[row addSubview:label];
[cell.contentView addSubview:row];
}
return cell;
}
And the result is:
The problem is you are trying to manipulate the tableview its self which is why you are experiencing issues. You will need to include the 'tab' in the cell as its much easier to add as many outlets as you like as the cell its self acts as as a separate view.
add your top row to the cell
UIView *topRow = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 100.0, 10.0)];
topRow.backgroundColor= [UIColor colorWithRed:210/255.0 green:131/255.0 blue:62/255.0 alpha:1.0];
[cell.contentView addSubview:topRow];
then add your main content to the cell and just move it down
UIView* row = [[UIView alloc] initWithFrame:CGRectMake(0.0, 10.0, tournamentsTableView.frame.size.width, CELL_HEIGHT)];
row.clipsToBounds = NO;
row.backgroundColor = [UIColor clearColor];
[cell.contentView addSubview:row];
finally get rid of the background colour of the cell and you almost have your effect.
cell.backgroundColor = [UIColor clearColor];
cell.contentView.backgroundColor = [UIColor clearColor];
Hope that helps :)
Related
I am currently creating my own custom section headers but I have never dont any text editing via code.. and my new method that I am using to populate my custom header is doing some weird things as shown below
I would like to change the text to white and be slightly bolder and also make the white background transparent..
this is the code I am using to do this
- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 30)];
[headerView setBackgroundColor:[UIColor grayColor]];
// Add the label
UILabel *headerLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.5, 20, 20)];
// do whatever headerLabel configuration you want here
headerLabel.text = [self tableView:tableView titleForHeaderInSection:section];
[headerView addSubview:headerLabel];
// Return the headerView
return headerView;
}
I have tried this
[headerLabel.backgroundColor:[UIColor clearColor]];
etc but its not working :(
I would like to change the text to white...
UILabel's textColor property is your friend here.
And slightly bolder...
No problem! headerLabel.font = [UIFont boldSystemFontOfSize:mySize];
And make a white transparent background.
Whoa, whoa, that is the worst setter syntax ive ever seen!!! My lord, myLabel.backgroundColor is a getter, change:
[headerLabel.backgroundColor:[UIColor clearColor]];
to:
[headerLabel setBackgroundColor:[UIColor clearColor]];
Lucky for you, using your syntax would have just sent a message to nil, which is defaulting the background color of your label to white.
Use following code...
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UILabel *headername = [[UILabel alloc]initWithFrame:CGRectMake(20, 5, 270, 34)];
headername.backgroundColor = [UIColor clearColor];
headername.textColor = [UIColor blackColor];
if(section == 0)
{
headername.text = #"Name that u wish";
}
else
{
headername.text = #"Name that u wish";
}
UIView *headerView = [[UIView alloc] init];
UIImageView *tempimage = [[UIImageView alloc]initWithFrame:CGRectMake(10, 5, 300,34)];
tempimage.image = [UIImage imageNamed:#"whitebackground.png"];
[headerView addSubview:tempimage];
[headerView addSubview:headername];
return headerView;
}
Hope, this will help you...chill
all i have done to get the customized header in table is as following and it is working fine for me
UIView *containerView =
[[[UIView alloc]
initWithFrame:CGRectMake(0, 0, 300, 60)]
autorelease];
UILabel *headerLabel =
[[[UILabel alloc]
initWithFrame:CGRectMake(10, 20, 300, 40)]
autorelease];
headerLabel.text = NSLocalizedString(#"Header for the table", #"");
headerLabel.textColor = [UIColor whiteColor];
headerLabel.shadowColor = [UIColor blackColor];
headerLabel.shadowOffset = CGSizeMake(0, 1);
headerLabel.font = [UIFont boldSystemFontOfSize:22];
headerLabel.backgroundColor = [UIColor clearColor];
[containerView addSubview:headerLabel];
self.tableView.tableHeaderView = containerView;
i just put it in viewDidLoad: method
I am using https://github.com/alekseyn/EasyTableView to create a scrollable table view with images. It works very well as given int the demo.
But my custom requirement is to have 2 rows instead of 1 row. So i decided to add 2 image views instead of 1 for a single cell in the table.
- (UIView *)easyTableView:(EasyTableView *)easyTableView viewForRect:(CGRect)rect {
// Create a container view for an EasyTableView cell
UIView *container = [[UIView alloc] initWithFrame:rect];;
// Setup an image view to display an image
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(1, 0, rect.size.width-2, rect.size.height/2)];
imageView.tag = IMAGE_TAG;
imageView.contentMode = UIViewContentModeScaleAspectFill;
[container addSubview:imageView];
// Setup a label to display the image title
CGRect labelRect = CGRectMake(10, rect.size.height/2-20, rect.size.width-20, 20);
UILabel *label = [[UILabel alloc] initWithFrame:labelRect];
label.textAlignment = UITextAlignmentCenter;
label.textColor = [UIColor colorWithWhite:1.0 alpha:0.5];
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont boldSystemFontOfSize:14];
label.tag = LABEL_TAG;
[container addSubview:label];
// Setup an image view to display an image
UIImageView *imageView2 = [[UIImageView alloc] initWithFrame:CGRectMake(1, rect.size.height/2, rect.size.width-2, rect.size.height)];
imageView.tag = IMAGE_TAG2;
imageView.contentMode = UIViewContentModeScaleAspectFill;
[container addSubview:imageView2];
// Setup a label to display the image title
CGRect labelRect2 = CGRectMake(10, rect.size.height-20, rect.size.width-20, 20);
UILabel *label2 = [[UILabel alloc] initWithFrame:labelRect2];
label.textAlignment = UITextAlignmentCenter;
label.textColor = [UIColor colorWithWhite:1.0 alpha:0.5];
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont boldSystemFontOfSize:14];
label.tag = LABEL_TAG2;
[container addSubview:label2];
return container;
}
// Second delegate populates the views with data from a data source
- (void)easyTableView:(EasyTableView *)easyTableView setDataForView:(UIView *)view forIndexPath:(NSIndexPath *)indexPath {
// Set the image title for the given index
UILabel *label = (UILabel *)[view viewWithTag:LABEL_TAG];
label.text = [self.imageStore.titles objectAtIndex:indexPath.row];
// Set the image for the given index
UIImageView *imageView = (UIImageView *)[view viewWithTag:IMAGE_TAG];
imageView.image = [self.imageStore imageAtIndex:indexPath.row];
// Set the image title for the given index
UILabel *label2 = (UILabel *)[view viewWithTag:LABEL_TAG2];
label2.text = [self.imageStore.titles objectAtIndex:indexPath.row];
// Set the image for the given index
UIImageView *imageView2 = (UIImageView *)[view viewWithTag:IMAGE_TAG2];
imageView2.image = [self.imageStore imageAtIndex:indexPath.row];
}
Initially for testing i used same image and label for both cells. But it is suspecious that it is showing images and rows on first row means for first image of any cell.
How can i accomplish my requirement.
I have a grouped UITableView. I am trying to make a custom UITableViewCell background:
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
self.contentView.opaque = YES;
self.contentView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"rowbg#2x"]];
//Change Indicator
CGRect rect;
rect = CGRectMake(0, 0, 10, 50);
changeImageIndicator = [[UIImageView alloc] initWithFrame:rect];
[self.contentView addSubview: changeImageIndicator];
//Symbol
rect = CGRectMake(10, 10, 200, 20);
symbolLabel = [[UILabel alloc] initWithFrame:rect];
symbolLabel.textAlignment = UITextAlignmentLeft;
symbolLabel.font = [UIFont fontWithName:#"Arial" size:22];
symbolLabel.textColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:1.0];
symbolLabel.backgroundColor = [UIColor clearColor];
[self.contentView addSubview: symbolLabel];
//Company
rect = CGRectMake(10, 30, 180, 20);
companyLabel = [[UILabel alloc] initWithFrame:rect];
companyLabel.textAlignment = UITextAlignmentLeft;
companyLabel.font = [UIFont fontWithName:#"Arial" size:13];
companyLabel.adjustsFontSizeToFitWidth = YES;
companyLabel.minimumFontSize = 10.0;
companyLabel.backgroundColor = [UIColor clearColor];
companyLabel.textColor = [UIColor colorWithRed:118.0/255.0 green:118.0/255.0 blue:118.0/255.0 alpha:1.0];
[self.contentView addSubview: companyLabel];
//Price
rect = CGRectMake(190, 10, 100, 20);
priceLabel = [[UILabel alloc] initWithFrame:rect];
priceLabel.textAlignment = UITextAlignmentRight;
priceLabel.font = [UIFont fontWithName:#"Arial" size:20];
priceLabel.textColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:1.0];
priceLabel.backgroundColor = [UIColor clearColor];
[self.contentView addSubview: priceLabel];
//Change
rect = CGRectMake(190, 30, 100, 20);
changeLabel = [[UILabel alloc] initWithFrame:rect];
changeLabel.textAlignment = UITextAlignmentRight;
changeLabel.font = [UIFont fontWithName:#"Arial" size:15];
changeLabel.textColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:1.0];
changeLabel.adjustsFontSizeToFitWidth = YES;
changeLabel.backgroundColor = [UIColor clearColor];
changeLabel.minimumFontSize = 10.0; //adjust to preference obviously
[self.contentView addSubview: changeLabel];
}
return self;
}
The background color bleeds past the rounded corners. See image:
How can I make this not bleed?
This works for iOS 3.0 and later:
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
cell.backgroundColor = [UIColor redColor];
}
What about self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone; ?
This worked for me when nothing else did. Set the background color in IB to the grouped Table view color (default). Then in code, set the color to clearColor. I also have the cells marked opaque=NO and clearsContextBeforeDrawing=NO, but those settings alone didn't change anything until I added the clearColor by code – Bdebeez
self.contentView.superview.opaque = YES;
self.contentView.superview.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"rowbg#2x"]];
Have you tried setting the backgroundColor of the backgroundView rather than the contentView?
I had to create a rounded top, middle and button graphic image and set it to the background view of the cell depending on which row it is.
Set the cell background color in the tableView:cellForRowAtIndexPath:
cell.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"Gradient.png"]];
Im currently using the code below to render the view for my sectioned tableView
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView *headerView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 30)] autorelease];
headerView.backgroundColor = [UIColor colorWithRed:30/255 green:30/255 blue:30/255 alpha:1.0];
headerView.layer.masksToBounds = NO;
headerView.layer.shadowOffset = CGSizeMake(0, 0);
headerView.layer.shadowRadius = 3;
headerView.layer.shadowOpacity = 0.5;
headerView.layer.shouldRasterize = YES;
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, headerView.frame.size.height, headerView.frame.size.width, 3)];
headerView.layer.shadowPath = path.CGPath;
UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(12, 7, tableView.bounds.size.width - 10, 20)] autorelease];
label.font = [UIFont boldSystemFontOfSize:16];
label.text = header;
label.textColor = [UIColor whiteColor];
label.shadowColor = [UIColor blackColor];
label.shadowOffset = CGSizeMake(0.0f, 1.0f);
label.backgroundColor = [UIColor colorWithRed:30/255 green:30/255 blue:30/255 alpha:1.0];
[headerView addSubview:label];
return headerView;
}
For some reason though the text is being mangled a bit and a little distorted? I have narrowed it down to the effects i am putting on the layer although im not sure why its doing it?
I see you are setting shouldRasterize to YES. Does setting the rasterization scale help? This would only be needed if you are using an iPhone 4.
[[headerView layer] setRasterizationScale:[[UIScreen mainScreen] scale]];
I am new to iphone development.I have displayed the text in the header label.Now i want to align the text to center. I using the following code
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UIView* customView = [[UIView alloc] initWithFrame:CGRectMake(10.0, 0.0,300.0,44.0)];
UILabel * headerLabel = [[UILabel alloc] initWithFrame:CGRectZero];
headerLabel.backgroundColor = [UIColor brownColor];
headerLabel.textColor = [UIColor whiteColor];
headerLabel.highlightedTextColor = [UIColor whiteColor];
headerLabel.font = [UIFont boldSystemFontOfSize:15];
headerLabel.frame = CGRectMake(0.0, 0.0, 500.0, 22.0);
headerLabel.text = #"Hello"; //
[customView addSubview:headerLabel];
return customView;
}
"hello" should be displayed at the center of the header label.Please help me out.Thanks.
Try this:
headerLabel.textAlignment = UITextAlignmentCenter;