JSQMessagesViewController消息气泡不规则alignment

我正在开发一个应用程序使用JSQMessagesViewController 。 但是有一个问题是消息气泡在collectionView中alignment不规则的顺序。

这里是一个截图

在这里输入图像说明

这里是代码:

 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!) { } 

我在网上search了一下这个解决scheme,但是所有的指令都很复杂。 我什么都没搞清楚 另外,我不确定是否find了解决办法。 如果有人会简单地解释解决scheme,我会很高兴。

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

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

谢谢。

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

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

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

而我从来没有使用过这个消息类,但我相信你的alignment问题与绿色文本可能会解决类似…

 outgoingBubble.textLabel.textAlignment = NSTextAlignment.Center 

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

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

对于将来遇到麻烦的任何人,请检查您的代码是否如下所示:

 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 } } 

为我修好了!

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 }