Patrick Klitzke Patrick Klitzke - 1 year ago 116
iOS Question

JSQmessageviewcontroller: Bubbles without tails

I am using the JSQmessageviewcontroller, but i want the bubbles to have no tail, just to be rounded rectangles, is this possible? I currently do something like:

JSQMessagesBubbleImageFactory *bubbleFactory = [[JSQMessagesBubbleImageFactory alloc] init];
self.outgoingMessageBubble = [bubbleFactory incomingMessagesBubbleImageWithColor:[UIColor colorWithRed:0.949 green:0.949 blue:0.949 alpha:1]];

I would like it to look something like:

enter image description here

Also is there a way to adjust the distances between the two bubble?

Answer Source

Ya what you want to do is make pass the tailless image into your JSQMessagesBubbleImageFactory for

Objective C:

JSQMessagesBubbleImageFactory *bubbleFactoryOutline = [[JSQMessagesBubbleImageFactory alloc] initWithBubbleImage:[UIImage jsq_bubbleRegularStrokedImage] capInsets:UIEdgeInsetsZero];


JSQMessagesBubbleImageFactory(bubbleImage: UIImage.jsq_bubbleCompactTaillessImage(), capInsets: UIEdgeInsetsZero). 

As for making the distance between messages you just need to changed the height of the upper label objective C:

(CGFloat)collectionView:(JSQMessagesCollectionView *)collectionView
               layout:(JSQMessagesCollectionViewFlowLayout *)collectionViewLayout heightForMessageBubbleTopLabelAtIndexPath:(NSIndexPath *)indexPath
    return 0.0f;


override func collectionView(collectionView: JSQMessagesCollectionView!, layout collectionViewLayout: JSQMessagesCollectionViewFlowLayout!, heightForMessageBubbleTopLabelAtIndexPath indexPath: NSIndexPath!) -> CGFloat {
    return 20
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download