Recent Chats List

The MFUIRecentChatListViewController is a class that is used to build a recent chats list view. Once the client app is connected to MirrorFly server, the class is called and a list of Chats in the client app is displayed. All chat services built with MirrorFly UIKit begin from the recent chats list.

Module Components#

In the MFUIRecentChatListViewController class, MFUIRecentChatListModule and its components are used to create and display the chat list view. The module is composed of two components: headerComponent and listComponent.

Property nameType
headerComponentMFUIRecentChatListModule.Header
listComponentMFUIRecentChatListModule.List

When the loadView() method of the view controller is called, the module components get added to the view in the setupView() method of the MirrorFly UIKit's view life cycle. Then, the configure() method of each module component is called to set the property values and display the view.

Customisation Of Header Component#

The Header component can be customised using the MFComponentTheme as below

let compTheme = MFComponentTheme()
compTheme.titleColor = .red
compTheme.titleFont = MFUIFontSet.h1
let theme = MFUITheme(componentTheme: compTheme )
MFUITheme.set(theme: theme)

HeaderRecentChat

Customisation Of Recent Chat Cell#

The UI components of the Recent Chat Cell can be customised by using the MFChatCellTheme in MFUITheme.

RecentChatCustomisation

Unread Message Counts#

The Unread Message Counts appears in the list component of the MFUIRecentChatListViewController. The number of unread messages is displayed below the timestamp of the last received message. If the unread count exceeds 100, it will show as 99+.

Customisation#

Customisation of the unread message count could be done by the following theme properties.

CategoryPropertyDescription
Unread countunreadCountBackgroundColorThe background color of the unread message count element
Unread countunreadCountFontThe font of the unread message count element
Unread countunreadCountTextColorThe text color of the unread message count element

Last Update Time#

The Last Update Time in the list component of the MFUIRecentChatListViewController shows the timestamp of the last received message.

Customisation#

Customisation of the Last Update Time could be done by the following theme properties.

CategoryPropertyDescription
Last Update TimelastUpdatedTimeTextColorThe text color of the timestamp count element
Last Update TimelastUpdatedTimeFontThe font of the timestamp element

Message Customisation#

The message of the Recent Chat could be customised by the following theme Properties.

CategoryPropertyDescription
MessagemessageFontThe font of the message element
MessagemessageTextColorThe text color of the message element

Title Customisation#

Title represents the profile name from the recent chats. The Title could be customised by the following theme properties.

CategoryPropertyDescription
TitletitleFontThe font of the title element
TitletitleTextColorThe text color of the title element

Separator Line Customisation#

CategoryPropertyDescription
Separator lineseparatorLineColorThe color of the separator line element

The following screenshot shows the recent chat before and after the customisation.

RecentChatCustom

Search bar Customisation#

Search bar is provided in the recent chat to filter the chats list and contacts using the given search string. Search bar elements can be customised as below

let chatlistTheme = MFChatListTheme()
chatlistTheme.searchbarTintColor = UIColor.red
chatlistTheme.searchbarTextColor = UIColor.green
MFUIStringSet.Recent_Search_Cancel = "Close"
let theme = MFUITheme(chatListTheme: chatlistTheme)
MFUITheme.set(theme: theme)

SearchBar

The following table shows the properties of the searchbar which can be customised.

CategoryPropertyDescription
Search barsearchbarTintColorThe color of the searchbar tint.
Search barsearchbarPlaceholderColorThe color of the searchbar placeholder
Search barsearchbarIconColorThe color of the searchbar icon
Search barsearchbarNotfoundTextColorThe color of "No results found" text
Search barsearchbarTextColorThe color of the text in the search bar

The following screenshot shows the search bar before and after the customisation.

searchbarCustom