More screenshots available at CocoaControls

Features

See the website for the list of features.

Dependencies

• JSQSystemSoundPlayer

Requirements

• iOS 7.0+
• ARC

Need support for iOS 6? You shouldn't. But, there's a branch for that!Note: This will not be around much longer!

$ git checkout iOS6_support_stable

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

Installation

From CocoaPods:

# For latest release in cocoapodspod'JSQMessagesViewController'# Feeling adventurous? Get the latest on developpod'JSQMessagesViewController',:git=>'https://github.com/jessesquires/JSQMessagesViewController.git',:branch=>'develop'# For version 5.3.2pod'JSQMessagesViewController',:git=>'https://github.com/jessesquires/JSQMessagesViewController',:branch=>'version_5.3.2_patch'# For iOS 6 supportpod'JSMessagesViewController',:git=>'https://github.com/jessesquires/JSQMessagesViewController.git',:branch=>'iOS6_support_stable'

Without CocoaPods:

1. Why aren't you using CocoaPods?
2. Drag the JSQMessagesViewController/ folder to your project and install JSQSystemSoundPlayer.

NOTE:

This repo was formerly named MessagesTableViewController.

And this pod was formerly named JSMessagesViewController.

Getting Started

#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.
  • Firebase also has a sweet demo project, and it's in Swift!

• 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.

Quick Tips

Springy bubbles?

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

Remove avatars?

- (void)viewDidLoad
{
[superviewDidLoad];
self.collectionView.collectionViewLayout.incomingAvatarViewSize = CGSizeZero;
self.collectionView.collectionViewLayout.outgoingAvatarViewSize = CGSizeZero;
}
- (id<JSQMessageAvatarImageDataSource>)collectionView:(JSQMessagesCollectionView *)collectionView avatarImageDataForItemAtIndexPath:(NSIndexPath *)indexPath
{
returnnil;
}

Customize your cells?

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

Customize your toolbar buttons?

- (void)viewDidLoad
{
[superviewDidLoad];
// This button will call the `didPressAccessoryButton:` selector on your JSQMessagesViewController subclass
self.inputToolbar.contentView.leftBarButtonItem = /* custom button or nil to remove */// This button will call the `didPressSendButton:` selector on your JSQMessagesViewController subclass
self.inputToolbar.contentView.rightBarButtonItem = /* custom button or nil to remove */// Swap buttons, move send button to the LEFT side and the attachment button to the RIGHT// For RTL language support
self.inputToolbar.contentView.leftBarButtonItem = [JSQMessagesToolbarButtonFactory defaultSendButtonItem];
self.inputToolbar.contentView.rightBarButtonItem = [JSQMessagesToolbarButtonFactory defaultAccessoryButtonItem];
// The library will call the correct selector for each button, based on this value
self.inputToolbar.sendButtonOnRight = NO;
}

Questions & Help

There's a label for that. Before asking a question, see if it has already been answered.

Migrating from v5.x to v6.x

If you are upgrading from v5.x to v6.x, see the 6.0 release notes for details about API changes.

Documentation

Read the fucking docs, available here via @CocoaDocs.

Contribute

Please follow these sweet contribution guidelines.

Donate

Support the development of this freeopen-source library!

Donations made via Square Cash

Send $5Just saying thanks. Here's a coffee! ☕

Send $10This library is great. Lunch is on me! 🍜

Send $25This totally saved me time. Go get a nice dinner! 🍴

Send $50I love this library. I want new features! 👏

Send $100I really want to support this project! 🎉

>*You can also send donations via [PayPal](https://www.paypal.com) to jesse.squires.developer@gmail.com*

Credits

Created by @jesse_squires, a programming-motherfucker.

• Assets extracted using @0xced / iOS-Artwork-Extractor.
• Originally inspired by @soffes / SSMessagingViewController.
• Many thanks to the contributors of this project.

About

I initially developed this library to use in Hemoglobe for private messages between users.

As it turns out, messaging is something that iOS devs and users really want. Messaging of any kind has turned out to be an increasingly popular mobile app feature in all sorts of contexts and for all sorts of reasons. Thus, I am supporting this project in my free time and have added features way beyond what Hemoglobe ever needed.

Feel free to read my blog and check out my work at Hexed Bits.

Apps using this library

• Hemoglobe
• PocketSuite
• Signal
• ClassDojo
• Schools App
• ChatSecure
• Kytt
• Spark Social
• Spabbit
• Elodie
• Instaply
• Loopse
• Oxwall Messenger
• FourChat
• vCinity
• Quick Text Message
• Libraries for developers
• Buhz|Hyve
• Ringring.io
• gDecide
• AwesomeChat
• ParseChat
• Jib
• Onvolo
• EVCloudKitDao
• Fluky Chat
• VillageUnity
• Pine
• NotificationChat
• RealtimeChat
• Your app here

License

JSQMessagesViewController is released under an MIT License. See LICENSE for details.

Copyright © 2014 Jesse Squires.

Please provide attribution, it is greatly appreciated.