Customize Navigation Bar

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.

The .h file will look like this.

YourCustomNavBarManager.h

#import <Foundation/Foundation.h>
#import <TapTalk/TapBaseChatRoomCustomNavigationBarManager.h>

NS_ASSUME_NONNULL_BEGIN

@interface YourCustomNavBarManager : TapBaseChatRoomCustomNavigationBarManager

@end

NS_ASSUME_NONNULL_END

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:

YourCustomNavBarManager.m

#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:

AppDelegate.m

- (void)application:(UIApplication *_Nonnull)application didFinishLaunchingWithOptions:(NSDictionary *_Nonnull)launchOptions {
    [[TapTalk sharedInstance] initWithAppKeyID:...];
    
    // Dispatch your custom manager
    [YourCustomNavBarManager dispatch];
}

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.