How to display a custom text when no message is displayed in JSQMessagesViewController?

Question

When I load the messages view using JSQMessagesViewController, a lot of times there are no messages, so I wanted to show a "There are no messages yet" message like in the middle or in the top of the view.

How can I do this?

Thanks

Answer 1

There could be other simpler ways to do this like hacking subviews of collection view or whatever but ultimately, I think you would want to implement system messages which would take a bit of time to get right but will definitely come in handy for cases like you mentioned and many other cases that you still don't know of but will come your way.

I'm using a C# Xamarin ported version of the library but the concept is similar. You could do something like this :

• in ViewDidLoad and after you retrieved your message check that if your messages array items count is zero then add a JSQMessage to your messages array with 'System' as the SenderDisplayName and the friendly message you want to display as part of the message text.
• in MessageBubbleImageDataForItemAtIndexPath check for messages with SenderDisplayName='System' and return null so you don't get a message bubble.
• Copy JSQMessagesCollectionViewCellIncoming.xib and its custom class and rename to something like JSQMessagesCollectionViewCellSystem.xib.

• Register that custom cell type in JSQMessagesCollectionView :

      this.RegisterNibForCell(JSQMessagesCollectionViewCellActions.Nib("JSQMessagesCollectionViewCellActions"),JSQMessagesCollectionViewCellActions.CellReuseIdentifier("JSQMessagesCollectionViewCellActions"));
      this.RegisterNibForCell(JSQMessagesCollectionViewCellActions.Nib("JSQMessagesCollectionViewCellActions"),JSQMessagesCollectionViewCellActions.MediaCellReuseIdentifier("JSQMessagesCollectionViewCellActions"));
  

• in ApplyLayoutAttributes method in JSQMessagesCollectionViewCell return CGSizeMake(0,0) for cell that are of type JSQMessagesCollectionViewCellSystem. something like this :

      if (this.IsKindOfClass (new ObjCRuntime.Class     ("JSQMessagesCollectionViewCellIncoming"))) {
          this.AvatarViewSize = customAttributes.IncomingAvatarViewSize;
      } else if (this.IsKindOfClass (new ObjCRuntime.Class ("JSQMessagesCollectionViewCellOutgoing"))) {
          this.AvatarViewSize = customAttributes.OutgoingAvatarViewSize;
      } else {
          this.AvatarViewSize = new CGSize (0, 0);
      }
  

• in CellForRowAtIndexPath inside JSQMessagesViewController you can do something like this to center the message :

      if (messageItem.SenderId == "System") {
          cell.TextView.TextAlignment = UITextAlignment.Center;
          cell.TextView.TextColor = UIColor.LightGray;
          cell.MessageBubbleContainerWidthConstraint.Constant = UIScreen.MainScreen.Bounds.Width - 25;
      }
  

Answer 2

you can use MBProgressHUB framework, it's very simply to acheive your task. there is a link https://github.com/jdg/MBProgressHUD