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

Hey I answered that question. Let me see if I can help. Would you mind sharing what you have so far in the way of constraints or even sharing your code I could take a look and send you in the right direction — Dan Leonard, Mar 09 '17 at 19:59
@DanielLeonard Thank you very much for the detailed answer. I have set contains as you said. But still I have issue in setting constraints for the textview and bubble container view. I can share my code with you. How can I share it? Also, see the screen shot after i set the contains as you said — smartsanja, Mar 10 '17 at 02:22
@DanielLeonard Github repo: https://github.com/smartsanja/JSQMessageController_CustomCell — smartsanja, Mar 10 '17 at 02:34

Dan Leonard · Accepted Answer · 2017-03-14T18:07:31.570

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.

Thanks a lot for your help. I solved my issue. It was not with auto layout. I can modify the message bubble height in this class JSQMessagesBubblesSizeCalculator. — smartsanja, Mar 11 '17 at 05:50
Awesome I am glad you figured it out I would love to add it to the answer would you mind sharing the code that fixed it and I will add it to the answer. But great work. — Dan Leonard, Mar 11 '17 at 19:34
After set the constraints in the xib, you need to adjust the bubble height according to the contents eg: buttons. In the JSQMessagesBubblesSizeCalculator class there's method which calculate the bubble height based on the textView height. We need add the button heights to the calculation too. — smartsanja, Mar 12 '17 at 02:38
Eg: In the - (CGSize)messageBubbleSizeForMessageData method, we can set something like this. 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); } — smartsanja, Mar 12 '17 at 02:39

JSQMessagesViewController Custom Cell Auto layout Issue - IOS

1 Answers1