JSQMessagesViewController with Navigation Bar

Question

I am struggling to add a navigation bar to a JSQMessagesViewController. Is it possible to do this in interface builder or do I have to create the navigation bar programmatically?

When attempting to do this with IB, the navigation bar is not visible at runtime and the messages scroll all the way to the top of the iPhone display. I would think that constraints need to be added in order for this to work. I am not sure how or what to add the constraints to since there isn't anything other than my navigation bar in IB.

Sorry if this is a basic question, thanks for any guidance you can provide!

UPDATE: I am still curious if this can be done via IB. However, I have figured out how to do this programmatically. I added the following to viewDidLoad()

    // Create the navigation bar
    let navigationBar = UINavigationBar(frame: CGRectMake(0, 0, self.view.frame.size.width, 64)) // Offset by 20 pixels vertically to take the status bar into account

    navigationBar.backgroundColor = UIColor.whiteColor()
    navigationBar.delegate = self;

    // Create a navigation item with a title
    let navigationItem = UINavigationItem()
    navigationItem.title = contacts[i].firstName

    // Create left and right button for navigation item
    let leftButton =  UIBarButtonItem(title: "Back", style:   UIBarButtonItemStyle.Plain, target: self, action: "btn_clicked:")
    let rightButton = UIBarButtonItem(title: "Details", style: UIBarButtonItemStyle.Plain, target: self, action: "details_clicked:")

    // Create two buttons for the navigation item
    navigationItem.leftBarButtonItem = leftButton
    navigationItem.rightBarButtonItem = rightButton

    // Assign the navigation item to the navigation bar
    navigationBar.items = [navigationItem]

    // Make the navigation bar a subview of the current view controller
    self.view.addSubview(navigationBar)

This seems to get the job done. Let me know if there is a better way to go about this.

still show message bubble under the nav – Yaroslav Dukal Nov 09 '16 at 17:59 — Yaroslav Dukal, Nov 09 '16 at 17:59

score 1 · Answer 1 · answered Dec 18 '16 at 14:09

I spent some hours to find a satisfying solution. What I did was to add a navigation bar using the Main.storyboard. Adding a navigation bar to JSQMessagesViewController

In the folder Resources which is placed within in the folder JSQMessageViewController you will find a .xib file with the name JSQMessagesViewController. You are able to customize the UI in the way you want. Add a navigation bar to it.

After that you have to define an IBAction-method in JSQMessagesViewController.h. For example something like:

-(IBAction)back;

Use the JSQMessagesViewController.m file to fill the method body:

-(IBAction)back {

[self dismissViewControllerAnimated:YES completion:^{
}]; }

The last step is to connect the IBAction-method with the storyboard.

Info: When you add a navigation bar to the UI, make sure that you minimize the size of the collectionview to make the bubbles appear under the navigation bar.

Best regards, Nazar

Dan Leonard · Accepted Answer · 2016-11-15T16:47:21.897

You can do this with interface builder. All that you need to do is add a navigation contorller from the object library at the bottom right of your screen (Same place you get view controllers button and labels). Once you have placed it on your storyboard select it and then go to the properties inspector and make sure that the Bar Visibility ✅ Shows Navigation Bar is checked.

Then you should make a view controller that is a subclass of the JSQMessagesViewController the beginning of my file looks like this in swift

 import JSQMessagesViewController

 class SMSConversationViewController: JSQMessagesViewController {

This makes it so this view can have all the properties of the JSQMessagesViewController but I can customize it to fit my app.

Then just make sure that these options are selected in the Attributes Inspector

This will keep your messages under your navigation. Hope this was helpful.

score 0 · Answer 3 · answered Feb 25 '16 at 20:56

I had a hard time getting a back button (automagically) using navigationController in UIStoryboard. By this I mean you segue to your JSQMessagesViewController class, which is embedded in UINavigationController, and the BackButton will appear at the NavigationBar on top. I'm still not sure how to do it this way, any help is appreciated.

Meanwhile, Finally got it to work by manually adding the button in Storyboard and dismissing the viewController.

@IBAction func navBackButton(sender: UIBarButtonItem) {
    dismissViewControllerAnimated(true, completion: nil)

}

JSQMessagesViewController with Navigation Bar

3 Answers3