How to get Transparent Accessory View in UITableViewCell? (w/ Screenshot) - iphone

I use a custom UITableViewCell from a nib. The accessory view is a Detail Disclosure Indicator . The problem is that the background color of the UITableViewCell behind the accessory view is not getting rendered (see image / source below). Any clues? Also, here are some things that I tried but did NOT work:
Things that DID NOT work:
- Setting the backgroundColor of the accessory view to clearColor
- Setting the contentView.opaque of the cell to FALSE
- Setting the contentView.opaque of the Table View to FALSE
- Setting a non-default accessory view for the cell
alt text http://www.chicknchoke.com/so/IMG_8028.png
-(void)showTablePrep
{
myTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 480, 320, 416) style:UITableViewStylePlain];
myTableView.dataSource = self;
myTableView.delegate = self;
myTableView.delaysContentTouches = FALSE;
myTableView.opaque = FALSE;
myTableView.rowHeight = 60;
[UIView beginAnimations:#"SlideUp" context:nil];
[UIView setAnimationDuration:0.3f];
[myTableView setCenter:CGPointMake(myTableView.center.x, myTableView.center.y-436)];
[self.view addSubview:myTableView];
[self.view bringSubviewToFront:myTableView];
[UIView commitAnimations];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
FriendsCell* cell = [tableView dequeueReusableCellWithIdentifier:#"CustomCellID"];
if (cell == nil){
NSArray *nib = [[NSBundle mainBundle] loadNibNamed:#"FriendsCellView" owner:self options:nil];
cell = (FriendsCell*)[nib objectAtIndex:0];
if(indexPath.row % 2 == 0){
cell.contentView.backgroundColor = [UIColor grayColor];
}else{
cell.contentView.backgroundColor = [UIColor lightGrayColor];
}
cell.accessoryView.backgroundColor = [UIColor clearColor];
cell.contentView.opaque = FALSE;
cell.selectionStyle = UITableViewCellSelectionStyleNone;
if(f
riendsCounter > indexPath.row){
cell.titleLabel.text = #"Label";
cell.descLabel.text = #"Description goes here";
}else{
cell.titleLabel.text = #"";
cell.descLabel.text = #"";
cell.accessoryType = UITableViewCellAccessoryNone;
}
}
return cell;
}

You're drawing the background color for your cell incorrectly. A UITableViewCell will be arranged so that the contentView and accessoryView sit side-by-side. (This is done so that the contentView can clip its content so it doesn't overlap with the accessory view) The problem is not that the accessory view is opaque, it's that the gray background is simply not drawn behind the accessory view.
The correct way of customizing the background drawn behind a UITableViewCell is to customize its backgroundView. I haven't tried this, but since you're only changing the color, you might be able to simply set the backgroundColor color on the backgroundView to your desired color.

I found the answer by having a look at the subviews of my custom table view cell.
It seems like the accessory view has a button sitting over it. By finding this button in the subviews and changing its color, i was able to update the background color behind the accessory button.
<UIButton: 0x3b4d690; frame = (277 0; 43 75); opaque = NO; layer = <CALayer: 0x3b3e0b0>>
for (UIView *aSubView in self.subviews) {
if ([aSubView isMemberOfClass:[UIButton class]]) {
aSubView.backgroundColor = [UIColor greenColor];
}
}
Unfortunately I was only able to reach this button within the
- (void)setSelected:(BOOL)selected animated:(BOOL)animated
method of my custom table view cell class. I've used this successfully within my app to display a different highlight color when the user selects a cell. This should point you in the right direction.

I resolve this problem on iOS7 but adding
[cell setSelectionStyle:UITableViewCellSelectionStyleNone];
in
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
and you modify your background and other bakcgrounds here :
- (BOOL)tableView:(UITableView *)tableView shouldHighlightRowAtIndexPath:(NSIndexPath *)indexPath {
return YES;
}
- (void)tableView:(UITableView *)tableView didHighlightRowAtIndexPath:(NSIndexPath *)indexPath {
// Add your Colour.
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
[cell setBackgroundColor:[UIColor colorWithHexColor:HIGHLIGHT_COLOR]];
}
- (void)tableView:(UITableView *)tableView didUnhighlightRowAtIndexPath:(NSIndexPath *)indexPath {
// Reset Colour.
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
[cell setBackgroundColor:[UIColor colorWithHexColor:UNHIGHLIGHT_COLOR]];
}

Related

iOS UITableView Index is transparent

As shown in the below image, I have set the table's background and some other styles. The index, highlighted in red, is transparent. How do I set it to be white like the rest of the cell?
You can use the designated UITableView properties:
tableView.sectionIndexColor = [UIColor brownColor];
tableView.sectionIndexBackgroundColor = [UIColor whiteColor];
tableView.sectionIndexTrackingBackgroundColor = [UIColor blueColor];
Messing around with the underlying TableView layers will likely reject your app and may break if Apple changes their UITableView implementation.
its too much easy dude.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
for(UIView *view in [tableView subviews])
{
if([[[view class] description] isEqualToString:#"UITableViewIndex"])
{
[view performSelector:#selector(setIndexColor:) withObject:[UIColor whiteColor]];
//give color which you want
}
}
static NSString *MyIdentifier = #"MyIdentifier";
//go further with table cell design...
}

backgroundColor for TableViewCell not working

like you see in the picture, i have a tableView ( view of a tableviewController ), the blue view is a headerView for section, when i tap it, it collapse some cells, but my problem is that cells have the first part of the backGround of the tableView (the cloud) as background [ in this pic i set the backgroundColor of cell to clear but if i set a color to it the right and left (L R in pic) part still there]
i try : cell.layer.masksToBounds = YES; and cell.contentView.layer.masksToBounds = YES;
How can i solve that? and why the cell take the first part of tableView BackGroundColor [image] as BackGroundColor ?
Edit : some codes ( i'm overwriting all values in StoryBoard like backGround ...)
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"clientCell";
ClientCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if ([[[[[[DataManager sharedManager] clientsList] objectAtIndex:indexPath.section] objectForKey:#"rewards"] objectAtIndex:indexPath.row] valueForKey:#"description"] != [NSNull null])
{
cell.voucherDescription.text = [[[[[[DataManager sharedManager] clientsList] objectAtIndex:indexPath.section] objectForKey:#"rewards"] objectAtIndex:indexPath.row] valueForKey:#"description"];
}
//configure more labels ..
[cell setBackgroundColor:[UIColor clearColor]];
[cell.voucherDescription setFont:[UIFont fontWithName:SharkFontSystemeName size:17]];
return cell;
}
in viewDidLoad :
[self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:#"bg.png"]]];
problem resolve, i change the viewController from an UITableViewController to an UIViewController and add a tableView as a subView, and without changing anyThing in code that work perfectly.
is this a bug or i miss something ?

UITableViewCell with semi transparent selected background

I need to hide the normal (unselected - cell.backgroundView) image of a cell when the cell is selected and show it when it is not selected.
The way the tableview works is that the normal view (cell.backgroundView) is always there and when the cell is selected it animates the selected image (cell.selectedBackgroundView) into view and places on top of the normal view.
The problem is when the selected cell is semitransparent and the normal cell is always visible underneath it.
I created, in 2 views for my (custom) UITableViewCell which I load in my view controller:
-(void)tableView:(UITableView *)tableView
willDisplayCell:(UITableViewCell *)cell
forRowAtIndexPath:(NSIndexPath *)indexPath
{
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"XYCell"]];
cell.selectedBackgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"XYCellSelected"]];
}
I cleared colors from in the required places but I cannot get it to work as I want.
Since my selected images (cell.selectedBackgroundView ) is semitransparent, the cell.backgroundView can still be seen underneath it.
How can I make it go away?
In general, if you want a custom cell you should implement your own uitableviewcell.
In your case take a look at
- (void)setSelected:(BOOL)selected animated:(BOOL)animated;
Code example to help you :
- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
[super setSelected:selected animated:animated];
//your own backgroundview when selected
self.selectedBackgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"selectedBck.png"]];
if (selected){
// edit the cell's view when it's selected
self.backgroundView = nil;
}
else {
// edit the cell's view when it isn't selected
}
}
- (void)tableView:(UITableView *)tableView didHighlightRowAtIndexPath:(NSIndexPath *)indexPath
{
self.highlightIndexPath = indexPath; // for iOS6
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
cell.backgroundView.hidden = YES;
}
- (void)tableView:(UITableView *)tableView didUnhighlightRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
if (indexPath.row == NSNotFound) {
// for iOS6
cell = [tableView cellForRowAtIndexPath:self.highlightIndexPath];
}
cell.backgroundView.hidden = NO;
}

How to change tableViewCell background color

NOTE: this is about a cell in GROUPED tableView. That makes a HUGE difference, when compared to normal tableView! The default cell customization answers do NOT work in this case, so please verify your answer first.
This is how I set gray screen and yellow tableView background:
- (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor = [UIColor grayColor];
UIView *myView = [[UIView alloc] initWithFrame:magicRect];
myView.backgroundColor = [UIColor yellowColor];
[self.tableView addSubview:myView];
[self.tableView sendSubviewToBack:myView];
}
This is how I set green cell background. As you can see from picture, it's missing some areas:
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell =
[tableView dequeueReusableCellWithIdentifier:#"Cell"];
if (cell == nil) {
cell = [[[UITableViewCell alloc]
initWithStyle:UITableViewCellStyleValue1
reuseIdentifier:#"Cell"] autorelease];
cell.backgroundColor = [UIColor greenColor];
}
// Configure the cell...
}
Question: how can I change color at start and end of tableView cell? Now the cell is transparent in those areas and displays self.view.backgroundColor from below the whole tableView. Those areas really are transparent, since textured background remains in same location, when scrolling tableView.
set tableView Background as clear color like this,
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
[tableView setBackgroundColor:[UIColor clearColor]];//Here you can give as yellow instead of adding view
//ur code
}
I don't know why you add subview to tableview, you can set the background color for tableview:
tview.backgroundColor=[UIColor yellowColor];

How do I set UITableViewCellSelectionStyle property to some custom color?

I am developing an iPhone application, in my table view I wanted custom color for Cell Selection Style, I read the UITableViewCell Class Reference but there are only three constants defined for Selection style (Blue, Gray, None). I saw one application that used a different color than those defined in the reference.
How can we use a color other than those defined in the reference?
The best way to set the selection is to set the selectedBackgroundView on the cell when you construct it.
i.e.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
cell.selectedBackgroundView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"SelectedCellBackground.png"]] autorelease];
}
// configure the cell
}
The image used should have a nice gradient (like the default selection). If you just want a flat color, you can use a UIView instead of a UIImageView and set the backgroundColor to the color you want.
This background is then automatically applied when the row is selected.
Setting the selectedBackgroundView seems to have no effect when the cell.selectionStyle is set to UITableViewCellSelectionStyleNone. When I don't set the style is just uses the default gray.
Using the first suggestion that inserts the custom UIView into the cell does manipulate the cell but it doesn't show up when the cell is touched, only after the selected action is completed which is too late because I'm pushing to a new view. How do I get the selected view in the cell to display before the beginning of the selected operation?
If you have subclassed a UITableViewCell, then you can customise the various elements of the cell by overriding the following:
- (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated {
if(highlighted) {
self.backgroundColor = [UIColor redColor];
} else {
self.backgroundColor = [UIColor clearColor];
}
[super setHighlighted:highlighted animated:animated];
}
EDIT for iOS7:
as Sasho stated, you also need
cell.selectionStyle = UITableViewCellSelectionStyleNone
I tried some of the above, and I actually prefer to create my own subclass of UITableViewCell and then override the touchesBegan/touchesCancelled/touchesEnded methods. To do this, ignore all the selectedBackgroundView and highlightedColor properties on the cell, and instead just set these colors manually whenever one of the above methods are called. For example, if you want to set the cell to have a green background with red text, try this (within your custom cell subclass):
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//Set backgorund
self.backgroundColor = [UIColor themeBlue];
//Set text
self.textLabel.textColor = [UIColor themeWhite];
//Call super
[super touchesBegan:touches withEvent:event];
}
Note that for this to work, you need to set:
self.selectionStyle = UITableViewCellSelectionStyleNone;
Otherwise, you'll first get the current selection style.
EDIT:
I suggest using the touchesCancelled method to revert back to the original cell colors, but just ignore the touchesEnded method.
Override didSelectRowAtIndexPath: and draw a UIView of a color of your choosing and insert it behind the UILabel inside the cell. I would do it something like this:
UIView* selectedView; //inside your header
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
UITableViewCell* cell = [tableView cellForRowAtIndexPath:indexPath];
selectedView = [[UIView alloc] initWithFrame:[cell frame]];
selectedView.backgroundColor = [UIColor greenColor]; //whatever
[cell insertSubview:selectedView atIndex:0]; //tweak this as necessary
[selectedView release]; //clean up
}
You can choose to animate this view out when it gets deselected and will satisfy your requirements.
Sublcass UITableViewCell and override setHighlighted:animated:
You can define a custom selection color color by setting the backgroundColor (see WIllster's answer):
- (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated {
if(highlighted) {
self.backgroundColor = [UIColor redColor];
} else {
self.backgroundColor = [UIColor clearColor];
}
[super setHighlighted:highlighted animated:animated];
}
You can define a custom background image by setting the backgroundView property:
- (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated {
if( highlighted == YES )
self.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"seasonal_list_event_bar_default.png"]];
else
self.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"seasonal_list_event_bar_active.png"]];
[super setHighlighted:highlighted animated:animated];
}
- (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated {
// Set Highlighted Color
if (highlighted) {
self.backgroundColor = [UIColor colorWithRed:234.0f/255 green:202.0f/255 blue:255.0f/255 alpha:1.0f];
} else {
self.backgroundColor = [UIColor clearColor];
}
}
- (BOOL)tableView:(UITableView *)tableView shouldHighlightRowAtIndexPath:(NSIndexPath *)indexPath {
return YES;
}
- (void)tableView:(UITableView *)tableView didHighlightRowAtIndexPath:(NSIndexPath *)indexPath {
// Add your Colour.
SocialTableViewCell *cell = (SocialTableViewCell *)[tableView cellForRowAtIndexPath:indexPath];
[self setCellColor:Ripple_Colour ForCell:cell]; //highlight colour
}
- (void)tableView:(UITableView *)tableView didUnhighlightRowAtIndexPath:(NSIndexPath *)indexPath {
// Reset Colour.
SocialTableViewCell *cell = (SocialTableViewCell *)[tableView cellForRowAtIndexPath:indexPath];
[self setCellColor:Ripple_Colour ForCell:cell]; //normal color
}
- (void)setCellColor:(UIColor *)color ForCell:(UITableViewCell *)cell {
cell.contentView.backgroundColor = color;
cell.backgroundColor = color;
}
To add a custom color use the below code. And to make it transparent use alpha: 0.0
cell.selectedBackgroundView = UIView(frame: CGRect.zero)
cell.selectedBackgroundView?.backgroundColor = UIColor(red:0.27, green:0.71, blue:0.73, alpha:1.0)
If you use custom color and want to give it rounded corner look use:
cell.layer.cornerRadius = 8
Also, use this for better animation and feel
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
tableView.deselectRow(at: indexPath, animated: true)
}