Platformsios 9.0, requires ARC
DependenciesQuickBlox, TTTAttributedLabel, SDWebImage, FFCircularProgressView
Authors, ,


An elegant ready-to-go chat view controller for iOS chat applications that use Quickblox communication backend.


  • Ready-to-go chat view controller with a set of cells.
  • Automatic cell size calculation.
  • UI customization for chat cells.
  • Flexibility in improving and extending functionality.
  • Easy to connect with Quickblox.
  • Optimized and performant.
  • Supports portrait and landscape orientations.
  • Auto Layout inside.


Chat View Controller


  • iOS 8.0+
  • ARC
  • Xcode 6+
  • Quickblox SDK 2.0+
  • TTTAttributedLabel
  • SDWebImage



pod 'QMChatViewController'


  • DragQMChatViewController folder to your project folder and link to the appropriate target.

  • Install dependencies.


Getting started

An example is included in the repository. Try it out to see how chat view controller works.

Steps to add QMChatViewController to Your app:

  1. Create a subclass of QMChatViewController. You could create it both from code and Interface Builder.
  2. Open your subclass of QMChatViewController and do the following in viewDidLoad method:

    • Configure chat sender ID and display name:
    self.senderID = 2000;
    self.senderDisplayName = @"user1";
    • Insert messages using corresponding methods:
    [self.chatDataSource addMessages:<array of messages>];
  3. Handle message sending.

    - (void)didPressSendButton:(UIButton *)button
               withMessageText:(NSString *)text
             senderDisplayName:(NSString *)senderDisplayName
                          date:(NSDate *)date {
        // Add sending message - for example:
        QBChatMessage *message = [QBChatMessage message];
        message.text = text;
        message.senderID = senderId;
        QBChatAttachment *attacment = [[QBChatAttachment alloc] init];
        message.attachments = @[attacment];
        [self.chatDataSource addMessage:message];
        [self finishSendingMessageAnimated:YES];
        // Save message to your cache/memory storage.                     
        // Send message using Quickblox SDK
  4. Return cell view classes specific to chat message:

    - (Class)viewClassForItem:(QBChatMessage *)item {
        // Cell class for message
        if (item.senderID != self.senderID) {
            return [QMChatIncomingCell class];
        else {
            return [QMChatOutgoingCell class];
        return nil;
  5. Calculate size of cell and minimum width:

    - (CGFloat)collectionView:(QMChatCollectionView *)collectionView minWidthAtIndexPath:(NSIndexPath *)indexPath {
        QBChatMessage *item = [self.chatDataSource messageForIndexPath:indexPath];
        NSAttributedString *attributedString = item.senderID == self.senderID ?
        [self bottomLabelAttributedStringForItem:item] : [self topLabelAttributedStringForItem:item];
        CGSize size = [TTTAttributedLabel sizeThatFitsAttributedString:attributedString
                                                       withConstraints:CGSizeMake(1000, 10000)
        return size.width;
  6. Top, bottom and text labels.

    - (NSAttributedString *)attributedStringForItem:(QBChatMessage *)messageItem {
        UIColor *textColor = [messageItem senderID] == self.senderID ?
        [UIColor whiteColor] : [UIColor colorWithWhite:0.290 alpha:1.000];
        UIFont *font = [UIFont fontWithName:@"Helvetica" size:15];
        NSDictionary *attributes = @{NSForegroundColorAttributeName:textColor,
        NSMutableAttributedString *attrStr =
        [[NSMutableAttributedString alloc] initWithString:messageItem.text
        return attrStr;
    - (NSAttributedString *)topLabelAttributedStringForItem:(QBChatMessage *)messageItem {
        if (messageItem.senderID == self.senderID) {
            return nil;
        UIFont *font = [UIFont fontWithName:@"Helvetica" size:14];
        UIColor *textColor = [UIColor colorWithRed:0.184 green:0.467 blue:0.733 alpha:1.000];
        NSDictionary *attributes = @{NSForegroundColorAttributeName:textColor,
        NSMutableAttributedString *attrStr =
        [[NSMutableAttributedString alloc] initWithString:@"nickname"
        return attrStr;
    - (NSAttributedString *)bottomLabelAttributedStringForItem:(QBChatMessage *)messageItem {
        UIFont *font = [UIFont fontWithName:@"Helvetica" size:12];
        UIColor *textColor = [messageItem senderID] == self.senderID ?
        [UIColor colorWithWhite:1.000 alpha:0.510] : [UIColor colorWithWhite:0.000 alpha:0.490];
        NSDictionary *attributes = @{NSForegroundColorAttributeName:textColor,
        NSString *dateStr = @"10:20";
        NSMutableAttributedString *attrStr =
        [[NSMutableAttributedString alloc] initWithString:dateStr
        return attrStr;
  7. Modifying collection chat cell attributes without changing constraints:

    struct QMChatLayoutModel {
        CGSize avatarSize;
        CGSize containerSize;
        UIEdgeInsets containerInsets;
        CGFloat topLabelHeight;
        CGFloat bottomLabelHeight;
        CGSize staticContainerSize;
        CGFloat maxWidthMarginSpace;
    typedef struct QMChatLayoutModel QMChatCellLayoutModel;
    • size of the avatar image view
    • message view container size
    • top label height
    • bottom label height
    • static size of container view
    • margin space between message and screen end

    You can modify this attributes in this method:

    - (QMChatCellLayoutModel)collectionView:(QMChatCollectionView *)collectionView layoutModelAtIndexPath:(NSIndexPath *)indexPath {
        QMChatCellLayoutModel layoutModel = [super collectionView:collectionView layoutModelAtIndexPath:indexPath];
        //Update attributes here ...
        return layoutModel;

    So if you want to hide top label or bottom label you just need to set their height to 0.


QMChatViewController supports image attachment cell messages. QMChatAttachmentIncomingCell is used for incoming attachments, QMChatAttachmentOutgoingCell is used for outgoing attachments. Both of them have progress label to display loading progress. XIB’s are also included.

Chat data source

QMChatViewController contains its data source manager called QMChatDataSource. It has implementation of all methods, which you need to work with QMChatViewController.
This class should be used to add, update and delete messages from data source. QMChatDataSource has delegate, which called whenever data source were modified.

For more information on methods and its usage check out our inline doc in QMChatDataSource.h.

Questions & Help

  • You could create an issue on GitHub if you are experiencing any problems. We will be happy to help you.
  • Or you can ask a ‘quickblox’ tagged question on StackOverflow


Inline code documentation available.



Latest podspec

    "name": "QMChatViewController",
    "version": "0.6.6",
    "summary": "An elegant ready-to-go chat view controller for iOS chat applications that use Quickblox communication backend.",
    "description": "* Ready-to-go chat view controller with a set of cells.n* Automatic cell size calculation.n* UI customisation for chat cells.n* Flexibility in improving and extending functionality.n* Easy to connect with Quickblox.n* Optimised and performant.n* Supports portrait and landscape orientations.n* Auto Layout inside.",
    "homepage": "",
    "license": {
        "type": "BSD",
        "file": "LICENSE"
    "authors": {
        "Andrey Ivanov": "[email protected]",
        "Vitaliy Gorbachov": "[email protected]",
        "Vitaliy Gurkovsky": "[email protected]"
    "platforms": {
        "ios": "9.0"
    "source": {
        "git": "",
        "tag": "0.6.6"
    "source_files": "QMChatViewController/QMChatViewController.{h,m}",
    "resource_bundles": {
        "QMChatViewController": [
    "resources": "QMChatViewController/**/*.xcassets",
    "requires_arc": true,
    "xcconfig": {
    "prefix_header_contents": "#import ",
    "dependencies": {
        "QuickBlox": [],
        "TTTAttributedLabel": [],
        "SDWebImage": [],
        "FFCircularProgressView": []
    "subspecs": [
            "name": "Categories",
            "source_files": "QMChatViewController/Categories/*.{h,m}"
            "name": "Utils",
            "dependencies": {
                "QMChatViewController/Categories": []
            "source_files": "QMChatViewController/Utils/**/*.{h,m}"
            "name": "QMChatLocationSnapshotter",
            "dependencies": {
                "QMChatViewController/Utils": []
            "source_files": "QMChatViewController/QMChatLocationSnapshotter/*.{h,m}"
            "name": "QMChatDataSource",
            "dependencies": {
                "QMChatViewController/Utils": []
            "source_files": "QMChatViewController/QMChatDataSource/**/*.{h,m}"
            "name": "Protocols",
            "source_files": "QMChatViewController/Protocols/*.{h}"
            "name": "Views",
            "dependencies": {
                "QMChatViewController/Categories": [],
                "QMChatViewController/Protocols": [],
                "QMChatViewController/Utils": []
            "source_files": "QMChatViewController/Views/**/*.{h,m}"

Pin It on Pinterest

Share This