Image over UITableVIew Cell upon selection - ios

I want to display an image over a cell upon selection. I've tried endless ways to do so without succes.
I've tried adding this to didSelectRowAtIndexPath:
UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];
cell.imageView.image = [UIImage imageNamed:#"deselected_image.png"];
cell.imageView.highlightedImage = [UIImage imageNamed:#"selected_image.png"];
But the image won't change upon push.
Thanks

The code you have is creating a new table view cell - you need to retrieve the current cell that was selected. Try the following instead:
(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
cell.imageView.image = [UIImage imageNamed:#"deselected_image.png"];
cell.imageView.highlightedImage = [UIImage imageNamed:#"selected_image.png"];
}

I have applied the UIColor to each cell on request.You can replace the UIColor code & apply the image.
Here is my code
- (void)tableView: (UITableView*)tableView willDisplayCell: (UITableViewCell*)cell forRowAtIndexPath: (NSIndexPath*)indexPath
{
if(tableView==tblLanguage)
{
cell.backgroundView = [[UIView alloc] init];
((UIView *)cell.backgroundView).backgroundColor = !(indexPath.row % 2)?[UIColor colorWithRed:(float)231/255 green:(float)231/255 blue:(float)231/255 alpha:1.0]:[UIColor colorWithRed:(float)218/255 green:(float)218/255 blue:(float)218/255 alpha:1.0];
((UIView *)cell.backgroundView).alpha=1.0;
//ilangSelectedIndex is set in the didselect row of the tableview delegate function
if(ilangSelectedIndex==[indexPath row])
{
((UIView *)cell.backgroundView).backgroundColor=[UIColor colorWithRed:(float)171/255 green:(float)177/255 blue:(float)213/255 alpha:1.0];
}
cell.textLabel.backgroundColor = [UIColor clearColor];
cell.detailTextLabel.backgroundColor = [UIColor clearColor];
}
}
In the Did select function of the table you set the ilangSelectedIndex as Indexpath.row of your table & reload the table to see the effect.

Try this code in didSelectRowAtIndexPath:
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
cell.selectedBackgroundView=[[UIImageView alloc]init];
cell.backgroundView =[[UIImageView alloc] init];
((UIImageView *)cell.selectedBackgroundView).image=[UIImage imageNamed:#"selected.png"];

Related

Custom cell contents overlapping in UITableView

I know this question is already asked many times, but my problem is some different.
I am creating a UIView and a UIImageView programmatically in cell's content view. When TableView appear first time it looking perfect, but when i scroll down and up , this seems overlapped.
Screenshot of without scroll:
Screenshot after scroll:
Code that i follow:
viewForHead = [[UIView alloc]initWithFrame:CGRectMake(cell.viewForContents.frame.origin.x, cell.viewForContents.frame.origin.y-10, cell.viewForContents.frame.size.width, 45)];
viewForHead.backgroundColor = [UIColor colorWithRed:232.0/255.0 green:255.0/255.0 blue:16.0/255.0 alpha:1];
[cell.contentView addSubview:viewForHead];
UIImageView *imageViewForDP = [[UIImageView alloc]initWithFrame:CGRectMake(viewForHead.frame.origin.x-50, viewForHead.frame.origin.y-8, 60,60 )];
imageViewForDP.image = [UIImage imageNamed:#"dog_1.png"];
//[cell.viewForContents addSubview:imageViewForDP];
imageViewForDP.layer.cornerRadius = 30;
imageViewForDP.clipsToBounds = YES;
[viewForHead addSubview:imageViewForDP];
Please get me out from this problem . Thanks
Use this into your - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
if ([cell.contentView subviews]){
for (UIView *subview in [cell.contentView subviews]) {
[subview removeFromSuperview];
}
}
You are adding your viewForHead as a subview each time the cell gets dequeued. So you're adding them on top of each other.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:#"CELL"];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:#"CELL"] autorelease];
// This is where you CREATE your cell contents.
viewForHead = [[UIView alloc]initWithFrame:CGRectMake(cell.viewForContents.frame.origin.x, cell.viewForContents.frame.origin.y-10, cell.viewForContents.frame.size.width, 45)];
viewForHead.backgroundColor = [UIColor colorWithRed:232.0/255.0 green:255.0/255.0 blue:16.0/255.0 alpha:1];
[cell.contentView addSubview:viewForHead];
UIImageView *imageViewForDP = [[UIImageView alloc]initWithFrame:CGRectMake(viewForHead.frame.origin.x-50, viewForHead.frame.origin.y-8, 60,60 )];
imageViewForDP.image = [UIImage imageNamed:#"dog_1.png"];
// [cell.viewForContents addSubview:imageViewForDP];
imageViewForDP.layer.cornerRadius = 30;
imageViewForDP.clipsToBounds = YES;
imageView.tag = 1
[viewForHead addSubview:imageViewForDP];
}
// this is where you UPDATE your viewForHead image and any other elements inside your cell
UIImageView *imageView = [cell.contentView viewWithTag:1];
imageView.image = // your new image
return cell;
}
Subclassing your UITableViewCell and building your layout with a xib would be even better, then you could just access the cells properties directly. A much cleaner solution.
MyCustomCell *cell = [tableView dequeueReusableCellWithIdentifier#"CELL"];
if (cell == nil) {
cell = [[MyCustomCell alloc] init]; // you ID is set in interface builder
}
cell.imageView.image = // your new image here.
cell.someLabel.text = #"some new text here"
This problem is because of table view cell gets reuse and you are adding a view again on cell.
Try below code:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:#"MyIdentifier"];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:#"MyIdentifier"] ;
cell.selectionStyle = UITableViewCellSelectionStyleNone;
}
UIView *viewForHead = (UIView *)[cell.contentView viewWithTag:1];
if (viewForHead==nil) {
viewForHead = [[UIView alloc]initWithFrame:CGRectMake(cell.frame.origin.x, cell.frame.origin.y, cell.frame.size.width, 20)];
viewForHead.backgroundColor = [UIColor colorWithRed:232.0/255.0 green:255.0/255.0 blue:16.0/255.0 alpha:0.5];
viewForHead.tag = 1;
[cell.contentView addSubview:viewForHead];
}
return cell;}

Change the border color of view in tableview

I have a UIView in UITableView and I need to change the border color of the UIView in a selected row.
How can I do this?
In UITableView cellForRowIndexPath I declared a UIView named as polygonView.
In UITableView didSelectRowAtIndexPath method I wrote code to change the border color.
I also need my row to be unselected when I select a different row.
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath: (NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
if (cell == nil)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
}
tableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero];
polygonView = [[UIView alloc] initWithFrame: CGRectMake ( 40, 10, 300, 43)];
//polygonView.backgroundColor = [UIColor blackColor];
UIImage *image1=[UIImage imageNamed:#"rectangle_box (2)"];
polygonView.backgroundColor = [UIColor colorWithPatternImage:image1];
polygonView.tag=indexPath.row;
cell.textLabel.text=[names objectAtIndex:indexPath.row];
[cell.contentView addSubview:polygonView];
[cell.contentView addSubview:lbl[indexPath.row]];
return cell;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
UIColor *color = [UIColor redColor];
polygonView .layer.shadowColor = [color CGColor];
polygonView.layer.shadowRadius = 1.0f;
polygonView .layer.shadowOpacity = 1;
polygonView .layer.shadowOffset = CGSizeZero;
}
There is a didDeselectRowAtIndexPath... delegate method you can implement which gets called when you select a different row. From that delegate method you can access the cell (using cell = tableView.cellForRowAtIndexPath:deselectedIndexPath) and the polygon to change the border color.

Updating cells with UIImageView to show currently selected item

I am using a sliding view controller which holds the main controller on top and a slide left menu controller.
The controller on the left works as the menu like Facebook/Pintrest apps etc. It is a UITableView on the left.
Here is my setup:
cellForRowAtIndexPath
static NSString *CellIdentifier = #"MainMenuCell";
UITableViewCell *cell = (UITableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
UIView *topSplitterBar = [[UIView alloc] initWithFrame:CGRectMake(0, 0, cell.bounds.size.width, 1)];
topSplitterBar.backgroundColor = [UIColor colorWithRed:62.0/255.0 green:69.0/255.0 blue:85.0/255.0 alpha:1];
[cell.contentView addSubview:topSplitterBar];
UIImage *arrowImage = [UIImage imageNamed:#"selectedArrow"];
self.arrowSelectedView = [[UIImageView alloc] initWithFrame:CGRectMake(240, 10, arrowImage.size.width, arrowImage.size.height)];
self.arrowSelectedView.image = arrowImage;
[cell.contentView addSubview:self.arrowSelectedView];
self.arrowSelectedView.hidden = YES;
}
//////
// ADDITIONAL GLUE CODE HERE TO SET LABELS ETC....
//////
if (currentDisplayed) {
// This is for the current item that is being displayed
cell.contentView.backgroundColor = [UIColor colorWithRed:50.0/255.0 green:56.0/255.0 blue:73.0/255.0 alpha:1];
self.arrowSelectedView.hidden = NO;
} else {
cell.contentView.backgroundColor = [UIColor colorWithRed:75.0/255.0 green:83.0/255.0 blue:102.0/255.0 alpha:1.0];
self.arrowSelectedView.hidden = YES;
}
NSLog(#"%#",cell.contentView.subviews);
return cell;
There are a total of 7 cells in 2 sections for the table view. One cell in section 1 (0) and the rest in section 2 (1). There are three cells which show a main controller on the top. Once they are selected I would like to update the table view to show an arrow next the cell like this:
Here is the example code for: didSelectRowAtIndexPath
UIViewController *newTopViewController = [self.storyboard instantiateViewControllerWithIdentifier:#"ProfileVC"];
__weak typeof(self) weakSelf = self;
[self.slidingViewController anchorTopViewOffScreenTo:ECRight animations:nil onComplete:^{
CGRect frame = weakSelf.slidingViewController.topViewController.view.frame;
weakSelf.slidingViewController.topViewController = newTopViewController;
weakSelf.slidingViewController.topViewController.view.frame = frame;
[weakSelf.slidingViewController resetTopViewWithAnimations:nil onComplete:^{
NSIndexPath* displayNameRow = [NSIndexPath indexPathForRow:0 inSection:0];
NSIndexPath* gamesRow = [NSIndexPath indexPathForRow:0 inSection:1];
NSIndexPath* settingsRow = [NSIndexPath indexPathForRow:3 inSection:1];
NSArray* rowsToReload = [NSArray arrayWithObjects:displayNameRow, gamesRow, settingsRow, nil];
[weakSelf.tableView reloadRowsAtIndexPaths:rowsToReload withRowAnimation:UITableViewRowAnimationNone];
}];
}];
Issue/Question
So I have a strange issue here, were if I click on a different cell it works the arrow is shown on the other cell. Then again this works for 2 more times, then the third times it randomly decides to show the uiimageview on another cell.
Even if I step through the cell creation process I see for that specific cell (the incorrectly displayed one) the boolean for currentDisplayed is set to NO, so it doesn't change the arrowSelectedView to not hidden yet it does somehow? I log out the subviews and can see that it is randomly not Hidden anymore even though for that specific cell it is not set to not hidden, so I am thinking this is implemented incorrectly somehow?
The main issue here is that in -tableView:cellForRowAtIndexPath: you're creating a new image view every time you create a new cell, then storing it into a single ivar. The call to set or hide the image view later in that method is not guaranteed (indeed is actually quite unlikely) to be addressing the same image view that was added into that particular cell's content view.
A more convenient place to store it would be in a subclass of UITableViewCell's view like so:
#interface CustomTableViewCell : UITableViewCell
#property (strong, readwrite) UIImageView *imageAccessory;
#end
#implementation CustomTableViewCell
#end
#implementation YourClass
- (id)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"MainMenuCell";
CustomTableViewCell *cell = (CustomTableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (nil == cell) {
cell = [[CustomTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
UIView *topSplitterBar = [[UIView alloc] initWithFrame:CGRectMake(0, 0, cell.bounds.size.width, 1)];
topSplitterBar.backgroundColor = [UIColor colorWithRed:62.0/255.0 green:69.0/255.0 blue:85.0/255.0 alpha:1];
[cell.contentView addSubview:topSplitterBar];
UIImage *arrowImage = [UIImage imageNamed:#"selectedArrow"];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(240, 10, arrowImage.size.width, arrowImage.size.height)];
imageView.image = arrowImage;
cell.accessoryImage = imageView;
[cell.contentView addSubview: cell.accessoryImage];
cell.accessoryView.hidden = YES;
}
if (currentDisplayed) {
// This is for the current item that is being displayed
cell.contentView.backgroundColor = [UIColor colorWithRed:50.0/255.0 green:56.0/255.0 blue:73.0/255.0 alpha:1];
cell.accessoryImage.hidden = NO;
} else {
cell.contentView.backgroundColor = [UIColor colorWithRed:75.0/255.0 green:83.0/255.0 blue:102.0/255.0 alpha:1.0];
cell.accessoryImage.hidden = YES;
}
return cell;
}
#end

Implement two different color for Highlighted and selected state for custom cell of UITableView

I want to implement touch up and touch down like functionality for my TableView Cell.
My need is giving different background color to the cell.
Give different background when we touch down the cell and different color when we touch up.
I try it with following way :
- (void)tableView:(UITableView *)tableView didHighlightRowAtIndexPath:(NSIndexPath *)indexPath
{
[cell setBackgroundColor:[UIColor redColor]];
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
[cell setBackgroundColor:[UIColor greenColor]];
}
but the issue is didHighlightRowAtIndexPath is only available for iOS 6.0 not below that.
Is there another way to implement it.
In cellForRowAtIndexPath write below code:
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CustomCellIdentifier = #"yourcell";
SettingsCell *cell = (SettingsCell *)[tableView dequeueReusableCellWithIdentifier:CustomCellIdentifier];
if (cell == nil) {
NSArray *nib = nib = [[NSBundle mainBundle] loadNibNamed:#"yourcell" owner:self options:nil];
for(id oneObject in nib) {
if([oneObject isKindOfClass:[yourCell class]]) {
cell = (yourCell *)oneObject;
}
}
//to change background color of selected cell
UIView *backgroundView = [[UIView alloc] init];
backgroundView.backgroundColor = [UIColor blueColor];
cell.selectedBackgroundView = backgroundView;
}
return cell;
}
And on didselectRow at indexPath, change to another color
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
[tableView reloadData];
UITableViewCell *cell=(UITableViewCell*)[tableView cellForRowAtIndexPath:indexPath];
[cell setBackgroundColor:[UIColor redColor]];
}
Try this, you can have two images for selected and unselected rows.
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"unselected.png"] ];
cell.selectedBackgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"selected.png"] ];
You will be adding this in cellForRowAtIndexPath method. You can take state from didSelect right?? Trust me i have tried almost 10 different ways to do this and only this solution worked fine in all cases perfectly.

UITableViewCell selected row's text color change

I am having a tableview and I want to know that how can I change the selected row's text color, say to Red ? I tried by this code :
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell= [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:nil] autorelease];
cell.text = [localArray objectAtIndex:indexPath.row];
return cell;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
cityName = [localArray objectAtIndex:indexPath.row];
UITableViewCell* theCell = [tableView cellForRowAtIndexPath:indexPath];
theCell.textColor = [UIColor redColor];
//theCell.textLabel.textColor = [UIColor redColor];
[tableView deselectRowAtIndexPath:indexPath animated:NO];
}
(1) When I select any row then text color changed to the red but when I select another then previously selected row's text remains red. how can I solve this ?
(2) When I scroll the table text color change to the black color how to solve this ?
Thanks..
Do this in tableView:cellForRowAtIndexPath::
cell.textLabel.highlightedTextColor = [UIColor redColor];
(And don't use cell.text = ... anymore. It has been deprecated for almost 2 years now. Use cell.textLabel.text = ... instead.)
As Raphael Oliveira mentioned in the comments, if the selectionStyle of your cell equals UITableViewCellSelectionStyleNone this won't work. Check Storyboard as well for the selection style.
If you want to change the text colour only, with out changing cell background colour. you can use this.Write this code in in cellForRowAtIndexPath method
UIView *selectionColor = [[UIView alloc] init];
selectionColor.backgroundColor = [UIColor clearColor];
cell.selectedBackgroundView = selectionColor;
cell.textLabel.highlightedTextColor = [UIColor redColor];
I had the same problem, try this!
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
for (id object in cell.superview.subviews) {
if ([object isKindOfClass:[UITableViewCell class]]) {
UITableViewCell *cellNotSelected = (UITableViewCell*)object;
cellNotSelected.textLabel.textColor = [UIColor blackColor];
}
}
cell.textLabel.textColor = [UIColor redColor];
[tableView deselectRowAtIndexPath:indexPath animated:NO];
}
That may be the solution to your (and mine) problem.
If you're already subclassing UITableViewCell, it's easier/cleaner to set the colors in the awakeFromNib method (assuming you're instantiating from a storyboard or xib).
#implementation MySubclassTableViewCell
- (void)awakeFromNib {
[super awakeFromNib];
self.selectedBackgroundView = [[UIView alloc] initWithFrame:self.frame];
self.selectedBackgroundView.backgroundColor = [UIColor colorWithRed:0.1 green:0.308 blue:0.173 alpha:0.6];
self.customLabel.highlightedTextColor = [UIColor whiteColor];
}
#end

Resources