Tab Bar Item Images Invisible in MoreNavigationController with Black Background

Question

I have a Tab Bar (UITabBarController) application with a "More" View Controller because of having more than 5 views. The rest of my application has a black background and white text, and I have been able to customize this table to match this. As a result of this however, the Tab Bar images that normally appear on the left side of the "More" table are invisible (since they're meant for a white background). I need to find a way to make the Tab Bar images display as they do in the Tab Bar which itself has a black background.

Example:

Black Background (Invisible Images)

I have subclassed the TabBarController and changed the data source for the "MoreTableView":

TabBarController.m

- (void)viewDidLoad {

    [super viewDidLoad];

    UINavigationController *moreController = self.moreNavigationController;

    moreController.navigationBar.barStyle = UIBarStyleBlackOpaque;

    if ([moreController.topViewController.view isKindOfClass:[UITableView class]])
    {
        UITableView *view = (UITableView *)moreController.topViewController.view;
     view.separatorColor = [[UIColor alloc] initWithRed:0.3 green:0.3 blue:0.3 alpha:1.0];    
        view.backgroundColor = [UIColor blackColor];
        view.dataSource = [[MoreTableViewDataSource alloc] initWithDataSource:view.dataSource];
    }
}

MoreTableViewDataSource.m

-(MoreTableViewDataSource *) initWithDataSource:(id<UITableViewDataSource>) dataSource
{
    originalDataSource = dataSource;
    [super init];
    return self;
}


- (NSInteger)tableView:(UITableView *)table numberOfRowsInSection:(NSInteger)section
{
    return [originalDataSource tableView:table numberOfRowsInSection:section];
}


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [originalDataSource tableView:tableView cellForRowAtIndexPath:indexPath];
    cell.textColor = [[UIColor alloc] initWithRed:1 green:0.55 blue:0 alpha:1.0];
    cell.accessoryView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"customAccessory.png"]];
    return cell;
}

Thanks in advance,
Julian

Answer 1

Doing moreController.topViewController.view is kinda dangerous.

I'd recommend instead putting in a tab of your own creation that does the more list, with the normal icon, then opening the other tabs under the more list via normal nav controller methods. You'll need to remove any overflow tab items from the tab bar of course.

There might be a more elegant way to do this, however.

Answer 2

Hi,

first, thanks for posting your subclass of the tabbar controller. I included it into the application im writing and ran into the same problem.

My solution is to simply swap the image and the highlighted image. For this you have to change the method tableView:cellForRowAtIndexPath: of MoreTableViewDataSource.m, e.g.:

- (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [dataSource tableView:tableView cellForRowAtIndexPath:indexPath];
    UIImageView *imageView = [cell imageView];
    UIImage *image = [imageView image];
    [imageView setImage:[imageView highlightedImage]];
    [imageView setHighlightedImage:image];
    return cell;
}

Cheers, Michael

Answer 3

Hi Julian,

Ive checked your screenshot, how were you able to Hide the Edit button under MoreNavigationController?

Thanks