This is our universal messages view – GitHub
Our objective was to create a universal messages view for all types of communicator messaging apps. This idea was flagged by our team leader Kamil Szwaba during one of our brainstorming sessions. What quickly caught our attention when we were attempting to create a user comments screen in our other project was the lack of a similar component in an open source space.
An ideal messages view had to be characterised by:
- Fast integration with the client’s application
- Fully customisable appearance with predefined themes
- Easy design adjustments
While designing this useful view framework, like with any other project, we encountered a few difficulties, which we managed to tackle gracefully in the end. Details below.
IBinspectables in action
IBinspectables are widely used throughout the framework to configure the view via the storyboard. This brings with it the advantage of being able to see changes being made to the view instantly, and allows us to correct the settings within milliseconds with the use of a fast feedback loop.
The configuration object
The problem we had with
IBinspectables was that it was not updating the storyboard while the creator was tinkering with the design options. This kind of behaviour can be easily obtained from
UIView, which has the
prepareForInterfaceBuilder method. With our configuration object declared a
NSObject, it was not that easy however. It had to be pushed manually to change its on-screen representation within the storyboard preview. Regarding all of the above, we decided to copy all
IBInspectable variables into the main view. That gave us the ability to manipulate the view in real time while modifying
IBInspectables. This helped us achieve design-time flexibility, which allows us to see the result of the design instantly – at a cost of course. The trade-off was code redundancy for configuration variables.
Laying out constraints
Constraints were difficult to tackle at first but we cleverly used them as
IBOutlets, which gave us computational control over different parts of the message cell. Consequently, the message cell can now be controlled independently from within the
Delegation to the main application
We spent some time tinkering with the best suitable architecture to divide responsibilities between the
view itself and its superior
viewController. After making a few amendments back and forth, we came up with this division:
Everything is encapsulated within a Single Responsibility Principle that conforms classes.
So far, so good
We have managed to produce a robust and configurative messages view, which can be used by virtually any messaging application. It can be used not only for instant messaging but also in connectionless communication such as the designable comments section of your product.
The list of configurable elements is quite impressive and continues to grow.
- the background of each view’s element
- rounding corners for most
- the message bubble background shape
- the message bubble grouping for different shapes at the beginning and end of the group
- left and right button actions
- left and right button appearance with animation
Where do we go from here?
What we should do next is provide a more flexible cell sizing mechanism via a fully custom collection view layout. This layout will also take care of cell placement, if any further customisation should be needed.
A rich media format will be introduced allowing the user to embed more media than text such as images, videos, and voice messages.
If you have any ideas how this project can be developed – do not hesitate to contact us at: