JSQMessagesViewController消息气泡对齐不规则

时间:2015-08-04 13:25:20

标签: ios swift xcode6 jsqmessagesviewcontroller

我正在使用JSQMessagesViewController开发应用。但是问题是消息气泡在collectionView中对齐不规则的顺序。

这是一个截图

enter image description here

以下是代码:

import UIKit

class mDetailContainerViewController: JSQMessagesViewController, JSQMessagesCollectionViewDelegateFlowLayout{


    var userName = ""
    var messages = [JSQMessage]()
    let incomingBubble = JSQMessagesBubbleImageFactory().incomingMessagesBubbleImageWithColor(UIColor.lightGrayColor())
    let outgoingBubble = JSQMessagesBubbleImageFactory().incomingMessagesBubbleImageWithColor(UIColor.greenColor())

    override func viewDidLoad() {
        super.viewDidLoad()

        self.userName = "iPhone"

        for i in 1...10{

            var sender =  (i%2 == 0) ? "Syncano" : self.userName
            var message = JSQMessage(senderId: sender, displayName: sender, text: "Text")
            self.messages += [message]


        }

        self.collectionView.reloadData()
        self.senderDisplayName = self.userName
        self.senderId = self.userName
        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

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

    override func collectionView(collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageBubbleImageDataSource! {
        var data = self.messages[indexPath.row]
        if (data.senderId == self.senderId){

            return self.outgoingBubble

        }else{

            return self.incomingBubble

        }
    }

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

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

    override func didPressSendButton(button: UIButton!, withMessageText text: String!, senderId: String!, senderDisplayName: String!, date: NSDate!) {
        var message = JSQMessage(senderId: senderId, displayName: senderDisplayName, text: text)
        messages += [message]
        self.finishSendingMessage()
    }

    override func didPressAccessoryButton(sender: UIButton!) {

    }

我在互联网上搜索了一下解决方案,但所有说明都很复杂。我没弄明白什么。此外,我不确定我找到了解决方案。如果有人会简单解释解决方案,我会很高兴。

注意:JSQMessagesViewController显示在容器视图中。

最后,如何使用本地化更改发送按钮标题和文本字段占位符。

感谢。

4 个答案:

答案 0 :(得分:2)

我不熟悉这个SDK,但我认为这是因为这两行

let incomingBubble = JSQMessagesBubbleImageFactory().incomingMessagesBubbleImageWithColor(UIColor.lightGrayColor())
let outgoingBubble = JSQMessagesBubbleImageFactory().incomingMessagesBubbleImageWithColor(UIColor.greenColor())

incomingMessagesBubbleImageWithColor。将outgoingBubble设置为JSQMessagesBubbleImageFactory().outgoingMessagesBubbleImageWithColor(如果存在)

我之前从未使用过这个消息类,但我相信你对绿色文本的对齐问题可能会被解决...

outgoingBubble.textLabel.textAlignment = NSTextAlignment.Center

答案 1 :(得分:2)

要修复气泡位置,请使用此代码删除头像图像;

self.collectionView.collectionViewLayout.incomingAvatarViewSize = CGSizeZero
self.collectionView.collectionViewLayout.outgoingAvatarViewSize = CGSizeZero

答案 2 :(得分:1)

对于将来遇到此问题的人,请检查您的代码是否如下所示:

override func collectionView(collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageBubbleImageDataSource! {

    let data = messages[indexPath.row]

    if data.senderId == currentUser.objectId! {
       return incomingBubble
    } else {
        return outgoingBubble
    }
}

它应该是这样的:

override func collectionView(collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageBubbleImageDataSource! {

    let data = messages[indexPath.row]

    if data.senderId == PFUser.currentUser()!.objectId! {
        return outgoingBubble
    } else {
        return incomingBubble
    }
}

为我修好了!

答案 3 :(得分:1)

Swift 3

针对您将文本置于气泡中心的特定问题:

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = super.collectionView(collectionView, cellForItemAt: indexPath) as! JSQMessagesCollectionViewCell

    cell.textView.textAlignment = .center

    return cell
}