Does anyone know how to change the background color of a cell using UITableViewCell, for each selected cell? I created this UITableViewCell inside the code for TableView.
This question is related to
iphone
uitableview
colors
background
tableview
Create a custom UITableViewCell. Inside you custom class override the "setSelected" function and change the contentView background color. You can also override you "setHighlighted" function.
In Swift:
class myTableViewCell: UITableViewCell {
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
override func setSelected(selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
// Add your color here
self.contentView.backgroundColor = UIColor.whiteColor()
}
override func setHighlighted(highlighted: Bool, animated: Bool) {
// Add your color here
self.contentView.backgroundColor = UIColor.whiteColor()
}
}
// animate between regular and selected state
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
if (selected) {
self.backgroundColor = [UIColor colorWithRed:234.0f/255 green:202.0f/255 blue:255.0f/255 alpha:1.0f];
}
else {
self.backgroundColor = [UIColor clearColor];
}
}
This worked perfectly with grouped calls: Implement a custom subclass of UITableViewCell
This will respect corners and such...
- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
[super setSelected:selected animated:animated];
if(selected)
[self setBackgroundColor:[UIColor colorWithRed:(245/255.0) green:(255/255.0) blue:(255/255.0) alpha:1]];
else
[self setBackgroundColor:[UIColor whiteColor]];
}
If you just want to remove the grey background color do this :
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
[[tableView cellForRowAtIndexPath:indexPath] setSelectionStyle:UITableViewCellSelectionStyleNone];
}
- (void)tableView:(UITableView *)tableView didHighlightRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = (UITableViewCell *)[tableView cellForRowAtIndexPath:indexPath];
cell.contentView.backgroundColor = [UIColor yellowColor];
}
- (void)tableView:(UITableView *)tableView didUnhighlightRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = (UITableViewCell *)[tableView cellForRowAtIndexPath:indexPath];
cell.contentView.backgroundColor = nil;
}
Here is a quick way to do this right in Interface Builder (within a Storyboard). Drag a simple UIView to the top of your UITableView as in
Next connect your cell's selectedBackgroundView
Outlet to this view. You can even connect multiple cells' outlets to this one view.
var last_selected:IndexPath!
define last_selected:IndexPath inside the class
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
let cell = tableView.cellForRow(at: indexPath) as! Cell
cell.contentView.backgroundColor = UIColor.lightGray
cell.txt.textColor = UIColor.red
if(last_selected != nil){
//deselect
let deselect_cell = tableView.cellForRow(at: last_selected) as! Cell
deselect_cell.contentView.backgroundColor = UIColor.white
deselect_cell.txt.textColor = UIColor.black
}
last_selected = indexPath
}
Works for me
UIView *customColorView = [[UIView alloc] init];
customColorView.backgroundColor = [UIColor colorWithRed:180/255.0
green:138/255.0
blue:171/255.0
alpha:0.5];
cell.selectedBackgroundView = customColorView;
Changing the property selectedBackgroundView is correct and the simplest way. I use the following code to change the selection color:
// set selection color
UIView *myBackView = [[UIView alloc] initWithFrame:cell.frame];
myBackView.backgroundColor = [UIColor colorWithRed:1 green:1 blue:0.75 alpha:1];
cell.selectedBackgroundView = myBackView;
[myBackView release];
In Swift
let v = UIView()
v.backgroundColor = self.darkerColor(color)
cell?.selectedBackgroundView = v;
...
func darkerColor( color: UIColor) -> UIColor {
var h = CGFloat(0)
var s = CGFloat(0)
var b = CGFloat(0)
var a = CGFloat(0)
let hueObtained = color.getHue(&h, saturation: &s, brightness: &b, alpha: &a)
if hueObtained {
return UIColor(hue: h, saturation: s, brightness: b * 0.75, alpha: a)
}
return color
}
Swift 5.3
Here I did for a single row without creating a class for the cell.
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
if let cell = tableView.cellForRow(at: indexPath) {
cell.contentView.backgroundColor = #colorLiteral(red: 0.1411764771, green: 0.3960784376, blue: 0.5647059083, alpha: 1)
}
}
override func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {
if let cell = tableView.cellForRow(at: indexPath) {
cell.contentView.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
}
}
I created UIView and set the property of cell selectedBackgroundView:
UIView *v = [[UIView alloc] init];
v.backgroundColor = [UIColor redColor];
cell.selectedBackgroundView = v;
For a solution that works (properly) with UIAppearance
for iOS 7 (and higher?) by subclassing UITableViewCell
and using its default selectedBackgroundView
to set the color, take a look at my answer to a similar question here.
Set selection property to None, make sure tableView has 'Single Selection' set and use this method in tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
delegate method:
extension UITableViewCell {
func setSelectionColor(isSelected: Bool, selectionColor: UIColor, nonSelectionColor: UIColor) {
contentView.backgroundColor = isSelected ? selectionColor : nonSelectionColor
}
}
in Swift 3, converted from illuminates answer.
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
if(selected) {
self.selectionStyle = .none
self.backgroundColor = UIColor.green
} else {
self.backgroundColor = UIColor.blue
}
}
(however the view only changes once the selection is confirmed by releasing your finger)
I have tried each one among above answers, but none of them best fits for me,
then i have looked into one of the native provided method, and it is working fine.
first, make cellSelectionStyle to None and then go for this solution.
func tableView(_ tableView: UITableView, willDeselectRowAt indexPath: IndexPath) -> IndexPath?
{
let cell = tableView.cellForRow(at: indexPath);
//cell which is getting deselected, make whatever changes that are required to make it back normal
cell.backgroundColor = kNormalColor;
return indexPath;
}
func tableView(_ tableView: UITableView, willSelectRowAt indexPath: IndexPath) -> IndexPath?
{
let cell = tableView.cellForRow(at: indexPath);
//cell which is getting selected, make whatever changes that are required to make it selected
cell.backgroundColor = kSelectedColor;
return indexPath;
}
advantage of this methods over other all is :
I have a highly customized UITableViewCell. So I implemented my own cell selection.
cell.selectionStyle = UITableViewCellSelectionStyleNone;
I created a method in my cell's class:
- (void)highlightCell:(BOOL)highlight
{
if (highlight) {
self.contentView.backgroundColor = RGB(0x355881);
_bodyLabel.textColor = RGB(0xffffff);
_fromLabel.textColor = RGB(0xffffff);
_subjectLabel.textColor = RGB(0xffffff);
_dateLabel.textColor = RGB(0xffffff);
}
else {
self.contentView.backgroundColor = RGB(0xf7f7f7);;
_bodyLabel.textColor = RGB(0xaaaaaa);
_fromLabel.textColor = [UIColor blackColor];
_subjectLabel.textColor = [UIColor blackColor];
_dateLabel.textColor = RGB(0x496487);
}
}
In my UITableViewController class in ViewWillAppear added this:
NSIndexPath *tableSelection = [self.tableView indexPathForSelectedRow];
SideSwipeTableViewCell *cell = (SideSwipeTableViewCell*)[self.tableView cellForRowAtIndexPath:tableSelection];
[cell highlightCell:NO];
In didSelectRow added this:
SideSwipeTableViewCell *cell = (SideSwipeTableViewCell*)[self.tableView cellForRowAtIndexPath:indexPath];
[cell highlightCell:YES];
I finally managed to get this to work in a table view with style set to Grouped.
First set the selectionStyle
property of all cells to UITableViewCellSelectionStyleNone
.
cell.selectionStyle = UITableViewCellSelectionStyleNone;
Then implement the following in your table view delegate:
static NSColor *SelectedCellBGColor = ...;
static NSColor *NotSelectedCellBGColor = ...;
- (NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
NSIndexPath *currentSelectedIndexPath = [tableView indexPathForSelectedRow];
if (currentSelectedIndexPath != nil)
{
[[tableView cellForRowAtIndexPath:currentSelectedIndexPath] setBackgroundColor:NotSelectedCellBGColor];
}
return indexPath;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
[[tableView cellForRowAtIndexPath:indexPath] setBackgroundColor:SelectedCellBGColor];
}
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
if (cell.isSelected == YES)
{
[cell setBackgroundColor:SelectedCellBGColor];
}
else
{
[cell setBackgroundColor:NotSelectedCellBGColor];
}
}
SWIFT 5.X
It also works when accessoryType changed for cell
extension UITableViewCell{
var selectedBackgroundColor: UIColor?{
set{
let customColorView = UIView()
customColorView.backgroundColor = newValue
selectedBackgroundView = customColorView
}
get{
return selectedBackgroundView?.backgroundColor
}
}
}
And in UIViewController use like below...
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! myCell
cell.selectedBackgroundColor = UIColor.lightGray
return cell
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
if selected {
self.contentView.backgroundColor = .black
} else {
self.contentView.backgroundColor = .white
}
}
Swift 3, 4, 5 select cell background colour
1) Change only highlighted colour when user click on cell:
1.1) Inside cell class:
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
let backgroundView = UIView()
backgroundView.backgroundColor = UIColor.init(white: 1.0, alpha: 0.1)
selectedBackgroundView = backgroundView
}
1.2) Viewcontroller that you use customized cell
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
tableView.deselectRow(at: indexPath, animated: true)
}
2) If you to set colour for selected cells:
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
if selected {
self.backgroundColor = .darkGray
} else {
self.backgroundColor = .white
}
}
I had a recent issue with an update to Swift 5 where the table view would flash select and then deselect the selected cell. I tried several of the solutions here and none worked. The solution is setting clearsSelectionOnViewWillAppear
to false.
I had previously used the UIView and selectedBackgroundColor property, so I kept with that approach.
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "popoverCell", for: indexPath) as! PopoverCell
let backgroundView = UIView()
backgroundView.backgroundColor = Color.Blue
cell.selectedBackgroundView = backgroundView
}
Below are the changes I needed for Swift 5. The property clearsSelectionOnViewWillAppear
was the reason my cells were deselecting. The following select was necessary on first load.
override func viewDidLoad() {
super.viewDidLoad()
clearsSelectionOnViewWillAppear = false
popoverTableView.selectRow(at: selectedIndexPath, animated: false, scrollPosition: .none)
}
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = (UITableViewCell *)[tableView cellForRowAtIndexPath:indexPath];
cell.contentView.backgroundColor = [UIColor yellowColor];
}
Check out AdvancedTableViewCells
in Apple's sample code.
You'll want to use the composite cell pattern.
After some testing this WILL remove the background color when deselected or cell is tapped a second time when table view Selection is set to "Multiple Selection". Also works when table view Style is set to "Grouped".
extension ViewController: UITableViewDelegate {
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
if let cell = tableView.cellForRow(at: indexPath) {
cell.contentView.backgroundColor = UIColor.darkGray
}
}
}
Note: In order for this to work as you see below, your cell's Selection property can be set to anything BUT None.
Style: Plain, Selection: Single Selection
Style: Plain, Selection: Multiple Selection
Style: Grouped, Selection: Multiple Selection
For a smoother color transition, try some animation:
extension ViewController: UITableViewDelegate {
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
if let cell = tableView.cellForRow(at: indexPath) {
UIView.animate(withDuration: 0.3, animations: {
cell.contentView.backgroundColor = UIColor.darkGray
})
}
}
}
You may notice the icon and text color also changing when cell is selected. This happens automatically when you set the UIImage and UILabel Highlighted properties
UIImage
UILabel
Just supply a color for the Highlighted property:
If you're talking about selected cells, the property is -selectedBackgroundView
. This will be shown when the user selects your cell.
I've had luck with the following:
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
bool isSelected = // enter your own code here
if (isSelected)
{
[cell setBackgroundColor:[UIColor colorWithRed:1 green:1 blue:0.75 alpha:1]];
[cell setAccessibilityTraits:UIAccessibilityTraitSelected];
}
else
{
[cell setBackgroundColor:[UIColor clearColor]];
[cell setAccessibilityTraits:0];
}
}
For iOS7+ and if you are using Interface Builder then subclass your cell and implement:
Objective-C
- (void)awakeFromNib {
[super awakeFromNib];
// Default Select background
UIView *v = [[UIView alloc] init];
v.backgroundColor = [UIColor redColor];
self.selectedBackgroundView = v;
}
Swift 2.2
override func awakeFromNib() {
super.awakeFromNib()
// Default Select background
self.selectedBackgroundView = { view in
view.backgroundColor = .redColor()
return view
}(UIView())
}
I was able to solve this problem by creating a subclass of UITableViewCell
and implementing the setSelected:animated: method
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
// Configure the view for the selected state
if(selected) {
[self setSelectionStyle:UITableViewCellSelectionStyleNone];
[self setBackgroundColor:[UIColor greenColor]];
} else {
[self setBackgroundColor:[UIColor whiteColor]];
}
}
The trick was setting the
cell.selectionStyle = UITableViewCellSelectionStyleDefault;
in the implementing view controller and then in the tableViewCell setting it as
[self setSelectionStyle:UITableViewCellSelectionStyleNone];
Hope this helps. :)
The default style is gray and it destroys the colors of the cell if it was done programmatically. You can do this to avoid that. (in Swift)
cell.selectionStyle = .None
Source: Stackoverflow.com