JSQMessagesViewController Custom Cell Auto layout Issue - IOS

Question

I am using JSQMessagesViewController and I created a custom cell according to this answer. How to add custom view to JSQMessagesViewController cell so that it includes one view with some buttons and text view?

Now I am struggling to set auto layout constrains correctly. So, the message bubble not display correctly. Please help me set the constraints correctly

Answer 1

So lets take a stab at this. So first things that I would do it set a constraint for the first button to be equal hight of the other. You can accomplish a couple of ways but I will only describe one here for brevity. You can do hold the control button on your computer and select button1 and drag to button2. This will present you with a couple of options that look like this.

You want to select Equal Heights this will make it so both your buttons have the same hight. Then you will want to give it a hight. Once again hold down the control button on your keyboard but this time click button1 drag and release within button1. you should get something along the lines of this.

If you do not get the desired options try dragging in a diagonal direction. Xcode is tying to guess what constraints you want based on the direction of your drag. I.E. If you drag vertically you should get the Height option.

Then you can go to the properties inspector on the right and set a number for how high you would like. Text is normally around 12pt so I would go with about 30pt or more for the hight of a button. Then add a constraint for spacing between them and leading and trailing to the containing view or you could give them a standard width and center them in the view. Which ever fits best for you.

Edit:

You should also adjust the bubble size calculation. It can be found in the JSQMessagesBubblesSizeCalculator class. Eg: In the

 - (CGSize)messageBubbleSizeForMessageData {
 if([messageData isOptionMessage]){ 
  // add button height also (In this case i have set constant 200. But we have to calculate the actual button heights instead) 
     finalSize = CGSizeMake(finalWidth, stringSize.height + verticalInsets + 200)
  } else { 
       finalSize = CGSizeMake(finalWidth, stringSize.height + verticalInsets)
  }
}

Let me know if you need any more help and keep up the good work. 👍🏼 🚜