How to add a toolbar to the BOTTOM of a UITableView obj-c/ios/xcode

Question

how do I add Programmaticaly a toolbar with uitextfield at the bottom of a tableview? Like a chat or sms app.. thank you in advance..

Answer 1

First create a view to hold the whole thing. Then add a UITableview and UIToolbar programmatically set frame so that it appears under the tableview .Add the textfield to the toolbar

    UIView *placeholderView=[[UIView alloc]initWithFrame:CGRectMake(0, 0, 400, 440)];
    UITableView *tv=[[UITableView alloc]initWithFrame:CGRectMake(0, 0, 400, 400)];
    [placeholderView addSubview:tv];
    UIToolbar *toolBar=[[UIToolbar alloc]initWithFrame:CGRectMake(0, 400, 400, 40)];
    [placeholderView addSubview:toolBar]; 

Answer 2

I just found a better trick!

1. Make sure there is NO Navigation Bar (from your failed attempts)
2. Drag and drop a "Bar Button Item" (Xcode will magically place it for you at the bottom)
3. NOTE: If you Run the App now you won't see anything! (so keep reading)
4. Add the following line of code under viewDidLoad:

self.navigationController.toolbarHidden = NO;

Done!

Answer 3

Use a UIViewController subclass instead of UITableViewController subclass.

it should be something like this :

@interface ChatViewController : UIViewController
@end


#import "ChatViewController.h"

@interface ChatViewController()  <UITableViewDelegate, UITableViewDataSource, UITextFieldDelegate>
@property (nonatomic, strong) UITableView *tableView;
@property (nonatomic, strong) UIToolbar *toolbar;
@property (nonatomic, strong) UITextField *textField;
@end

@implementation ChatViewController

-(UITableView *)tableView
{
    if (!_tableView) {
        _tableView = [UITableView alloc] init];
        CGRect frame = self.view.bounds;
        frame.size.height = frame.size.height - 44;
        _tableView.frame = frame;
        _tableView.delegate = self;
        _tableView.dataSource = self;
    }
    return _tableView;
}

-(UIToolbar *)toolbar
{
    if (!_toolbar) {
        _toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0,self.tableView.frame.size.height,self.view.frame.size.width, 44)];
    self.textField = [[UITextField alloc] initWithFrame:CGRectMake(0,0,_toolbar.frame.size.width -20)];
    self.textField.delegate = self;
    UIBarButtonItem *textFieldItem = [[UIBarButtonItem alloc] initWithCustomView:self.textField];
    UIBarButtonItem *flexibleSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
                                                                                   target:nil
                                                                                   action:nil];
    // You'll need to add a button to send you text
    _toolbar.items = [NSArray arrayWithObjects:flexibleSpace, textFieldItem, flexibleSpace, nil];
    }
    return _toolbar;
}

-(void)viewDidLoad
{
    [super viewDidLoad];
    [self.view addSubview:self.tableView];
    [self.view addSubview:self.toolbar];
    [[NSNotificationCenter defaultCenter] addObserver:self 
                                             selector:@selector(keyboardWillHideOrShow:) 
                                                 name:UIKeyboardWillHideNotification 
                                               object:nil];
    [[NSNotificationCenter defaultCenter] addObserver:self 
                                             selector:@selector(keyboardWillHideOrShow:) 
                                                 name:UIKeyboardWillShowNotification 
                                               object:nil];
}

- (void)viewDidUnload
{
    [[NSNotificationCenter defaultCenter] removeObserver:self];
    [super viewDidUnload];
}


- (void)keyboardWillHideOrShow:(NSNotification *)note
{
    NSDictionary *userInfo = note.userInfo;
    NSTimeInterval duration = [[userInfo objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue];
    UIViewAnimationCurve curve = [[userInfo objectForKey:UIKeyboardAnimationCurveUserInfoKey] intValue];

    CGRect keyboardFrame = [[userInfo objectForKey:UIKeyboardFrameEndUserInfoKey] CGRectValue];
    CGRect keyboardFrameForToolbar = [self.toolbar.superview convertRect:keyboardFrame fromView:nil];
    CGRect keyboardFrameForTableView = [self.tableView.superview convertRect:keyboardFrame fromView:nil];

    CGRect newToolbarFrame = self.toolbar.frame;
    newToolbarFrame.origin.y = keyboardFrameForToolbar.origin.y - newToolbarFrame.size.height;

    CGRect newTableViewFrame = self.tableView.frame;
    newTableViewFrame.size.height = keyboardFrameForTableView.origin.y - newToolbarFrame.size.height;

    [UIView animateWithDuration:duration 
                          delay:0 
                        options:UIViewAnimationOptionBeginFromCurrentState | curve 
                     animations:^{self.toolbar.frame = newToolbarFrame;
                         self.tableView.frame =newTableViewFrame;} 
                     completion:nil];  
}

This would handle laying out the views and animating keyboard appearance. You'll need to handle delegate and datasource methods for the table view and the text field.

Answer 4

It's not great in some ways, but I solved this by using a Container View on an additional View Controller.

The Intermediate VC to Table VC segue is "Embed"

I used this instead of the "Toolbar on Nav Controller" solution because I'm adding this to an existing app design with ~15 screens, and I wasn't sure how to configure different toolbars on different screens.