PGS Software : The Messages View – Online Communicators Made Easy

The goal

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.

Tackling obstacles

IBinspectables in action

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 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 , which has the method. With our configuration object declared a , 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 variables into the main view. That gave us the ability to manipulate the view in real time while modifying . 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 , which gave us computational control over different parts of the message cell. Consequently, the message cell can now be controlled independently from within the object.
Delegation to the main application

We spent some time tinkering with the best suitable architecture to divide responsibilities between the itself and its superior . 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 configuration

The list of configurable elements is quite impressive and continues to grow.

Customisable items:

• 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:
[e-mail]