Customize UI Appearance
If you are using the default interface from TapTalk.io UI implementation type, you can customize the appearance of the chat UI. To do this, you can add the methods below to your AppDelegate
class.
Note: Don't forget to add #import <TapTalk/TAPStyleManager.h>
Default Color Theme
Customize default color theme
To customize the chat UI's color theme, you can define your own color by accessing TAPStyleManager
using the following method.
Parameters
COLOR
: (UIColor) Your preferred color
TYPE
: (Enum TAPDefaultColor) type of default color
Note: you can override the default color values partially, but it is recommended to change all of them accordingly to make sure the color theme within the chat UI matches
Obtain default color theme
You can get customized chat UI's color theme by accessing TAPStyleManager
using the following method.
General Colors
Customize general colors
The following are the values used as general component colors, you can set the colors by calling this method in TAPStyleManager
.
Parameters
COLOR
: (UIColor) Your preferred color
TYPE
: (Enum TAPDefaultColor) type of default color
Obtain general colors
You can get general color by accessing TAPStyleManager
with the following method.
Components Colors
Customize component colors
The following are the values used as component colors, you can set the colors by calling this method in TAPStyleManager
.
Parameters
COLOR
: (UIColor) Your preferred color
TYPE
: (Enum TAPComponentColor) type of component color
Obtain component colors
You can get component color by accessing TAPStyleManager
with the following method.
Parameters
COMPONENT_COLOR_TYPE
: (Enum TAPComponentColor) type of component color
Component Color Type
Default Components
Chat Bubble
Text Field
Button
Switch
Popup Dialog
Unread Badge
Table View
Search Bar
Media Preview
Search
Chat Room Page
Icon Colors
Customize icon colors
The following are the values used as icon colors, you can set the colors by calling this method in TAPStyleManager
.
Parameters
COLOR
: (UIColor) Your preferred color
COMPONENT_COLOR_TYPE
: (Enum TAPComponentColor) type of component color
Obtain icon colors
You can get icon color by accessing TAPStyleManager
with the following method.
Parameters
COMPONENT_COLOR_TYPE
: (Enum TAPComponentColor) type of icon color
Icon Color Type
Default Icons
Navigation Bar Icons
Action Sheet Icons
Room List Page Icons
New Chat Page Icons
Chat / Group Profile Page Icons
Media / Image Detail Preview Icons
Location Picker Icons
Scan Result Icons
Chat Room Page Icons
Font Style
If you are using a custom font on your application, don't forget to add key 'Fonts Provided by application' in your info.plist file. Otherwise, font won't be loaded
Customize default font style
To use your application's font resource in the chat UI, set the following values in TapStyleManager
method with the following example:
Obtain default font style
To use your application's font resource in the chat UI, you can obtain UIFont
by using this method.
Customize component font style & color
You can also override the component's font style and color to customize specific text styles to your liking, or you you may also override their respective color value if you wish to change only the color of the text.
Note
You can choose to specified one of the following methods. If you wish to change just the font, just use setComponentFont
method, and if you wish to change just the text color, you can use setTextColor
method.
Last updated