Customizing the More menu on a Tab bar

Question

I am using a tab bar (UITabBarController) on my app and I wish to customize the appearance of the table that appears when you click the more button. I have worked out how to change the appearance of the Navigation bar that is on the more screen by setting

self.moreNavigationController.navigationBar.barStyle

in a subclass of UITabBarController and I have managed to change the background colour of the table by modifying

self.moreNavigationController.topViewController.view.backgroundColor

, but I cannot work out how to change the font colour in the cells that appear on the table. I was hoping I could use

self.moreNavigationController.topViewController.view.visibleCells 

but this always seems to be empty. I've tried doing this in viewDidLoad, viewWillAppear and viewDidAppear with no success. The object self.moreNavigationController.topViewController is of type UIMoreListController, which seems to be undocumented and I can't see anything obvious in the interface that will help me.

Any ideas?

Solution 1

visibleCells is populated only after the moreNavigationController is displayed.

And the cells are created at runtime, so even if you change the content of the cells, they are replaced when they are displayed.

One thing to try would be to replace the datasource of the moreNavigationController tableView, call the cellForRowAtIndexPath of the original datasource and change its content before returning it.

Using the code below, after having displayed once the moreNavigationController to initialize it, you'll see that when you return to the moreNavigationController, the cells are red, but return immediately to white background.

UITableView *view = (UITableView *)self.tabBarController.moreNavigationController.topViewController.view;
if ([[view subviews] count]) {
  for (UITableViewCell *cell in [view visibleCells]) {
    cell.backgroundColor = [UIColor redColor];
  }
}

Solution 2

Following on from Stephan's suggestion to replace the dataSource of the moreNavigationController, here is a quick over view of the code I implemented.

I created a new class called MoreTableViewDataSource which implements the UITableViewDataSource protocol. The controller which the more page actually uses to build the table is called the UIMoreListControllerModern, and this implements just the required parts of the UITableViewDataSource protocol. My implementation looks like this.

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

    return self;
}

- (void)dealloc
{
    self.originalDataSource = nil;
    [super dealloc];
}

- (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 whiteColor];
    return cell;
}

and then in my CustomTabBarController class I override viewDidLoad as follows:

- (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.backgroundColor = [UIColor blackColor];
        moreTableViewDataSource = [[MoreTableViewDataSource alloc] initWithDataSource:view.dataSource];
        view.dataSource = moreTableViewDataSource;

    }
}

As requested here are the header files

@interface MoreTableViewDataSource : NSObject <UITableViewDataSource>
{
    id<UITableViewDataSource> originalDataSource;
}

@property (retain) id<UITableViewDataSource> originalDataSource;

-(MoreTableViewDataSource *) initWithDataSource:(id<UITableViewDataSource>) dataSource;

@end

and

#import "MoreTableViewDataSource.h"

@interface CustomTabBarController : UITabBarController 
{
    MoreTableViewDataSource *moreTableViewDataSource;
}

Solution 3

Thanks to Unknown. Following his solution, I will put his code in Swift. Only what you should do more is create MoreTableViewCell class and just it. You don't have to use Storyboard. If you want to modify tableView you can do it in customizeMoreTableView method.

class TabBarMenuController: UITabBarController, UITableViewDelegate, UITableViewDataSource{

var tabBarItems: [UIViewController] = []
var areMessagesVisible: Bool = false

var titleForTabBars: [String] = ["resources", "events", "training", "my profile", "news", "contacts"]
var iconNames: [String] = ["film", "calendar", "classroom", "profile", "news", "Phone"]
var controllersStoryboardId: [String] = ["resourcesNavController", "eventsNavController", "enablementNavController", "profileNavController", "newsNavController", "contactsNavController"]

// to manage moreTableView
var moreTableView: UITableView = UITableView()
var currentTableViewDelegate: UITableViewDelegate?

override func viewDidLoad() {
    super.viewDidLoad()

    self.customizeMoreTableView()
    //to REMOVE
    areMessagesVisible = true

    if !areMessagesVisible{
        self.titleForTabBars.removeAtIndex(4)
        self.controllersStoryboardId.removeAtIndex(4)
        self.iconNames.removeAtIndex(4)
    }

    for i in 0 ..< controllersStoryboardId.count{
        tabBarItems.append(UIStoryboard(name: "Main", bundle: NSBundle.mainBundle()).instantiateViewControllerWithIdentifier(controllersStoryboardId[i]) as? UINavigationController ?? UINavigationController())
    }
    self.moreNavigationController.navigationBar.tintColor = UIColor.blackColor()
}

override func viewWillAppear(animated: Bool) {

    for i in 0 ..< tabBarItems.count{
        tabBarItems[i].tabBarItem = UITabBarItem(title: titleForTabBars[i], image: UIImage(named: iconNames[i]), selectedImage: UIImage(named: iconNames[i]))
    }
    self.viewControllers = tabBarItems
}

func customizeMoreTableView(){
    moreTableView = self.moreNavigationController.topViewController!.view as? UITableView ?? UITableView()
    currentTableViewDelegate = moreTableView.delegate;
    moreTableView.delegate = self
    moreTableView.dataSource = self;
    moreTableView.registerClass(MoreTableViewCell.self, forCellReuseIdentifier: "MoreTableViewCell")

}

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

    let moreCell  = tableView.dequeueReusableCellWithIdentifier("MoreTableViewCell", forIndexPath: indexPath) as? MoreTableViewCell ?? MoreTableViewCell()

    moreCell.textLabel?.text = titleForTabBars[indexPath.row + 4]
    moreCell.imageView?.image = UIImage(named: iconNames[indexPath.row + 4])

    /*let testLabel: UILabel = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 40))
    testLabel.backgroundColor = UIColor.yellowColor()
    moreCell.addSubview(testLabel)
    */
    return moreCell
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return titleForTabBars.count - 4
}

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
    currentTableViewDelegate?.tableView!(tableView, didSelectRowAtIndexPath: indexPath)
}

 }

Solution 4

I followed Ian's implementation to customize the More menu, but I was having a problem retaining the customizations after a memory warning. didReceiveMemoryWarning seems to destroy the UITableView, and when it is regenerated it gets its old dataSource back. Here's my solution:

I replace viewDidLoad on the CustomTabBarController with this:

- (void)viewDidLoad {
    [super viewDidLoad];
    UINavigationController* moreController = self.moreNavigationController;
    if ([moreController.topViewController.view isKindOfClass:[UITableView class]]) {
        moreController.delegate = self;
        self.moreControllerClass = [moreController.topViewController class];
        UITableView* view = (UITableView*) moreController.topViewController.view;
        self.newDataSource = [[[MoreDataSource alloc] initWithDataSource:view.dataSource] autorelease];
    }
}

As you can see, I added a few properties for storing things I needed. Those have to be added to the header and synthesized. I also made CustomTabBarController a UINavigationControllerDelegate in the header. Here's the delegate function I added:

- (void)navigationController:(UINavigationController *)navigationController willShowViewController:(UIViewController *)viewController animated:(BOOL)animated {
    if ([viewController isKindOfClass:self.moreControllerClass]) {
        UIView* view = self.moreNavigationController.topViewController.view;
        if ([view isKindOfClass:[UITableView class]]) {
            UITableView* tview = (UITableView*) view;
            tview.dataSource = self.newDataSource;
            tview.rowHeight = 81.0;
        }
    }
}

This way I make sure my custom data source is always used, because I set it that way just prior to showing the UIMoreListController, every time it's shown.

Solution 5

@interface TabBarViewController () <UITableViewDelegate,UITableViewDataSource>

@property (nonatomic,strong) UITableView* tabBarTableView;
@property (nonatomic,weak) id <UITableViewDelegate> currentTableViewDelegate;

@end

@implementation TabBarViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self costumizeMoreTableView];

}

-(void)costumizeMoreTableView{
    _tabBarTableView = (UITableView *)self.moreNavigationController.topViewController.view;
    _currentTableViewDelegate = _tabBarTableView.delegate;
    _tabBarTableView.delegate = self;
    _tabBarTableView.dataSource = self;
    [_tabBarTableView registerNib:[UINib nibWithNibName:@"MoreTabBarTableViewCell" bundle:nil] forCellReuseIdentifier:@"MoreTabBarTableViewCell"];

}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 120;
}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return 2;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    MoreTabBarTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"MoreTabBarTableViewCell" forIndexPath:indexPath];
    [cell setMoreTableValues];
    return cell;
}

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath: (NSIndexPath *)indexPath{
      [_currentTableViewDelegate tableView:tableView didSelectRowAtIndexPath:indexPath];
 }

 @end

View more solutions

Comments

[Ian1971]

Good suggestion. i am going to try it

[Ian1971]

It works. I am new to this site, should I post my implementation of your idea as a separate answer? What is the correct protocol?

[Stephan Burlot]

I would suggest to edit your own question and add the answer below. But I'm a newbie too!

[Joe D'Andrea]

Just joining the conversation here … If I understand correctly then, you're chaining in moreTableViewDataSource. Nice! Question though: Should there be a [moreTableViewDataSource release] after the view.dataSource assignment, to balance out the alloc?

[Joe D'Andrea]

Ahh, wait a sec. moreTableViewDataSource isn't accessed via a property, so there's no extra retain, right? But I wonder if this should be a property anyway … hmm ...

[Ryan Booker]

I've implemented something like this myself and on iOS3.x I have noticed that setting the background colour of the textLabel doesn't work. It always has the same colour as the tableView's background.

[SteveB]

This looks like a good solution but it seems like rolling your own More tab might be just as well and give you more direct control. Create a MoreViewController, make it your last tab (max 5th), drop a TableView into the nib, create an array that maps to your ViewControllers and handle the didSelectRowAtIndexPath. That gives you your own MoreViewController that you can customize just like any other ViewController.

[Abolfoooud]

Very clever solution..i adapted it for UITableViewDelegate as i needed to change the background color of more table cells using willDisplayCell

[Tim]

I did this and I can successfully change the color of the text inside the table view cells. But I want to change the text. So I tried cell.textLabel.text = @"test";. But it does not work, I cannot change it. How can I do this?

[Sjakelien]

So, where and how do I init this?

[Sai Sunkari]

how to achieve this in c#? I'm using xamarin forms.