jessesquires/jsqmessagesviewcontroller

An elegant messages UI library for iOS

⚠️ Deprecated ⚠️

This library is deprecated. Please read my blog post for details.

---

     

  

More screenshots available at CocoaControls

Features

See the website for the list of features.

Design Goals

• Closely mimic iMessage style and behavior
• SOLID design
• Easy customization and extension for clients

Dependencies

• JSQSystemSoundPlayer

Requirements

• iOS 7.0+
• ARC

Installation

CocoaPods (recommended)

# For latest release in cocoapods
pod 'JSQMessagesViewController'

# Latest on develop
pod 'JSQMessagesViewController', :git => 'https://github.com/jessesquires/JSQMessagesViewController.git', :branch => 'develop'

Getting Started

See the Getting Started guide!

Questions & Help

• Review the FAQ.
• Search issues for previous and current questions. Do not open duplicates.
• StackOverflow is often the most appropriate place for questions and help. We have our own tag, jsqmessagesviewcontroller.
• See the Migration Guide for migrating between major versions of the library.
• Only ask questions that are specific to this library.
• Please avoid emailing questions. I prefer to keep questions and their answers open-source.

Documentation

Read the docs, available here via @CocoaDocs.

Core team

• Jesse Squires (@jesse_squires)
• Harlan Haskans (@harlanhaskins)
• Eli Burke (@eliburke)
• Sebastian Ludwig (@sebastianludwig)
• Lucas Huang (@Lucashuang0802)
• Dan Leonard (@macmedan)

Contributing

Please follow these sweet contribution guidelines.

Interested in becoming a core contributor with push access? See our onboarding guide for details.

Credits

• Created and maintained by @jesse_squires.
• Many thanks to the contributors of this project.
• iOS assets extracted using @0xced / iOS-Artwork-Extractor.

Apps using this library

According to CocoaPods stats, over 36,000 apps are using JSQMessagesViewController. Here are the ones that we know about. Please submit a pull request to add your app! 😄

License

JSQMessagesViewController is released under an MIT License. See LICENSE for details.

Copyright © 2013-present Jesse Squires.

Please provide attribution, it is greatly appreciated.

jsqmessagesviewcontroller's Issues

Feature: Textview resizing

Allow text input view to resize up to navigation bar (instead of only 5 lines)

Add "To: <recipient>" field like iOS Messages

Add "To: " field like iOS Messages

What about implementation of paging?

I have over 100 messages, for every conversation, what about paging enabled?
To fetch all messages from Core Data takes some time, and this cause performance issue.

How hard would it be to add peoples faces next to each bubble?

Hi @jessesquires - question for ya. How hard would it be to add people's faces next too each bubble. I really want to use this within my app - is there an easy way to do that without forking?

Thanks!
Tim

Does it support image or customised view message?

Thanks.

Add custom bubble images

The idea is to add JSBubbleMessageStyleCustom style and obtain images for bubbles from delegate. Something like
- (UIImage*)bubbleImageForMessageType:(JSBubbleMessageStyle)type selected:(BOOL)selected.
(UIImage returned from this method should be already resizable.)

Can you add this?

IOS7 compose window glitchy

When using controller on Beta 4, the compose window becomes quite glitchy, particularly if the view is within a tab bar, messing with the new extended edges properties doesn't seem to have an impact.

AvatarImage API design

The AvatarImage may not be ready at the first place...
There might be only an Avatar Address like most RESTful service.

Asking for AvatarImage may not as powerful as exposing the AvatarView.
In which case, use can customize the UIImageView more freely.

Like setting the Image with SDWebImage or AFNetworking.
Custom the boarder, and maybe add a little title when black background in the lower third.

After all,
It's just my opinion.

Keyboard disappears after pan-close and view re-load

To reproduce -

• add message view controller as a secondary view that is reached by a push segue
• push to the message view controller
• in message view open the keyboard
• pan the keyboard away
• press the back button to leave the view
• open the view again
• open the keyboard view

and what you should see is an missing keyboard and no pan gesture.

Thanks. [hope this isn't a pain to fix].

Is it possible to deactivate the send button?

Hello!
Is it possible to deactivate the send button? Because my logic takes a few seconds to connect to XMPP chat server. And I want to activate it when is connected.
Any idea or suggestion?
Thanks in advance.

Button to the left of inputView

How hard is it to add a button to the left of the text inputView? Basically like a load photo button.

Accept autocorrect-suggestion before sending message

when tapping on send, force the textfield to accept the auto-suggestion before submitting the message

Input view layout bug

As you see, the layout bug.

when editing, then I scroll to buttom, and fastly scroll the tableView, and it happend.

ios7 height offset on tableview

Looks like there is a slight height offset issue (the top of the tableview is going underneath the navbar). This only happends on ios7 and only after you have opened the keyboard. This is iPhone 4s, but I would guess it happends on 5's too.

For example, this picture is the demo app scrolled all the way up to the top:

New Features - Timestamps, Images, Avatars

Love this library! Would love to see some of the features used in the UIBubbleTableView library to make MessagesTableViewController a perfect copy of the Apple Messages app!

Bug with input text view resizing on paste

When pasting large amounts of text (over 5 lines), textView doesn't resize properly. After sending, sometimes textview doesn't resize. @zhigang1992 can you help?

iOS7 iPad/container view text entry oddness

So - using this awesome project as a container view so far has been great (something like a split view controller, buddies on the left, container view on the right).

It seems that depending on how I enter into the view, the text view will choose to auto-expand by 36 pixels even when there's no text actually entered. Example:

This then looks odder still when folding it back down:

If there's no text there, it can end up like this:

Finally, if one "Split"'s the keyboard, there's an interesting set of animations that result with the split keyboard disappearing altogether - but touching the text field will bring it back (so that's just for reference as I'm not sure what else could be desirable at that point).

Storyboard Support (Navigation Bar issue)

Please add storyboard support.
I have an issue where my navigation bar is being hidden (set to -44 y origin).
I am assuming this has something to do with trying to implement with storyboard.

.

CocoaPods support

Jesse,

can you please add support for CocoaPods?

If you want, I will create a podspec and have it added to the CocoaPods Specs, but to do so I would need you to create a tag so that I can point the podspec to it.

Calman

iOS 7 UI

Hi, just wondering if you are considering updating the UI of the control to fit in with iOS 7?

input textView scrollbar not work as expected

when paste 2 line words, input textview contentInset is wrong
when paste 5 line words, scrollbar of input textview do not show as expected

cursor not displaying in JSMessageTextView

No cursor was showing up in the JSMessageTextView for ios7. I added this line into

- (id)initWithFrame:(CGRect)frame
{
...
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
            self.tintColor = [UIColor blueColor];             
    }
}

and it seemed to fix the issue

Paste bug

The UITextView of JSMessageInputView does not resize when pasting text.

Attempted to address this by implementing the delegate method - (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text but this did not work.

keyboard remains hidden after pan to dismiss

JSDismissiveTextView is hiding the keyboard but it is not making it visible again in response to the UIKeyboardDidShowNotification.

Landscape support

Allow landscape mode for all devices.

Allow Copying

A simple "copy" by hold-tapping a bubble would be superb

JSBubbleView subclass UITextView

I try to JSBubbleView subclass UITextView

Because I need to open Link when the message is a URL or copy the message using UITextView dataDetectorTypes.

But it doesn't work, how can I fix the problem

How to make long text displayed correctly

If the message content is a long string, it can not be displayed normally, how to solve the problem?

Class prefix

I think this project should adopt a class prefix to avoid potential name clashes with other code bases, and to conform with Apple's conventions.

Your own classes should use three letter prefixes. These might relate to a combination of your company name and your app name, or even a specific component within your app. As an example, if your company were called Whispering Oak, and you were developing a game called Zebra Surprise, you might choose WZS or WOZ as your class prefix.

- iOS Documentation

This would involve renaming the project, and renaming all the classes.

Since this is his project, I'll leave choosing a prefix to @jessesquires

Docs say JSMessagesViewController subclasses UITableViewController but is UIViewController

Hello!
Maybe this is a typo.
Docs say JSMessagesViewController subclasses UITableViewController but reading the code I see that actually subclasses UIViewController

Feature: Multiple Receipents/Incoming

It would be cool to support messages incoming from different people like iOS does for group messages. so the ability to add an author string to an incoming cell that will will display above or below an incoming message cell.

Feature: Data detectors

Add data detectors like iOS. Just attempted this by adding UITextView in the JSBubbleView method drawRect:, instead of using the UIStringDrawing method. Ran into lots of issues with the UITextView frame size, word wrapping, and truncating text.

viewDidDisappear with text in inputview breaks tableview insets

after pushing a new ViewController on the stack, if there's text in the input view, returning to the messages view (popping the previously pushed ViewController) causes the tableview insets to be calculated incorrectly

Many Table Cells(avatar, text) Are A Little Bit Blurry.

iOS 6.0 Simulator

Scrolling to bottom problem

In the case where the view is appearing for the first time, the tableview is not scrolling to the bottom. Although in JSMessagesViewControlller in viewwillappear there is a call to "[self scrollToBottomAnimated:NO]", since the data in the table has not yet been loaded, the table view has 0 rows at that point. Have you found any ways to work around this?

Make this a CocoaPod

Are there plans to make this available through the CocoaPods Objective-C library management tool?

Ref:
http://www.cocoapods.org/
https://github.com/CocoaPods/Specs/wiki/Podspec-howto

Feature: custom placeholder text

Add placeholder text option

Feature: Image messages

Please add the ability to add an image as a message (i.e. Apple Messages App MMS feature)

Improving customizability of the message controller

Really liking how well this library works. A couple of things I have worked on for the project for one of my clients that required me to do some code changes. I'd like to merge back support for the following:

• Variable height input bar. I think this should be an override-able member method that is called once during viewDidLoad. We center vertically align the text box and the send button as needed. We still expand the height by "height for text of size" when a new line is inputted.
• Adjustable height for the text input view and send button. If the text input view is bigger then "height for text of size", then we vertically align the text in the text input view.
• Support a text input view that is visible, as opposed to using a background stretchable image with the borders baked in. I think this might be a common scenario but can also see that this is too specific for a general purpose library. Yes, there was quite a bit of contentoffset hackery to get this to work right.
• A left accessory button. Again, this is gotten by a member method that is called once during viewDidLoad. This gives people an easy way to add camera button, etc.
• Variable left / right padding on the message view table view. Again, I'd like this to be a member function that is overriden. I had a nice default of 5px.
• Add support for custom backgrounds for the bubble views. This requires the most amount of work and would require the most change at the API / design level. To do this, we can either add a "JSBubbleMessageStyleCustom", which would cause the JSMessageViewController to call data delegate methods to get the UIImages on a per row basis; or we can remove the JSBubbleMessageStyle enum, and make the JSMessageBubbleView subclassable and make a factory method in JSMessageViewController. I prefer the latter, I think.
• Add support for custom colored text for the bubble views. This is almost required with the one above - in my case I have white text on black bubbles or black text on blue bubbles.
• Add support for adding arbitary UIViews into the bubble views. We do this by adding a new datadelegate method. Some annoying work required to resize the bubble view correctly.
• Add support for tapping on a bubble as opposed to a long tap. This allows for UI interaction like "open an image", etc.

How in particular should we go about this? I'd like to first make sure you are OK with proposed ways of extending the API to support this, and then I can do mulitple PR for each of these. I think the most complicated is custom backgrounds, because we have to plumb through from the message view controller all the way down to the bubble view; and right now, we have a lot of static methods that create the various images, which we'd have to refactor.

Auto Correct is Hidden

Auto Correction is hidden in the textfield. You just see a blue line.

What bugs have you encountered with swipe gesture?

Hi,
I have tried to implement exactly the same behaviour of keyboard as in Messages and must say that's nearly impossible for variety of reasons (https://github.com/mikeahmarani/MADismissiveTextView for example)
The problem is the following:

• we should drag input view along with the keyboard (yeah we can change origin y, but it flicks and looks not sexy - I've tried)
• we can move the keyboard and input view simultaneously, in this case we should set our inputview as 'inputaccessoryview' of textView. It almost works, until we do not become firstresponder (inputview blinks out the screen and after it moves with keyboard).

So i suggest to use only swipe:) what do you think?

Add typing indicator

It looks like you plan on doing it eventually since you've got an image for it already but it doesn't seem like its implemented. Please correct me if I'm wrong. I see you're making a lot of changes this week so if you don't get a chance to get to it, I'll try working on it after your changes seem to be slowing down. Thanks!

New Features - Avatars

Please add ability to have avatars displayed next to the messages (i.e. Apple Messages App)

No way to add received messages

Now that the tableview is a private property of JSMessagesViewController, how can we reload data to add new messages that are received to the tableview? It seems like the closest thing is to call finishSend but that will clear any message the user has typed. Let me know if I'm just missing something. Thanks!

How can I add a background static image in the chat list?

Hello!

How can I add a background static image in the chat list (to my JSMessagesViewController subclass)?

I tried setBackgroundColor with colorPattern but the image is very strange and moves with the scroll.
What I want is just a static background image (like whatsapp).
I tried addSubview and bringToBack but no success.

Any idea or suggestion?
Thanks in advance,

iOS 7 bug with parsing UITextView data detectors

Sometimes, I launch the demo something relation with DDRequire make crash. I hope you could fix it.

InputToolbarView hidden under keyboard

In the latest pod:

• when tapping the bar with the message textfield and send button, the keyboard pops up over the bar, and the view does not adjust.
• when you pan the messages view the input bar appears as it should, but the messages scrollview carries on underneath the keyboard and input bar

I have absolutely no idea why this is - it was working fine a few days ago in my project.

[Did have some trouble with the JSMADismissiveTextView.h header aliases in the pod]

Any suggestions?

The bubbleView is not fit the word.

Please Look at the letter "J", "i" or "Uii" , as you see, the bubbleView is not fit the letter.

And the worse situation is some time the bubbleView was clips the word string .....

when I scroll the screen several times, it happend.

I think it is a bug in it. (I am sorry about my poor English, it`s not my first language.)

Dismissing keyboard when pressing tableview

Hi,

When i tap on the tableview i expect the keyboard to dismiss, unfortunately this is not happening. Is this feature implemented in the framework or did i do something wrong?