More screenshots available at CocoaControls
Features
See the website for the list of features.
Dependencies
Requirements
- iOS 7.0+
- ARC
Installation
From CocoaPods:
# 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'
Without CocoaPods:
- Why aren't you using CocoaPods?
- Drag the
JSQMessagesViewController/
folder to your project and installJSQSystemSoundPlayer
.
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!
- There's a sweet demo project:
-
Message Model
- Your message model objects should conform to the
JSQMessageData
protocol. - However, you may use the provided
JSQMessage
class.
- Your message model objects should conform to the
-
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.
- Your media attachment model objects should conform to the
-
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.
- Your avatar model objects should conform to the
-
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
andUIImage+JSQMessages.h
for easily generating custom bubbles.
- Your message bubble model objects should conform to the
-
View Controller
- Subclass
JSQMessagesViewController
. - Implement the required methods in the
JSQMessagesCollectionViewDataSource
protocol. - Implement the required methods in the
JSQMessagesCollectionViewDelegateFlowLayout
protocol. - Set your
senderId
andsenderDisplayName
. These properties correspond to the methods found inJSQMessageData
and determine which messages are incoming or outgoing.
- Subclass
-
Customizing
- The demo project is well-commented. Please use this as a guide.
Quick Tips
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?
- (void)viewDidLoad
{
[super viewDidLoad];
// 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.
NOTE: Please try to avoid emailing me with questions. I prefer to keep questions and their answers open-source.
Migrating between major versions
From 5.x to 6.x
See the 6.0 release notes for details about API changes.
From 6.x to 7.x
See the 7.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 free open-source library!
Donations made via Square Cash
Send $5 Just saying thanks. Here's a coffee! ☕
Send $10 This library is great. Lunch is on me! 🍜
Send $25 This totally saved me time. Go get a nice dinner! 🍴
Send $50 I love this library. I want new features! 👏
Send $100 I really want to support this project! 🎉
>*You can also send donations via [PayPal](https://www.paypal.com) to [email protected]*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
- Bryx 911
- 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.