|
@@ -7,29 +7,368 @@
|
|
|
//
|
|
|
|
|
|
import UIKit
|
|
|
+import MessageKit
|
|
|
+import MapKit
|
|
|
|
|
|
-class ChatViewController: UIViewController {
|
|
|
+class ChatViewController: MessagesViewController {
|
|
|
|
|
|
+ var messageList: [Message] = [] {
|
|
|
+ didSet {
|
|
|
+ DispatchQueue.main.async {
|
|
|
+ self.messagesCollectionView.reloadData()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
override func viewDidLoad() {
|
|
|
super.viewDidLoad()
|
|
|
+
|
|
|
+ DispatchQueue.global(qos: .userInitiated).async {
|
|
|
+ SampleData.shared.getMessages(count: 10) { messages in
|
|
|
+ DispatchQueue.main.async {
|
|
|
+ self.messageList = messages
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ messagesCollectionView.messagesDataSource = self
|
|
|
+ messagesCollectionView.messagesLayoutDelegate = self
|
|
|
+ messagesCollectionView.messagesDisplayDelegate = self
|
|
|
+ messagesCollectionView.messageCellDelegate = self
|
|
|
+ messageInputBar.delegate = self
|
|
|
+ messageInputBar.sendButton.tintColor = UIColor(red: 69/255, green: 193/255, blue: 89/255, alpha: 1)
|
|
|
+ scrollsToBottomOnFirstLayout = true //default false
|
|
|
+ scrollsToBottomOnKeybordBeginsEditing = true // default false
|
|
|
+
|
|
|
+ navigationItem.rightBarButtonItem = UIBarButtonItem(image: UIImage(named: "ic_keyboard"),
|
|
|
+ style: .plain,
|
|
|
+ target: self,
|
|
|
+ action: #selector(handleKeyboardButton))
|
|
|
+ }
|
|
|
+
|
|
|
+ @objc func handleKeyboardButton() {
|
|
|
+
|
|
|
+ messageInputBar.inputTextView.resignFirstResponder()
|
|
|
+ let actionSheetController = UIAlertController(title: "Change Keyboard Style", message: nil, preferredStyle: .actionSheet)
|
|
|
+ let actions = [
|
|
|
+ UIAlertAction(title: "Slack", style: .default, handler: { _ in
|
|
|
+ DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 1, execute: {
|
|
|
+ self.slack()
|
|
|
+ })
|
|
|
+ }),
|
|
|
+ UIAlertAction(title: "iMessage", style: .default, handler: { _ in
|
|
|
+ DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 1, execute: {
|
|
|
+ self.iMessage()
|
|
|
+ })
|
|
|
+ }),
|
|
|
+ UIAlertAction(title: "Default", style: .default, handler: { _ in
|
|
|
+ DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 1, execute: {
|
|
|
+ self.defaultStyle()
|
|
|
+ })
|
|
|
+ }),
|
|
|
+ UIAlertAction(title: "Cancel", style: .cancel, handler: nil)
|
|
|
+ ]
|
|
|
+ actions.forEach { actionSheetController.addAction($0) }
|
|
|
+ actionSheetController.view.tintColor = UIColor(red: 69/255, green: 193/255, blue: 89/255, alpha: 1)
|
|
|
+ present(actionSheetController, animated: true, completion: nil)
|
|
|
+ }
|
|
|
+
|
|
|
+ // MARK: - Keyboard Style
|
|
|
+
|
|
|
+ func slack() {
|
|
|
+ defaultStyle()
|
|
|
+ messageInputBar.isTranslucent = false
|
|
|
+ messageInputBar.inputTextView.backgroundColor = .clear
|
|
|
+ messageInputBar.inputTextView.layer.borderWidth = 0
|
|
|
+ let items = [
|
|
|
+ makeButton(named: "ic_camera").onTextViewDidChange { button, textView in
|
|
|
+ button.isEnabled = textView.text.isEmpty
|
|
|
+ },
|
|
|
+ makeButton(named: "ic_at").onSelected {
|
|
|
+ $0.tintColor = UIColor(red: 69/255, green: 193/255, blue: 89/255, alpha: 1)
|
|
|
+ print("@ Selected")
|
|
|
+ },
|
|
|
+ makeButton(named: "ic_hashtag").onSelected {
|
|
|
+ $0.tintColor = UIColor(red: 69/255, green: 193/255, blue: 89/255, alpha: 1)
|
|
|
+ print("# Selected")
|
|
|
+ },
|
|
|
+ .flexibleSpace,
|
|
|
+ makeButton(named: "ic_library").onTextViewDidChange { button, textView in
|
|
|
+ button.tintColor = UIColor(red: 69/255, green: 193/255, blue: 89/255, alpha: 1)
|
|
|
+ button.isEnabled = textView.text.isEmpty
|
|
|
+ },
|
|
|
+ messageInputBar.sendButton
|
|
|
+ .configure {
|
|
|
+ $0.layer.cornerRadius = 8
|
|
|
+ $0.layer.borderWidth = 1.5
|
|
|
+ $0.layer.borderColor = $0.titleColor(for: .disabled)?.cgColor
|
|
|
+ $0.setTitleColor(.white, for: .normal)
|
|
|
+ $0.setTitleColor(.white, for: .highlighted)
|
|
|
+ $0.setSize(CGSize(width: 52, height: 30), animated: true)
|
|
|
+ }.onDisabled {
|
|
|
+ $0.layer.borderColor = $0.titleColor(for: .disabled)?.cgColor
|
|
|
+ $0.backgroundColor = .white
|
|
|
+ }.onEnabled {
|
|
|
+ $0.backgroundColor = UIColor(red: 69/255, green: 193/255, blue: 89/255, alpha: 1)
|
|
|
+ $0.layer.borderColor = UIColor.clear.cgColor
|
|
|
+ }.onSelected {
|
|
|
+ // We use a transform becuase changing the size would cause the other views to relayout
|
|
|
+ $0.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
|
|
|
+ }.onDeselected {
|
|
|
+ $0.transform = CGAffineTransform.identity
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ items.forEach { $0.tintColor = .lightGray }
|
|
|
+
|
|
|
+ // We can change the container insets if we want
|
|
|
+ messageInputBar.inputTextView.textContainerInset = UIEdgeInsets(top: 8, left: 0, bottom: 8, right: 0)
|
|
|
+ messageInputBar.inputTextView.placeholderLabelInsets = UIEdgeInsets(top: 8, left: 5, bottom: 8, right: 5)
|
|
|
+
|
|
|
+ // Since we moved the send button to the bottom stack lets set the right stack width to 0
|
|
|
+ messageInputBar.setRightStackViewWidthConstant(to: 0, animated: true)
|
|
|
+
|
|
|
+ // Finally set the items
|
|
|
+ messageInputBar.setStackViewItems(items, forStack: .bottom, animated: true)
|
|
|
+ }
|
|
|
+
|
|
|
+ func iMessage() {
|
|
|
+ defaultStyle()
|
|
|
+ messageInputBar.isTranslucent = false
|
|
|
+ messageInputBar.separatorLine.isHidden = true
|
|
|
+ messageInputBar.inputTextView.backgroundColor = UIColor(red: 245/255, green: 245/255, blue: 245/255, alpha: 1)
|
|
|
+ messageInputBar.inputTextView.placeholderTextColor = UIColor(red: 0.6, green: 0.6, blue: 0.6, alpha: 1)
|
|
|
+ messageInputBar.inputTextView.textContainerInset = UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 36)
|
|
|
+ messageInputBar.inputTextView.placeholderLabelInsets = UIEdgeInsets(top: 8, left: 20, bottom: 8, right: 36)
|
|
|
+ messageInputBar.inputTextView.layer.borderColor = UIColor(red: 200/255, green: 200/255, blue: 200/255, alpha: 1).cgColor
|
|
|
+ messageInputBar.inputTextView.layer.borderWidth = 1.0
|
|
|
+ messageInputBar.inputTextView.layer.cornerRadius = 16.0
|
|
|
+ messageInputBar.inputTextView.layer.masksToBounds = true
|
|
|
+ messageInputBar.inputTextView.scrollIndicatorInsets = UIEdgeInsets(top: 8, left: 0, bottom: 8, right: 0)
|
|
|
+ messageInputBar.setRightStackViewWidthConstant(to: 36, animated: true)
|
|
|
+ messageInputBar.setStackViewItems([messageInputBar.sendButton], forStack: .right, animated: true)
|
|
|
+ messageInputBar.sendButton.imageView?.backgroundColor = UIColor(red: 69/255, green: 193/255, blue: 89/255, alpha: 1)
|
|
|
+ messageInputBar.sendButton.contentEdgeInsets = UIEdgeInsets(top: 2, left: 2, bottom: 2, right: 2)
|
|
|
+ messageInputBar.sendButton.setSize(CGSize(width: 36, height: 36), animated: true)
|
|
|
+ messageInputBar.sendButton.image = #imageLiteral(resourceName: "ic_up")
|
|
|
+ messageInputBar.sendButton.title = nil
|
|
|
+ messageInputBar.sendButton.imageView?.layer.cornerRadius = 16
|
|
|
+ messageInputBar.sendButton.backgroundColor = .clear
|
|
|
+ messageInputBar.textViewPadding.right = -38
|
|
|
+ }
|
|
|
+
|
|
|
+ func defaultStyle() {
|
|
|
+ let newMessageInputBar = MessageInputBar()
|
|
|
+ newMessageInputBar.sendButton.tintColor = UIColor(red: 69/255, green: 193/255, blue: 89/255, alpha: 1)
|
|
|
+ newMessageInputBar.delegate = self
|
|
|
+ messageInputBar = newMessageInputBar
|
|
|
+ reloadInputViews()
|
|
|
+ }
|
|
|
+
|
|
|
+ // MARK: - Helpers
|
|
|
+
|
|
|
+ func makeButton(named: String) -> InputBarButtonItem {
|
|
|
+ return InputBarButtonItem()
|
|
|
+ .configure {
|
|
|
+ $0.spacing = .fixed(10)
|
|
|
+ $0.image = UIImage(named: named)?.withRenderingMode(.alwaysTemplate)
|
|
|
+ $0.setSize(CGSize(width: 30, height: 30), animated: true)
|
|
|
+ }.onSelected {
|
|
|
+ $0.tintColor = UIColor(red: 69/255, green: 193/255, blue: 89/255, alpha: 1)
|
|
|
+ }.onDeselected {
|
|
|
+ $0.tintColor = UIColor.lightGray
|
|
|
+ }.onTouchUpInside { _ in
|
|
|
+ print("Item Tapped")
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// MARK: - MessagesDataSource
|
|
|
|
|
|
- // Do any additional setup after loading the view.
|
|
|
+extension ChatViewController: MessagesDataSource {
|
|
|
+
|
|
|
+ func currentSender() -> Sender {
|
|
|
+ return SampleData.shared.currentSender
|
|
|
+ }
|
|
|
+
|
|
|
+ func numberOfMessages(in messagesCollectionView: MessagesCollectionView) -> Int {
|
|
|
+ return messageList.count
|
|
|
+ }
|
|
|
+
|
|
|
+ func messageForItem(at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> MessageType {
|
|
|
+ return messageList[indexPath.section]
|
|
|
+ }
|
|
|
+
|
|
|
+ func avatar(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> Avatar {
|
|
|
+ return SampleData.shared.getAvatarFor(sender: message.sender)
|
|
|
}
|
|
|
+
|
|
|
+ func cellTopLabelAttributedText(for message: MessageType, at indexPath: IndexPath) -> NSAttributedString? {
|
|
|
+ let name = message.sender.displayName
|
|
|
+ return NSAttributedString(string: name, attributes: [NSAttributedStringKey.font: UIFont.preferredFont(forTextStyle: .caption1)])
|
|
|
+ }
|
|
|
+
|
|
|
+ func cellBottomLabelAttributedText(for message: MessageType, at indexPath: IndexPath) -> NSAttributedString? {
|
|
|
+ let formatter = DateFormatter()
|
|
|
+ formatter.dateStyle = .medium
|
|
|
+ let dateString = formatter.string(from: message.sentDate)
|
|
|
+ return NSAttributedString(string: dateString, attributes: [NSAttributedStringKey.font: UIFont.preferredFont(forTextStyle: .caption2)])
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
|
|
|
- override func didReceiveMemoryWarning() {
|
|
|
- super.didReceiveMemoryWarning()
|
|
|
- // Dispose of any resources that can be recreated.
|
|
|
+// MARK: - MessagesDisplayDelegate
|
|
|
+
|
|
|
+extension ChatViewController: MessagesDisplayDelegate, TextMessageDisplayDelegate {
|
|
|
+
|
|
|
+ func backgroundColor(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> UIColor {
|
|
|
+ return isFromCurrentSender(message: message) ? UIColor(red: 69/255, green: 193/255, blue: 89/255, alpha: 1) : UIColor(red: 230/255, green: 230/255, blue: 230/255, alpha: 1)
|
|
|
+ }
|
|
|
+
|
|
|
+ func textColor(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> UIColor {
|
|
|
+ return isFromCurrentSender(message: message) ? .white : .darkText
|
|
|
+ }
|
|
|
+
|
|
|
+ func messageStyle(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> MessageStyle {
|
|
|
+ let corner: MessageStyle.TailCorner = isFromCurrentSender(message: message) ? .bottomRight : .bottomLeft
|
|
|
+ return .bubbleTail(corner, .curved)
|
|
|
+ // let configurationClosure = { (view: MessageContainerView) in}
|
|
|
+ // return .custom(configurationClosure)
|
|
|
}
|
|
|
|
|
|
+}
|
|
|
|
|
|
- /*
|
|
|
- // MARK: - Navigation
|
|
|
+// MARK: - MessagesLayoutDelegate
|
|
|
|
|
|
- // In a storyboard-based application, you will often want to do a little preparation before navigation
|
|
|
- override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
|
|
|
- // Get the new view controller using segue.destinationViewController.
|
|
|
- // Pass the selected object to the new view controller.
|
|
|
+extension ChatViewController: MessagesLayoutDelegate {
|
|
|
+
|
|
|
+ func messagePadding(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> UIEdgeInsets {
|
|
|
+ if isFromCurrentSender(message: message) {
|
|
|
+ return UIEdgeInsets(top: 0, left: 30, bottom: 0, right: 4)
|
|
|
+ } else {
|
|
|
+ return UIEdgeInsets(top: 0, left: 4, bottom: 0, right: 30)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ func cellTopLabelAlignment(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> LabelAlignment {
|
|
|
+ if isFromCurrentSender(message: message) {
|
|
|
+ return .messageTrailing(UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 10))
|
|
|
+ } else {
|
|
|
+ return .messageLeading(UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 0))
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ func cellBottomLabelAlignment(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> LabelAlignment {
|
|
|
+ if isFromCurrentSender(message: message) {
|
|
|
+ return .messageLeading(UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 0))
|
|
|
+ } else {
|
|
|
+ return .messageTrailing(UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 10))
|
|
|
+ }
|
|
|
}
|
|
|
- */
|
|
|
+
|
|
|
+ func avatarAlignment(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> AvatarAlignment {
|
|
|
+ return .messageBottom
|
|
|
+ }
|
|
|
+
|
|
|
+ func footerViewSize(for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> CGSize {
|
|
|
+
|
|
|
+ return CGSize(width: messagesCollectionView.bounds.width, height: 10)
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+// MARK: - LocationMessageLayoutDelegate
|
|
|
+
|
|
|
+extension ChatViewController: LocationMessageLayoutDelegate {
|
|
|
+
|
|
|
+ func heightForLocation(message: MessageType, at indexPath: IndexPath, with maxWidth: CGFloat, in messagesCollectionView: MessagesCollectionView) -> CGFloat {
|
|
|
+ return 200
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+// MARK: - MediaMessageLayoutDelegate
|
|
|
+
|
|
|
+extension ChatViewController: MediaMessageLayoutDelegate {}
|
|
|
+
|
|
|
+// MARK: - MessageCellDelegate
|
|
|
+
|
|
|
+extension ChatViewController: MessageCellDelegate {
|
|
|
+
|
|
|
+ func didTapAvatar<T>(in cell: MessageCollectionViewCell<T>) {
|
|
|
+ print("Avatar tapped")
|
|
|
+ }
|
|
|
+
|
|
|
+ func didTapMessage<T>(in cell: MessageCollectionViewCell<T>) {
|
|
|
+ print("Message tapped")
|
|
|
+ }
|
|
|
+
|
|
|
+ func didTapTopLabel<T>(in cell: MessageCollectionViewCell<T>) {
|
|
|
+ print("Top label tapped")
|
|
|
+ }
|
|
|
+
|
|
|
+ func didTapBottomLabel<T>(in cell: MessageCollectionViewCell<T>) {
|
|
|
+ print("Bottom label tapped")
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+// MARK: - MessageLabelDelegate
|
|
|
+
|
|
|
+extension ChatViewController: MessageLabelDelegate {
|
|
|
+
|
|
|
+ func didSelectAddress(_ addressComponents: [String : String]) {
|
|
|
+ print("Address Selected: \(addressComponents)")
|
|
|
+ }
|
|
|
+
|
|
|
+ func didSelectDate(_ date: Date) {
|
|
|
+ print("Date Selected: \(date)")
|
|
|
+ }
|
|
|
+
|
|
|
+ func didSelectPhoneNumber(_ phoneNumber: String) {
|
|
|
+ print("Phone Number Selected: \(phoneNumber)")
|
|
|
+ }
|
|
|
+
|
|
|
+ func didSelectURL(_ url: URL) {
|
|
|
+ print("URL Selected: \(url)")
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+// MARK: - LocationMessageDisplayDelegate
|
|
|
+
|
|
|
+extension ChatViewController: LocationMessageDisplayDelegate {
|
|
|
+
|
|
|
+ func annotationViewForLocation(message: MessageType, at indexPath: IndexPath, in messageCollectionView: MessagesCollectionView) -> MKAnnotationView? {
|
|
|
+ let annotationView = MKAnnotationView(annotation: nil, reuseIdentifier: nil)
|
|
|
+ let pinImage = #imageLiteral(resourceName: "ic_block_36pt").withRenderingMode(.alwaysTemplate)
|
|
|
+ annotationView.image = pinImage
|
|
|
+ annotationView.centerOffset = CGPoint(x: 0, y: -pinImage.size.height / 2)
|
|
|
+ return annotationView
|
|
|
+ }
|
|
|
+
|
|
|
+ func animationBlockForLocation(message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> ((UIImageView) -> Void)? {
|
|
|
+ return { view in
|
|
|
+ view.layer.transform = CATransform3DMakeScale(0, 0, 0)
|
|
|
+ view.alpha = 0.0
|
|
|
+ UIView.animate(withDuration: 0.6, delay: 0, usingSpringWithDamping: 0.9, initialSpringVelocity: 0, options: [], animations: {
|
|
|
+ view.layer.transform = CATransform3DIdentity
|
|
|
+ view.alpha = 1.0
|
|
|
+ }, completion: nil)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+// MARK: - MessageInputBarDelegate
|
|
|
+
|
|
|
+extension ChatViewController: MessageInputBarDelegate {
|
|
|
+
|
|
|
+ func messageInputBar(_ inputBar: MessageInputBar, didPressSendButtonWith text: String) {
|
|
|
+ messageList.append(Message(text: text, sender: currentSender(), messageId: UUID().uuidString, date: Date()))
|
|
|
+ inputBar.inputTextView.text = String()
|
|
|
+ messagesCollectionView.reloadData()
|
|
|
+ messagesCollectionView.scrollToBottom()
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
}
|