プログラミング初心者です。
JSQMessagesというチャットライブラリを使用しています。
チャット自体は通常通り表示されるのですが、
送信時間を表示するための変更が反映されておらず原因がわからないため、どなたかご教示いただけると幸いです。
*formatter.string(from: message.date)に、stringの値が入っていることは確認済みです。
【やりたいこと】
チャット内のメッセージ横に送信時間を表示させたい
【やったこと】
1)ChatViewControllerクラスで利用しているJSQMessagesのライブラリに入っているxibファイルをコピーし、CustomMessagesCollectionViewCellOutgoing.xibを作成
2)CustomMessagesCollectionViewCellOutgoingクラスを作成
3)UILabelをCustomMessagesCollectionViewCellOutgoing.xibファイル内に追加し、CustomMessagesCollectionViewCellOutgoingクラスに関連づけ
4)ChatViewControllerクラス内にxibをレジスター、タイムラベルを表示するためのコードを記述
[ChatViewControllerクラス]
swift3.0
1import UIKit 2import Firebase 3import JSQMessagesViewController 4 5class ChatViewController: JSQMessagesViewController { 6 7 var sendText:String = "" //チャット相手のuidが入ってくる 8 var senderName:String = "" //チャット相手の名前が入ってくる 9 var recieverId:String! 10 var userId : String! 11 var nickName : String! 12 var titleName : String! 13 var roomKey : String! 14 var messages = [JSQMessage]() 15 var item = [NSDictionary]() 16 17 override func viewDidLoad() { 18 super.viewDidLoad() 19 let outgoingNib = UINib(nibName: "CustomMessagesCollectionViewCellOutgoing", bundle: nil) 20 self.collectionView!.register(outgoingNib, forCellWithReuseIdentifier: "customMessagesOutgoing") 21 22 let incomingNib = UINib(nibName: "CustomeMessageCollectionViewCellIncoming", bundle: nil) 23 self.collectionView!.register(incomingNib, forCellWithReuseIdentifier: "customMessagesIncoming") 24 25 26 recieverId = sendText 27 let ref = Database.database().reference() 28 29 userId = Auth.auth().currentUser?.uid 30 self.senderDisplayName = "" 31 senderId = userId 32 33 //既に相手のチャットが存在する場合はそのidを使う 34 ref.child("chat").child(userId!).child(recieverId!).observeSingleEvent(of: .value, with: { (snap) in 35 36 if snap.exists() { 37 38 let value = snap.value as? NSDictionary 39 self.roomKey = value?["roomkey"] as? String ?? "" 40 41 }else{ 42 43 self.roomKey = ref.child("chat").child(self.userId!).child(self.recieverId!).childByAutoId().key 44 45 //チャットがない場合、各ユーザーにチャットのroomKeyを登録する 46 let room_information = [ "date": [".sv": "timestamp"],"roomkey":self.roomKey, "members":[self.userId!,self.recieverId!] ] as [String : Any] 47 48 let childUpdates = [ 49 "/chat/(self.userId!)/(self.recieverId!)/": room_information, 50 "/chat/(self.recieverId!)/(self.userId!)/": room_information 51 ] 52 ref.updateChildValues(childUpdates) 53 } 54 55 //messageを取得 56 ref.child("chat-message").child(self.roomKey!).observe(.value, with: { snap in 57 58 guard let posts = dic["messages"] as? Dictionary<String, Dictionary<String, AnyObject>> else { 59 return 60 } 61 // keyとdateが入ったタプルを作る 62 var keyValueArray: [(String, Int)] = [] 63 for (key, value) in posts { 64 keyValueArray.append((key: key, date: value["date"] as? Int ?? 0)) 65 } 66 keyValueArray.sort{$0.1 < $1.1} // タプルの中のdate でソートしてタプルの順番を揃える(配列で) これでkeyが順番通りになる 67 // messagesを再構成 68 var preMessages = [JSQMessage]() 69 for sortedTuple in keyValueArray { 70 for (key, value) in posts { 71 if key == sortedTuple.0 { // 揃えた順番通りにメッセージを作成 72 let senderId = value["senderId"] as! String! 73 let text = value["text"] as! String! 74 let displayName = value["displayName"] as! String! 75 preMessages.append(JSQMessage(senderId: senderId, displayName: displayName, text: text)) 76 } 77 } 78 } 79 self.messages = preMessages 80 self.collectionView.reloadData() 81 self.hideIndicator() 82 }) 83 84 }) { (error) in 85 86 87 } 88 automaticallyScrollsToMostRecentMessage = true 89 } 90 91 92 override func collectionView(_ collectionView: JSQMessagesCollectionView!, messageDataForItemAt indexPath: IndexPath!) -> JSQMessageData! { 93 return messages[indexPath.row] 94 } 95 96 97 98 //吹き出しの横にtimeLabelを追加 99 let formatter = DateFormatter() 100 formatter.dateFormat = "HH:mm" 101 let message = self.messages[indexPath.item] 102 if message.senderId == self.senderId { 103 //let cel = super.collectionView(collectionView, cellForItemAt: indexPath) as! CustomMessagesCollectionViewCellOutgoing 104 let cel = collectionView.dequeueReusableCell(withReuseIdentifier: "customMessagesOutgoing", for: indexPath) as! CustomMessagesCollectionViewCellOutgoing 105 106 cel.timeLabel.text = formatter.string(from: message.date) 107 108 } else { 109 //let cel = super.collectionView(collectionView, cellForItemAt: indexPath) as! CustomeMessageCollectionViewCellIncoming 110 let cel = collectionView.dequeueReusableCell(withReuseIdentifier: "customMessagesIncoming", for: indexPath) as! CustomeMessageCollectionViewCellIncoming 111 112 cel.timeLabel.text = formatter.string(from: message.date) 113 } 114 return cell 115 } 116 117 118 override func didPressSend(_ button: UIButton!, withMessageText text: String!, senderId: String!, senderDisplayName: String!, date: Date!) { 119 120 inputToolbar.contentView.textView.text = "" 121 122 //キーボードを閉じる 123 self.view.endEditing(true) 124 125 let ref = Database.database().reference() 126 let key = ref.child("chat-message").child(self.roomKey).childByAutoId().key 127 let post = ["senderId": self.userId, 128 "displayName": nickName, 129 "text": text, 130 "date": [".sv": "timestamp"] 131 ] as [String : Any] 132 133 let childUpdates = ["/chat-message/(roomKey!)/messages/(key)/": post] 134 ref.updateChildValues(childUpdates) 135 136 } 137 138 override func didReceiveMemoryWarning() { 139 super.didReceiveMemoryWarning() 140 } 141}
[CustomMessagesCollectionViewCellOutgoingクラス]
import JSQMessagesViewController import UIKit class CustomMessagesCollectionViewCellOutgoing: JSQMessagesCollectionViewCellOutgoing { @IBOutlet weak var timeLabel: UILabel! }
あなたの回答
tips
プレビュー