Brad McAllister Brad McAllister - 22 days ago 11
Swift Question

JSQMessagesViewController with Navigation Bar

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.

Answer

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.

Navigation bar Visibility screen shot

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

Attributes Inspector options Screen Shot

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