iOS
Ui Kit Key Functions

Key Functions

This page explains key functions of Sendbird UIKit for iOS consisting of how to list channels, chat in a channel, configure channel settings, create a channel, invite users, and list channel members.


List channels

The SBUChannelListViewController is a class that is used to get a channel list view. When there is no connection between the client app and Sendbird server, this class is automatically called and reconnects the two. Once the app is connected to Sendbird server, the class is called and a list of channels in the client app is displayed. In addition the class handles core features including pagination and real-time updates. All chat services built with Sendbird UIKit begin from the channel list and flow according to the UIKit logic.

How to use

Using UIKit, you can build a channel list-based chat service without the need for complicated implementation through the SBUChannelListViewController class.

Use the following code to list channels in a view.

Objective-C
Swift
Light Color Skin
Copy
SBUChannelListViewController *channelListVC = [[SBUChannelListViewController alloc] init];
UINavigationController *naviVC = [[UINavigationController alloc] initWithRootViewController:channelListVC];
[self presentViewController:naviVC animated:YES completion:nil];
Light Color Skin
Copy
let channelListVC = SBUChannelListViewController()
let naviVC = UINavigationController(rootViewController: channelListVC)
present(naviVC, animated: true)

Note: At this point, you can confirm if the service is working by running your client app.

Components and features

The components of the SBUChannelListViewController class include Header and List. The List is an area where the UITableView shows channel information using the SBUChannelCell. The features of the SBUChannelListViewController include:

FeatureDescription

Enter channel

Enters a channel by selecting a channel cell on the list

Notifications on/off

Turns push notifications on and off by swiping a cell

Leave channel

Leaves a channel by swiping a cell

Create channel

Navigates to the create channel page

Back and Dismiss

Triggers a pop view and dismiss an action

ChannelListViewController

- Edit components

The following table lists a set of customizable properties and methods of the SBUChannelListViewController class.

MethodDescription

register(channelCell:nib:)

Registers or edits an existing channel cell. If the cell has Nib, the property adds Nib to the cell. If it doesn’t have one, it will not add Nib to the cell. The channelCell should be a class type that inherits the SBUBaseChannelCell.

register(customCell:nib:)

Registers a channelCell with a custom type. If the cell has Nib, the property adds Nib to the cell. If it doesn’t have one, it will not add Nib to the cell. The channelCell should be a class type that inherits the SBUBaseChannelCell.

didreceiveError(_ message:)

Receives an error message when an error occurs in the ViewController. If necessary, you can override and implement this method.

showChannel(channelUrl:)

Overrides the channelViewController class and implements values to customize the class.

showCreateChannel()

Overrides the createChannelViewController class and implements values to customize the class.

- Edit stringSet

The SBUStringSet is a set of strings used to compose the screen. You should modify the stringSet values in advance if you want to make changes to the screen. The stringSet includes:

PropertyDescription

ChannelList_Header_Title

The title of the viewController

ChannelList_Last_File_Message

A text displayed when the last message in a channel is a SBDFileMessage type.

Note : A set of common string is not included in the list. See the Common Components page's StringSet section.

- Edit iconSet

The SBUIConSet is a set of icons used to compose the screen. You should modify the iconSet values in advance if you want to use different icons. The iconSet includes:

  • iconActionLeaveLight, iconActionNotificationOffLight, iconActionNotificationOnLight, iconCreate, iconMute

Note : A set of common icons is not included in the list. See the Common Components page's IconSet section.

Customize the class

You can subclass and customize the SBDChannelListviewController to enhance the user experience of your client app. The overridable methods include:

  • viewLifeCycle, SBDConnectionDelegate, SBDChannelDelegate

Note : We recommend you should fully understand the usage of Sendbird Chat SDK for iOS when subclassing the class. Some actions may not work as expected depending on your customization.

Theme

The SBUChannelListViewController class uses two of the SBUTheme, which are the SBUChannelCellTheme and the SBUChannelListTheme. The SBUChannelCellTheme is used for the SBUChannelCell while the SBUChannelListTheme is used for all elements of the SBUChannelListViewController but the SBUChannelCell. Theme properties cannot be accessed directly and should be customized only through the SBUTheme. Then you should call the setupStyle() afterwards in order to apply any changes you make through the SBUTheme.

- Set a custom theme

You can customize themes through the SBUTheme.setChannelList as below:

Objective-C
Swift
Light Color Skin
Copy
SBUChannelListTheme *channelListTheme = [[SBUChannelListTheme alloc] 
    initWithLeftBarButtonTintColor:SBUColorSet.primary300 
    
    // ...
];

SBUChannelCellTheme *channelCellTheme = [[SBUChannelCellTheme alloc] 
    initWithBackgroundColor:SBUColorSet.background100
    
    // ... 
];
Light Color Skin
Copy
let channelListTheme = SBUChannelListTheme(
    leftBarButtonTintColor: SBUColorSet.primary300 

    // ...
)

let channelCellTheme = SBUChannelCellTheme( 
    backgroundColor: SBUColorSet.background100

    // ...
)

SBUTheme.setChannelList(channelListTheme: channelListTheme,
            channelCellTheme: channelCellTheme)

Note : You should call the setupStyle() method to update your user interface.

- Edit theme elements

Themes can be customized through the SBUTheme. It is recommended to change the themes prior to viewController initialization. The following code shows how to customize the elements of the theme.

Objective-C
Swift
Light Color Skin
Copy
// channel list theme
SBUTheme.channelListTheme.backgroundColor = SBUColorSet.background100; 

// channel cell theme
SBUTheme.channelCellTheme.backgroundColor = SBUColorSet.background100;
Light Color Skin
Copy
// channel list theme 
SBUTheme.channelListTheme.backgroundColor = SBUColorSet.background100 

// channel cell theme
SBUTheme.channelCellTheme.backgroundColor = SBUColorSet.background100

Note : You should call the setupStyle() method to update your user interface.

- SBUChannelListTheme

The SBUChannelListTheme object has properties used in the SBUChannelListViewController.

CategoryPropertyDescription

Navigation bar

leftBarButtonTintColor

The tint color of the button at the left side of the navigation bar

Navigation bar

rightBarButtonTintColor

The tint color of the button at the right side of the navigation bar

Navigation bar

navigationBarTintColor

The tint color of the navigation bar

Navigation bar

navigationBarShadowColor

The shadow color of the navigation bar

Status bar

statusBarStyle

The style of the status bar

View

backgroundColor

The background color of the channel list view

Table view

alertBackgroundColor

The background color of the alert

Table view

notificationOnBackgroundColor

The background color of the notification-on

Table view

notificationOnTintColor

The tint color of the notification-on

Table view

notificationOffBackgroundColor

The background color of the notification-off

Table view

notificationOffTintColor

The tint color of the notification-off

Table view

leaveBackgroundColor

The background color of the leave channel button

Table view

leaveTintColor

The tint color of the leave channel button

- SBUChannelCellTheme

The SBUChannelCellTheme object has properties used in the SBUChannelCell.

CategoryPropertyDescription

View

backgroundColor

The background color of the cell

View

separatorLineColor

The color of the separator line

Title

titleFont

The font of the title element

Title

titleTextColor

The text color of the title element

Member count

memberCountFont

The font of the member count element

Member count

memberCountTextColor

The text color of the member count element

Last updated time

lastUpdatedTimeFont

The font of the last-updated time element

Last udated time

lastUpdatedTimeTextColor

The text color of the last-updated time element

Message

messageFont

The font of the message element

Message

messageTextColor

The text color of the message element

Unread count

unreadCountBackgroundColor

The background color of the unread message count element

Unread count

unreadCountFont

The font of the unread message count element

Unread count

unreadCountTextColor

The text color of the unread message count element


Chat in a channel

UIKit supports 1-on-1 and 1-on-N chat channel functionalities and the SBUChannelViewController is responsible for this. The SBUChannelViewController class uses the SBUAdminMessageCell, SBUUserMessageCell and SBUFileMessageCell to display information. The class also makes an auto connection to Sendbird server when there is no connection. It also contains internal logics to handle core features of the kit such as pagination, reconnection and real-time updates. In addition all messages in channels are cached using memory while messages that weren’t delivered yet are kept only in an active channel object.

For messages, users can send plain text, image, video, and file messages. Messages are grouped by date, showing date boundaries. All chat services built with Sendbird UIKit for iOS begin from the channel list and flow according to the UIKit logic.

Note : Simply setting your chat service to be based on the channel list can seamlessly lead users to the Channel view.

How to use

You can build a channel-based chat service by calling the SBUChannelViewController class.

Note: You can initialize the SBUChannelViewController by setting the ChannelUrl or SBDGroupChannel object.

Use the following code to enable users to chat in a channel view.

Objective-C
Swift
Light Color Skin
Copy
// Case 1: Using channel url
SBUChannelViewController *channelVC = [[SBUChannelViewController alloc] initWithChannelUrl:{CHANNEL_URL}];
UINavigationController *naviVC = [[UINavigationController alloc] initWithRootViewController:channelVC];
[self presentViewController:naviVC animated:YES completion:nil];

// Case 2: Using channel object
SBUChannelViewController *channelVC = [[SBUChannelViewController alloc] initWithChannel:{CHANNEL}];
UINavigationController *naviVC = [[UINavigationController alloc] initWithRootViewController:channelVC];
[self presentViewController:naviVC animated:YES completion:nil];
Light Color Skin
Copy
// Case 1: Using channel url
let channelVC = SBUChannelViewController(channelUrl: {CHANNEL_URL})
let naviVC = UINavigationController(rootViewController: channelVC)
present(naviVC, animated: true)

// Case 2: Using channel object
let channelVC = SBUChannelViewController(channel: {CHANNEL})
let naviVC = UINavigationController(rootViewController: channelVC)
present(naviVC, animated: true)

Global usage

You can directly take a user to a specific channel from notifications through the SBUMain.openChannel(channelUrl:) method. This method is used to find the destination channel to put the user in or even to create one if there is no applicable channel.

Objective-C
Swift
Light Color Skin
Copy
// YES to use based on channel list, NO to use based on channel
BOOL basedOnChannelList = YES;
[SBUMain openChannelWithChannelUrl:{CHANNEL_URL} basedOnChannelList:basedOnChannelList]
Light Color Skin
Copy
// true to use based on channel list, false to use based on channel
let basedOnChannelList = true
SBUMain.openChannel(channelUrl: {CHANNEL_URL}, basedOnChannelList: basedOnChannelList)

Components and features

The components of the SBUChannelViewController class include Header, List, and messageInput. The List is an area where the UITableView displays messages in the channel using the SBUUserMessageCell, SBUFileMessageCell, and SBUAdminMessageCell. The features of the SBUChannelViewController class include:

FeatureDescription

Message input view

Allows users to send messages, image/video or files

New message information

Displays a notification when a new message arrives

Last seen time

Displays a participant’s last seen time. This is only available for 1-on-1 channels.

Send status

Displays message send status such as success, failed, and sending

Delivery receipt status

Displays message delivery receipt status

Read receipt status

Displays message receipt status

Message copying

Allows users to copy a message (text only)

Message editing

Allows users to edit a message (own message only)

Message deleting

Allows users to delete a message (own message only)

Retry send message

Allows users to resend a failed message

Channel settings menu

Navigates to the Setting view from the NavigationBar

Back and Dismiss

Returns to the previous view from the NavigationBar

ChannelViewController

- Edit components

The following table lists a set of customizable properties and methods of the SBUChannelViewController class.

Property (class)Description

channelName (String)

The customized title of the channel

messageInputView (SBUMessageInputView)

The customized message input view

newMessageInfoView (SBUNewMessageInfo)

The customized new message info view

MethodDescription

register(adminMessageCell:nib:)

Registers or edits an admin message cell when the message is a SBDAdminMessage type. If the cell has Nib, the property adds Nib to the cell. If it doesn’t have one, it will not add Nib to the cell. The cell should be a class type that inherits the SBUBaseMessageCell.

register(fileMessageCell:nib:)

Registers or edits a file message cell when the message is a SBDFileMessage type. If the cell has Nib, the property adds Nib to the cell. If it doesn’t have one, it will not add Nib to the cell. The cell should be a class type that inherits theSBUBaseMessageCell.

register(userMessageCell:nib:)

Registers or edits a user message cell when the message is a SBDUserMessage type. If the cell has Nib, the property adds Nib to the cell. If it doesn’t have one, it will not add Nib to the cell. The cell should be a class type that inherits the SBUBaseMessageCell.

register(customMessageCell:nib:)

Registers or edits a custom message cell when the message has a custom type. If the cell has Nib, the property adds Nib to the cell. If it doesn’t have one, it will not add Nib to the cell. The cell should be a class type that inherits the SBUBaseMessageCell.

didreceiveError(_ message:)

Receives an error message when an error occurs in the ViewController. If necessary, you can override and implement this method.

showChannelSettings()

Overrides the channelSettingsViewController class and implements values to customize the class.

setTapGestureHandler(_ cell:, message:)

Overrides this function to attach the customized tap gesture to the cell.

setLongTapGestureHandler(_ cell:, message:, indexPath:)

Overrides this function to attach the customized long tap gesture to the cell.

Note : To customize the messageInputView or newMessageInfoView, you should subclass the SBUMessageInputView or SBUNewMessageInfo, respectively.

- Edit stringSet

The SBUStringSet is a set of strings used to compose the screen. You should modify the stringSet values in advance if you want to make changes to the screen. The stringSet includes:

PropertyDescription

Channel_Name_Default

The default channel name

Channel_New_Message (count)

A text for new message popup

Channel_New_Message_File (%@)

A text for file message upload completion

Channel_Success_Download_file

A text for file save completion

Channel_Header_LastSeen (timestamp)

A text for a participant’s last seen time

Channel_Header_Typing (typingMembers)

A text for a participant’s typing status

MessageInput_Text_Placeholder

A text for message input placeholder

Message_Edited

A text for message edit popup

Message_System

A text for system message type

Note : A set of common string is not included in the list. See the Common Components page's StringSet section.

- Edit iconSet

The SBUIConSet is a set of icons used to compose the screen. You should modify the iconSet values in advance if you want to use different icons. The iconSet includes:

  • iconCopy, iconEdit, iconInfo, iconNewMessage, iconAdd, iconSend, iconDelivered, iconErrorFilled, iconRead, iconSent, iconSpinnerSmall, iconFileAudio, iconFileDocument, iconGif, iconPlay

Note : A set of common icons is not included in the list. See the Common Components page's IconSet section.

Customize the class

You can subclass and customize the SBUChannelViewController to enhance the user experience of your client app. The overridable methods include:

  • viewLifeCycle, SBUMessageInputViewDelegate, SBUFileViewerDelegate, SBDConnectionDelegate, SBDChannelDelegate

Note : We recommend you should fully understand the usage of Sendbird Chat SDK for iOS when subclassing the class. Some actions may not work as expected depending on your customization.

Theme

To display messages, the SBUChannelViewController uses two views, which are the SBUBaseMessageCell and the SBUMessageInputView, and three themes, the SBUChannelTheme, SBUMessageCellTheme, and SBUMessageInputTheme in the SBUTheme. The overall elements of the SBUChannelViewController are managed through the SBUChannelTheme while the SBUBaseMessageCell uses the SBUMessageCellTheme to show messages in the view and the SBUMessageInputView uses the SBUMessageInputThemefor the design of the message input box in the view.

All three themes mentioned can be customized through the SBUTheme but you should call the setupStyle() afterwards in order to apply any changes you make through the SBUTheme.

- Set a custom theme

You can customize the channel theme through the SBUTheme.setChannel as below:

Objective-C
Swift
Light Color Skin
Copy
SBUChannelTheme *channelTheme = [[SBUChannelTheme alloc] 
    initWithNavigationBarTintColor: SBUColorSet.primary300

    // ...
]; 

SBUMessageCellTheme *messageCellTheme = [[SBUMessageCellTheme alloc]
    initWithBackgroundColor: SBUColorSet.background100 

    // ...
];

SBUMessageInputTheme *messageInputTheme = [[SBUMessageInputTheme alloc]  
    initWithBackgroundColor: SBUColorSet.background100 

    // ...
];

[SBUTheme setChannelwithChannelTheme: channelTheme, 
            messageCellTheme: messageCellTheme, 
            messageInputTheme: messageInputTheme
];
Light Color Skin
Copy
let channelTheme = SBUChannelTheme( 
    navigationBarTintColor: SBUColorSet.primary300 

    // ... 
) 

let messageCellTheme = SBUMessageCellTheme(
    backgroundColor: SBUColorSet.background100 

    // ...
) 

let messageInputTheme = SBUMessageInputTheme( 
    backgroundColor: SBUColorSet.background100 

    // ...
) 

SBUTheme.setChannel(channelTheme: channelTheme, 
        messageCellTheme: messageCellTheme, 
        messageInputTheme: messageInputTheme)

Note : You should call the setupStyle() method to update your user interface.

- Edit theme elements

Themes can be customized through the SBUTheme. It is recommended to change the themes prior to viewController initialization. The following code shows how to customize the elements of the theme.

Objective-C
Swift
Light Color Skin
Copy
// channel theme 
SBUTheme.channelTheme.backgroundColor = SBUColorSet.background100;
// ... 

// message cell theme 
SBUTheme.messageCellTheme.backgroundColor = SBUColorSet.background100;
// ... 

// message input theme 
SBUTheme.messageInputTheme.backgroundColor = SBUColorSet.background100;
// ...
Light Color Skin
Copy
// channel theme
SBUTheme.channelTheme.backgroundColor = SBUColorSet.background100 
// ...

// message cell theme
SBUTheme.messageCellTheme.backgroundColor = SBUColorSet.background100 
// ...

// message input theme
SBUTheme.messageInputTheme.backgroundColor = SBUColorSet.background100
// ...

Note : You should call the setupStyle() method to update your user interface.

- SBUChannelTheme

The SBUChannelTheme object has properties used in the SBUChannelViewController.

CategoryPropertyDescription

Navigation bar

navigationBarTintColor

The tint color of the navigation bar

Navigation bar

navigationBarShadowColor

The shadow color of the navigation bar

Navigation bar

leftBarButtonTintColor

The tint color of the button at the left side of the navigation bar

Navigation bar

rightBarButtonTintColor

The tint color of the button at the right side of the navigation bar

Status bar

statusBarStyle

The style of the status bar

View

backgroundColor

The background color of the channel view

Alert

removeItemColor

The color of the item remove alert

Alert

cancelItemColor

The color of the item cancel alert

Alert

alertRemoveColor

The color of the remove action's button

Alert

alertCancelColor

The color of the cancel action's button

Menu

menuTextColor

The text color of the menu

- SBUMessageInputTheme

The SBUMessageInputTheme object has properties used in the SBUChannelViewController.

CategoryPropertyDescription

View

backgroundColor

The background color of the message input view

Text field

textFieldBackgroundColor

The background color of the input text field

Text field

textFieldPlaceholderColor

The font of the input text field's placeholder

Text field

textFieldTintColor

The tint color of the input text field

Text field

textFieldTextColor

The text color of the input text field

Text field

textFieldBorderColor

The border color of the input text field

Button

buttonTintColor

The tint color of the cancel and save buttons

Button

cancelButtonFont

The font of the cancel button

Button

saveButtonFont

The font of the save button

Button

saveButtonTextColor

The text color of the save button

- SBUMessageCellTheme

The SBUMessageCellTheme object has properties used in the SBUChannelViewController.

CategoryPropertyDescription

View

backgroundColor

The background color of the cell

View

leftBackgroundColor

The background color of the left side of the cell

View

rightBackgroundColor

The background color of the right side of the cell

View

leftPressedBackgroundColor

The background color to apply to the button at the left side when pressed

View

rightPressedBackgroundColor

The background color to apply to the button at the right side when pressed

Date label

dateFont

The font of the date element

Date label

dateTextColor

The text color of the date element

Date label

dateBackgroundColor

The background color of the date element

User

userNameFont

The font of the user name

User

userNameTextColor

The text color of the user name element

User

userPlaceholderBackgroundColor

The background color of the user name element's placeholder

User

userPlaceholderTintColor

The tint color of the user name element's placeholder

Title label

timeFont

The font of the time element

Title label

timeTextColor

The text color of the time element

Message state

pendingStateColor

The color to apply when the state of a message is pending

Message state

failedStateColor

The color to apply when the state of a message is failed

Message state

succeededStateColor

The color to apply when the state of a message is succeeded

Message state

readReceiptStateColor

The color of the read receipt state element

Message state

deliveryReceiptStateColor

The color of the delivery receipt state element

User message

userMessageFont

The font to apply to a user message

User message

userMessageLeftTextColor

The text color to apply to a user message displayed on the left of the channel view

User message

userMessageLeftEditTextColor

The text color to indicate edited a user message displayed on the left of the channel view

User message

userMessageRightTextColor

The text color to apply to a user message displayed on the right of the channel view

User message

userMessageRightEditTextColor

The text color to indicate an edited user message displayed on the right of the channel view

File message

fileIconBackgroundColor

The background color of the file icon

File message

fileIconColor

The color of the file icon

File message

fileMessageNameFont

The font of the file message name element

File message

fileMessageLeftTextColor

The text color of the left side of a file message

File message

fileMessageRightTextColor

The text color of the right side of a file message

File message

fileMessagePlaceholderColor

The color of a file message's placeholder

Admin message

adminMessageFont

The font of an admin message

Admin message

adminMessageFont

The text color of an admin message


Configure channel settings

Using UIKit, you can display and configure channels through the SBUChannelSettingsViewController class. In the class, you can edit the name and cover image of a channel, change notification status, check the number and list of members in the channel, and leave the specific channel.

Note : Simply setting your chat service to be based on either the channel list or channel can seamlessly lead users to the channel settings view.

How to use

Configure channel settings without complicated implementation through the SBUChannelSettingsViewController class.

Objective-C
Swift
Light Color Skin
Copy
// Case 1: Using channel url
SBUChannelSettingsViewController *channelSettingsVC = [[SBUChannelSettingsViewController alloc] initWithChannelUrl:{CHANNEL_URL}];
UINavigationController *naviVC = [[UINavigationController alloc] initWithRootViewController:channelVC];
[self presentViewController:naviVC animated:YES completion:nil];

// Case 2: Using channel object
SBUChannelSettingsViewController *channelSettingsVC = [[SBUChannelSettingsViewController alloc] initWithChannel:{CHANNEL}];
UINavigationController *naviVC = [[UINavigationController alloc] initWithRootViewController:channelVC];
[self presentViewController:naviVC animated:YES completion:nil];
Light Color Skin
Copy
// Case 1: Using channel url
let channelSettingsVC = SBUChannelSettingsViewController(channelUrl: {CHANNEL_URL})
let naviVC = UINavigationController(rootViewController: channelSettingsVC)
present(naviVC, animated: true)

// Case 2: Using channel object
let channelSettingsVC = SBUChannelSettingsViewController(channel: {CHANNEL})
let naviVC = UINavigationController(rootViewController: channelSettingsVC)
present(naviVC, animated: true)

Note : You can initialize the SBUChannelSettingsViewController class by setting the ChannelUrl or SBDGroupChannel object.

Components and features

The SBUChannelSettingsViewController is composed of a channel configrations and information. The components and features of the SBUChannelSettingsViewController class include:

FeatureDescription

Channel cover image

Displays the cover image of a channel

Channel name

Displays the name of a channel

Change channel cover image

Allows you to change the cover image of the channel

Change channel name

Allows you to change the name of the channel

Change notification status

Allows you to turn on or off the notifications of a channel

Channel members

Displays a list of members in a channel and navigate to the member information view

Leave channel

Allows you to leave a channel and to return to the channel list

ChannelSettingsViewController

- Edit components

The following table lists a set of customizable properties and methods of the SBUChannelSettingsViewController class.

Property (class)Description

channelName (String)

Edits the name of the channel

MethodDescription

didreceiveError(_ message:)

Receives an error message when an error occurs in the ViewController. If necessary, you can override and implement this method.

showMemberList()

Overrides the memberListViewController class and implements values to customize the class.

- Edit stringSet

The SBUStringSet is a set of strings used to compose the screen. You should modify the stringSet values in advance if you want to make changes to the screen. The stringSet includes:

PropertyDescription

ChannelSettings_Header_Title

The title of the ViewController

ChannelSettings_Change_Name

A text for Change name

ChannelSettings_Change_Image

A text for Change channel image

ChannelSettings_Enter_New_Name

A text for Enter name

ChannelSettings_Notifications

A text for Notifications status

ChannelSettings_Members (count)

A text for Members(#)

ChannelSettings_Leave

A text for Leave channel

Note : A set of common string is not included in the list. See the Common Components page's StringSet section.

- Edit iconSet

The SBUIConSet is a set of icons used to compose the screen. You should modify the iconSet values in advance if you want to use different icons. The iconSet includes:

  • iconLeave, iconMembers, iconNotifications, iconShevronRight

Note : A set of common icons is not included in the list. See the Common Components page's IconSet section.

Customize the class

You can subclass and customize the SBUChannelSettingsViewController to enhance the user experience of your client app. The overridable methods include:

  • viewLifeCycle

Note : We recommend you should fully understand the usage of Sendbird Chat SDK for iOS when subclassing the class. Some actions may not work as expected depending on your customization.

Theme

- Set a custom theme

You can customize the ChannelSettingTheme through the SBUTheme.setChannelSetting as below:

Objective-C
Swift
Light Color Skin
Copy
SBUChannelSettingsTheme *settingTheme = [[SBUChannelSettingsTheme alloc] 
    initWithNavigationBarTintColor: SBUColorSet.background100
    
    // ...
];  

[SBUTheme setChannelSettingWithChannelSettingTheme:settingTheme];
Light Color Skin
Copy
let settingTheme = SBUChannelSettingsTheme(
    navigationBarTintColor: SBUColorSet.background100 
    
    // ... 
) 

Note : You should call the setupStyle() method to update your user interface.

- Edit theme elements

Themes can be customized through the SBUTheme. It is recommended to change the themes prior to viewController initialization. The following code shows how to customize the elements of the theme.

Objective-C
Swift
Light Color Skin
Copy
// Setting theme
SBUTheme.channelSettingTheme.navigationBarTintColor = SBUColorSet.background100;
Light Color Skin
Copy
// Setting theme
SBUTheme.channelSettingTheme.navigationBarTintColor = SBUColorSet.background100

Note : You should call the setupStyle() method to update your user interface.

- SBUChannelSettingsTheme

The SBUChannelSettingsTheme object has properties used in the SBUChannelSettingViewController.

CategoryPropertyDescription

Navigation bar

navigationBarTintColor

The tint color of the navigation bar

Navigation bar

navigationBarShadowColor

The shadow color of the navigation bar

Navigation bar

leftBarButtonTintColor

The tint color of the button at the left side of the navigation bar

Navigation bar

rightBarButtonTintColor

The tint color of the button at the right side of the navigation bar

Navigation bar

backgroundColor

The background color of the navigation bar

Status bar

statusBarStyle

The style of the status bar

Cell

cellTextFont

The text font of the cell

Cell

cellTextColor

The text color of the cell

Cell

cellSwitchColor

The color of the on/off toggle in the cell

Cell

cellSeparateColor

The color of cell separators

Cell

cellNotificationsIconColor

The color of the notification icon in the cell

Cell

cellMemberIconColor

The color of the member icon in the cell

Cell

cellMemberButtonColor

The color of the member button in the cell

Cell

cellLeaveIconColor

The color of the leave icon in the cell

User info view

userNameFont

The color of the user name element

User info view

userNameTextColor

The text color of the user name element

Action sheet

itemTextColor

The text color of the item

Action sheet

itemColor

The color of the item


Create a channel

Using UIKit, you to create a channel through the SBUCreateChannelViewController class with a group of selected users. The class also affects the SBUUserCell class which shows a user list and the user list is organized and displayed according to the setting of pagination. If you don’t have a separate list of users you wish to add to your application, all the users who are using your chat service are displayed in the user list by default.

By default the name and cover image of the channel are also given when the channel is created. The channel will be the list of nickname of channel members, and its cover image will be created using the profileimage of those members.

Note : Simply setting your chat service to be based on the channel list can seamlessly lead users to the Create channel view. Once a new channel is successfully created, a channel view will appear immediately for the user.

How to use

You can create a channel by simply calling the SBUCreateChannelViewController class. Use the following code to create a new channel.

Objective-C
Swift
Light Color Skin
Copy
SBUCreateChannelViewController *createChannelVC = [[SBUCreateChannelViewController alloc] init];
UINavigationController *naviVC = [[UINavigationController alloc] initWithRootViewController:createChannelVC];
[self presentViewController:naviVC animated:YES completion:nil];
Light Color Skin
Copy
let createChannelVC = SBUCreateChannelViewController()
let naviVC = UINavigationController(rootViewController: createChannelVC)
present(naviVC, animated: true)

- Using your own user list

You can also create a channel with a list of users you specifically selected. To do so, an array of SBUUser objects should be injected.

Note : You can convert the SBDUser objects from the Chat SDK to the SBUUser as they are compatible.

Use the following code to create a channel with a preset list of users.

Objective-C
Swift
Light Color Skin
Copy
SBDUser *sbdUser = ...  // Chat SDK's user-related class
NSArray<SBUUser *> *users = @[
    [[SBUUser alloc] initWithUserId:{USER_ID} nickname:nil profileUrl:nil],
    [[SBUUser alloc] initWithUserId:{USER_ID2} nickname:{NICKNAME} profileUrl:nil],
    cnickname:nil profileUrl:{PROFILE_URL}],
    [[SBUUser alloc] initWithUser:sbdUser], 
    ...
];

SBUCreateChannelViewController *createChannelVC = [[SBUCreateChannelViewController alloc] initWithUsers:users];

...

// If need to pagination, check below:
[createChannelVC loadNextUserListWithReset:NO users:nextPageUsers];
Light Color Skin
Copy
let sbdUser: SBDUser = ...  // Chat SDK's user-related class
let users: [SBUUser] = [
    SBUUser(userId: {USER_ID}),
    SBUUser(userId: {USER_ID2}, nickname: {NICKNAME}, profileUrl: nil),
    SBUUser(userId: {USER_ID3}, nickname: nil, profileUrl: {PROFILE_URL}),
    SBUUser(user: sbdUser),
    ...
]

let createChannelVC = SBUCreateChannelViewController(users: users)

...

// If need to pagination, check below:
createChannelVC.loadNextUserList(reset: false, users: nextPageUsers)

Components and features

The SBUCreateChannelViewController is composed of a list of users who can be invited to the newly created channel.

- Edit components

The following table lists the customizable properties and methods of the SBUCreateChannelViewController class.

MethodDescription

didreceiveError(_ message:)

Receives an error message when an error occurs in the ViewController. If necessary, you can override and implement this method.

CreateChannelViewController

- Edit stringSet

The SBUStringSet is a set of strings used to compose the screen. You should modify the stringSet values in advance if you want to make changes to the screen. The stringSet includes:

PropertyDescription

CreateChannel_Header_Title

The title of the viewController

CreateChannel_Create (count)

A text for Create channel on the navigation bar

Note : A set of common string is not included in the list. See the Common Components page's StringSet section.

- Edit iconSet

The SBUIConSet is a set of icons used to compose the screen. You should modify the iconSet values in advance if you want to use different icons.

Note : A set of common icons is not included in the list. See the Common Components page's IconSet section.

Customize the class

You can subclass and customize the SBUCreateChannelViewController to enhance the user experience of your client app. The overridable methods include:

  • viewLifeCycle, createChannel(), loadNextUserList()

Note : We recommend you should fully understand the usage of Sendbird Chat SDK for iOS when subclassing the class. Some actions may not work as expected depending on your customization.

Theme

- Set a custom theme

You can customize themes through the SBUTheme.setUserList as below:

Objective-C
Swift
Light Color Skin
Copy
SBUUserListTheme *userListTheme = [[SBUUserListTheme alloc] 
    initWithNavigationBarTintColor: SBUColorSet.background100
    // ...
]; 

SBUUserCellTheme *userCellTheme = [[SBUUserCellTheme alloc] 
    initWithBackgroundColor: SBUColorSet.background100
    // ...
];  

[SBUTheme setUserListWithUserListTheme:userListTheme
            userCellTheme:userCellTheme
];
Light Color Skin
Copy
let userListTheme = SBUUserListTheme(
    navigationBarTintColor: SBUColorSet.background100 
    // ... 
) 

let userCellTheme = SBUUserCellTheme(
    backgroundColor: SBUColorSet.background100 
    // ... 
) 

SBUTheme.setUserList(userListTheme: userListTheme, userCellTheme: userCellTheme)

Note : You should call the setupStyle() method to update your user interface.

- Edit theme elements

Themes can be customized through the SBUTheme. It is recommended to change the themes prior to viewController initialization. The following code shows how to customize the elements of the theme.

Objective-C
Swift
Light Color Skin
Copy
// user list theme
SBUTheme.userListTheme.navigationBarTintColor = SBUColorSet.background100;

// user cell theme
SBUTheme.userCellTheme.backgroundColor = SBUColorSet.background100;
Light Color Skin
Copy
// user list theme
SBUTheme.userListTheme.navigationBarTintColor = SBUColorSet.background100

// user cell theme
SBUTheme.userCellTheme.backgroundColor = SBUColorSet.background100

- SBUUserListTheme

The SBUUserListTheme object has properties used in the following classes: SBUCreateChannelViewController, SBUInviteUserViewController and SBUMemberListViewController.

CategoryPropertyDescription

Navigation bar

navigationBarTintColor

The tint color of the navigation bar

Navigation bar

navigationBarShadowColor

The shadow color of the navigation bar

Navigation bar

leftBarButtonTintColor

The tint color of the button at the left side of the navigation bar

Navigation bar

rightBarButtonTintColor

The tint color of the button at the right side of the navigation bar

Navigation bar

rightBarButtonSelectedTintColor

The tint color to apply to the button at the right side of the navigation bar when selected

Status bar

statusBarStyle

The style of the status bar

Cell

cellTextFont

The text font of the cell

- SBUUserCellTheme

The SBUUserCellTheme object has properties used in the SBUUserCell.

CategoryPropertyDescription

View

backgroundColor

The background color of the view

View

separateColor

The color of the separator

Check box

checkboxOnColor

The color to apply to a checkbox element when checked

Check box

checkboxOffColor

The color to apply to a checkbox element when unchecked

User

userNameTextColor

The text color of the user name element

User

userNameFont

The font of the user name element

User

userPlaceholderBackgroundColor

The background color of the user name element's placeholder

User

userPlaceholderTintColor

The tint color of the user name element's placeholder


Invite users

Using UIKit, you can invite users to a specific group channel through the SBUInivteUserViewController class. This class uses the SBUUserCell class to display users except for those who are already in the channel. The same SBUUserCell class is used when inviting selected users to a specific group channel.

Unless you have a separate list of users you specifically selected, all users who use your service appear in the user list by default.

Note : Simply setting your chat service to be based on either the channel list, channels, channel settings or member list can seamlessly lead users to the Invite users view.

How to use

Invite users to a group channel without complicated implementation through the SBUInviteUserViewController class.

Note : You can initialize the SBUInviteUserViewController class by setting the ChannelUrl or SBDGroupChannel object.

Use the following code to invite a user to a channel.

Objective-C
Swift
Light Color Skin
Copy
// Case 1: Using channel url
SBUInviteUserViewController *inviteUserVC = [[SBUInviteUserViewController alloc] initChannelUrl:{CHANNEL_URL}];
UINavigationController *naviVC = [[UINavigationController alloc] initWithRootViewController:inviteUserVC];
[self presentViewController:naviVC animated:YES completion:nil];


// Case 2: Using channel object
SBUInviteUserViewController *inviteUserVC = [[SBUInviteUserViewController alloc] initWithChannel:{CHANNEL}];
UINavigationController *naviVC = [[UINavigationController alloc] initWithRootViewController:inviteUserVC];
[self presentViewController:naviVC animated:YES completion:nil];
Light Color Skin
Copy
// Case 1: Using channel url
let inviteUserVC = SBUInviteUserViewController(channelUrl: {CHANNEL_URL})
let naviVC = UINavigationController(rootViewController: inviteUserVC)
present(naviVC, animated: true)

// Case 2: Using channel object
let inviteUserVC = SBUInviteUserViewController(channel: {CHANNEL})
let naviVC = UINavigationController(rootViewController: inviteUserVC)
present(naviVC, animated: true)

- Using your own user list

You can also invite a list of users you specifically selected. To do so, an array of SBUUser objects should be injected.

Note : You can convert the SBDUser objects from the Chat SDK to the SBUUser as they are compatible.

Use the following code to invite a list of users you specifically selected to a channel.

Objective-C
Swift
Light Color Skin
Copy
NSArray<SBUUser *> *users = @[
    [[SBUUser alloc] initWithUserId:{USER_ID} nickname:nil profileUrl:nil],
    [[SBUUser alloc] initWithUserId:{USER_ID2} nickname:{NICKNAME} profileUrl:nil],
    [[SBUUser alloc] initWithUserId:{USER_ID3} nickname:nil profileUrl:{PROFILE_URL}],

    ...
];

SBUInviteUserViewController *inviteUserVC = [[SBUInviteUserViewController alloc] initWithChannel:{CHANNEL} users:users];

...

// If need to pagination, add the nextUserList using the code below:
[inviteUserVC loadNextUserListWithReset:NO users:nextPageUsers];
Light Color Skin
Copy
let users: [SBUUser] = [
    SBUUser(userId: {USER_ID}),
    SBUUser(userId: {USER_ID2}, nickname: {NICKNAME}, profileUrl: nil),
    SBUUser(userId: {USER_ID3}, nickname: nil, profileUrl: {PROFILE_URL}),

    ...
]

let inviteUserVC = SBUInviteUserViewController(channel: {CHANNEL}, users: users)

...

// If need to pagination, add the nextUserList using the code below:
inviteUserVC.loadNextUserList(reset: false, users: nextPageUsers)

Components and features

The SBUInviteUserViewController is composed of a list of users who can be invited to existing channels.

- Edit components

The following table lists the customizable properties and methods of the SBUInviteUserViewController class.

MethodDescription

didreceiveError(_ message:)

Receives an error message when an error occurs in the ViewController. If necessary, you can override and implement this method.

InviteUserViewController

- Edit stringSet

The SBUStringSet is a set of strings used to compose the screen. You should modify the stringSet values in advance if you want to make changes to the screen. The stringSet includes:

PropertyDescription

InviteChannel_Header_Title

The title of the ViewController

InviteChannel_Invite (%d)

A text for Invite in the navigation bar

Note : A set of common string is not included in the list. See the Common Components page's StringSet section.

- Edit iconSet

The SBUIConSet is a set of icons used to compose the screen. You should modify the iconSet values in advance if you want to use different icons.

Note : A set of common icons is not included in the list. See the Common Components page's IconSet section.

Customize the class

You can subclass and customize the SBUInviteUserViewController to enhance the user experience of your client app. The overridable methods include:

  • viewLifeCycle, inviteUsers(), loadNextUserList()

Note : We recommend you should fully understand the usage of Sendbird Chat SDK for iOS when subclassing the class. Some actions may not work as expected depending on your customization.

Theme

- Set a custom theme

You can customize themes through the SBUTheme.setUserList as below:

Objective-C
Swift
Light Color Skin
Copy
SBUUserListTheme *userListTheme = [[SBUUserListTheme alloc] 
    initWithNavigationBarTintColor: SBUColorSet.background100
    
    // ...
]; 

SBUUserCellTheme *userCellTheme = [[SBUUserCellTheme alloc] 
    initWithBackgroundColor: SBUColorSet.background100

    // ...
];  

[SBUTheme setUserListWithUserListTheme:userListTheme
            userCellTheme:userCellTheme
];
Light Color Skin
Copy
let userListTheme = SBUUserListTheme(
    navigationBarTintColor: SBUColorSet.background100 

    // ... 
) 

let userCellTheme = SBUUserCellTheme(
    backgroundColor: SBUColorSet.background100 

    // ... 
) 

SBUTheme.setUserList(userListTheme: userListTheme, userCellTheme: userCellTheme)

Note : You should call the setupStyle() method to update your user interface.

- Edit theme elements

Themes can be customized through the SBUTheme. It is recommended to change the themes prior to viewController initialization. The following code shows how to customize the elements of the theme.

Objective-C
Swift
Light Color Skin
Copy
// user list theme
SBUTheme.userListTheme.navigationBarTintColor = SBUColorSet.background100;

// user cell theme
SBUTheme.userCellTheme.backgroundColor = SBUColorSet.background100;
Light Color Skin
Copy
// user list theme
SBUTheme.userListTheme.navigationBarTintColor = SBUColorSet.background100

// user cell theme
SBUTheme.userCellTheme.backgroundColor = SBUColorSet.background100

Note : You should call the setupStyle() method to update your user interface.

- SBUUserListTheme

The SBUUserListTheme object has properties used in the following classes: SBUCreateChannelViewController, SBUInviteUserViewController and SBUMemberListViewController.

CategoryPropertyDescription

Navigation bar

navigationBarTintColor

The tint color of the navigation bar

Navigation bar

navigationBarShadowColor

The shadow color of the navigation bar

Navigation bar

leftBarButtonTintColor

The tint color of the button at the left side of the navigation bar

Navigation bar

rightBarButtonTintColor

The tint color of the button at the right side of the navigation bar

Navigation bar

rightBarButtonSelectedTintColor

The tint color to apply to the button at the right side of the navigation bar when selected

Cell

cellTextFont

The text font of the cell

- SBUUserCellTheme

The SBUUserCellTheme object has properties used in the SBUUserCell.

CategoryPropertyDescription

View

backgroundColor

The background color of the view

View

separateColor

The color of the separator

Check box

checkboxOnColor

The color to apply to a checkbox element when checked

Check box

checkboxOffColor

The color to apply to a checkbox element when unchecked

User

userNameTextColor

The text color of the user name element

User

userNameFont

The font of the user name element


List channel members

Using UIKit, you can retrieve the list of members in a specific group channel through the SBUMemberListViewController class. This class displays the member list of the channel using the SBUUserCell class.

Note : Simply setting your chat service to be based on either the channel list, channels, or channel settings can seamlessly lead users to the Member list view.

How to use

You can get the list of members in a specific channel by simply calling the SBUMemberListViewController class.

Note : You can initialize the SBUMemberListViewController class by setting the ChannelUrl or SBDGroupChannel object.

Use the following code to get the member list of a channel.

Objective-C
Swift
Light Color Skin
Copy
// Case 1: Using channel url
SBUMemberListViewController *memberListVC = [[SBUMemberListViewController alloc] initChannelUrl:{CHANNEL_URL}];
UINavigationController *naviVC = [[UINavigationController alloc] initWithRootViewController:memberListVC];
[self presentViewController:naviVC animated:YES completion:nil];


// Case 2: Using channel object
SBUMemberListViewController *memberListVC = [[SBUMemberListViewController alloc] initWithChannel:{CHANNEL}];
UINavigationController *naviVC = [[UINavigationController alloc] initWithRootViewController:memberListVC];
[self presentViewController:naviVC animated:YES completion:nil];
Light Color Skin
Copy
// Case 1: Using channel url
let memberListVC = SBUMemberListViewController(channelUrl: {CHANNEL_URL})
let naviVC = UINavigationController(rootViewController: memberListVC)
present(naviVC, animated: true)

// Case 2: Using channel object
let memberListVC = SBUMemberListViewController(channel: {CHANNEL})
let naviVC = UINavigationController(rootViewController: memberListVC)
present(naviVC, animated: true)

Components and features

The SBUMemberListViewController is composed of a list of members who are in the same channel.

- Edit components

The following table lists the customizable properties and method of the SBUMemberListViewController class.

MethodDescription

didreceiveError(_ message:)

Receives an error message when an error occurs in the ViewController. If necessary, you can override and implement this method.

showInviteUser()

Overrides the inviteUserViewController class and implements values to customize the class.

MemberListViewController

- Edit stringSet

The SBUStringSet is a set of strings used to compose the screen. You should modify the stringSet values in advance if you want to make changes to the screen. The stringSet includes:

PropertyDescription

MemberList_Header_Title

The title of the ViewController

MemmberList_Me

A text to indicate which user name belongs to the user themselves

Note : A set of common string is not included in the list. See the Common Components page's StringSet section.

- Edit iconSet

The SBUIConSet is a set of icons used to compose the screen. You should modify the iconSet values in advance if you want to use different icons.

Note : A set of common icons is not included in the list. See the Common Components page's IconSet section.

Customize the class

You can subclass and customize the SBUMemberListViewController to enhance the user experience of your client app. The overridable methods include:

  • viewLifeCycle, onClickInviteUser()

Note : We recommend you should fully understand the usage of Sendbird Chat SDK for iOS when subclassing the class. Some actions may not work as expected depending on your customization.

Theme

- Set a custom theme

You can customize themes through the SBUTheme.setUserList as below:

Objective-C
Swift
Light Color Skin
Copy
SBUUserListTheme *userListTheme = [[SBUUserListTheme alloc] 
    initWithNavigationBarTintColor: SBUColorSet.background100

    // ...
]; 

SBUUserCellTheme *userCellTheme = [[SBUUserCellTheme alloc] 
    initWithBackgroundColor: SBUColorSet.background100

    // ...
];  

[SBUTheme setUserListWithUserListTheme:userListTheme
            userCellTheme:userCellTheme
];
Light Color Skin
Copy
let userListTheme = SBUUserListTheme(
    navigationBarTintColor: SBUColorSet.background100 

    // ... 
) 

let userCellTheme = SBUUserCellTheme(
    backgroundColor: SBUColorSet.background100 

    // ... 
) 

SBUTheme.setUserList(userListTheme: userListTheme, userCellTheme: userCellTheme)

Note : You should call the setupStyle() method to update your user interface.

- Edit theme elements

The theme can be customized through the SBUTheme. It is recommended to change the theme prior to viewController initialization. The following code shows how to customize the elements of the theme.

Objective-C
Swift
Light Color Skin
Copy
// user list theme
SBUTheme.userListTheme.navigationBarTintColor = SBUColorSet.background100;

// user cell theme
SBUTheme.userCellTheme.backgroundColor = SBUColorSet.background100;
Light Color Skin
Copy
// user list theme
SBUTheme.userListTheme.navigationBarTintColor = SBUColorSet.background100

// user cell theme
SBUTheme.userCellTheme.backgroundColor = SBUColorSet.background100

Note : You should call the setupStyle() method to update your user interface.

- SBUUserListTheme

The SBUUserListTheme object has properties used in the following classes: SBUCreateChannelViewController, SBUInviteUserViewController and SBUMemberListViewController.

CategoryPropertyDescription

Navigation bar

navigationBarTintColor

The tint color of the navigation bar

Navigation bar

navigationBarShadowColor

The shadow color of the navigation bar

Navigation bar

leftBarButtonTintColor

The tint color of the button at the left side of the navigation bar

Navigation bar

rightBarButtonTintColor

The tint color of the button at the right side of the navigation bar

Navigation bar

rightBarButtonSelectedTintColor

The tint color to apply to the button at the right side of the navigation bar when selected

Cell

cellTextFont

The text font of the cell

- SBUUserCellTheme

The SBUUserCellTheme object has properties used in the SBUUserCell.

CategoryPropertyDescription

View

backgroundColor

The background color of the view

View

separateColor

The color of the separator

Check box

checkboxOnColor

The color to apply to a checkbox element when checked

Check box

checkboxOffColor

The color to apply to a checkbox element when unchecked

User

userNameTextColor

The text color of the user name element

User

userNameFont

The font of the user name element