JSQmessageviewcontroller: Bubbles without tails

Question

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:

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

Answer 1

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];

Swift:

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;
}

Swift:

override func collectionView(collectionView: JSQMessagesCollectionView!, layout collectionViewLayout: JSQMessagesCollectionViewFlowLayout!, heightForMessageBubbleTopLabelAtIndexPath indexPath: NSIndexPath!) -> CGFloat {
    return 20
}

Swift 3:

JSQMessagesBubbleImageFactory(bubble: UIImage.jsq_bubbleCompactTailless(), capInsets: .zero)

Answer 2

In Swift 3.0

JSQMessagesBubbleImageFactory(bubble: UIImage.jsq_bubbleCompactTailless(), capInsets: .zero)