Search code examples
uitableviewios13ios12accessoryview

Incorrect difference in rendering accessory/disclosure indicator between iOS 12.x and iOS 13.x


In an app I developed and sell in the App Store, when run, beginning under iOS 13, the background area of the disclosure accessory used in the app's custom table cells is not transparent, overlaying the content of the rest of the cell, truncating the right side of the image and in some cases truncating the text in the lower description area. I've "proven" that this change in the rendering of the disclosure accessory occurred going from iOS 12.x to iOS 13.x by loading a v12.4 simulator in Xcode and building the app using that. Running the app on the 12.4 simulator, the disclosure accessory appears correctly, as it has since the start of developing this app.

Below are screen caps that show how the disclosure area should and used to appear pre 13.x (first screen cap) and how it appears now starting in 13.x (second screen cap):

Correct rendering of disclosure area

Current rendering of disclosure area

The closest SO post that I can find re this has not helped me resolve this: Altering the background color of cell.accessoryView and cell.editingAccessoryView

I have tried to add the following when I set up this custom cell to no desired effect: cell.accessoryView.backgroundColor = [UIColor clearColor];

Appreciate any guidance on how to resolve this.


Edits below in response to initial forum advice.


Note I haven't touch this code in many years so don't know why image and labels would have shifted. In any case I did try edit the image views and labels to align with borders of the cell config in the xib. Also tried resizing the image view and labels to not overlay the disclosure area but no change in app rendering. Tried View Debugger but all options are grayed out. Sorry, but I haven't dealt with this previously.

(Question: what is the gray vertical bar to the right of the disclosure icon indicating?)

Screen cap of .xib loaded into view controller cell with image view and label handles shown: CloudIndexCell.xib

Code from view controller setting up table cell:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"CloudIndexCell";
    
    CloudIndexCell *cell = (CloudIndexCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    
    if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) {
        
        if (cell == nil) {
            
            NSArray *topLevelObjects = [[NSBundle mainBundle]
                                        loadNibNamed:@"CloudIndexCell"
                                        owner:nil options:nil];
            for (id currentObject in topLevelObjects){
                if ([currentObject isKindOfClass:[UITableViewCell class]]) {
                    cell = (CloudIndexCell *) currentObject;
                    break;
                }
            }
        }
    }
    
    if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
        
        if (cell == nil) {
            
            NSArray *topLevelObjects = [[NSBundle mainBundle]
                                        loadNibNamed:@"CloudIndexCell~iPad"
                                        owner:nil options:nil];
            for (id currentObject in topLevelObjects){
                if ([currentObject isKindOfClass:[UITableViewCell class]]) {
                    cell = (CloudIndexCell *) currentObject;
                    break;
                }
            }
        }
    }
    
    if (cell == nil) {
        cell = [[CloudIndexCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:CellIdentifier];
        
    }
    
    NSDictionary *sectionDict = [cloudsArray objectAtIndex:[indexPath section]];
    NSArray *rows = [sectionDict objectForKey:cloudsIndexViewControllerRowsKey];
    NSDictionary *rowDict = [rows objectAtIndex:[indexPath row]];
    
    NSString *cloudName = [rowDict objectForKey:cloudsIndexViewControllerCloudNameKey];
    NSString *cloudIndexDesc = [rowDict objectForKey:cloudsIndexViewControllerCloudIndexDescriptionKey];
    
    cell.cloudName.text = cloudName;
    cell.cloudDescText.text = cloudIndexDesc;
    
    if ([indexPath section] == 0) {
        cell.cloudDescBackground.backgroundColor = UIColorFromRGB(0x03AC03);
        
    }
    if ([indexPath section] == 1) {
        cell.cloudDescBackground.backgroundColor = UIColorFromRGB(0x7C4DD6);
    }
    if ([indexPath section] == 2) {
        cell.cloudDescBackground.backgroundColor = UIColorFromRGB(0xD79A00);
        
    }
    if ([indexPath section] == 3) {
        cell.cloudDescBackground.backgroundColor = UIColorFromRGB(0x666666); //[UIColor darkGrayColor];
    }
    
    cell.cloudImage.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@_Index.png", cloudName]];
    
    return cell;
}


Solution

  • The content view now shrinks away from a disclosure indicator. The image view and other views are in the content view. So their right edge has moved left.

    One choice is: don't use a disclosure indicator! Just put your own indicator-like symbol at the right-center of the content view. Then the content view will fill the cell.

    Or else, use the clouds and other visual material as the cell background. You can assemble a background consisting of a plain UIView that contains the image, the desc text, and the desc background, and set the backgroundImage to that view.