When TapTalk.io framework is integrated to your app with the UI/combine implementation method, you can customize chat room's navigation bar layout to your preferences.
Customize Chat Room Navigation Bar
You can follow the steps below to customize chat rooms' navigation bar layout in your app.
1. Create your custom navigation bar manager class
Create a new file inside your project folder, and set it as a subclass of TapBaseChatRoomCustomNavigationBarManager.
TapBaseChatRoomCustomNavigationBarManager is a helper singleton class to make implementing custom navigation bar easier.
2. Implement callbacks from base navigation manager class to update UI
TapBaseChatRoomCustomNavigationBarManager class implements TapUIChatRoomCustomNavigationBarDelegate, TapUIChatRoomDelegate, and TAPCoreChatRoomManagerDelegate to listen to chat room related callbacks from PowerTalk SDK.
The class will then handle and redirect the callbacks to the following functions, which provide the required data that you can make use of for your own custom navbar class to display and update UI elements in the custom navigation bar.
You can override the callbacks from TapUIChatRoomCustomNavigationBarDelegate and TapBaseChatRoomCustomNavigationBarManager in your .m class:
#import "YourCustomNavBarManager.h"
@interface MeetTalkNavigationBarManager () <TapUIChatRoomDelegate>
// You can specify your own custom properties here
@end
@implementation MeetTalkNavigationBarManager
#pragma mark TapUIChatRoomCustomNavigationBarDelegate
- (UIView *)setCustomChatRoomNavigationBarTitleView:(TapUIChatViewController *)currentChatViewController
currentNavigationController:(UINavigationController *)currentNavigationController
room:(TAPRoomModel *)room
activeUser:(TAPUserModel *)activeUser
recipientUser:(TAPUserModel *)recipientUser {
// This callback is called when user opens a chat room
// Here you can return a UIView for the title view (center) of the chat room's navigation bar
// If nil is returned, PowerTalk SDK will display the default view, which contains room title and status label
YourCustomTitleView *view = [[YourCustomTitleView alloc] init];
return view;
}
- (NSArray<UIBarButtonItem *> *)setCustomChatRoomNavigationBarRightBarButtonItems:(TapUIChatViewController *)currentChatViewController
currentNavigationController:(UINavigationController *)currentNavigationController
room:(TAPRoomModel *)room
activeUser:(TAPUserModel *)activeUser
recipientUser:(TAPUserModel *)recipientUser {
// This callback is called when user opens a chat room
// Here you can return UIBarButtonItems for the right bar buttons of the chat room's navigation bar
// If nil or empty array is returned, PowerTalk SDK will display the default view, which contains user profile picture button
YourCustomRightButtonView *view = [[YourCustomRightButtonView alloc] init];
UIBarButtonItem *rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:view];
return @[rightBarButtonItem];
}
- (NSArray<UIBarButtonItem *> *)setCustomChatRoomNavigationBarLeftBarButtonItems:(TapUIChatViewController *)currentChatViewController
currentNavigationController:(UINavigationController *)currentNavigationController
room:(TAPRoomModel *)room
activeUser:(TAPUserModel *)activeUser
recipientUser:(TAPUserModel *)recipientUser {
// This callback is called when user opens a chat room
// Here you can return UIBarButtonItems for the left bar buttons of the chat room's navigation bar
// If nil or empty array is returned, PowerTalk SDK will display the default view, which contains back button
YourCustomRightLeftView *view = [[YourCustomRightLeftView alloc] init];
UIBarButtonItem *leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:view];
return @[leftBarButtonItem];
}
#pragma mark TapBaseChatRoomCustomNavigationBarManager
- (void)tapTalkNavigationBarManagerDidReceiveUpdatedChatRoomData:(TAPRoomModel *)room
recipientUser:(TAPUserModel *)recipientUser
onlineStatus:(TAPOnlineStatusModel *)onlineStatus {
// This callback is called when PowerTalk SDK receives updated chat room data through server or socket
// Here you can update the display of your custom view given the updated data
}
- (void)tapTalkNavigationBarManagerDidReceiveStartTypingWithUser:(TAPUserModel *)user roomID:(NSString *)roomID {
// This callback is called when a participant in the current room starts typing
// Here you can optionally show typing view in your custom navbar
}
- (void)tapTalkNavigationBarManagerDidReceiveStopTypingWithUser:(TAPUserModel *)user roomID:(NSString *)roomID {
// This callback is called when a participant in the current room stops typing
// Here you can optionally hide typing view in your custom navbar
}
- (void)tapTalkNavigationBarManagerDidReceiveOnlineStatusWithUser:(TAPUserModel *)user
onlineStatus:(BOOL)isOnline
lastActive:(NSNumber *)lastActive {
// This callback is called when a participant's online status in the current room is updated
// Here you can optionally update online status view in your custom navbar
}
- (void)tapTalkNavigationBarManagerChatRoomDidClose:(TAPRoomModel *)room
recipientUser:(TAPUserModel *)recipientUser
currentViewController:(UIViewController *)currentViewController
currentNavigationController:(UINavigationController *)currentNavigationController {
// This callback is called when user closes a chat room
// Here you can reset the state of your views and properties so they do not carry over when the user opens another chat room
}
YourCustomNavBarManager, and its parent class, TapBaseChatRoomCustomNavigationBarManager, is a singleton class, means its properties are retained until the app is closed.
You should reset any state contained in YourCustomNavBarManagerclass inside the tapTalkNavigationBarManagerChatRoomDidClose callback.
3. Make use of base navigation bar manager properties
TapBaseChatRoomCustomNavigationBarManager also provides some properties that you can make use of to display UI elements in your custom navbar class.
You can call any of these properties provided below to help displaying your custom navbar.
// The currently open chat room view controller
TapUIChatViewController *chatViewController;
// The current navigation controller
UINavigationController *navigationController;
// Room data of the currently open chat room
TAPRoomModel *room;
// Active user data
TAPUserModel *activeUser;
// Other user's data in personal chat room
// Value could be nil when currently active room is not personal
TAPUserModel *recipientUser;
// Online status data of the recipient user
// Value could be nil when currently active room is not personal
TAPOnlineStatusModel *onlineStatus;
// Dictionary containing currently typing users in the chat room
NSDictionary<NSString *, TAPUserModel *> *typingUsers;
The values of the properties above will also be updated when any related callbacks from PowerTalk SDK is received.
4. Dispatch your custom navigation bar manager
After you finished setting up your custom-made navigation bar, you will need to dispatch your custom navigation bar manager after you have initialized TapTalk. Check the example below:
The dispatch function is a function from TapBaseChatRoomCustomNavigationBarManager, which is used to activate the manager so it can listen to PowerTalk SDK's callbacks, such as setCustomChatRoomNavigationBarTitleView, where you should return the custom view for the navigation bar. Calling dispatch will allow the manager to listen to the callback until the app is closed.
You may also implement custom navigation bar without subclassing TapBaseChatRoomCustomNavigationBarManager , as long as your class implements TapUIChatRoomCustomNavigationBarDelegate.
