v2

UI Customizations

Channelize.io iOS UI Kit 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()

Dark Theme Support

Channelize iOS UI Kit is available in both the Dark theme and Light theme.

By default, the dark theme support feature is OFF in the UI Kit. If you want to turn ON this feature, set

   CHCustomOptions.enableDarkThemeSupport = true

Tab Bar Customizations

Tab bar customization allows you to change default images/icons for tab bar in the UI Kit. By default, the Tab bar looks like below image

To customize tab bar images/icons, set the below properties in the customization class defined above.

// Allows defining recent conversations/chats listing screen tab bar image/icon.
CHCustomStyles.recentScreenTabImage = UIImage(name: "myRecentTabImage")
CHCustomStyles.recentScreenSelectedTabImage = UIImage(named: "myRecentTabSelectedImage")

// Allows defining contacts listing screen tab bar image/icon.
CHCustomStyles.contactScreenTabImage = UIImage(named: "myContactsTabImage")
CHCustomStyles.contactScreenSelectedTabImage = UIImage(named: "myContactsTabSelectedImage")

// Allows defining groups listing screen tab bar image/icon.
CHCustomStyles.groupsScreenTabImage = UIImage(named: "myGroupsTabImage")
CHCustomStyles.groupsScreenSelectedTabImage = UIImage(named: "myGroupsTabSelectedImage")

// Allows defining call logs listing screen tab bar image/icon.
CHCustomStyles.callScreenTabImage = UIImage(named: "myCallsTabImage")
CHCustomStyles.callScreenSelectedTabImage = UIImage(named: "myCallsTabSelectedImage")

// Allows defining settings screen tab bar image/icon.
CHCustomStyles.settingsScreenTabImage = UIImage(named: "mySettingsTabImage")
CHCustomStyles.settingsScreenSelectedTabImage = UIImage(named: "mySettingsTabSelectedImage")

Global Customization

Channelize UI Kit uses predefined properties throughout all screens. You can modify them to craft the interface of your choice.

Note: Shown values are the default values used in the UI Kit. Modify them to match your requirements.

Font Properties


// Used For Custom Alerts Action Lables
CHCustomStyles.largeSizeRegularFont = UIFont(name: "Roboto-Regular", size: 19.0)

// Used as Table Cell's and Collection View cell's main label Font, Navigation Headers fonts
CHCustomStyles.normalSizeRegularFont = UIFont(name: "Roboto-Regular", size: 17.0)

// Used as Table Cell's and Collection View cell's secondary label font, Custom Alerts Descriptions
CHCustomStyles.mediumSizeRegularFont = UIFont(name: "Roboto-Regular", size: 15.0)

// Used as Table Cell's and Collection View cell's tertiary label
CHCustomStyles.smallSizeRegularFont = UIFont(name: "Roboto-Regular", size: 13.0)

// Used for Message Bubble time
CHCustomStyles.extraSmallSizeRegularFont = UIFont(name: "Roboto-Regular", size: 11.0)

// Used for Custom Alerts 'Cancel Button'
CHCustomStyles.largeSizeMediumFont = UIFont(name: "Roboto-Medium", size: 19.0) 

// Used for Custom Alerts Title Labels
CHCustomStyles.normalSizeMediumFont = UIFont(name: "Roboto-Medium", size: 17.0) 

// Used for Table View Section Label Fonts
CHCustomStyles.mediumMediumFont = UIFont(name: "Roboto-Medium", size: 15.0) 

// Used for Message Cell's sub labels font
CHCustomStyles.mediumSizeMediumFont = UIFont(name: "Roboto-Medium", size: 13.0) 

// Used for Deleted Message Label in Chat Screen
CHCustomStyles.normalSizeMediumItalicFont = UIFont(name: "Roboto-MediumItalic", size: 17.0)

// Used for Deleted message Label in recent conversation Screen
CHCustomStyles.mediumSizeMediumItalicFont = UIFont(name: "Roboto-MediumItalic", size: 15.0)

Colors Properties

For Dark Theme

Note: Shown values are the default values used in the UI Kit. Modify them to match your requirements.

// Primary Color - Used in titles in views headers, tables, and collectionviews cell's main label.
CHDarkThemeColors.primaryColor = UIColor(hex: "#ffffff")

// Secondary Color - Used in secondary texts like message on recent conversations/chats listing screen etc.
CHDarkThemeColors.secondaryColor = UIColor(hex: "#E6E6E6")

// Tertiary color - Used in tertiary titles like date timestamps, etc.
CHDarkThemeColors.tertiaryColor = UIColor(hex: "#E6E6E6")

// Tint Color - Used in CTAs on all Screens.
CHDarkThemeColors.tintColor = UIColor.customSystemBlue

// Navigation Header Background color.
CHDarkThemeColors.conversationHeaderBackGroundColor = UIColor(hex: "#1c1c1c")

// Seperator Colors - Used in table cells, collectionview cells and headers seperator color.
CHDarkThemeColors.seperatorColor = UIColor(hex: "#38383a")

// Grouped Tabled background color - Used in search screen, Send location screen, Create new group screen and Group profile screen.
CHDarkThemeColors.groupedTableBackGroundColor = UIColor(hex: "#010101")

// Plain table background color - Used in all screens other than grouped tabled mentioned above.
CHDarkThemeColors.plainTableBackGroundColor = UIColor(hex: "#1c1c1c")

// Received messages chat bubble background color.
CHDarkThemeColors.incomingTextMessageBackGroundColor = UIColor(hex: "#232124")

// Received messages text color.
CHDarkThemeColors.incomingTextMessageColor = UIColor(hex: "#ffffff")

// Sent messages chat bubble background color.
CHDarkThemeColors.outGoingTextMessageBackGroundColor = UIColor(hex: "#2176f5")

// Sent messages text color.
CHDarkThemeColors.outGoingTextMessageColor = UIColor(hex: "#ffffff")

// Cells background color for table views and collection views.
CHDarkThemeColors.cellBackgroundColors = UIColor(hex: "#1c1c1c")

Note: Shown values are the default values used in the UI Kit. Modify them to match your requirements.

Light Theme Colors

// Primary Color - Used in titles in views headers, tables, and collectionviews cell's main label.
CHLightThemeColors.primaryColor: UIColor = UIColor(hex: "#4a505a")

// Secondary Color - Used in secondary texts like message on recent conversations/chats listing screen etc.
CHLightThemeColors.secondaryColor = UIColor(hex: "#3a3c4c")

// Tertiary color - Used in tertiary titles like date timestamps, etc.
CHLightThemeColors.tertiaryColor = UIColor(hex: "#8b8b8b")

// Tint Color - Used in CTAs on all Screens.
CHLightThemeColors.tintColor = UIColor(hex: "#2176f5")

// Navigation Header Background color.
CHLightThemeColors.conversationHeaderBackGroundColor = UIColor(hex: "#ffffff")

// Seperator Colors - Used in table cells, collectionview cells and headers seperator color.
CHLightThemeColors.seperatorColor = UIColor(hex: "#c6c6c8")

// Grouped Tabled background color - Used in search screen, Send location screen, Create new group screen and Group profile screen.
CHLightThemeColors.groupedTableBackGroundColor = UIColor(hex: "#f2f2f8")

// Plain table background color - Used in all screens other than grouped tabled mentioned above.
CHLightThemeColors.plainTableBackGroundColor = UIColor(hex: "#ffffff")

// Received messages chat bubble background color.
CHLightThemeColors.incomingTextMessageBackGroundColor = UIColor(hex: "#e6e6e6")

// Received messages text color.
CHLightThemeColors.incomingTextMessageColor = UIColor(hex: "#3b3c4d")

// Sent messages chat bubble background color.
CHLightThemeColors.outGoingTextMessageBackGroundColor = UIColor(hex: "#2176f5")

// Sent messages text color.
CHLightThemeColors.outGoingTextMessageColor = UIColor(hex: "#ffffff")

// Cells background color for table views and collection views.
CHLightThemeColors.cellBackgroundColors = UIColor(hex: "#ffffff")

Conversation Screen Customizations

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

Fonts

// The font for the normal and replied/quoted messages.
CHCustomStyles.textMessageFont = UIFont(named: "Roboto-Regular", size: 17.0)

// The font for meta-messages.
CHCustomStyles.textMessageFont = UIFont(named: "Roboto-Regular", size: 15.0)

Bubble Size Customization

// Image thumbnail size
CHCustomStyles.photoBubbleSize = CGSize(width: 230, height: 190)

// Video thumbnail size
CHCustomStyles.videoMessageSize = CGSize(width: 210, height: 260)

// Documents thumbnail size
CHCustomStyles.docMessageBubbleSize = CGSize(width: 230, height: 110)

// Stickers & GIFs thumbnail size
CHCustomStyles.gifStickerMessageBubbleSize = CGSize(width: 220, height: 175)

Attachments Customization

Channelize iOS UI Kit support seven attachment types i.e Image, Video, Audio, Document, Location, GIFs, and Stickers. By default, all type of attachments support is enabled in iOS UI Kit. You can enable or disable them based on your requirements.

// Allows you to choose if you want attachments support or not.
CHCustomOptions.enableAttachments = true

// Allows you to choose if you want Image attachments support or not.
CHCustomOptions.enableImageMessages = true

// Specifies the maximum size of image a user can share.
CHCustomOptions.maximumImageSize = 15.0

// Allows you to choose if you want Video attachments support or not.
CHCustomOptions.enableVideoMessages = true

// Specifies the maximum size of video a user can share.
CHCustomOptions.maximumVideoSize = 25.0

// Allows you to choose if you want audio attachments support or not.
CHCustomOptions.enableAudioMessages = true

// Specifies the maximum size of audio a user can share.
CHCustomOptions.maximumAudioSize = 25.0

// Allows you to choose if you want document attachments support or not.
CHCustomOptions.enableDocSharingMessage = true

// Specifies the maximum size of document a user can share.
CHCustomOptions.maximumDocumentSize = 50.0

// Allows you to choose if you want location sharing support or not.
CHCustomOptions.enableLocationMessages = true

// Allows you to choose if you want Stickers & GIFs attachments support or not.
CHCustomOptions.enableStickerAndGifMessages = true

Some Global Customization

// Allow you to choose if you want to enable Contacts and Groups searching or not
CHCustomOptions.allowSearching = true

// MARK:- Call SKD Module Enabled or Not
CHCustomOptions.callModuleEnabled = true

Message Reaction Feature

Turn On/Off functionality

By default, the message reactions feature is ON in UI SDK. If you want to turn Off this feature set

CHCustomOptions.enableMessageReactions = false

Define Reactions

To define own custom reactions please set

emojiCodes = ["key":"unicode","key":"unicode"]

For e.g.

emojiCodes = [
"like":"\u{1f44d}", "dislike":"\u{1f44e}", "laughing":"\u{1f606}", "angry":"\u{1f621}", "crying":"\u{1f622}", "smile eyes":"\u{1f60a}", "star":"\u{1f31f}", "party":"\u{1f389}", "gift":"\u{1f381}"]
← QuickstartQuickstart →