Setting the minimum width for some bubbles
I was wondering what was the correct approach for setting the minimum width for some bubbles. I tried to override applyLayoutAttributes: in my custom cell, but I need access to my data source to find out which cell should have the minimum width. I searched for messageBubbleLeftRightMargin in cellForItemAtIndexPath: but no results. Any pointers would be great
EDIT
There is a flag in my post model (which matches) that tells me if the bubble should have a minimum width
In my custom cell, I can override the custom layout, but I don’t have access to the data source, so I don’t have access to that flags
-(void)applyLayoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes{
JSQMessagesCollectionViewLayoutAttributes *customAttributes = (JSQMessagesCollectionViewLayoutAttributes *)layoutAttributes;
// I need access to my <JSQMessageData> for the condition
if (condition) {
if(customAttributes.messageBubbleContainerViewWidth <175){
customAttributes.messageBubbleContainerViewWidth = 175;
}
}
[super applyLayoutAttributes:customAttributes];
}
I also tried in my JSQMessagesViewController subclass to access the constraint on the left, to no avail
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
/**
* Override point for customizing cells
*/
JSQMessagesCollectionViewCell *cell = (JSQMessagesCollectionViewCell *)[super collectionView:collectionView cellForItemAtIndexPath:indexPath];
BLMessage *message = [self.visibleMessagesArray objectAtIndex:indexPath.item];
JSQMessagesCollectionViewLayoutAttributes *customAttributes = [JSQMessagesCollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
if(message.isEphemeral){
//random number to see if it had an effect
self.collectionView.collectionViewLayout.messageBubbleLeftRightMargin = 200;
//I also tried modifying the customAttributes
//customAttributes.messageBubbleContainerViewWidth = 175;
}
return cell;
}
I am a bit new to UICollectionViewFlowLayout and maybe I am missing some basic concepts
source to share
Okay, so I found out what happened. I didn't apply the new layout to the cell, so my cellForItemAtIndexPath ended up like this:
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
/**
* Override point for customizing cells
*/
JSQMessagesCollectionViewCell *cell = (JSQMessagesCollectionViewCell *)[super collectionView:collectionView cellForItemAtIndexPath:indexPath];
BLMessage *message = [self.visibleMessagesArray objectAtIndex:indexPath.item];
JSQMessagesCollectionViewLayoutAttributes *customAttributes = (JSQMessagesCollectionViewLayoutAttributes *)[self.collectionView layoutAttributesForItemAtIndexPath:indexPath];
if(message.isEphemeral){
//I also tried modifying the customAttributes
customAttributes.messageBubbleContainerViewWidth = 175;
[cell applyLayoutAttributes: customAttributes];
}
return cell;
}
------------- EDIT ------------
My answer used to have some side effects, it is not recommended to call applyLayoutAttributes:
inside yours collectionView:cellForItemAtIndexPath:
.
The correct way to do this is by subclassing JSQMessagesCollectionViewFlowLayout
CustomCollectionViewFlowLayout.h
#import "JSQMessagesCollectionViewFlowLayout.h"
@interface CustomCollectionViewFlowLayout : JSQMessagesCollectionViewFlowLayout
@property (strong, nonatomic) UIImageView *incomingBubbleMask;
@end
CustomCollectionViewFlowLayout.m
#import "CustomCollectionViewFlowLayout.h"
#import "JSQMessage.h"
#import "JSQMessagesCollectionView.h"
#import "JSQMessagesCollectionViewCell.h"
#import "JSQMessagesCollectionViewLayoutAttributes.h"
#import "JSQMessagesCollectionViewFlowLayoutInvalidationContext.h"
#import "UIImage+JSQMessages.h"
@implementation CustomCollectionViewFlowLayout
+ (Class)layoutAttributesClass
{
return [JSQMessagesCollectionViewLayoutAttributes class];
}
- (CGSize)messageBubbleSizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
CGSize superSize = [super messageBubbleSizeForItemAtIndexPath:indexPath];
JSQMessage *currentMessage = (JSQMessage *)[self.collectionView.dataSource collectionView:self.collectionView messageDataForItemAtIndexPath:indexPath];
/*********** Setting size **************/
//check if outgoing, you can import your Session Manager to check your user identifier
if ([currentMessage.senderId isEqualToString:@"me") {
superSize = CGSizeMake(175, superSize.height);
}
//do whatever other checks and setup your width/height accordingly
return superSize;
}
@end
Don't forget to set your own layout in the subclass JSQMessagesViewController
, #import "CustomCollectionViewFlowLayout.h"
and viewDidLoad
add:self.collectionView.collectionViewLayout = [[CustomCollectionViewFlowLayout alloc] init];
source to share