UI Customizations

Channelize.io iOS UI SDK allows you to make customizations in the pre-built UI screens.

To setup, the custom UI options create a class in your project.

class CustomUi {
    open static func setUIVariables() {
    /* Set variables in this Function
    }
}

Now call this function in didFinishLaunchingWithOptions in AppDelegate.swift file.

CustomUi.setUIVariables()

Tab Bar Customizations

This contains what all customizations you can do to pre-defined four tabs in tab bar i.e Recent, Contacts, Groups and Settings.

/* Allows to show name of the tabs along with the tab icon/image. */
CHCustomStyles.showTabNames = true

/* Allows to define the icon/image of the recent screen tab. */
CHCustomStyles.recentScreenTabImage = UIImage(named: "recent22")

/* Allows to define the icon/image of the recent screen tab when it is tapped or selected. */
CHCustomStyles.recentScreenSelectedTabImage = nil

/* Allows to define the icon/image of the contacts screen tab. */
CHCustomStyles.contactScreenTabImage = UIImage(named: "contacts")

/* Allows to define the icon/image of the contacts screen tab when it is tapped or selected. */
CHCustomStyles.contactScreenSelectedTabImage = nil

/* Allows to define the icon/image of the groups screen tab. */
CHCustomStyles.groupsScreenTabImage = UIImage(named: "groups")

/* Allows to define the icon/image of the groups screen tab when it is tapped or selected. */
CHCustomStyles.groupsScreenSelectedTabImage = nil

/* Allows to define the icon/image of the Settings screen tab. */
CHCustomStyles.settingsScreenTabImage = UIImage(named: "settings")

/* Allows to define the icon/image of the settings screen tab when it is tapped or selected. */
CHCustomStyles.settingsScreenSelectedTabImage = nil

/* Allows to define the background color of tab bar. */
CHCustomStyles.tabBarBgColor = UIColor(hex: "#48c6ef")

/* Allows to define the text and icon/image color for the selected tab on tab bar. */
CHCustomStyles.tabBarTintColor = .white

/* You can choose if you want to have tab bar BG color solid or translucent. */
CHCustomStyles.isTabBarSolid = true

/* Allows to define the color of tab items text. */
CHCustomStyles.tabBarItemTextColor = .black

/* Allows defining color of tab items icon/images when untapped. Useful if your images are not in original color in which you want. */
CHCustomStyles.tabBarItemImageColor = .black

Note: If you are settingTabBar image then you have to set selectedTabBar image or you can assign nil. If you did not set selectedTabImages then SDK default selected images will be shown when tab is selected.

Conversation Screen Customizations

This contains what all customizations you can do in the Conversation Screen.

/* Allows to define the background color of the incoming messages chat bubble. */
CHCustomStyles.baseMessageIncomingBackgroundColor = UIColor.lightGray

/* Allows to define the incoming messages text color. */
CHCustomStyles.incomingMessageTextColor = .black

/* Allows to define the incoming messages font style and size. */
CHCustomStyles.incomingMessageFont = UIFont(name: "Courier", size: 15.0)!

/* Allows to define the background color of the outgoing messages chat bubble. */
CHCustomStyles.baseMessageOutgoingBackgroundColor = appDefaultColor

/* Allows to define the outgoing messages text color. */
CHCustomStyles.outgoingMessageTextColor = .white

/* Allows to define the outgoing messages font style and size. */
CHCustomStyles.outgoingMessageFont = UIFont(name: "Menlo-Regular", size: 15.0)!

/* Allows to define the color of the date separator message. */
CHCustomStyles.messageDateSeperatorColor = UIColor.darkGray

/* Allows to define the font size for the date separator message. */
CHCustomStyles.messageDateSeparatorFont = UIFont.systemFont(ofSize: 12)

/* Allows to define the color of incoming quoted messages chat bubble. */
CHCustomStyles.quotedIncomingMessageColor = UIColor.blue

/* Allows to define the color of incoming quoted messages chat bubble. */
CHCustomStyles.quotedOutgoingMessageColor = UIColor.black

/* Allows to define the size of the chat bubbles having Image attachments. */
CHCustomStyles.photoBubbleSize = CGSize(width: 210, height: 136)

/* Allows to define the size of the chat bubbles having Video attachments. */
CHCustomStyles.videoMessageSize = CGSize(width: 210, height: 136)

/* Allows to define the size of the chat bubbles having Stickers attachments. */
CHCustomStyles.stickerMessageSize = CGSize(width: 100, height: 100)

/* Allows to define the size of the chat bubbles having GIFs attachments. */
CHCustomStyles.gifMessageSize = CGSize(width: 210, height: 136)

/* Allows to define the size of the chat bubbles having location attachments. */
CHCustomStyles.locationMessageSize = CGSize(width: 210, height: 136)

Variables for Message/Attachment types support

This contains what all customizations can be done in UI SDK to support different attachment or message types.

/* Determines whether to provide options to share attachments in a conversation. */
CHCustomOptions.enableAttachments = true

/* Determines whether to provide option to share audo attachments in a conversation. */
CHCustomOptions.enableAudioMessages = true

/* Determines whether to provide option to share image attachments in a conversation. */
CHCustomOptions.enableImageMessages = true

/* Determines whether to provide option to share video attachments in a conversation. */
CHCustomOptions.enableVideoMessages = true

/* Determines whether to provide option to share location attachments in a conversation. */
CHCustomOptions.enableLocationMessages = true

/* Determines whether to provide option to share Stickers & GIFs in a conversation. */
CHCustomOptions.enableStickerAndGifMessages = true

/* Allows to define the maximum size of a video file that can be shared. */
CHCustomOptions.maximumVideoSize = 25.0

/* Allows to define the maximum size of a audio file that can be shared. */
CHCustomOptions.maximumAudioSize = 25.0

/* Allows to define the maximum size of a image file that can be shared. */
CHCustomOptions.maximumImageSize = 5.0

Other Conversation Screen customizations

/* Determines whether to have the quote/reply message option in the conversation screen. */
CHCustomOptions.enableQuoteMessage = false

/* Determines whether to provide the last seen indicator on the conversation screen or not. */
CHCustomOptions.enableUserLastSeen = true

/* Determines whether to display the online presence of the user on the conversation screen. */
CHCustomOptions.enableUserOnlineStatus = false

/* Determines whether to show the count of the total number of group members in the conversations screen or not. */
CHCustomOptions.showMemberCountInHeader = false

Recent Screen Customizations

You can customize message heading, last message, last message time, message count label's text color and font. You can also customize background color, table background color, cell background color. It will be good if you have a dark theme app.

/*
VariableName => For setting ... On Recent Screen or Messages List Screen
- recentScreenNameLabelFont => User Name or GroupName
- recentScreenNameLabelColor => UserName or Group Name Color
- recentScreenMessageLabelColor => Message Color
- recentScreenTimeLabelFont => Message Font
- recentScreenTimeLabelFont => Recent Message Time Font
- recentScreenTimeLabelColor => Recent Message Time color
- recentScreenMessageCountColor => Recent Unread Message count color
- recentScreenMessageCountBgColor => Recent Unread Message count BG color
- recentScreenTableBackgroundColor => Table Background Color
- recentScreenTableCellBackgroundColor => Table Cell Background Color
*/

CHCustomStyles.recentScreenNameLabelFont = UIFont(name: "Courier-Bold", size: 15.0)!
CHCustomStyles.recentScreenNameLabelColor = UIColor.white
CHCustomStyles.recentScreenMessageLabelColor = UIColor.lightText
CHCustomStyles.recentScreenTimeLabelFont = UIFont(name: "PingFangSC-Regular", size: 12.0)!
CHCustomStyles.recentScreenTimeLabelColor = UIColor.lightText
CHCustomStyles.recentScreenMessageCountColor = UIColor.black
CHCustomStyles.recentScreenMessageCountBgColor = UIColor.white
CHCustomStyles.recentScreenTableBackgroundColor = UIColor.black
CHCustomStyles.recentScreenTableCellBackgroundColor = UIColor.black

Groups List Screen Customization

You can customize label color and font for groups list cell, background color, and cell color for groups table

/*
- groupNameLabelColor => Group Name Color
- groupNameLabelFont => Group Name Font
- groupStatusLabelColor => Group Status Color
- groupStatusLabelFont => Group Status Font
- groupMemberCountLabelColor => Group Members Count Color
- groupMemberCountLabelFont => Group Members Count Font
- groupsTableBackgroundColor => Groups List Background Color
- groupCellBackgroundColor => Groups List Cell Background Color
- groupsTableCellShadowColor => Group Cell Shadow Color
*/

CHCustomStyles.groupNameLabelColor = UIColor.white
CHCustomStyles.groupNameLabelFont = UIFont.systemFont(ofSize: 15.0, weight: .heavy)
CHCustomStyles.groupStatusLabelColor = UIColor.white
CHCustomStyles.groupStatusLabelFont = UIFont.systemFont(ofSize: 12.0)
CHCustomStyles.groupMemberCountLabelColor = UIColor.white
CHCustomStyles.groupMemberCountLabelFont = UIFont.systemFont(ofSize: 14.0, weight: .bold)
CHCustomStyles.groupsTableBackgroundColor = .black
CHCustomStyles.groupCellBackgroundColor = .black
CHCustomStyles.groupsTableCellShadowColor = UIColor.white.cgColor

Contact Screen Customization

You can customize contact screen label colors, font, cell background, and table color.

/*
- contactNameLabelFont => Contact Name Font
- contactNameLabelColor => Contact Name Color
- contactTableBackgroundColor => Contacts Table BG Color
- contactsTableCellBackgroundColor => Contacts Table Cell BG Color
- contactTableSeperatorColor => Contact Table Cell seperator Color
*/

CHCustomStyles.contactNameLabelFont = UIFont.systemFont(ofSize: 14.0, weight: .bold)
CHCustomStyles.contactNameLabelColor = .white
CHCustomOptions.contactsTableCellBackgroundColor = .black
CHCustomOptions.contactTableBackgroundColor = .black
CHCustomOptions.contactTableSeperatorColor = .white

Some Global Customization

// Allow Searching
CHCustomOptions.allowSearching = false

// MARK:- Call SKD Module Enabled or Not
public static var enableCallModule : Bool = false

// MARK:- Show View Profile Button on user Profile
public static var enableViewProfileButton : Bool = false