More screenshots available at CocoaControls

See the website for the list of features.

• JSQSystemSoundPlayer

• iOS 7.0+
• ARC

Need support for iOS 6? You shouldn't. But, there's a branch for that!

git checkout iOS6_support_stable

Note: the iOS6_support_stable branch does not include many of the latest hip and fancy features or fixes

# For latest release in cocoapods
pod 'JSQMessagesViewController'  

# Feeling adventurous? Get the latest on develop
pod 'JSQMessagesViewController', :git => 'https://github.com/jessesquires/JSQMessagesViewController.git', :branch => 'develop'

# For version 5.3.2
pod 'JSQMessagesViewController', :git => 'https://github.com/jessesquires/JSQMessagesViewController', :branch => 'version_5.3.2_patch'

# For iOS 6 support
pod 'JSMessagesViewController', :git => 'https://github.com/jessesquires/JSQMessagesViewController.git', :branch => 'iOS6_support_stable'

Otherwise, drag the JSQMessagesViewController/ folder to your project and install JSQSystemSoundPlayer.

NOTE:

This repo was formerly named MessagesTableViewController.

And this pod was formerly named JSMessagesViewController.

#import <JSQMessagesViewController/JSQMessages.h>    // import all the things

Read the blog post about the 6.0 release!

• Demo Project

  • There's a sweet demo project: JSQMessages.xcworkspace.
  • Run pod install first.

• Message Model

  • Your message model objects should conform to the JSQMessageData protocol.
  • However, you may use the provided JSQMessage class.

• Media Attachment Model

  • Your media attachment model objects should conform to the JSQMessageMediaData protocol.
  • However, you may use the provided classes: JSQPhotoMediaItem, JSQLocationMediaItem, JSQVideoMediaItem.
  • Creating your own custom media items is easy! Simply follow the pattern used by the built-in media types.
  • Also see JSQMessagesMediaViewBubbleImageMasker for masking your custom media views as message bubbles.

• Avatar Model

  • Your avatar model objects should conform to the JSQMessageAvatarImageDataSource protocol.
  • However, you may use the provided JSQMessagesAvatarImage class.
  • Also see JSQMessagesAvatarImageFactory for easily generating custom avatars.

• Message Bubble Model

  • Your message bubble model objects should conform to the JSQMessageBubbleImageDataSource protocol.
  • However, you may use the provided JSQMessagesBubbleImage class.
  • Also see JSQMessagesBubbleImageFactory and UIImage+JSQMessages.h for easily generating custom bubbles.

• View Controller

  • Subclass JSQMessagesViewController.
  • Implement the required methods in the JSQMessagesCollectionViewDataSource protocol.
  • Implement the required methods in the JSQMessagesCollectionViewDelegateFlowLayout protocol.
  • Set your senderId and senderDisplayName. These properties correspond to the methods found in JSQMessageData and determine which messages are incoming or outgoing.

• Customizing

  • The demo project is well-commented. Please use this as a guide.

Springy bubbles?

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    self.collectionView.collectionViewLayout.springinessEnabled = YES;
}

Remove avatars?

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.collectionView.collectionViewLayout.incomingAvatarViewSize = CGSizeZero;
    self.collectionView.collectionViewLayout.outgoingAvatarViewSize = CGSizeZero;
}

- (id<JSQMessageAvatarImageDataSource>)collectionView:(JSQMessagesCollectionView *)collectionView avatarImageDataForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return nil;
}

Customize your cells?

- (UICollectionViewCell *)collectionView:(JSQMessagesCollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    JSQMessagesCollectionViewCell *cell = (JSQMessagesCollectionViewCell *)[super collectionView:collectionView cellForItemAtIndexPath:indexPath];
    
    // Customize the shit out of this cell
    // See the docs for JSQMessagesCollectionViewCell
    
    return cell;
}

Customize your toolbar buttons?