【Swift】JSQMessagesViewControllerで簡単にチャットUIを作ってみる

JSQMessagesViewControllerというチャットライブラリを使ってチャットインターフェイスを作る方法です。

github.com

ライブラリはCocoaPodsでインストールします。

use_frameworks!

pod 'JSQMessagesViewController'

チャット画面の表示は以下の通りです。
JSQMessagesViewControllerクラスをオーバーライドしたクラスを作り、そこに処理を追加する事でチャット画面が表示されます。

import UIKit
import JSQMessagesViewController

class ViewController: JSQMessagesViewController {
    var messages: [JSQMessage] = [
        JSQMessage(senderId: "Dummy",  displayName: "A", text: "こんにちは!"),
        JSQMessage(senderId: "Dummy2", displayName: "B", text: "こんにちは♪")
    ]

    override func viewDidLoad() {
        super.viewDidLoad()

        senderDisplayName = "A"
        senderId = "Dummy"
    }

    override func collectionView(collectionView: JSQMessagesCollectionView!, messageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageData! {
        return messages[indexPath.row]
    }

    override func collectionView(collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageBubbleImageDataSource! {
        if messages[indexPath.row].senderId == senderId {
            return JSQMessagesBubbleImageFactory().outgoingMessagesBubbleImageWithColor(
                UIColor(red: 112/255, green: 192/255, blue:  75/255, alpha: 1))
        } else {
            return JSQMessagesBubbleImageFactory().incomingMessagesBubbleImageWithColor(
                UIColor(red: 229/255, green: 229/255, blue: 229/255, alpha: 1))
        }
    }

    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

        let cell = super.collectionView(collectionView, cellForItemAtIndexPath: indexPath) as? JSQMessagesCollectionViewCell
        if messages[indexPath.row].senderId == senderId {
            cell?.textView?.textColor = UIColor.whiteColor()
        } else {
            cell?.textView?.textColor = UIColor.darkGrayColor()
        }
        return cell!
    }

    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return messages.count
    }

    override func collectionView(collectionView: JSQMessagesCollectionView!, avatarImageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageAvatarImageDataSource! {

        return JSQMessagesAvatarImageFactory.avatarImageWithUserInitials(
            messages[indexPath.row].senderDisplayName,
            backgroundColor: UIColor.lightGrayColor(), textColor: UIColor.whiteColor(),
            font: UIFont.systemFontOfSize(10), diameter: 30)
    }
}

起動すると以下のような画面になります。

送信ボタン押下時のイベントはdidPressSendButtonで取得できます。
引数のtextにユーザーが入力した値が入ります。

public func didPressSendButton(button: UIButton!, withMessageText text: String!, senderId: String!, senderDisplayName: String!, date: NSDate!)

入力フォーム左側の画像添付のようなボタンを押下した時はdidPressAccessoryButtonメソッドが呼ばれます。

public func didPressAccessoryButton(sender: UIButton!)

チャットに画像を表示したい場合は、JSQMessageのInitializerにJSQPhotoMediaItemを渡します。

JSQMessage(senderId: "Dummy", displayName: "A", media: JSQPhotoMediaItem(image: UIImage(named: "sample")))

他にも位置情報を渡せるJSQLocationMediaItem、動画を渡せるJSQVideoMediaItem、音データを渡せるJSQAudioMediaItemなどがあるようです。